/*
 * sf-overrides.css
 * Overrides sobre el theme Syncfusion personalizado (materialioclock).
 * Cargado después de material.css — gana la cascada por orden de carga.
 *
 * Paleta activa (Opción 5):
 *   Naranja #fb9c45 · Sky #42c3ff · Aqua #61e0e0 · Teal #1e3d3a
 */

/* ════════════════════════════════════════════════════════════
   DIALOGS — responsivos + header teal/naranja
   Excluye .e-excelfilter: ese popup necesita overflow visible
   para que los submenús (Filtros de texto/fecha) puedan salir
   de sus límites sin ser recortados.
   ════════════════════════════════════════════════════════════ */
.e-dialog:not(.e-excelfilter) {
    max-width:  calc(100vw - 16px) !important;
    max-height: calc(100vh - 24px) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
}

.e-dialog:not(.e-excelfilter) .e-dlg-content {
    overflow-y: auto;
    overflow-x: auto;
}

/* Header: fondo teal oscuro + línea inferior naranja */
.e-dialog:not(.e-excelfilter) .e-dlg-header-content {
    background:    var(--pal-teal-dark)        !important;
    border-bottom: 3px solid var(--pal-orange) !important;
    padding:       13px 20px                   !important;
    border-radius: 0                           !important;
}

.e-dialog:not(.e-excelfilter) .e-dlg-header {
    color:       #ffffff !important;
    font-size:   14px   !important;
    font-weight: 600    !important;
    letter-spacing: -0.1px !important;
}

/* Botón de cierre (X) */
.e-dialog:not(.e-excelfilter) .e-dlg-closeicon-btn {
    color: rgba(255, 255, 255, 0.65) !important;
    border-radius: var(--radius-sm)  !important;
}
.e-dialog:not(.e-excelfilter) .e-dlg-closeicon-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color:      #ffffff                   !important;
}

/* Footer del diálogo */
.e-dialog:not(.e-excelfilter) .e-footer-content {
    background:  var(--bg-secondary)      !important;
    border-top:  1px solid var(--border-soft) !important;
    padding:     10px 16px                !important;
    gap:         8px                      !important;
    display:     flex                     !important;
    flex-wrap:   wrap                     !important;
}

/* ════════════════════════════════════════════════════════════
   FILTRO EXCEL — z-index para submenús
   El popup principal necesita z-index conocido y los submenús
   (Filtros de texto, Filtros de fecha…) deben aparecer encima.
   ════════════════════════════════════════════════════════════ */

/* Popup principal del filtro */
.e-excelfilter,
.e-filter-popup {
    z-index: 1500 !important;
}

/* Submenú que aparece al dar clic en Filtros de texto/fecha/número.
   Debe estar por ENCIMA del popup principal (1500). */
.e-contextmenu-wrapper,
.e-contextmenu-container,
.e-menu-popup {
    z-index: 2000 !important;
}

/* ════════════════════════════════════════════════════════════
   BOTONES — Colores por clase semántica
   ════════════════════════════════════════════════════════════

   e-primary  → sky blue  (acción principal / Editar)
   e-success  → aqua/menta (acción positiva  / Agregar)
   e-warning  → naranja   (acción de marca)
   e-info     → sky más oscuro
   e-danger   → hereda color SF (rojo)
   e-secondary → hereda SF (gris neutro)
   e-outline  → transparente + borde sky
   ════════════════════════════════════════════════════════════ */

/* e-primary → sky blue */
.e-btn.e-primary:not(.e-outline):not(.e-small) {
    background-color: var(--pal-sky)    !important;
    border-color:     var(--pal-sky)    !important;
    color:            #ffffff           !important;
}
.e-btn.e-primary:not(.e-outline):not(.e-small):not(.e-disabled):not(:disabled):hover {
    background-color: var(--pal-sky-dk) !important;
    border-color:     var(--pal-sky-dk) !important;
}

/* e-success → aqua / menta */
.e-btn.e-success:not(.e-outline):not(.e-small) {
    background-color: var(--pal-aqua)        !important;
    border-color:     var(--pal-aqua)        !important;
    color:            var(--pal-teal-deeper) !important;
}
.e-btn.e-success:not(.e-outline):not(.e-small):not(.e-disabled):not(:disabled):hover {
    background-color: var(--pal-aqua-dk) !important;
    border-color:     var(--pal-aqua-dk) !important;
    color:            #ffffff            !important;
}

/* e-warning → naranja de marca */
.e-btn.e-warning:not(.e-outline):not(.e-small) {
    background-color: var(--pal-orange)    !important;
    border-color:     var(--pal-orange)    !important;
    color:            #ffffff              !important;
}
.e-btn.e-warning:not(.e-outline):not(.e-small):not(.e-disabled):not(:disabled):hover {
    background-color: var(--pal-orange-dk) !important;
    border-color:     var(--pal-orange-dk) !important;
}

/* e-info → sky profundo */
.e-btn.e-info:not(.e-outline):not(.e-small) {
    background-color: var(--pal-sky-dk)   !important;
    border-color:     var(--pal-sky-dk)   !important;
    color:            #ffffff             !important;
}
.e-btn.e-info:not(.e-outline):not(.e-small):not(.e-disabled):not(:disabled):hover {
    background-color: var(--pal-sky-deep) !important;
    border-color:     var(--pal-sky-deep) !important;
}

/* e-danger → outline rojo (discreto, sin relleno) */
.e-btn.e-danger:not(.e-small) {
    background:   transparent          !important;
    border:       1.5px solid #e53935  !important;
    color:        #c62828              !important;
    box-shadow:   none                 !important;
}
.e-btn.e-danger:not(.e-small):not(.e-disabled):not(:disabled):hover {
    background:   #fce8e8              !important;
    border-color: #c62828              !important;
    color:        #c62828              !important;
    box-shadow:   0 2px 6px rgba(197, 57, 41, 0.18) !important;
}
.e-btn.e-danger:not(.e-small):not(.e-disabled):not(:disabled):active {
    background:   #f9d0d0              !important;
    box-shadow:   none                 !important;
}

/* e-outline → transparente + borde sky */
.e-btn.e-outline:not(.e-small) {
    background: transparent            !important;
    border:     1.5px solid var(--pal-sky) !important;
    color:      var(--pal-sky-dk)      !important;
}
.e-btn.e-outline:not(.e-small):not(.e-disabled):not(:disabled):hover {
    background:   var(--pal-sky-xbg)  !important;
    border-color: var(--pal-sky-dk)   !important;
}

/* ════════════════════════════════════════════════════════════
   BOTONES — Forma FAB pill (Extended Material Design)
   ════════════════════════════════════════════════════════════ */
:is(
  .e-btn.e-primary,
  .e-btn.e-success,
  .e-btn.e-danger,
  .e-btn.e-warning,
  .e-btn.e-secondary,
  .e-btn.e-info,
  .e-btn.e-outline
):not(.e-small) {
    border-radius: var(--radius-pill) !important;
    height:        36px               !important;
    min-height:    36px               !important;
    padding:       0 20px             !important;
    font-size:     12px               !important;
    font-weight:   600                !important;
    letter-spacing: 0.06em           !important;
    text-transform: uppercase         !important;
    line-height:   1                  !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.14),
                0 1px 2px rgba(0,0,0,0.08) !important;
    transition: box-shadow var(--transition-std),
                transform  0.15s ease,
                background-color var(--transition-fast) !important;
}

/* Hover — sube */
:is(
  .e-btn.e-primary,
  .e-btn.e-success,
  .e-btn.e-danger,
  .e-btn.e-warning,
  .e-btn.e-secondary,
  .e-btn.e-info,
  .e-btn.e-outline
):not(.e-small):not(.e-disabled):not(:disabled):hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.20),
                0 2px 4px  rgba(0,0,0,0.10) !important;
    transform:  translateY(-1px) !important;
}

/* Presionado */
:is(
  .e-btn.e-primary,
  .e-btn.e-success,
  .e-btn.e-danger,
  .e-btn.e-warning,
  .e-btn.e-secondary,
  .e-btn.e-info,
  .e-btn.e-outline
):not(.e-small):not(.e-disabled):not(:disabled):active {
    box-shadow: 0 1px 3px rgba(0,0,0,0.16) !important;
    transform:  translateY(0) !important;
}

/* Deshabilitado */
:is(
  .e-btn.e-primary,
  .e-btn.e-success,
  .e-btn.e-danger,
  .e-btn.e-warning,
  .e-btn.e-secondary,
  .e-btn.e-info,
  .e-btn.e-outline
).e-disabled,
:is(
  .e-btn.e-primary,
  .e-btn.e-success,
  .e-btn.e-danger,
  .e-btn.e-warning,
  .e-btn.e-secondary,
  .e-btn.e-info,
  .e-btn.e-outline
):not(.e-small):disabled {
    box-shadow: none !important;
    transform:  none !important;
    opacity:    0.46 !important;
}

/* ── Mini FAB (e-small) ─────────────────────────────────────
   Círculo 32 × 32 px para toolbars y card-headers
   ─────────────────────────────────────────────────────────── */
.e-btn.e-small {
    width:          32px !important;
    height:         32px !important;
    min-width:      32px !important;
    padding:        0    !important;
    border-radius:  50%  !important;
    font-size:      13px !important;
    letter-spacing: 0    !important;
    text-transform: none !important;
    line-height:    1    !important;
    border:         none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.14) !important;
    transition: box-shadow var(--transition-std),
                transform  0.15s ease !important;
}

.e-btn.e-small:not(.e-disabled):not(:disabled):hover {
    box-shadow: 0 3px 8px rgba(0,0,0,0.20) !important;
    transform:  scale(1.08) !important;
}

.e-btn.e-small:not(.e-disabled):not(:disabled):active {
    transform:  scale(0.97) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12) !important;
}

.e-btn.e-outline.e-small {
    border:     1.5px solid currentColor !important;
    box-shadow: none                      !important;
    background: transparent               !important;
}
.e-btn.e-outline.e-small:hover { box-shadow: none !important; }

.e-btn.e-small.e-disabled,
.e-btn.e-small:disabled {
    box-shadow: none !important;
    transform:  none !important;
    opacity:    0.46 !important;
}

/* ════════════════════════════════════════════════════════════
   GRID — Colores de paleta
   ════════════════════════════════════════════════════════════ */

/* Tipografía base */
.e-grid .e-rowcell,
.e-grid .e-headercell {
    font-size: 13px;
    font-family: var(--font-sans);
}

/* Encabezado: fondo sky muy claro + texto sky oscuro */
.e-grid .e-headercell,
.e-grid .e-detailheadercell {
    background-color: var(--pal-sky-xbg)     !important;
    color:            var(--pal-sky-deep)    !important;
    font-size:        10.5px                 !important;
    font-weight:      700                    !important;
    letter-spacing:   0.055em              !important;
    text-transform:   uppercase              !important;
    border-bottom:    2px solid var(--pal-sky-bg) !important;
}

.e-grid .e-headercelldiv,
.e-grid .e-headercell .e-headertext {
    color: var(--pal-sky-deep) !important;
}

/* Iconos de sort */
.e-grid .e-icon-ascending::before,
.e-grid .e-icon-descending::before {
    color: var(--pal-sky-dk) !important;
}

/* Hover de fila */
.e-grid .e-row:hover .e-rowcell {
    background-color: var(--pal-sky-xbg) !important;
    color:            var(--pal-teal-dark) !important;
}

/* Fila seleccionada */
.e-grid .e-selectionbackground {
    background-color: var(--pal-sky-bg)   !important;
}
.e-grid .e-row.e-selectionbackground .e-rowcell {
    background-color: var(--pal-sky-bg)   !important;
    color:            var(--pal-teal-dark) !important;
}
.e-grid td.e-active {
    background-color: var(--pal-sky-bg)   !important;
    color:            var(--pal-teal-dark) !important;
}

/* Barra de paginación */
.e-grid .e-gridpager {
    background:  #fafcfd                      !important;
    border-top:  1px solid var(--border-soft) !important;
    font-size:   12px                         !important;
    font-family: var(--font-sans)             !important;
}

/* Número de página activo → naranja */
.e-pager .e-currentitem,
.e-pager .e-currentitem.e-numericitem {
    background:   var(--pal-orange)   !important;
    border-color: var(--pal-orange)   !important;
    color:        #ffffff             !important;
    font-weight:  700                 !important;
}

/* Hover en página */
.e-pager .e-numericitem:hover:not(.e-currentitem) {
    background:   var(--pal-sky-xbg) !important;
    border-color: var(--pal-sky)     !important;
    color:        var(--pal-sky-dk)  !important;
}

/* ════════════════════════════════════════════════════════════
   INPUTS — Foco naranja
   (TextBox, DatePicker, TimePicker, DropDown, etc.)
   ════════════════════════════════════════════════════════════ */

/* Línea inferior Material en foco */
.e-float-input.e-input-focus .e-float-line::before,
.e-float-input.e-input-focus .e-float-line::after,
.e-input-group.e-input-focus .e-float-line::before,
.e-input-group.e-input-focus .e-float-line::after {
    background: var(--pal-orange) !important;
    width: 50% !important;
}

/* Borde activo en inputs con borde */
.e-input-group.e-input-focus:not(.e-error),
.e-input-group.e-control-wrapper.e-input-focus:not(.e-error) {
    border-color: var(--pal-orange) !important;
}

/* Float label cuando el campo está activo */
.e-float-input.e-input-focus label.e-float-text,
.e-float-input.e-control-wrapper.e-input-focus label.e-float-text,
.e-float-input:not(.e-error).e-input-focus label.e-float-text {
    color: var(--pal-orange) !important;
}

/* Icono de calendario/reloj en foco */
.e-input-group.e-input-focus .e-input-group-icon,
.e-input-group.e-input-focus .e-ddl-icon {
    color: var(--pal-orange) !important;
}

/* DropDownList — ítem seleccionado */
.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-active.e-hover {
    background-color: var(--pal-orange-bg)   !important;
    color:            var(--pal-orange-deep) !important;
    font-weight:      600                    !important;
}

/* Hover en lista de dropdown */
.e-dropdownbase .e-list-item.e-hover:not(.e-active) {
    background-color: var(--pal-sky-xbg)  !important;
    color:            var(--pal-teal-dark) !important;
}

/* Checkbox en grid/lista */
.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--pal-sky)    !important;
    border-color:     var(--pal-sky)    !important;
}

.e-checkbox-wrapper:hover .e-frame,
.e-css.e-checkbox-wrapper:hover .e-frame {
    border-color: var(--pal-sky-dk) !important;
}