/* ================================================================
   UtilBox — Nuevo Tema v1.1   (Pizarra + Azul / Slate + Blue)
   Cargar DESPUÉS de style.css en estructura/header.php
   ================================================================ */

/* ── 1. TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Cromo: sidebar + navbar */
  --ut-chrome:          #1E293B;   /* slate-800 */
  --ut-chrome-2:        #334155;   /* slate-700 */
  --ut-chrome-3:        #475569;   /* slate-600 */
  --ut-chrome-border:   #0F1A2B;
  --ut-chrome-text:     #E2E8F0;   /* slate-200 */
  --ut-chrome-muted:    #94A3B8;   /* slate-400 */

  /* Acento principal */
  --ut-accent:          #3B82F6;   /* blue-500  */
  --ut-accent-dark:     #2563EB;   /* blue-600  */
  --ut-accent-light:    #EFF6FF;   /* blue-50   */
  --ut-accent-text:     #fff;

  /* Superficies de contenido */
  --ut-bg:              #F8FAFC;   /* slate-50  */
  --ut-surface:         #FFFFFF;
  --ut-surface-2:       #F1F5F9;   /* slate-100 */
  --ut-border:          #E2E8F0;   /* slate-200 */

  /* Sombras */
  --ut-shadow-xs: 0 1px 2px rgba(30,41,59,0.06);
  --ut-shadow-sm: 0 1px 3px rgba(30,41,59,0.10), 0 1px 2px rgba(30,41,59,0.06);
  --ut-shadow-md: 0 4px 6px -1px rgba(30,41,59,0.08), 0 2px 4px -2px rgba(30,41,59,0.05);

  /* Texto */
  --ut-ink:   #0F172A;   /* slate-900 */
  --ut-ink-2: #475569;   /* slate-600 */
  --ut-ink-3: #94A3B8;   /* slate-400 */

  /* Semántico: fabricación (verde) */
  --ut-verde:       #16a34a;   /* green-600  */
  --ut-verde-light: #dcfce7;   /* green-100  */
  --ut-verde-fg:    #14532d;   /* green-900  */

  /* Semántico: corte (rojo) */
  --ut-rojo:        #dc2626;   /* red-600    */
  --ut-rojo-light:  #fee2e2;   /* red-100    */
  --ut-rojo-fg:     #7f1d1d;   /* red-900    */

  /* Semántico: prensado (azul proceso) */
  --ut-azul:        #0891b2;   /* cyan-600   */
  --ut-azul-light:  #cffafe;   /* cyan-100   */
  --ut-azul-fg:     #164e63;   /* cyan-900   */

  /* Radios */
  --ut-r:    6px;
  --ut-r-sm: 4px;
  --ut-r-lg: 10px;

  /* Sidebar */
  --ut-sidebar-w: 240px;
  --ut-navbar-h:  63px;

  /* Tipografía */
  --ut-font: 'Manrope', system-ui, -apple-system, sans-serif;
  --ut-sz:    0.875rem;
  --ut-sz-s:  0.75rem;
  --ut-sz-xs: 0.6875rem;

  /* Transiciones */
  --ut-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ut-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ut-mid:  200ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}


/* ── 2. BASE ────────────────────────────────────────────────────── */
body {
  background:  #F8FAFC !important;
  color:       #0F172A;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size:   0.875rem;
}
a               { color: #3B82F6; }
a:hover         { color: #2563EB; }
.text-muted     { color: #94A3B8 !important; }
.text-secondary { color: #475569 !important; }
.fw-500         { font-weight: 500 !important; }
.breadcrumb-item.active { color: #94A3B8; }


/* ── 3. BARRA DE NAVEGACIÓN ─────────────────────────────────────── */
.navbar.default-layout {
  box-shadow:    0 1px 3px rgba(30,41,59,0.10), 0 1px 2px rgba(30,41,59,0.06) !important;
  border-bottom: none !important;
}
.navbar-brand-wrapper {
  background-color: #1E293B !important;
  border-right:     1px solid #0F1A2B !important;
  border-bottom:    none !important;
  box-shadow:       none !important;
}
.navbar-menu-wrapper {
  background-color: #1E293B !important;
  border-bottom:    none    !important;
  box-shadow:       none    !important;
}

/* Texto bienvenida */
.welcome-text,
.navbar-menu-wrapper h1.welcome-text {
  color:       #E2E8F0 !important;
  font-size:   0.9375rem !important;
  font-weight: 500 !important;
}
.welcome-text span,
.welcome-text .fw-bold { color: #fff !important; }

/* Links e iconos del navbar */
.navbar-menu-wrapper .nav-link {
  color:      #94A3B8 !important;
  transition: color 150ms;
}
.navbar-menu-wrapper .nav-link:hover { color: #E2E8F0 !important; }
.navbar-menu-wrapper [class^="icon-"],
.navbar-menu-wrapper [class*=" icon-"] { color: #94A3B8; }

/* Dropdowns */
.navbar-menu-wrapper .dropdown-menu {
  background:    #fff;
  border:        1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow:    0 4px 6px -1px rgba(30,41,59,0.08), 0 2px 4px -2px rgba(30,41,59,0.05);
  color:         #0F172A;
  padding:       6px;
}
.navbar-menu-wrapper .dropdown-item {
  color:         #475569;
  font-size:     0.875rem;
  border-radius: 4px;
  padding:       8px 12px;
  transition:    background 150ms;
}
.navbar-menu-wrapper .dropdown-item:hover {
  background: #F1F5F9;
  color:      #0F172A;
}
.navbar-menu-wrapper .dropdown-item p { color: #475569; }

/* Toggles */
.navbar-toggler-right,
.navbar-toggler-right .mdi-menu { color: #E2E8F0 !important; }

/* Nombre de planta */
.navbar-brand-wrapper p {
  color:          #94A3B8 !important;
  font-size:      0.6875rem !important;
  font-weight:    600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom:  0;
}


/* ── 4. SIDEBAR ─────────────────────────────────────────────────── */
.sidebar {
  background-color: #1E293B    !important;
  border-right:     1px solid #0F1A2B !important;
  box-shadow:       2px 0 12px rgba(30,41,59,0.20) !important;
  position:         sticky      !important;
  top:              63px        !important;
  height:           calc(100vh - 63px) !important;
  overflow-y:       auto        !important;
  align-self:       flex-start  !important;
  flex-shrink:      0           !important;
  z-index:          100         !important;
}

/* En desktop, el container-scroller tiene overflow:hidden en style.css
   lo que impide position:sticky. Se anula solo en pantallas grandes
   (en móvil debe quedar hidden para ocultar el sidebar off-canvas). */
@media (min-width: 992px) {
  .container-scroller {
    overflow: visible !important;
  }
}

.page-body-wrapper {
  overflow:     visible !important;
  align-items:  flex-start !important;
}

/* Items nivel raíz */
.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link {
  color:         #E2E8F0 !important;
  border-radius: 4px;
  margin:        1px 8px;
  padding:       9px 14px;
  transition:    background 150ms, color 150ms;
}
.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link:hover {
  background-color: #334155 !important;
  color:            #fff    !important;
}

/* Item activo */
.sidebar .nav .nav-item.active > .nav-link {
  background-color: #3B82F6 !important;
  color:            #fff    !important;
  box-shadow:       0 2px 8px rgba(59,130,246,0.35);
}

/* Categorías de sección */
.sidebar .nav-category {
  color:          #94A3B8;
  font-size:      0.6875rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:        18px 22px 4px;
  margin-top:     4px;
}

/* Iconos */
.sidebar .nav .nav-item .nav-link i.menu-icon {
  color:      #94A3B8 !important;
  transition: color 150ms;
}
.sidebar .nav .nav-item:hover .nav-link i,
.sidebar .nav .nav-item:hover .nav-link .menu-title,
.sidebar .nav .nav-item:hover .nav-link .menu-arrow { color: #fff !important; }

.sidebar .nav .nav-item.active > .nav-link i,
.sidebar .nav .nav-item.active > .nav-link .menu-title,
.sidebar .nav .nav-item.active > .nav-link .menu-arrow { color: #fff !important; }

/* Menú expandido */
.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link[aria-expanded="true"] {
  background-color: #334155 !important;
  color:            #fff    !important;
}
.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link[aria-expanded="true"] i {
  color: #fff !important;
}

/* Sub-menú */
.sidebar .nav.sub-menu {
  background: #151F2E;
  padding:    4px 0;
}
.sidebar .nav.sub-menu .nav-item::before {
  content: none;
}
.sidebar .nav.sub-menu .nav-item .nav-link {
  color:         #94A3B8 !important;
  font-size:     0.75rem;
  padding:       7px 14px 7px 40px;
  border-radius: 4px;
  margin:        1px 8px;
  transition:    background 150ms, color 150ms;
}
.sidebar .nav.sub-menu .nav-item .nav-link::before {
  content:       '';
  width:         5px;
  height:        5px;
  position:      absolute;
  top:           50%;
  left:          18px;
  transform:     translateY(-50%);
  border-radius: 50%;
  background:    #64748B;
  pointer-events: none;
}
.sidebar .nav.sub-menu .nav-item .nav-link:hover {
  color:            #E2E8F0 !important;
  background-color: #334155 !important;
}
.sidebar .nav.sub-menu .nav-item .nav-link:hover::before {
  background: #94A3B8;
}
.sidebar .nav.sub-menu .nav-item .nav-link.active {
  color:            #fff                      !important;
  font-weight:      600;
  background-color: rgba(59,130,246,0.22)     !important;
}
.sidebar .nav.sub-menu .nav-item .nav-link.active::before {
  background: #93C5FD;
}

/* Separador dentro de sub-menú */
.sidebar .nav.sub-menu hr { border-color: #0F1A2B; margin: 4px 16px; }

/* Sidebar minimizado — desktop */
@media (min-width: 992px) {
  .sidebar-icon-only .sidebar .nav .nav-item .nav-link i.menu-icon {
    color: #94A3B8 !important;
  }
  .sidebar-icon-only .sidebar .nav .nav-item.active .nav-link i.menu-icon {
    color: #fff !important;
  }
  .sidebar-icon-only .sidebar .nav .nav-item:hover .nav-link i.menu-icon {
    color: #fff !important;
  }
  .sidebar-icon-only .navbar-brand-wrapper { border-bottom: none !important; }
}


/* ── 5. PANEL PRINCIPAL ─────────────────────────────────────────── */
.page-body-wrapper  { background: #F8FAFC; }
.main-panel         { background: #F8FAFC; }
.content-wrapper {
  background: #F8FAFC !important;
  padding:    1.5rem  !important;
}
@media (max-width: 1400px) {
  .content-wrapper {
    background: #F8FAFC !important;
    padding:    1rem 1.5rem 1rem 2rem !important;
  }
}


/* ── 6. TARJETAS ───────────────────────────────────────────────── */
.card {
  background:    #fff      !important;
  border:        1px solid #E2E8F0 !important;
  border-radius: 10px      !important;
  box-shadow:    0 1px 3px rgba(30,41,59,0.10), 0 1px 2px rgba(30,41,59,0.06) !important;
  transition:    box-shadow 150ms, border-color 150ms;
}
.card:hover {
  box-shadow: 0 4px 6px -1px rgba(30,41,59,0.08), 0 2px 4px -2px rgba(30,41,59,0.05) !important;
}
.card-header {
  background:    #F1F5F9  !important;
  border-bottom: 1px solid #E2E8F0 !important;
  padding:       0.875rem 1.25rem  !important;
  font-weight:   600;
  font-size:     0.875rem;
  border-radius: 10px 10px 0 0    !important;
  color:         #0F172A           !important;
}
.card-body   { padding: 1.25rem; }
.card-footer {
  background:  #F1F5F9;
  border-top:  1px solid #E2E8F0;
  padding:     0.75rem 1.25rem;
  font-size:   0.75rem;
  color:       #475569;
}

/* Cabeceras de card con color inline gris antiguo — todas las variantes */
.card-header[style*="background:#8d8d8d"],
.card-header[style*="background: #8d8d8d"],
.card-header[style*="background:#6c757d"],
.card-header[style*="background: #6c757d"] {
  background:    #1E293B !important;
  color:         #fff    !important;
  border-radius: 10px 10px 0 0 !important;
}

/* Navbars internas (dentro de cards) con fondo gris inline */
.card .navbar[style*="background:#8d8d8d"],
.card .navbar[style*="background: #8d8d8d"],
.card-header .navbar[style*="background:#8d8d8d"],
.card-header .navbar[style*="background: #8d8d8d"] {
  background: transparent !important;
  box-shadow: none !important;
  border:     none !important;
}


/* ── 7. BOTONES ─────────────────────────────────────────────────── */

/* Primario */
.btn-utilbox {
  background:    #3B82F6 !important;
  color:         #fff    !important;
  border:        1px solid #3B82F6 !important;
  border-radius: 4px    !important;
  font-weight:   500    !important;
  transition:    background 150ms, border-color 150ms, box-shadow 150ms !important;
}
.btn-utilbox:hover, .btn-utilbox:focus {
  background:   #2563EB !important;
  border-color: #2563EB !important;
  color:        #fff    !important;
  box-shadow:   0 0 0 3px rgba(59,130,246,0.20) !important;
}
.btn-utilbox_d {
  background:    #2563EB !important;
  color:         #fff    !important;
  border:        1px solid #2563EB !important;
  border-radius: 4px     !important;
  font-weight:   500     !important;
  transition:    background 150ms !important;
}
.btn-utilbox_d:hover {
  background:   #3B82F6 !important;
  border-color: #3B82F6 !important;
  color:        #fff    !important;
}

/* Corte (rojo) */
.btn-red {
  background:    #fee2e2 !important;
  color:         #7f1d1d !important;
  border:        1px solid #dc2626 !important;
  border-radius: 4px     !important;
  font-weight:   500     !important;
  transition:    background 150ms, border-color 150ms !important;
}
.btn-red:hover, .btn-red:focus {
  background:   #dc2626 !important;
  border-color: #dc2626 !important;
  color:        #fff    !important;
  box-shadow:   0 0 0 3px rgba(220,38,38,0.20) !important;
}

/* Fabricación (verde) */
.btn-verde {
  background:    #dcfce7 !important;
  color:         #14532d !important;
  border:        1px solid #16a34a !important;
  border-radius: 4px     !important;
  font-weight:   500     !important;
  transition:    background 150ms, border-color 150ms !important;
}
.btn-verde:hover, .btn-verde:focus {
  background:   #16a34a !important;
  border-color: #16a34a !important;
  color:        #fff    !important;
  box-shadow:   0 0 0 3px rgba(22,163,74,0.20) !important;
}

/* Prensado (azul) */
.btn-azul {
  background:    #cffafe !important;
  color:         #164e63 !important;
  border:        1px solid #0891b2 !important;
  border-radius: 4px     !important;
  font-weight:   500     !important;
  transition:    background 150ms, border-color 150ms !important;
}
.btn-azul:hover, .btn-azul:focus {
  background:   #0891b2 !important;
  border-color: #0891b2 !important;
  color:        #fff    !important;
  box-shadow:   0 0 0 3px rgba(8,145,178,0.20) !important;
}

/* Outline secundario */
.btn-outline-secondary {
  color:         #475569 !important;
  border-color:  #E2E8F0 !important;
  border-radius: 4px     !important;
}
.btn-outline-secondary:hover {
  background:   #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  color:        #0F172A !important;
}


/* ── 8. TABLAS ──────────────────────────────────────────────────── */
.table {
  color:        #0F172A;
  border-color: #E2E8F0;
  font-size:    0.875rem;
  --bs-table-bg: transparent;
}
.table thead th,
.table-utilbox tr th {
  background:     #F1F5F9 !important;
  color:          #475569 !important;
  font-weight:    600;
  font-size:      0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom:  2px solid #E2E8F0 !important;
  padding:        10px 12px;
  vertical-align: middle;
  white-space:    nowrap;
}
.table tbody td {
  padding:        9px 12px;
  vertical-align: middle;
  border-color:   #E2E8F0;
}
.table tbody tr { transition: background 150ms; }
.table tbody tr:hover td,
.table-hover > tbody > tr:hover > * {
  background-color: #EFF6FF !important;
  --bs-table-accent-bg: #EFF6FF;
}
.table-bordered, .table-bordered td, .table-bordered th {
  border-color: #E2E8F0 !important;
}

/* DataTables paginación */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background:    #3B82F6 !important;
  color:         #fff    !important;
  border:        1px solid #3B82F6 !important;
  border-radius: 4px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):hover {
  background:    #F1F5F9 !important;
  color:         #0F172A !important;
  border:        1px solid #E2E8F0 !important;
  border-radius: 4px !important;
}
.dataTables_filter input,
.dataTables_length select {
  border:        1px solid #E2E8F0;
  border-radius: 4px;
  padding:       4px 8px;
  font-size:     0.75rem;
  color:         #0F172A;
  background:    #fff;
  transition:    border-color 150ms, box-shadow 150ms;
}
.dataTables_filter input:focus,
.dataTables_length select:focus {
  border-color: #3B82F6;
  box-shadow:   0 0 0 3px rgba(59,130,246,0.15);
  outline:      none;
}
.dataTables_info { font-size: 0.75rem; color: #94A3B8; }


/* ── 9. FORMULARIOS ─────────────────────────────────────────────── */
.form-control, .form-select {
  border:        1px solid #E2E8F0 !important;
  border-radius: 4px               !important;
  color:         #0F172A           !important;
  background:    #fff              !important;
  font-size:     0.875rem          !important;
  transition:    border-color 150ms, box-shadow 150ms !important;
}
.form-control:focus, .form-select:focus {
  border-color: #3B82F6                         !important;
  box-shadow:   0 0 0 3px rgba(59,130,246,0.15) !important;
  outline:      none                            !important;
}
.form-control::placeholder { color: #94A3B8; opacity: 1; }
.form-label {
  color:         #475569;
  font-weight:   500;
  font-size:     0.75rem;
  margin-bottom: 4px;
}
.form-check-input:checked {
  background-color: #3B82F6;
  border-color:     #3B82F6;
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.material-form .form-group input:valid ~ .control-label {
  color: #3B82F6 !important;
}

/* Choices.js */
.choices__list--multiple .choices__item {
  border:           1px solid #2563EB !important;
  color:            #fff              !important;
  background-color: #3B82F6          !important;
}
.choices__item:hover {
  border:           1px solid #2563EB !important;
  color:            #fff              !important;
  background-color: #2563EB          !important;
}
.choices__list--multiple .choices__item.is-highlighted {
  border:           1px solid #2563EB !important;
  color:            #fff              !important;
  background-color: #2563EB          !important;
}
.choices__list--dropdown {
  border:        1px solid #E2E8F0;
  border-radius: 4px;
  box-shadow:    0 4px 6px -1px rgba(30,41,59,0.08);
}
.choices__item--selectable.is-highlighted {
  background: #EFF6FF !important;
  color:      #0F172A !important;
}


/* ── 10. PAGINACIÓN ─────────────────────────────────────────────── */
.pagination .page-link {
  color:         #3B82F6;
  border-color:  #E2E8F0;
  border-radius: 4px;
  font-size:     0.75rem;
  padding:       5px 10px;
  transition:    background 150ms, color 150ms;
}
.pagination .page-link:hover {
  background:   #EFF6FF;
  border-color: #3B82F6;
  color:        #2563EB;
}
.pagination .page-item.active .page-link {
  background:   #3B82F6;
  border-color: #3B82F6;
  color:        #fff;
}
.pagination .page-item.disabled .page-link { color: #94A3B8; }


/* ── 11. BADGES Y ALERTAS ───────────────────────────────────────── */
.badge.bg-primary   { background: #3B82F6 !important; color: #fff !important; }
.badge.bg-success   { background: #16a34a !important; color: #fff !important; }
.badge.bg-danger    { background: #dc2626 !important; color: #fff !important; }
.badge.bg-info      { background: #0891b2 !important; color: #fff !important; }
.badge.bg-secondary { background: #F1F5F9 !important; color: #475569 !important; border: 1px solid #E2E8F0; }

.alert-success { background: #dcfce7; color: #14532d; border-color: #16a34a; }
.alert-danger  { background: #fee2e2; color: #7f1d1d; border-color: #dc2626; }
.alert-info    { background: #cffafe; color: #164e63; border-color: #0891b2; }
.alert-primary { background: #EFF6FF; color: #2563EB; border-color: #3B82F6; }


/* ── 12. COLORES SEMÁNTICOS — tablas de producción ─────────────── */
.th-prex { background: #dcfce7 !important; color: #14532d !important; }
.th-bloq { background: #fef3c7 !important; color: #78350f !important; }
.td-prex { background: #f0fdf4; }
.td-bloq { background: #fffbeb; }

/* Filas especiales */
tr.fila-mes td {
  background:  #1E293B !important;
  color:       #fff    !important;
  font-weight: 700;
}
tr.fila-res-mes td  { background: #dcfce7 !important; color: #14532d !important; }
tr.fila-res-anio td { background: #fef9c3 !important; color: #713f12 !important; }

/* Tabs de grupo */
.grupo-tab {
  border:        2px solid #E2E8F0 !important;
  background:    #fff              !important;
  color:         #475569           !important;
  border-radius: 4px               !important;
  font-weight:   500               !important;
  transition:    background 150ms, color 150ms, border-color 150ms !important;
}
.grupo-tab:hover          { border-color: #3B82F6 !important; color: #3B82F6 !important; }
.grupo-tab.activo         { background: #1E293B !important; color: #fff !important; border-color: #1E293B !important; }
/* El color de cada grupo se edita en Gestión de Grupos: cada pantalla lo imprime con gr_css_pestanas_grupo() */


/* ── 13. FOOTER ─────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid #E2E8F0;
  color:      #94A3B8;
  font-size:  0.75rem;
  background: #fff;
}
.footer a { color: #3B82F6; }


/* ── 14. SCROLLBAR (webkit) ─────────────────────────────────────── */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: #E2E8F0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }


/* ── 15. RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .content-wrapper {
    padding: 1rem !important;
  }
  .main-panel {
    width:       100% !important;
    margin-left: 0   !important;
  }
  .card-body   { padding: 1rem; }
  .card-header { padding: 0.75rem 1rem; }
  .sidebar-offcanvas {
    transition: transform 200ms cubic-bezier(0.4,0,0.2,1) !important;
    will-change: transform;
  }
  .table-responsive {
    border-radius: 10px;
    overflow:      hidden;
    border:        1px solid #E2E8F0;
    box-shadow:    0 1px 3px rgba(30,41,59,0.10);
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .content-wrapper { padding: 1.25rem !important; }
}