/* _angelnet-overrides.css
   Sección 3 del AngelNet Handoff Legacy
   ─────────────────────────────────────────────────────────────
   Ajustes que find&replace no puede hacer.
   Cargar DESPUÉS de los .css del tema MulberryAngelNet.
   Referenciarlo en Site.Master después de los bundles del tema.

   IMPORTANTE — Reglas duras (Handoff §5):
   • NO reemplaza iconos del sprite DevExpress por Lucide.
   • NO inyecta topbar ni sidebar Angular. El shell los provee.
   • NO agrega librerías nuevas (Bootstrap, Tailwind, etc.).
   • NO toca sprite.css, sprite.png, spriteAccessible.png.
   ─────────────────────────────────────────────────────────────
*/

/* ── 1. Fuente Inter global ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

body, [class*="dxgvControl_"], [class*="dxgvHeader_"],
[class*="dxbButton_"], [class*="dxeButtonEdit_"],
.dxpcContent, .dxeBase, .dxm-content, [class*="dxtcLite_"],
input, select, textarea, button {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-size: 14px !important;
    color: #0F172A !important;
    background-color: #F8FAFC !important;
}

/* ── 2. Border-radius modernizado ───────────────────────────── */
[class*="dxbButton_"] { border-radius: 8px !important; }
[class*="dxeButtonEdit_"],
[class*="dxeTextBox_"] input,
[class*="dxeComboBox_"] input,
[class*="dxeDateBox_"] input { border-radius: 6px !important; }

/* ── 3. Sombras ─────────────────────────────────────────────── */
.dxpc-content,
[class*="dxpcLite_"] {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07),
                0 2px 4px rgba(0,0,0,0.04) !important;
}

/* ── 4. Grid header ──────────────────────────────────────────── */
/* td exterior que DX usa como celda de columna */
td[class*="dxgvHeader_"] {
    background: #EFF6FF !important;
    border-bottom: 2px solid #BFDBFE !important;
    padding: 0 !important;
    height: auto !important;
    white-space: nowrap !important;
}
/* Tabla interna — ajusta al contenido */
td[class*="dxgvHeader_"] > table {
    width: 100% !important;
    table-layout: auto !important;
    background: transparent !important;
}
/* Celda del texto del título */
td[class*="dxgvHeader_"] .dxgvHCEC td,
td[class*="dxgvHeader_"] .dx-ellipsis {
    background: #EFF6FF !important;
    color: #1E3A8A !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    padding: 7px 12px !important;
    white-space: nowrap !important;
}
/* Celda HEC (columna vacía de la derecha) — mismo fondo */
td.dxgvHEC {
    background: #EFF6FF !important;
    border-bottom: 2px solid #BFDBFE !important;
}

/* ── 5. Selected row con barra azul a la izquierda ──────────── */
tr[class*="dxgvFocusedRow"] td,
tr[class*="dxgvSelectedRow"] td {
    background: #EFF6FF !important;
    color: #1E3A8A !important;
    border-color: #DBEAFE !important;
}
tr[class*="dxgvFocusedRow"] td:first-child,
tr[class*="dxgvSelectedRow"] td:first-child {
    box-shadow: inset 3px 0 0 0 #1D4ED8 !important;
    padding-left: 9px !important;
}

/* ── Textbox filtro compacto ────────────────────────────────── */
tr[class*="dxgvFilterRow"] td {
    height: 28px !important;
    padding: 2px 6px !important;
}
tr[class*="dxgvFilterRow"] input {
    height: 24px !important;
    font-size: 12px !important;
    padding: 2px 6px !important;
}

/* ── 6. Row hover y filas compactas ─────────────────────────── */
tr[class*="dxgvDataRow"]:hover td {
    background: #F1F5F9 !important;
}
tr[class*="dxgvDataRow"] td {
    padding: 5px 12px !important;
    height: auto !important;
    font-size: 13px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    vertical-align: middle !important;
}

/* ── 7. Focus ring ───────────────────────────────────────────── */
[class*="dxeTextBox_"] input:focus,
[class*="dxeButtonEdit_"] input:focus,
[class*="dxeComboBox_"] input:focus,
[class*="dxeDateBox_"] input:focus {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.10) !important;
    outline: none !important;
}

/* ── 8. Toolbar ASPxMenu (MenuPrincipal) — Handoff §4 ───────────
   Se respeta el sprite DevExpress nativo.
   Solo se ajusta tamaño, compacidad y color de hover/selección.
   NO se sustituye por Lucide ni por íconos Angular.          */
#MenuPrincipal,
.dxm-control {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    padding: 4px 8px !important;
    min-height: 64px !important;
}
/* Flex en la tabla interna */
#MenuPrincipal > table > tbody > tr,
.dxm-control > table > tbody > tr {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}
#MenuPrincipal > table > tbody > tr > td,
.dxm-control > table > tbody > tr > td {
    padding: 0 !important;
    border: none !important;
}

/* Item del menú: ícono arriba (sprite DX) + texto debajo */
.dxm-content {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 64px !important;
    max-width: 80px !important;
    height: 54px !important;
    padding: 6px 8px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: background 150ms ease, border-color 150ms ease !important;
}
.dxm-content:hover,
.dxm-hovered .dxm-content {
    background: #EFF6FF !important;           /* tint azul claro (Handoff §4) */
    border-color: #DBEAFE !important;
    text-decoration: none !important;
}
.dxm-content:active {
    background: #DBEAFE !important;
}

/* ── Iconos: PNG AngelNet via CSS content: url() ────────────────
   El PNG de DX se oculta; ::before muestra el PNG real de assets.
   El click/enable/disable de DevExpress NO se toca.          */

/* Iconos: DevExpress muestra el <img> directamente — forzamos tamaño uniforme 24x24 */
.dxm-image,
.dxm-content img,
.dxm-content .dxm-image,
img.dxm-image.dx-vam {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    display: block !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Label del item */
.dxm-contentText {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #0F172A !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
}

/* Ítem deshabilitado */
.dxm-disabled .dxm-content { opacity: 0.38 !important; pointer-events: none !important; }

/* Ocultar flecha de submenú */
.dxm-popout, .dxm-arrow { display: none !important; }



/* Nuevo → primario #1D4ED8 (Handoff §4: "Botón Nuevo pasa de morado a #1D4ED8") */
[name="btnNuevo"] .dxm-content {
    background: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
    border-radius: 8px !important;
}
[name="btnNuevo"] .dxm-content:hover { background: #1D4ED8 !important; }
[name="btnNuevo"] .dxm-image { opacity: 1 !important; }
[name="btnNuevo"] .dxm-contentText { color: #FFFFFF !important; }

/* Guardar → primario también */
[name="btnGuardar"] .dxm-content {
    background: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
}
[name="btnGuardar"] .dxm-image { opacity: 1 !important; }
[name="btnGuardar"] .dxm-contentText { color: #FFFFFF !important; }

/* Borrar → mantiene rojo semántico (Handoff §4) */
[name="btnBorrar"] .dxm-contentText { color: #DC2626 !important; }
[name="btnBorrar"] .dxm-content:hover {
    background: #FEE2E2 !important;
    border-color: #DC2626 !important;
}

/* ── 9. Banner "Vista Legacy" — condicional a ?embedded=true ───
   Se activa por clase .an-legacy-banner inyectada desde
   Site.Master.vb cuando Request.QueryString("embedded") = "true".
   Handoff §5: "SÍ mostrar el banner ámbar Vista Legacy arriba". */
.an-legacy-banner {
    background: #FFF7ED !important;
    border-bottom: 1px solid #FED7AA !important;
    color: #C2410C !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    line-height: 1.4 !important;
}
.an-legacy-banner strong { color: #7C2D12 !important; }
.an-legacy-banner a {
    margin-left: auto !important;
    color: #C2410C !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 1px dotted #C2410C !important;
    font-size: 11px !important;
}
.an-legacy-banner a:hover { color: #9A3412 !important; }

/* ── 10. Paginador compacto — cubre _Mulberry y _MulberryAngelNet ── */
[class*="dxpLite_"] {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    color: #475569 !important;
    padding: 5px 12px !important;
    border-top: 1px solid #E2E8F0 !important;
    background: #FFFFFF !important;
}
[class*="dxpLite_"] .dxp-button,
[class*="dxpLite_"] a { color: #1D4ED8 !important; text-decoration: none !important; padding: 2px 6px !important; border-radius: 4px !important; }
[class*="dxpLite_"] .dxp-button:hover,
[class*="dxpLite_"] a:hover { background: #EFF6FF !important; }
[class*="dxpLite_"] .dxp-current,
[class*="dxpLite_"] b.dxp-current { background: #1D4ED8 !important; color: #FFFFFF !important; border-radius: 4px !important; padding: 2px 8px !important; }

/* ── 11. Tabs (ASPxPageControl) ─────────────────────────────── */
[class*="dxtcLite_"] > .dxtc-stripContainer .dxtc-activeTab .dxtc-link {
    color: #1E3A8A !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #1D4ED8 !important;
}

/* ── 12. Popup/Modal header ──────────────────────────────────── */
.dxpc-header, [class*="dxpcLite_"] .dxpc-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0 !important;
}
div.dxpc-header span.dxpc-headerText {
    color: #1D4ED8 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* ── 13. Scrollbars ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 9999px; }

/* ── 14. Botón dropdown DevExpress — chevron moderno ────────── */
/* Ocultar visualmente la imagen pero mantener el td clickeable */
img.dxEditors_edtDropDown {
    visibility: hidden !important;
    width: 16px !important;
    height: 16px !important;
}
/* Superponer el chevron SVG sobre la imagen invisible */
td.dxeButtonEditButton {
    position: relative;
}
td.dxeButtonEditButton::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231D4ED8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    pointer-events: none;
}
::-webkit-scrollbar-thumb:hover { background: #CBD5E1; }