/* DANFER ERP - Actualizacion visual local */
/* Version 1 - Sin cambios de funcionalidad */

html body #appView .sidebar {
  background: linear-gradient(
    165deg,
    #102f58 0%,
    #0b2343 55%,
    #08182e 100%
  ) !important;
}

html body #appView .sidebar .brand {
  background: linear-gradient(
    145deg, #153b68, #0b2344
  ) !important;
  border-color: #42638d !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}

html body #appView .sidebar .nav-item {
  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease !important;
}

html body #appView .sidebar .nav-item:hover:not(.is-active) {
  background: #24476f !important;
  border-color: #365c87 !important;
  color: #ffffff !important;
}

html body #appView .sidebar .nav-item.is-active {
  background: #28538b !important;
  border-color: #5c83b1 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.12) !important;
}

html body #appView .topbar {
  border-bottom: 1px solid var(--dp-line) !important;
  box-shadow: 0 3px 12px rgba(12,31,56,.07) !important;
}

html body #appView .sidebar .nav-item:focus-visible,
html body #appView #danferThemeToggle:focus-visible {
  outline: 2px solid #a5cbff !important;
  outline-offset: 2px !important;
}

html[data-theme="dark"] body #appView .topbar {
  box-shadow: 0 4px 16px rgba(0,0,0,.18) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body #appView .sidebar .nav-item {
    transition: none !important;
  }
}

/* DANFER DASHBOARD V2 */

/* Distribucion de tarjetas */
#appView .metric-grid {
    gap: 16px !important;
    align-items: stretch;
}

/* Tarjetas ejecutivas */
#appView .metric-grid .metric-card {
    border-radius: 16px !important;
    border: 1px solid var(--dp-line, #dfe6ef) !important;
    box-shadow: 0 6px 22px rgba(12,35,68,.07) !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease !important;
}

/* Efecto al pasar el cursor */
#appView .metric-grid .metric-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(12,35,68,.13) !important;
}

/* Indicadores semanales */
#appView .weekly-kpi-grid .weekly-kpi-card {
    border-top: 3px solid var(--df-kpi-accent, #3474c8) !important;
}

/* Colores por categoria */
#appView .weekly-kpi-card--blue {
    --df-kpi-accent: #3474c8;
}

#appView .weekly-kpi-card--green {
    --df-kpi-accent: #23966c;
}

#appView .weekly-kpi-card--amber {
    --df-kpi-accent: #d89527;
}

#appView .weekly-kpi-card--alert {
    --df-kpi-accent: #db4559;
}

/* Modo oscuro */
html[data-theme="dark"] #appView .metric-grid .metric-card {
    box-shadow: 0 8px 24px rgba(0,0,0,.19) !important;
}

/* Pantallas medianas */
@media (max-width: 820px) {
    #appView .weekly-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Telefonos */
@media (max-width: 540px) {
    #appView .weekly-kpi-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
    #appView .metric-grid .metric-card {
        transition: none !important;
    }

    #appView .metric-grid .metric-card:hover {
        transform: none !important;
    }
}


/* DANFER OVERVIEW UNIFICADO */

/* Cuadricula real de los indicadores */
html body #appView #moduleContent
.danfer-dashboard-layout > section.danfer-overview-grid {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 18px !important;
    padding: 0 !important;
    margin: 24px 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Cada tarjeta es independiente */
html body #appView #moduleContent
.danfer-overview-grid > article.metric-card {
    --df-accent: #62a8ff;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 165px !important;
    margin: 0 !important;
    padding: 22px !important;
    border-radius: 18px !important;
    border: 1px solid #cbdced !important;
    border-top: 3px solid var(--df-accent) !important;
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(7,25,50,.12) !important;
    transition: transform .2s ease,box-shadow .2s ease !important;
}

/* Acentos visuales */
html body #appView #moduleContent
.danfer-overview-grid > article.metric-card:nth-child(2) {
    --df-accent: #48bfa5;
}

html body #appView #moduleContent
.danfer-overview-grid > article.metric-card:nth-child(5) {
    --df-accent: #f1b65d;
}

html body #appView #moduleContent
.danfer-overview-grid > article.metric-card.metric-card--alert {
    --df-accent: #f17786;
}

/* Modo oscuro */
html[data-theme="dark"] body #appView #moduleContent
.danfer-overview-grid > article.metric-card {
    background: linear-gradient(145deg,#1c3b5b,#18314d) !important;
    border-color: #365a7e !important;
    border-top-color: var(--df-accent) !important;
    color: #f4f8ff !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.25) !important;
}

/* Indicadores y textos */
html body #appView #moduleContent
.danfer-overview-grid > article.metric-card > strong {
    font-size: 31px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

html[data-theme="dark"] body #appView #moduleContent
.danfer-overview-grid > article.metric-card > strong {
    color: #ffffff !important;
}

/* Efectos */
html body #appView #moduleContent
.danfer-overview-grid > article.metric-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 30px rgba(0,0,0,.2) !important;
}

/* Pantallas medianas */
@media(max-width:1180px) {
    html body #appView #moduleContent
    .danfer-dashboard-layout > section.danfer-overview-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
}

/* Celulares */
@media(max-width:620px) {
    html body #appView #moduleContent
    .danfer-dashboard-layout > section.danfer-overview-grid {
        grid-template-columns: minmax(0,1fr) !important;
    }
}

/* Accesibilidad */
@media(prefers-reduced-motion:reduce) {
    html body #appView #moduleContent
    .danfer-overview-grid > article.metric-card {
        transition: none !important;
    }
    html body #appView #moduleContent
    .danfer-overview-grid > article.metric-card:hover {
        transform: none !important;
    }
}
/* DANFER PANELES V7 */

/* V7 DISTRIBUCION CORREGIDA */

#appView #moduleContent .danfer-dashboard-secondary {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 20px !important;
}

#appView #moduleContent
.danfer-dashboard-secondary > .panel--wide {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
}

#appView #moduleContent
.danfer-dashboard-secondary > .panel {
    min-width: 0 !important;
}

@media (max-width: 900px) {
    #appView #moduleContent .danfer-dashboard-secondary {
        grid-template-columns: minmax(0,1fr) !important;
    }
}


/* Espaciado de paneles inferiores */
html body #appView #moduleContent
.danfer-dashboard-secondary {
  gap: 20px !important;
  margin-top: 22px !important;
}

/* Paneles independientes */
html body #appView #moduleContent
.danfer-dashboard-secondary > .panel {
  background: linear-gradient(145deg,#193451,#112840) !important;
  border: 1px solid #365677 !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
  padding: 24px !important;
  color: #eaf3ff !important;
}

/* Encabezados */
html body #appView #moduleContent
.danfer-dashboard-secondary .panel-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

html body #appView #moduleContent
.danfer-dashboard-secondary .panel-header h3 {
  font-size: 20px !important;
  font-weight: 750 !important;
  color: #ffffff !important;
}

/* Tablas */
html body #appView #moduleContent
.danfer-dashboard-secondary .table-wrap {
  max-width: 100% !important;
  overflow-x: auto !important;
  border: 1px solid #355575 !important;
  border-radius: 12px !important;
}

html body #appView #moduleContent
.danfer-dashboard-secondary table {
  width: 100% !important;
  border-collapse: collapse !important;
}

html body #appView #moduleContent
.danfer-dashboard-secondary table th {
  background: #244565 !important;
  color: #d6e8ff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 14px !important;
}

html body #appView #moduleContent
.danfer-dashboard-secondary table td {
  color: #e3efff !important;
  padding: 14px !important;
  border-bottom: 1px solid #34516d !important;
}

html body #appView #moduleContent
.danfer-dashboard-secondary tbody tr:hover {
  background: rgba(93,163,243,.09) !important;
}

/* Botones de navegacion */
html body #appView #moduleContent
.danfer-dashboard-secondary .text-button {
  background: #244d78 !important;
  color: #ffffff !important;
  border: 1px solid #4b78a5 !important;
  padding: 10px 14px !important;
  border-radius: 9px !important;
  font-weight: 650 !important;
  cursor: pointer;
  transition: background .2s ease !important;
}

html body #appView #moduleContent
.danfer-dashboard-secondary .text-button:hover {
  background: #3474b5 !important;
}

html body #appView #moduleContent
.danfer-dashboard-secondary button:focus-visible {
  outline: 3px solid #92c5ff !important;
  outline-offset: 2px !important;
}

/* Modo claro */
html:not([data-theme="dark"]) body #appView #moduleContent
.danfer-dashboard-secondary > .panel {
  background: #ffffff !important;
  border-color: #d9e5f1 !important;
  color: #172b49 !important;
}

html:not([data-theme="dark"]) body #appView #moduleContent
.danfer-dashboard-secondary .panel-header h3 {
  color: #172b49 !important;
}

html:not([data-theme="dark"]) body #appView #moduleContent
.danfer-dashboard-secondary table th {
  background: #e8f0fa !important;
  color: #244565 !important;
}

html:not([data-theme="dark"]) body #appView #moduleContent
.danfer-dashboard-secondary table td {
  color: #172b49 !important;
  border-bottom-color: #e1e9f3 !important;
}

/* Adaptacion movil */
@media(max-width:650px) {
  html body #appView #moduleContent
  .danfer-dashboard-secondary > .panel {
    padding: 16px !important;
  }
}

/* Accesibilidad */
@media(prefers-reduced-motion:reduce) {
  html body #appView #moduleContent
  .danfer-dashboard-secondary .text-button {
    transition: none !important;
  }
}



/* V7 ANCHO CONTENEDOR */

/* Expandir la seccion inferior dentro del dashboard */
html body #appView #moduleContent
.danfer-dashboard-layout > .danfer-dashboard-secondary {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    flex: 1 1 100% !important;
}

/* Mantener los paneles anchos */
html body #appView #moduleContent
.danfer-dashboard-secondary > .panel--wide {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* Evitar que las tablas desborden */
html body #appView #moduleContent
.danfer-dashboard-secondary .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

/* DANFER LAYOUT RESPONSIVE CORREGIDO */

/* Una sola columna principal */
html body #appView #moduleContent .danfer-dashboard-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Las tres secciones ocupan todo el ancho */
html body #appView #moduleContent
.danfer-dashboard-layout > .danfer-overview-grid,
html body #appView #moduleContent
.danfer-dashboard-layout > .weekly-dashboard-shell,
html body #appView #moduleContent
.danfer-dashboard-layout > .danfer-dashboard-secondary {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Actividad semanal distribuida correctamente */
html body #appView #moduleContent
.weekly-dashboard-shell .weekly-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 16px !important;
    max-width: 100% !important;
}

html body #appView #moduleContent
.weekly-dashboard-shell .weekly-kpi-card {
    min-width: 0 !important;
    margin: 0 !important;
}

/* Presupuesto horizontal y compacto */
html body #appView #moduleContent
.danfer-dashboard-secondary > .budget-card {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: 220px minmax(0,1fr) !important;
    grid-template-areas:
        "header header"
        "ring totals" !important;
    gap: 16px 24px !important;
    align-items: center !important;
}

html body #appView #moduleContent
.budget-card > .panel-header {
    grid-area: header !important;
}

html body #appView #moduleContent
.budget-card > .budget-ring {
    grid-area: ring !important;
    justify-self: center !important;
    margin: 0 !important;
}

html body #appView #moduleContent
.budget-card > dl {
    grid-area: totals !important;
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
}

html body #appView #moduleContent
.budget-card > dl > div {
    min-width: 0 !important;
    padding: 14px !important;
    border: 1px solid #365677 !important;
    border-radius: 12px !important;
}

/* Adaptacion para tabletas */
@media (max-width: 950px) {
    html body #appView #moduleContent
    .weekly-dashboard-shell .weekly-kpi-grid {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
}

/* Adaptacion para telefonos */
@media (max-width: 720px) {
    html body #appView #moduleContent
    .weekly-dashboard-shell .weekly-kpi-grid {
        grid-template-columns: 1fr !important;
    }

    html body #appView #moduleContent
    .danfer-dashboard-secondary > .budget-card {
        grid-template-columns: minmax(0,1fr) !important;
        grid-template-areas:
            "header"
            "ring"
            "totals" !important;
    }

    html body #appView #moduleContent
    .budget-card > dl {
        grid-template-columns: 1fr !important;
    }
}


/* DANFER TABLAS FASE 4 */

/* Solo modulos fuera del dashboard Resumen */
html body #appView
#moduleContent:not(:has(.danfer-dashboard-layout))
.table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    border: 1px solid #345777 !important;
    border-radius: 15px !important;
    background: #142c46 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.13) !important;
}

/* Estructura de las tablas */
html body #appView
#moduleContent:not(:has(.danfer-dashboard-layout))
.table-wrap table {
    width: 100% !important;
    min-width: 700px;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Encabezados */
html body #appView
#moduleContent:not(:has(.danfer-dashboard-layout))
.table-wrap thead th {
    background: #214f77 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    padding: 16px !important;
    border-bottom: 1px solid #427299 !important;
}

/* Celdas */
html body #appView
#moduleContent:not(:has(.danfer-dashboard-layout))
.table-wrap tbody td {
    background: #142c46 !important;
    color: #e8f3ff !important;
    padding: 15px 16px !important;
    border-bottom: 1px solid #294560 !important;
    line-height: 1.5 !important;
}

/* Filas alternadas */
html body #appView
#moduleContent:not(:has(.danfer-dashboard-layout))
.table-wrap tbody tr:nth-child(even) td {
    background: #193550 !important;
}

/* Resaltar fila al pasar el cursor */
html body #appView
#moduleContent:not(:has(.danfer-dashboard-layout))
.table-wrap tbody tr:hover td {
    background: #254c72 !important;
}

/* Modo claro */
html:not([data-theme="dark"]) body #appView
#moduleContent:not(:has(.danfer-dashboard-layout))
.table-wrap {
    background: #ffffff !important;
    border-color: #d9e4f0 !important;
}

html:not([data-theme="dark"]) body #appView
#moduleContent:not(:has(.danfer-dashboard-layout))
.table-wrap thead th {
    background: #e5effa !important;
    color: #173b65 !important;
}

html:not([data-theme="dark"]) body #appView
#moduleContent:not(:has(.danfer-dashboard-layout))
.table-wrap tbody td {
    background: #ffffff !important;
    color: #233b57 !important;
    border-bottom-color: #e4eaf3 !important;
}

html:not([data-theme="dark"]) body #appView
#moduleContent:not(:has(.danfer-dashboard-layout))
.table-wrap tbody tr:nth-child(even) td {
    background: #f4f8fd !important;
}

html:not([data-theme="dark"]) body #appView
#moduleContent:not(:has(.danfer-dashboard-layout))
.table-wrap tbody tr:hover td {
    background: #e8f2ff !important;
}

/* Pantallas pequenas */
@media(max-width:650px) {
    html body #appView
    #moduleContent:not(:has(.danfer-dashboard-layout))
    .table-wrap table {
        min-width: 700px;
    }
}


/* F4 ACCIONES VISIBLES */

/* Desplazamiento horizontal */
#appView #moduleContent:not(:has(.danfer-dashboard-layout))
.table-wrap {
  overflow-x: auto !important;
  max-width: 100% !important;
}

/* Fijar columna con botones */
#appView #moduleContent:not(:has(.danfer-dashboard-layout))
.table-wrap table:has(tbody td:last-child button)
thead th:last-child,
#appView #moduleContent:not(:has(.danfer-dashboard-layout))
.table-wrap table tbody td:last-child:has(button) {
  position: sticky !important;
  right: 0 !important;
  min-width: 220px !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
  box-shadow: -6px 0 14px rgba(0,0,0,.16) !important;
}

/* Encabezado fijo */
#appView #moduleContent:not(:has(.danfer-dashboard-layout))
.table-wrap table:has(tbody td:last-child button)
thead th:last-child {
  background: #214f77 !important;
  z-index: 3 !important;
}

/* Fondo oscuro de acciones */
html[data-theme="dark"] #appView
#moduleContent:not(:has(.danfer-dashboard-layout))
.table-wrap tbody td:last-child:has(button) {
  background: #193550 !important;
}

/* Botones legibles */
#appView #moduleContent:not(:has(.danfer-dashboard-layout))
.table-wrap tbody td:last-child button {
  margin: 3px !important;
  white-space: nowrap !important;
}

/* Compatibilidad con modo claro */
html:not([data-theme="dark"]) #appView
#moduleContent:not(:has(.danfer-dashboard-layout))
.table-wrap tbody td:last-child:has(button) {
  background: #f4f8fd !important;
}

html:not([data-theme="dark"]) #appView
#moduleContent:not(:has(.danfer-dashboard-layout))
.table-wrap table:has(tbody td:last-child button)
thead th:last-child {
  background: #e5effa !important;
}


/* DANFER FORMULARIOS F5 */

/* Campos administrativos */
#appView #moduleContent
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,textarea) {
  border-radius: 10px !important;
  border: 1px solid var(--dp-line,#365677) !important;
  background: var(--dp-surface,#162338);
  color: var(--dp-ink,#edf3ff);
  min-height: 40px;
  transition: border-color .2s,box-shadow .2s;
}

/* Campos seleccionados */
#appView #moduleContent
:is(input,select,textarea):focus-visible {
  outline: 2px solid var(--dp-focus,#8bb5ff) !important;
  outline-offset: 2px;
  border-color: var(--dp-blue,#5788ed) !important;
}

/* Botones principales */
#appView #moduleContent
.primary-button:not(.danger-button):not(.delete-button) {
  background: linear-gradient(135deg,#2469ae,#17477b) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  border: 1px solid #397cb9 !important;
  font-weight: 700 !important;
  transition: filter .2s,box-shadow .2s !important;
}

/* Efectos de botones */
#appView #moduleContent
.primary-button:not(:disabled):hover {
  filter: brightness(1.12);
  box-shadow: 0 5px 16px rgba(25,90,160,.22);
}

/* Botones secundarios */
#appView #moduleContent .secondary-button {
  border-radius: 10px !important;
  border: 1px solid var(--dp-line,#365677) !important;
}

/* Ventanas de dialogo */
#appView dialog:not(.kvp-modal) {
  border-radius: 18px;
  box-shadow: 0 24px 65px rgba(0,0,0,.28);
}

/* Accesibilidad */
#appView button:focus-visible {
  outline: 2px solid #8fc4ff !important;
  outline-offset: 3px !important;
}

@media(prefers-reduced-motion:reduce) {
  #appView button,
  #appView input,
  #appView select,
  #appView textarea {
    transition: none !important;
  }
}


/* DANFER MODAL F5 CORREGIDO */

/* Ventana principal */
html body dialog#recordModal.modal {
    box-sizing: border-box !important;
    width: min(920px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    height: auto !important;
    padding: 0 !important;
    margin: auto !important;
    border: 1px solid #365879 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #11243b !important;
    color: #edf4ff !important;
    box-shadow: 0 28px 75px rgba(0,0,0,.38) !important;
}

/* Formulario con desplazamiento interior */
html body #recordModal > form#recordForm {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 34px) !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Encabezado azul */
html body #recordModal > form > header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 0 0 auto !important;
    padding: 20px 26px !important;
    margin: 0 !important;
    background: linear-gradient(
        110deg,#102e52,#20578a
    ) !important;
    border-bottom: 1px solid #42668c !important;
    color: #ffffff !important;
}

/* Titulo visible */
html body #recordModal #modalTitle {
    color: #ffffff !important;
    font-size: 23px !important;
    font-weight: 750 !important;
    margin: 5px 0 0 !important;
}

/* Etiqueta superior */
html body #recordModal #modalEyebrow {
    color: #b4d8ff !important;
    font-weight: 750 !important;
    margin: 0 !important;
}

/* Boton cerrar */
html body #recordModal #closeModal {
    flex: 0 0 auto !important;
    background: #214c78 !important;
    color: #ffffff !important;
    border: 1px solid #5781aa !important;
    border-radius: 10px !important;
    cursor: pointer !important;
}

/* Zona de campos desplazable */
html body #recordModal #formFields {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 24px !important;
}

/* Botones siempre al pie */
html body #recordModal > form > footer {
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 16px 24px !important;
    margin: 0 !important;
    background: #172d49 !important;
    border-top: 1px solid #385575 !important;
}

/* Fondo en modo claro */
html:not([data-theme="dark"]) body
dialog#recordModal.modal {
    background: #ffffff !important;
    color: #172b49 !important;
}

html:not([data-theme="dark"]) body
#recordModal > form > footer {
    background: #f0f5fb !important;
}

/* Pantallas pequenas */
@media(max-width:700px) {
    html body #recordModal #formFields.form-grid {
        grid-template-columns: 1fr !important;
    }

    html body #recordModal > form > header {
        padding: 16px !important;
    }

    html body #recordModal #formFields {
        padding: 16px !important;
    }
}

/* Fondo detras del modal */
html body #recordModal::backdrop {
    background: rgba(4,13,27,.75) !important;
}


/* DANFER COMPRAS MODAL F5 */

/* Ventana principal */
html body dialog#purchaseModal {
    box-sizing: border-box !important;
    width: min(920px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
    padding: 0 !important;
    border: 1px solid #365879 !important;
    border-radius: 18px !important;
    background: #11243b !important;
    color: #edf4ff !important;
    overflow: hidden !important;
    box-shadow: 0 28px 75px rgba(0,0,0,.38) !important;
}

/* Organizacion del formulario */
html body #purchaseModal #purchaseForm {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100dvh - 34px) !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Encabezado azul */
html body #purchaseModal #purchaseForm > header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 0 0 auto !important;
    gap: 16px !important;
    padding: 20px 26px !important;
    margin: 0 !important;
    background: linear-gradient(110deg,#102e52,#20578a) !important;
    border-bottom: 1px solid #42668c !important;
}

/* Titulo */
html body #purchaseModal #purchaseForm > header h2 {
    color: #ffffff !important;
    font-size: 23px !important;
    font-weight: 750 !important;
    margin: 5px 0 0 !important;
}

html body #purchaseModal #purchaseForm > header .eyebrow {
    color: #b4d8ff !important;
    margin: 0 !important;
}

/* Boton cerrar */
html body #purchaseModal #closePurchaseModal {
    flex: 0 0 auto !important;
    width: 36px !important;
    height: 36px !important;
    background: #214c78 !important;
    color: #ffffff !important;
    border: 1px solid #5781aa !important;
    border-radius: 10px !important;
    cursor: pointer !important;
}

/* Contenido desplazable */
html body #purchaseModal #purchaseFormBody {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 24px !important;
    background: #11243b !important;
    color: #edf4ff !important;
}

/* Campos */
html body #purchaseModal #purchaseFormBody
:is(input:not([type="checkbox"]):not([type="radio"]),
select,textarea) {
    max-width: 100%;
    border: 1px solid #35516f !important;
    border-radius: 10px !important;
    background: #0f1c30 !important;
    color: #edf4ff !important;
}

/* Pie fijo con botones */
html body #purchaseModal #purchaseForm > footer {
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 16px 24px !important;
    margin: 0 !important;
    background: #172d49 !important;
    border-top: 1px solid #385575 !important;
}

/* Guardar borrador */
html body #purchaseModal #savePurchaseButton {
    background: #2469ae !important;
    color: #ffffff !important;
    border: 1px solid #397cb9 !important;
    border-radius: 10px !important;
}

/* Cancelar */
html body #purchaseModal #cancelPurchaseModal {
    background: #14253c !important;
    color: #ffffff !important;
    border: 1px solid #45617e !important;
    border-radius: 10px !important;
}


/* COMPRAS F5 GRID CORREGIDO */

/* Tres campos sin desbordamiento */
html body #purchaseModal #purchaseFormBody
.purchase-header-grid {
    display: grid !important;
    grid-template-columns:
        minmax(0,.8fr)
        minmax(0,1.35fr)
        minmax(0,1.1fr) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    align-items: end !important;
}

/* Cada campo ocupa solo su columna */
html body #purchaseModal #purchaseFormBody
.purchase-header-grid > .field {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Inputs y selectores adaptables */
html body #purchaseModal #purchaseFormBody
.purchase-header-grid :is(input,select) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Tablets */
@media (max-width: 760px) {
    html body #purchaseModal #purchaseFormBody
    .purchase-header-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

    html body #purchaseModal #purchaseFormBody
    .purchase-header-grid > .field:last-child {
        grid-column: 1 / -1 !important;
    }
}

/* Celulares */
@media (max-width: 640px) {
    html body #purchaseModal #purchaseFormBody
    .purchase-header-grid {
        grid-template-columns: minmax(0,1fr) !important;
    }

    html body #purchaseModal #purchaseFormBody
    .purchase-header-grid > .field:last-child {
        grid-column: auto !important;
    }
}

/* Mensajes de validacion */
html body #purchaseModal #purchaseFormError:empty {
    display: none !important;
}

/* Modo claro */
html:not([data-theme="dark"]) body #purchaseModal {
    background: #ffffff !important;
    color: #172b49 !important;
}

html:not([data-theme="dark"]) body
#purchaseModal #purchaseFormBody {
    background: #ffffff !important;
    color: #172b49 !important;
}

html:not([data-theme="dark"]) body
#purchaseModal #purchaseFormBody
:is(input:not([type="checkbox"]):not([type="radio"]),
select,textarea) {
    background: #f7f9fc !important;
    color: #172b49 !important;
}

html:not([data-theme="dark"]) body
#purchaseModal #purchaseForm > footer {
    background: #f0f5fb !important;
}

/* Adaptacion movil */
@media (max-width: 700px) {
    html body #purchaseModal #purchaseForm > header,
    html body #purchaseModal #purchaseFormBody,
    html body #purchaseModal #purchaseForm > footer {
        padding: 16px !important;
    }
}

/* Accesibilidad */
html body #purchaseModal :is(button,input,select,textarea):focus-visible {
    outline: 2px solid #8fc4ff !important;
    outline-offset: 2px !important;
}

/* Fondo exterior */
html body #purchaseModal::backdrop {
    background: rgba(4,13,27,.75) !important;
}


/* DANFER PARTIDAS RESPONSIVE F5 */

/* Contenedor de partidas */
html body #purchaseModal #purchaseItems {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Cada partida es una tarjeta responsive */
html body #purchaseModal #purchaseItems
> .purchase-item-row {
    display: grid !important;
    grid-template-columns:
        repeat(12,minmax(0,1fr)) !important;
    gap: 14px !important;
    align-items: end !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 18px !important;
    margin-bottom: 14px !important;
    border: 1px solid #476785 !important;
    border-radius: 14px !important;
    background: #152d47 !important;
}

/* Permitir que los elementos se reduzcan */
html body #purchaseModal #purchaseItems
> .purchase-item-row > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Primera fila: numero, codigo y descripcion */
html body #purchaseModal .purchase-item-row
> :nth-child(1) {
    grid-column: span 2 !important;
}

html body #purchaseModal .purchase-item-row
> :nth-child(2) {
    grid-column: span 3 !important;
}

html body #purchaseModal .purchase-item-row
> :nth-child(3) {
    grid-column: span 7 !important;
}

/* Segunda fila: cantidad, unidad, precio e IVA */
html body #purchaseModal .purchase-item-row
> :nth-child(4),
html body #purchaseModal .purchase-item-row
> :nth-child(5),
html body #purchaseModal .purchase-item-row
> :nth-child(6),
html body #purchaseModal .purchase-item-row
> :nth-child(7) {
    grid-column: span 3 !important;
}

/* Tercera fila: importe y eliminar */
html body #purchaseModal .purchase-item-row
> :nth-child(8) {
    grid-column: span 9 !important;
}

html body #purchaseModal .purchase-item-row
> :nth-child(9) {
    grid-column: span 3 !important;
    justify-self: end !important;
}

/* Campos sin desbordamiento */
html body #purchaseModal .purchase-item-row
:is(input,select,textarea) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Etiquetas */
html body #purchaseModal .purchase-item-row label {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

/* Tablets */
@media(max-width:760px) {
    html body #purchaseModal .purchase-item-row
    > :nth-child(1) {
        grid-column: span 2 !important;
    }

    html body #purchaseModal .purchase-item-row
    > :nth-child(2) {
        grid-column: span 10 !important;
    }

    html body #purchaseModal .purchase-item-row
    > :nth-child(3) {
        grid-column: span 12 !important;
    }
}

/* Celulares */
@media(max-width:540px) {
    html body #purchaseModal .purchase-item-row
    > * {
        grid-column: span 12 !important;
        justify-self: stretch !important;
    }
}

/* Modo claro */
html:not([data-theme="dark"]) body
#purchaseModal #purchaseItems > .purchase-item-row {
    background: #f0f5fb !important;
    border-color: #d3e0ee !important;
}


/* DANFER F6 CENTRO DE CONTROL */

html body #notificationModal.task-modal {
    width: min(960px, calc(100vw - 32px)) !important;
    height: min(82dvh, 760px) !important;
    max-height: calc(100dvh - 32px) !important;
    padding: 0 !important;
    background: #0f1d30 !important;
    color: #e8f1fc !important;
    border: 1px solid #355473 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 26px 80px #0008 !important;
}

html body #notificationModal::backdrop {
    background: rgba(3, 12, 25, .76) !important;
    backdrop-filter: blur(5px);
}

html body #notificationModal .task-dialog {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    background: #0f1d30 !important;
    color: #e8f1fc !important;
}

/* Encabezado */

html body #notificationModal .task-dialog > header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-shrink: 0 !important;
    padding: 23px 26px !important;
    background: linear-gradient(
        110deg,
        #123253,
        #20588b
    ) !important;
    border-bottom: 1px solid #416a91 !important;
    color: white !important;
}

html body #notificationModal header h2 {
    margin: 4px 0 0 !important;
    color: #fff !important;
    font-size: 22px !important;
}

html body #notificationModal header .modalEyebrow {
    margin: 0 !important;
    color: #bedcff !important;
    font-size: 11px !important;
    letter-spacing: 1.3px !important;
}

html body #notificationModal #closeNotifications {
    background: #ffffff14 !important;
    color: #fff !important;
    border: 1px solid #ffffff36 !important;
    border-radius: 10px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    cursor: pointer;
}

/* Contadores */

html body #notificationModal .task-toolbar {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) auto !important;
    gap: 12px !important;
    align-items: stretch !important;
    flex-shrink: 0 !important;
    padding: 16px 22px !important;
    background: #12263e !important;
    border-bottom: 1px solid #304d6d !important;
}

html body #notificationModal .task-toolbar > div {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding: 13px 16px !important;
    background: #1b344f !important;
    border: 1px solid #355471 !important;
    border-radius: 11px !important;
}

html body #notificationModal .task-toolbar span {
    color: #afc6e0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

html body #notificationModal .task-toolbar strong {
    color: #fff !important;
    font-size: 23px !important;
    font-weight: 800 !important;
}

html body #notificationModal #newTaskButton {
    align-self: center !important;
    background: #1767b5 !important;
    border: 1px solid #3089dc !important;
    color: #fff !important;
    border-radius: 10px !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    white-space: nowrap !important;
}

/* Contenido y tareas */

html body #notificationModal #notificationContent {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 24px !important;
    background: #0f1d30 !important;
    color: #dce8f7 !important;
}

html body #notificationModal #notificationContent h3 {
    color: #eef5ff !important;
    font-size: 17px !important;
    font-weight: 750 !important;
}

html body #notificationModal #notificationContent p,
html body #notificationModal #notificationContent .loading {
    color: #a9bfd9 !important;
}

html body #notificationModal .task-empty {
    display: grid !important;
    place-items: center !important;
    min-height: 100px !important;
    padding: 20px !important;
    background: #172b44 !important;
    border: 1px dashed #3b5877 !important;
    border-radius: 12px !important;
    text-align: center !important;
}

/* Pie de ventana */

html body #notificationModal .task-dialog > footer {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    padding: 15px 22px !important;
    background: #182d47 !important;
    border-top: 1px solid #365371 !important;
}

html body #notificationModal .task-dialog > footer button {
    background: #15395e !important;
    border: 1px solid #416a97 !important;
    color: #fff !important;
    border-radius: 9px !important;
    min-height: 41px !important;
    padding: 10px 15px !important;
}

/* Interaccion */

html body #notificationModal button:hover {
    filter: brightness(1.13);
}

/* Responsive */

@media (max-width: 700px) {
    html body #notificationModal .task-toolbar {
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
        padding: 12px !important;
        gap: 8px !important;
    }

    html body #notificationModal #newTaskButton {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    html body #notificationModal .task-dialog > header {
        padding: 18px !important;
    }

    html body #notificationModal #notificationContent {
        padding: 16px !important;
    }

    html body #notificationModal .task-dialog > footer {
        flex-wrap: wrap !important;
    }
}


/* DANFER LOGIN FASE 6 */

/* Fondo y panel principal */
html body #loginView.login-shell {
    background: #09192c !important;
    color: #f1f6ff !important;
}

html body #loginView .login-card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 560px !important;
    padding: clamp(28px,4.5vw,58px) !important;
    background: linear-gradient(
        155deg,#173655,#0d2138
    ) !important;
    border: 1px solid #355675 !important;
    border-radius: 20px !important;
    box-shadow: 0 22px 60px #0004 !important;
}

/* Identidad DANFER */
html body #loginView .login-brand {
    gap: 14px !important;
    flex-wrap: wrap !important;
}

html body #loginView .login-brand img.brand-mark {
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    object-fit: contain !important;
}

html body #loginView .login-brand strong {
    color: #f4f8ff !important;
}

html body #loginView .login-brand small {
    color: #b6cce3 !important;
}

/* Mensaje de bienvenida */
html body #loginView .login-copy {
    margin: 36px 0 28px !important;
}

html body #loginView .login-copy .eyebrow {
    color: #91c5ff !important;
}

html body #loginView .login-copy h1 {
    color: #fff !important;
    font-size: clamp(29px,3vw,39px) !important;
    line-height: 1.15 !important;
}

html body #loginView .login-copy p:not(.eyebrow) {
    color: #b7cce4 !important;
    line-height: 1.7 !important;
}

/* Formulario */
html body #loginView .login-form {
    gap: 17px !important;
}

html body #loginView .login-form label {
    color: #e3edfa !important;
    font-weight: 650 !important;
}

html body #loginView .login-form input,
html body #loginView .login-form select {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    background: #102840 !important;
    color: #fff !important;
    border: 1px solid #456989 !important;
    border-radius: 10px !important;
}

html body #loginView .login-form input:focus,
html body #loginView .login-form select:focus {
    border-color: #78baff !important;
    outline: 2px solid #4c93dc !important;
    outline-offset: 1px !important;
}

/* Boton de acceso */
html body #loginView .login-form .primary-button {
    min-height: 50px !important;
    background: #1768b7 !important;
    border: 1px solid #398cdd !important;
    color: #fff !important;
    border-radius: 11px !important;
    font-weight: 750 !important;
}

html body #loginView .login-form .primary-button:hover {
    background: #217bcf !important;
}

html body #loginView .login-foot {
    color: #a7bfd9 !important;
    font-size: 12px !important;
}

/* Adaptacion a tablet */
@media (max-width: 960px) {
    html body #loginView.login-shell {
        grid-template-columns: minmax(0,1fr) !important;
    }

    html body #loginView .login-card {
        margin: 24px auto !important;
    }

    html body #loginView .login-side {
        min-width: 0 !important;
    }
}

/* Adaptacion a celular */
@media (max-width: 560px) {
    html body #loginView .login-card {
        width: calc(100% - 24px) !important;
        margin: 12px auto !important;
        padding: 26px 20px !important;
    }

    html body #loginView .login-brand img.brand-mark {
        width: min(100%,260px) !important;
    }

    html body #loginView .login-copy {
        margin: 28px 0 22px !important;
    }

    html body #loginView .login-copy h1 {
        font-size: 29px !important;
    }
}


/* DANFER F6 USUARIOS CORPORATIVO */

/* Identidad visual del modulo */
html body #moduleContent:has(.users-row) {
    background: #0c1b2d !important;
    color: #eaf3ff !important;
    border: 1px solid #2c4969 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Eliminar tipografia western */
html body #moduleContent:has(.users-row),
html body #moduleContent:has(.users-row) * {
    font-family: "Segoe UI", Arial, sans-serif !important;
    letter-spacing: normal !important;
}

/* Contenedores que conservan tematica anterior */
html body #moduleContent:has(.users-row) > :first-child,
html body #moduleContent:has(.users-row)
[class*="frontier"],
html body #moduleContent:has(.users-row)
[class*="western"] {
    border-color: #345675 !important;
    box-shadow: none !important;
}

/* Encabezados */
html body #moduleContent:has(.users-row)
:is(h1,h2,h3,h4) {
    color: #f0f6ff !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    text-shadow: none !important;
}

/* Tarjetas de indicadores */
html body #moduleContent:has(.users-row)
:is(.users-stats,.users-metrics,.users-kpis,.stats-grid,.kpi-grid)
> *,
html body #moduleContent:has(.users-row)
:is(.stat-card,.metric-card,.kpi-card,.user-stat,.users-stat) {
    background: #172e48 !important;
    color: #eff6ff !important;
    border: 1px solid #355674 !important;
    border-radius: 13px !important;
    box-shadow: none !important;
}

/* Indicadores */
html body #moduleContent:has(.users-row)
:is(.stat-card,.metric-card,.kpi-card,.user-stat,.users-stat)
:is(strong,b,h3) {
    color: #fff !important;
}

/* Directorio */
html body #moduleContent:has(.users-row)
:is(.users-toolbar,.users-header,.users-panel,.users-directory) {
    background: #142b44 !important;
    border-color: #345371 !important;
    color: #eaf3ff !important;
}

/* Tabla */
html body #moduleContent:has(.users-row) table {
    border-color: #355471 !important;
}

html body #moduleContent:has(.users-row) table thead th {
    background: #193b60 !important;
    color: #e4f0ff !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-weight: 750 !important;
    border-color: #345574 !important;
}

html body #moduleContent:has(.users-row)
.users-row td {
    background: #132a43 !important;
    color: #e5effb !important;
    border-color: #2c4661 !important;
}

html body #moduleContent:has(.users-row)
.users-row:nth-child(even) td {
    background: #18314d !important;
}

html body #moduleContent:has(.users-row)
.users-row:hover td {
    background: #204063 !important;
}

/* Buscador y filtros */
html body #moduleContent:has(.users-row)
:is(input[type="search"],input[type="text"],select) {
    background: #10253c !important;
    color: #edf5ff !important;
    border: 1px solid #436587 !important;
    border-radius: 9px !important;
}

/* Botones principales */
html body #moduleContent:has(.users-row)
.primary-button {
    background: #1768b7 !important;
    color: #fff !important;
    border: 1px solid #3488d8 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

/* Adaptacion movil */
@media(max-width:700px) {
    html body #moduleContent:has(.users-row) {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html body #moduleContent:has(.users-row)
    table {
        font-size: 12px !important;
    }
}


/* DANFER F6 PERMISOS Y DIRECTORIO */

/* Encabezado del directorio */
html body #moduleContent:has(.users-row)
:is(div,header,section):has(> div > .users-table-eyebrow) {
    background: #162d47 !important;
    color: #eaf3ff !important;
    border-color: #355472 !important;
}

html body #moduleContent:has(.users-row)
.users-table-eyebrow {
    color: #8dc5ff !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
}

html body #moduleContent:has(.users-row)
.users-table-eyebrow ~ h3 {
    color: #ffffff !important;
    text-shadow: none !important;
}

html body #moduleContent:has(.users-row)
.users-table-eyebrow ~ p {
    color: #aac2dd !important;
}

/* Panel de permisos */
html body dialog:has(.permission-editor)
.permission-editor {
    background: #102033 !important;
    color: #eaf3ff !important;
    border: 1px solid #365574 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

html body dialog:has(.permission-editor)
.permission-editor > div:first-child {
    background: #172e49 !important;
    color: #e8f2ff !important;
    padding: 14px 16px !important;
}

html body dialog:has(.permission-editor)
.permission-editor > div:first-child strong {
    display: block !important;
    color: #ffffff !important;
    margin-bottom: 6px !important;
}

html body dialog:has(.permission-editor)
.permission-editor > div:first-child span {
    color: #b3cae3 !important;
}

/* Contenedor de la matriz */
html body dialog:has(.permission-editor)
.permission-table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    background: #11243a !important;
    border-color: #365574 !important;
}

/* Tabla */
html body dialog:has(.permission-editor)
.permission-table {
    width: 100% !important;
    min-width: 750px !important;
    border-collapse: collapse !important;
    color: #eaf3ff !important;
}

/* Cabeceras */
html body dialog:has(.permission-editor)
.permission-table thead th {
    background: #1b4268 !important;
    color: #f0f7ff !important;
    border: 1px solid #365875 !important;
    padding: 13px 10px !important;
    font-family: "Segoe UI", Arial, sans-serif !important;
}

/* Nombres de modulos */
html body dialog:has(.permission-editor)
.permission-table tbody th {
    background: #172f4a !important;
    color: #eaf3ff !important;
    border: 1px solid #35516d !important;
    padding: 12px 10px !important;
    text-align: left !important;
}

/* Casillas de la matriz */
html body dialog:has(.permission-editor)
.permission-table tbody td {
    background: #14283f !important;
    color: #b8cee5 !important;
    border: 1px solid #304964 !important;
    padding: 12px 8px !important;
    text-align: center !important;
}

html body dialog:has(.permission-editor)
.permission-table tbody tr:nth-child(even) td {
    background: #19324c !important;
}

html body dialog:has(.permission-editor)
.permission-table tbody tr:hover td {
    background: #244667 !important;
}

/* Seleccion de permisos */
html body dialog:has(.permission-editor)
.permission-table input[type="checkbox"] {
    accent-color: #2688de !important;
    width: 16px !important;
    height: 16px !important;
}

html body dialog:has(.permission-editor)
.permission-table input[type="checkbox"]:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
}

/* Instrucciones de seguridad */
html body dialog:has(.permission-editor)
.form-note {
    background: #18344f !important;
    color: #c6d9ed !important;
    border: 1px solid #365776 !important;
    border-radius: 9px !important;
}

/* Boton Guardar registro */
html body dialog:has(.permission-editor)
:is(button.primary-button,button[type="submit"]) {
    background: #176bb9 !important;
    border: 1px solid #338ddd !important;
    color: #ffffff !important;
    border-radius: 9px !important;
}

html body dialog:has(.permission-editor)
:is(button.primary-button,button[type="submit"]):hover {
    background: #2581d0 !important;
}


/* DANFER F7 MICROINTERACCIONES */

/* Transiciones de botones */
html body :where(#appView,#loginView,dialog.modal)
:is(
    .primary-button,
    .secondary-button,
    .user-button,
    button[data-close],
    button[id^="close"]
) {
    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        filter .18s ease !important;
}

/* Respuesta al cursor */
@media (hover:hover) and (pointer:fine) {

    html body :where(#appView,#loginView,dialog.modal)
    :is(
        .primary-button,
        .secondary-button,
        .user-button
    ):hover:not(:disabled) {
        filter: brightness(1.09) !important;
    }

    html body #appView .metric-card {
        transition:
            border-color .2s ease,
            box-shadow .2s ease !important;
    }

    html body #appView .metric-card:hover {
        border-color: #4678a7 !important;
        box-shadow: 0 8px 22px rgba(0,0,0,.15) !important;
    }
}

/* Respuesta al presionar */
html body :where(#appView,#loginView,dialog.modal)
:is(
    .primary-button,
    .secondary-button
):active:not(:disabled) {
    filter: brightness(.93) !important;
}

/* Navegacion con teclado */
html body :where(#appView,#loginView,dialog.modal)
:is(
    button,
    input,
    select,
    textarea,
    a
):focus-visible {
    outline: 2px solid #78b9ff !important;
    outline-offset: 2px !important;
}

/* Respeto a accesibilidad */
@media (prefers-reduced-motion:reduce) {

    html body :where(#appView,#loginView,dialog.modal)
    :is(
        button,
        input,
        select,
        textarea,
        .metric-card
    ) {
        transition: none !important;
        animation: none !important;
    }
}


/* DANFER F8 USUARIOS RESPONSIVE */

/* Buscador: quitar fondo blanco heredado */
html body #moduleContent:has(.users-row)
:is(div,label):has(> input[placeholder*="Buscar"]) {
    background: #142c45 !important;
    color: #c2d8f0 !important;
    border: 1px solid #3c5c7e !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

html body #moduleContent:has(.users-row)
input[placeholder*="Buscar"] {
    background: #10263e !important;
    color: #f0f6ff !important;
    border: 1px solid #3b5b7d !important;
    border-radius: 9px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html body #moduleContent:has(.users-row)
input[placeholder*="Buscar"]::placeholder {
    color: #91abc5 !important;
}

/* Contenedor de la tabla */
html body #moduleContent:has(.users-row)
:is(div,section):has(> table) {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
}

/* Tabla mas compacta en escritorio */
html body #moduleContent:has(.users-row) table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
}

html body #moduleContent:has(.users-row)
table thead th,
html body #moduleContent:has(.users-row)
.users-row td {
    padding: 12px 9px !important;
    font-size: 12px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/* Mantener accesibles las acciones */
html body #moduleContent:has(.users-row)
table thead th:last-child,
html body #moduleContent:has(.users-row)
.users-row td:last-child {
    position: sticky !important;
    right: 0 !important;
    min-width: 185px !important;
    z-index: 2 !important;
    box-shadow: -6px 0 12px #07162733 !important;
}

html body #moduleContent:has(.users-row)
table thead th:last-child {
    background: #193b60 !important;
    z-index: 3 !important;
}

html body #moduleContent:has(.users-row)
.users-row td:last-child {
    background: #132a43 !important;
}

/* Evitar que los controles sobresalgan */
html body #moduleContent:has(.users-row)
.users-row td:last-child button {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Tablets y pantallas pequenas */
@media (max-width: 1100px) {
    html body #moduleContent:has(.users-row) table {
        min-width: 1000px !important;
    }
}

/* Crear usuario: responsive sin alterar permisos */
@media (max-width: 720px) {
    html body dialog:has(.permission-editor) {
        box-sizing: border-box !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        margin: auto !important;
    }

    html body dialog:has(.permission-editor)
    .form-fields {
        grid-template-columns: minmax(0,1fr) !important;
        min-width: 0 !important;
    }

    html body dialog:has(.permission-editor)
    .field {
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
    }

    html body dialog:has(.permission-editor)
    .permission-editor {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html body dialog:has(.permission-editor)
    .permission-table-wrap {
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    html body dialog:has(.permission-editor)
    footer {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
    html body #moduleContent:has(.users-row) * {
        scroll-behavior: auto !important;
    }
}


/* DANFER F8 MODALES RESPONSIVE */

/* Solo pantallas pequenas */
@media (max-width: 720px) {

    html body #recordModal,
    html body #purchaseModal {
        box-sizing: border-box !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        margin: auto !important;
    }

    /* Mantenimiento: una columna */
    html body #recordModal
    :is(.form-fields,.form-grid) {
        grid-template-columns: minmax(0,1fr) !important;
        min-width: 0 !important;
    }

    html body #recordModal .field {
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
    }

    /* Compras: datos generales apilados */
    html body #purchaseModal .purchase-header-grid {
        grid-template-columns: minmax(0,1fr) !important;
        min-width: 0 !important;
    }

    /* Evitar campos que sobresalgan */
    html body #recordModal
    :is(input,select,textarea),
    html body #purchaseModal
    :is(input,select,textarea) {
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Partidas dentro del ancho disponible */
    html body #purchaseModal #purchaseItems {
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Botones inferiores */
    html body #recordModal form > footer,
    html body #purchaseModal form > footer {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
}

/* Tablets pequenas: partidas en dos columnas */
@media (min-width: 541px) and (max-width: 720px) {

    html body #purchaseModal .purchase-item-row
    > :nth-child(4),
    html body #purchaseModal .purchase-item-row
    > :nth-child(5),
    html body #purchaseModal .purchase-item-row
    > :nth-child(6),
    html body #purchaseModal .purchase-item-row
    > :nth-child(7) {
        grid-column: span 6 !important;
    }
}

/* DANFER F9 - SIN DECORACION WESTERN */
html body.danfer-admin-frontier #moduleContent::before,
html body.danfer-admin-frontier #moduleContent::after {
    content: none !important;
    display: none !important;
}