:root{
  --nav-blue:#1f74cf; /* azul cristal estilo Windows 7 Aero */
  --nav-blue-light:#bfe3ff;
  --nav-blue-deep:#062f6e;
  --accent:#14b8a6;
  --btn-add:#16a34a;
  --btn-edit:#1d4ed8;
  --btn-del:#dc2626;
}

html,
body{
  height:100%;
}

body{
  font-size:12px;
  overflow:hidden;
}

/* Uniformar tamaño de inputs/selects/textareas (Bootstrap puede imponer mayores) */
.form-control,
.form-select,
.form-select-sm,
.form-control-sm,
textarea.form-control,
input.form-control,
select.form-select,
.dataTables_filter input,
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="search"],
textarea,
select {
  font-size:12px !important;
}

/* Ajuste ligero para que el alto no se vea enorme */
.form-control,
.form-select {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Borde más oscuro para inputs/selects en todo el sitio (fuera del login,
   que ya tiene su propio estilo de vidrio translúcido con borde propio). */
.form-control,
.form-select,
.form-control-sm,
.form-select-sm,
textarea.form-control,
input.form-control,
select.form-select {
  border-color: #7BAFE3;
}
.form-control:focus,
.form-select:focus {
  border-color: #7BAFE3;
  box-shadow: 0 0 0 .2rem rgba(123, 175, 227, .35);
}

label,
.form-label {
  font-size:12px !important;
}

.app-shell{
  display:block;
  height:100vh;
  overflow:hidden;
}

/* ===== Aero glass (estilo Windows 7 "Hydrogen") =====
   Capas: degradado vertical azul cristal + brillo especular superior (::before)
   + veta de luz diagonal (::after) para el efecto vidrio. */
.sidebar{
  width:260px;
  position:fixed;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.28) 0%,
      rgba(210,236,255,.14) 4%,
      rgba(210,236,255,0) 9%
    ),
    linear-gradient(180deg,
      #6fb3ec 0%,
      #4d99e2 8%,
      #2e7fd4 20%,
      #1c65bf 36%,
      #114fa0 54%,
      #0a3a80 76%,
      #062347 100%
    );
  color:#fff;
  display:flex;
  flex-direction:column;
  height:100vh;
  top:0;
  left:0;
  bottom:0;
  z-index:1025;
  overflow:hidden;
  transition: width .2s ease;
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.25),
    inset 1px 0 0 rgba(255,255,255,.08),
    6px 0 22px rgba(6,20,45,.35);
}

/* Brillo especular curvo (el "reflejo" típico del cristal Aero) */
.sidebar::before{
  content:"";
  position:absolute;
  top:-90px;
  left:-30%;
  width:160%;
  height:150px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.55) 0%, rgba(255,255,255,.2) 40%, rgba(255,255,255,0) 70%);
  filter: blur(2px);
  pointer-events:none;
  z-index:0;
}

/* Veta de luz diagonal sutil, como el chispazo de una superficie de vidrio */
.sidebar::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,0) 82%, rgba(255,255,255,.10) 100%);
  pointer-events:none;
  z-index:0;
}

.sidebar-collapsed{
  width:70px;
}

.sidebar-header{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 10px;
  flex:0 0 auto;
  border-bottom:1px solid rgba(255,255,255,.28);
}

.sidebar-title{
  font-weight:700;
  letter-spacing:.5px;
  font-size:12px;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
}

.sidebar-nav{
  position:relative;
  z-index:1;
  flex:1;
  padding:10px;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}

.sidebar-main{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}

.sidebar-scroll{
  overflow-y:auto;
  height:100%;
  padding-right:2px;
  scrollbar-width: thin;
}

.sidebar-scroll::-webkit-scrollbar{
  width:6px;
}

.sidebar-scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.35);
  border-radius:999px;
}

.sidebar-link{
  display:flex;
  gap:9px;
  align-items:center;
  color:#e6f0ff;
  text-decoration:none;
  padding:8px 9px;
  border:1px solid transparent;
  border-radius:12px;
  margin-bottom:7px;
  position:relative;
  transition:background-color .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
}

.sidebar-icon{
  width:28px;
  height:28px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 28px;
  color:var(--item-color, #bfdbfe);
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

.sidebar-icon i{
  font-size:15px;
  line-height:1;
}

.sidebar-link:hover{
  background: rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.28);
  color:#fff;
  transform:translateX(2px);
}

.sidebar-link:hover .sidebar-icon{
  background:rgba(255,255,255,.25);
}

.sidebar-link.active,
.sidebar-link[aria-current="page"]{
  background:linear-gradient(90deg, rgba(255,255,255,.32), rgba(255,255,255,.14));
  border-color:rgba(255,255,255,.32);
  color:#fff;
  font-weight:700;
  box-shadow:inset 4px 0 0 var(--item-color, #fff), 0 8px 18px rgba(0,0,0,.12);
}

.sidebar-link.active .sidebar-icon,
.sidebar-link[aria-current="page"] .sidebar-icon{
  color:#082f73;
  background:var(--item-color, #bfdbfe);
  box-shadow:0 5px 12px rgba(0,0,0,.18);
}

.sidebar-label{
  white-space:nowrap;
}

.sidebar-collapsed .sidebar-label{
  display:none;
}

.sidebar-collapsed .sidebar-title{
  display:none;
}

.sidebar-collapsed .sidebar-header{
  justify-content:center;
}

.sidebar-collapsed .sidebar-link{
  justify-content:center;
  padding:8px 6px;
}

.sidebar-collapsed .sidebar-link:hover{
  transform:none;
}

.sidebar-footer{
  position:relative;
  z-index:1;
  padding:10px;
  flex:0 0 auto;
  border-top:1px solid rgba(255,255,255,.3);
  background:linear-gradient(180deg, rgba(6,35,71,.2), rgba(4,20,40,.6));
}

.sidebar-link-account{
  margin-bottom:10px;
}

.logout-btn{
  border-radius:999px;
  padding:8px 12px;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  background:linear-gradient(180deg, #ef4444, #b91c1c);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 18px rgba(127,29,29,.22);
}

.logout-btn:hover{
  background:linear-gradient(180deg, #f87171, #dc2626);
  border-color:rgba(255,255,255,.26);
}

.sidebar-collapsed .logout-btn{
  padding:8px;
  width:42px;
}

.sidebar-collapsed .sidebar-footer{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.sidebar-collapsed .logout-text{
  display:none;
}

.content{
  background:#fff;
  margin-left:260px;
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  min-width:0;
  transition:margin-left .2s ease;
}

.sidebar.sidebar-collapsed + .content{
  margin-left:70px;
}

/* Div del título (topbar) con el mismo vidrio azul cristal */
.topbar{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.08) 30%, rgba(255,255,255,0) 55%),
    linear-gradient(90deg, #4d99e2 0%, #2e7fd4 22%, #1c65bf 44%, #114fa0 68%, #062347 100%);
  border-bottom:1px solid rgba(255,255,255,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 4px 14px rgba(6,20,45,.28);
  color:#fff;
}

.topbar-brand{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.topbar-title{
  font-weight:700;
  color:#fff;
  letter-spacing:.3px;
  text-shadow:0 1px 2px rgba(0,0,0,.22);
}

.topbar-timezone{
  color:rgba(255,255,255,.85);
  font-size:11px;
}

.topbar-meta{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  color:#fff;
}

.topbar-clock,
.topbar-user{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#fff;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  padding:5px 10px;
  line-height:1.2;
}

.topbar-clock i{
  color:#e6f4ff;
}

@media (max-width: 767.98px){
  .topbar{
    align-items:flex-start;
    flex-direction:column;
  }

  .topbar-meta{
    justify-content:flex-start;
  }
}

.table-scroll{
  border:1px solid #eef2f7;
  border-radius:10px;
  overflow:auto;
  scrollbar-width: thin;
  max-height: 460px;
}

/* Tabla con scroll horizontal arriba y abajo */
.table-scroll-x{
  border:1px solid #eef2f7;
  border-radius:10px;
}

.table-scroll-x__bar{
  overflow-x:auto;
  overflow-y:hidden;
  height:14px;
  scrollbar-width: thin;
}

.table-scroll-x__bar::-webkit-scrollbar{ height:6px; }

.table-scroll-x__spacer{
  height:1px;
}

.table-scroll-x__body{
  overflow-x:auto;
  overflow-y:auto;
  scrollbar-width:none;
}

.table-scroll-x__body::-webkit-scrollbar{ width:0; height:0; }

/* Estilo general de tablas */
thead th{
  background: var(--nav-blue) !important;
  color:#fff !important;
  font-weight:700;
  font-size:12px;
}

/* “Zebra” + hover (pintado a nivel de celda para que se vea siempre) */
table.table > tbody > tr:nth-of-type(odd) > td{
  background-color:#f8fafc !important;
}

table.table > tbody > tr:nth-of-type(even) > td{
  background-color:#eef2f7 !important;
}

table.table > tbody > tr:hover > td{
  background-color:#dbeafe !important;
  box-shadow: inset 0 0 0 999px rgba(219,234,254,0.25);
}

table.table > tbody > tr > td{
  transition: background-color .12s ease;
}

/* Filas con estado (rechazado/aprobado, etc.): el "zebra" de arriba pinta
   el <td> con !important, lo que tapaba por completo el rojo/gris de
   Bootstrap (.table-danger/.table-secondary) en la fila. Estas reglas van
   después a propósito (misma especificidad, pero orden de declaración
   posterior) para que el color de estado gane sobre el zebra, tanto en
   reposo como al pasar el mouse encima. */
table.table > tbody > tr.table-danger > td{
  background-color:#f8d7da !important;
}
table.table > tbody > tr.table-danger:hover > td{
  background-color:#f1aeb5 !important;
}
table.table > tbody > tr.table-secondary > td{
  background-color:#e2e3e5 !important;
}
table.table > tbody > tr.table-secondary:hover > td{
  background-color:#c9cbcd !important;
}

/* Modales fullscreen: header/footer tipo barra */
.modal-fullscreen .modal-content{
  display:flex;
  flex-direction:column;
}

.modal-fullscreen .modal-header{
  padding:6px 14px;
  min-height: 44px;
  background: var(--nav-blue);
  border-bottom: 0;
  align-items:center;
  position:relative;
}

.modal-fullscreen .modal-header .modal-title{
  flex: 1;
  text-align:center;
  color:#fff;
  font-weight:700;
  font-size: 12px;
  margin:0;
}

.modal-exit-btn{
  background:#dc2626 !important;
  border:0 !important;
  color:#fff !important;
  width:30px;
  height:30px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.modal-exit-btn i{
  font-size:18px;
  line-height:1;
}

.modal-fullscreen .modal-body{
  flex: 1 1 auto;
}

.modal-fullscreen .modal-footer{
  margin-top:auto;
  padding:6px 14px;
  background:#000;
  border-top: 0;
}

.modal-fullscreen .modal-footer .btn{
  font-size: 12px;
  padding: 6px 12px;
}

.modal-fullscreen .modal-footer .btn[data-bs-dismiss="modal"]{
  background:#dc2626 !important;
  border-color:#dc2626 !important;
  color:#fff !important;
}

.user-modal-body{
  overflow-y:auto;
  max-height: calc(100vh - 210px);
}

.config-tile{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  justify-content:center;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:14px;
  text-decoration:none;
  color:var(--nav-blue);
  padding:18px 10px;
  height:130px;
  transition:transform .1s ease;
}

.config-tile:hover{ transform: translateY(-1px); }
.config-tile i{ font-size:28px; }
.config-tile-label{ font-weight:700; }

.login-body{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.08) 26%, rgba(255,255,255,0) 48%),
    linear-gradient(160deg, #4d99e2 0%, #2e7fd4 24%, #1c65bf 46%, #114fa0 68%, #062347 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}

/* Fondo de sucursal (imagen fija, sucursal_activa.png): va detrás de la
   animación de Fred, complementando el fondo. Mismo criterio de tamaño
   (ancho completo, proporción respetada). */
.sucursal-activa-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image: url('../img/sucursal_activa.png');
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:100% auto;
}

/* Fondo animado de Fred (frames vista/img/tomi/01..25 sueltos, PNG sin
   fondo): abarca todo el ancho disponible, cada frame se ajusta a ese ancho
   manteniendo su proporción, anclado abajo (el personaje queda en la parte
   baja de cada frame). Los frames se alternan por JS. */
.fred-frames-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

/* Dos capas <img> superpuestas que se alternan (en vez de reescribir
   background-image en cada frame, que provocaba un parpadeo tipo "foco a
   punto de fundirse" cuando el navegador aún no tenía el frame nuevo
   decodificado). */
.fred-frames-bg-img{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center bottom;
  opacity:1;
  /* Crossfade desactivado (prueba). Para restaurarlo: transition:opacity 90ms linear; */
}
.fred-frames-bg-img--oculta{
  opacity:0;
}
@media (prefers-reduced-motion: reduce){
  .fred-frames-bg-img{
    transition:none;
  }
}

/* ===== Burbujas flotantes (pantalla de bienvenida estilo Aero) ===== */
.bubbles{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.bubble{
  position:absolute;
  bottom:-18vh;
  left:var(--bx, 50%);
  width:var(--bs, 60px);
  height:var(--bs, 60px);
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.16) 42%, rgba(255,255,255,.03) 72%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:
    inset 0 0 16px rgba(255,255,255,.4),
    inset 0 0 3px rgba(255,255,255,.6),
    0 0 10px rgba(255,255,255,.08);
  opacity:0;
  animation: bubbleFloat var(--bd, 22s) ease-in-out infinite;
  animation-delay: var(--bdelay, 0s);
}

.bubble::before{
  content:"";
  position:absolute;
  top:16%;
  left:20%;
  width:36%;
  height:20%;
  background:rgba(255,255,255,.4);
  border-radius:50%;
  transform:rotate(-25deg);
  filter:blur(1px);
}

@keyframes bubbleFloat{
  0%{
    transform: translate3d(0, 0, 0) scale(.85);
    opacity:0;
  }
  10%{
    opacity:.85;
  }
  50%{
    transform: translate3d(var(--bdrift, 30px), -55vh, 0) scale(1.05);
    opacity:.65;
  }
  90%{
    opacity:.35;
  }
  100%{
    transform: translate3d(calc(var(--bdrift, 30px) * 1.8), -118vh, 0) scale(.95);
    opacity:0;
  }
}

@media (prefers-reduced-motion: reduce){
  .bubble{ animation: none; opacity:.25; }
}

/* Vidrio traslúcido tipo "glassmorphism": fondo casi transparente + blur
   fuerte, borde tenue y sombra difusa — el fondo de burbujas que ya existe
   se ve a través de la tarjeta en vez de quedar tapado por un blanco sólido. */
.login-card{
  position:relative;
  z-index:1;
  background: rgba(255,255,255,.13);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  width: min(400px, 92vw);
  border-radius:12px;
  padding:42px 32px;
  border:2px solid rgba(255,255,255,.16);
  box-shadow: 0 0 40px rgba(8,7,16,.55);
}

/* Textos en blanco (como sobre el cristal), con una sombra suave para que
   no se pierdan contra las zonas más claras del degradado de fondo. */
.login-card h3,
.login-card .form-label,
.login-card .login-links,
.login-card .form-check-label,
.login-card .login-forgot{
  color:#ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

.login-card .form-label{
  font-weight:500;
  margin-bottom:.4rem;
}

.login-card .form-control{
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
}
.login-card .form-control::placeholder{ color: rgba(255,255,255,.65); }
.login-card .form-control:focus{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.4);
  color:#fff;
  box-shadow:none;
}

/* Logo del login: es un banner horizontal (no cuadrado), así que se deja
   con su ancho/alto natural (max-width acotado, alto libre) en vez de
   forzarlo dentro de un recuadro cuadrado tipo ícono. */
.login-logo-wrap{
  display:flex;
  justify-content:center;
}

.login-logo-img{
  width:100%;
  max-width:280px;
  height:auto;
  object-fit:contain;
}

/* Botón ENTRAR: sólido/blanco, a juego con la plantilla de referencia. */
.btn-glass-entrar{
  margin-top:8px;
  display:block;
  width:100%;
  background-color:#ffffff;
  color:#080710;
  padding:13px 0;
  font-size:16px;
  font-weight:600;
  letter-spacing:.03em;
  border:none;
  border-radius:6px;
  cursor:pointer;
  transition: background-color .15s ease, transform .1s ease;
}
.btn-glass-entrar:hover{ background-color:#eef1f6; }
.btn-glass-entrar:active{ transform: translateY(1px); }

/* "Crear cuenta": mismo lenguaje visual que el botón social de la
   plantilla de referencia, pero pendiente (solo avisa "Próximamente"). */
.login-card .social{
  margin-top:16px;
}
.login-card .crear-cuenta{
  width:100%;
  border-radius:6px;
  padding:10px 12px;
  background-color: rgba(255,255,255,.14);
  color:#eaf0fb;
  text-align:center;
  font-size:14px;
  font-weight:500;
  letter-spacing:.03em;
  cursor:pointer;
  user-select:none;
  transition: background-color .15s ease;
}
.login-card .crear-cuenta:hover{
  background-color: rgba(255,255,255,.26);
}
.login-card .crear-cuenta i{ margin-right:6px; }

.login-links a{
  color: var(--nav-blue);
  text-decoration: none;
  font-size:12px;
}

.login-forgot{
  white-space:nowrap;
}

.login-forgot:hover{
  text-decoration: underline;
}

/* Botón regresar (anaranjado) */
.btn-regresar{
  background:#f97316 !important;
  border-color:#f97316 !important;
  color:#fff !important;
  box-shadow:none;
}

.btn-regresar:hover{
  background:#fb8b3a !important;
  border-color:#fb8b3a !important;
  color:#fff !important;
}

.btn-regresar i{ margin-right:6px; }

/* Tabs: activo con color nav, inactivo gris oscuro */
.nav-tabs .nav-link.active{
  background: var(--nav-blue) !important;
  border-color: var(--nav-blue) !important;
  color:#fff !important;
  font-weight:700;
}

.nav-tabs .nav-link{
  color:#374151 !important;
}

.nav-tabs .nav-link:not(.active){
  background:#d1d5db !important;
  border-color:#b6bcc4 !important;
}

.doc-pre{
  max-height: 70vh;
  overflow:auto;
  border:1px solid #eef2f7;
  border-radius:10px;
  background:#fff;
  padding:12px;
}

.doc-pre pre{
  margin:0;
  font-size:12px;
  line-height:1.45;
  white-space:pre-wrap;
}


/* Botones "metálicos" (degradado + texto blanco), reutilizables en cualquier vista. */
.btn-metalico {
  position: relative;
  overflow: hidden;
  color: #fff;
  border: none;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}
.btn-metalico:hover, .btn-metalico:focus {
  color: #fff;
}
.btn-metalico-plata {
  background: linear-gradient(135deg, #8e9aa3 0%, #cfd6db 45%, #6b7680 100%);
  box-shadow: 0 2px 6px rgba(107, 118, 128, 0.5);
}
.btn-metalico-plata:hover, .btn-metalico-plata:focus {
  background: linear-gradient(135deg, #7c8891 0%, #cfd6db 45%, #5a6570 100%);
}
.btn-metalico-azul {
  background: linear-gradient(135deg, #3a6fa8 0%, #7bb3e8 45%, #294f7d 100%);
  box-shadow: 0 2px 6px rgba(41, 79, 125, 0.5);
}
.btn-metalico-azul:hover, .btn-metalico-azul:focus {
  background: linear-gradient(135deg, #2f5c8c 0%, #7bb3e8 45%, #1f3d61 100%);
}
.btn-metalico-verde {
  background: linear-gradient(135deg, #2f8a5a 0%, #7fd6a8 45%, #1f6440 100%);
  box-shadow: 0 2px 6px rgba(31, 100, 64, 0.5);
}
.btn-metalico-verde:hover, .btn-metalico-verde:focus {
  background: linear-gradient(135deg, #26714a 0%, #7fd6a8 45%, #184e32 100%);
}
.btn-naranja {
  background-color: #f97316;
  border: none;
  color: #fff;
}
.btn-naranja:hover, .btn-naranja:focus {
  background-color: #fb8b3a;
  color: #fff;
}
.btn-naranja:disabled {
  background-color: #fac495;
  opacity: 1;
  color: #fff;
}
.btn-naranja:disabled i {
  color: #fff;
}
.btn-naranja i {
  color: #fff;
}
.btn-morado-oscuro {
  background-color: #4c1d95;
  border: none;
  color: #fff;
}
.btn-morado-oscuro:hover, .btn-morado-oscuro:focus {
  background-color: #5b21b6;
  color: #fff;
}
.btn-morado-oscuro:disabled {
  background-color: #a78bda;
  opacity: 1;
  color: #fff;
}
.btn-morado-oscuro:disabled i {
  color: #fff;
}
.btn-morado-oscuro i {
  color: #fff;
}
.btn-azul-oscuro {
  background-color: #1e3a8a;
  border: none;
  color: #fff;
}
.btn-azul-oscuro:hover, .btn-azul-oscuro:focus {
  background-color: #24469e;
  color: #fff;
}
.btn-azul-oscuro:disabled {
  background-color: #8ea0d0;
  opacity: 1;
  color: #fff;
}
.btn-azul-oscuro:disabled i {
  color: #fff;
}
.btn-azul-oscuro i {
  color: #fff;
}
.btn-verde-oscuro {
  background-color: #14532d;
  border: none;
  color: #fff;
}
.btn-verde-oscuro:hover, .btn-verde-oscuro:focus {
  background-color: #196638;
  color: #fff;
}
.btn-verde-oscuro:disabled {
  background-color: #8fb99e;
  opacity: 1;
  color: #fff;
}
.btn-verde-oscuro:disabled i {
  color: #fff;
}
.btn-verde-oscuro i {
  color: #fff;
}


/* Badge de período (Mis insumos): grande, centrado y "parpadeante" para que
   se sienta como un semáforo de servicio abierto/cerrado a simple vista. */
.badge-periodo {
  font-size: 1.05rem;
  padding: .6rem 1.4rem;
  border-radius: 999px;
  letter-spacing: .02em;
  display: inline-block;
}

.badge-periodo-abierto {
  animation: badgePeriodoPulsoVerde 1.6s ease-in-out infinite;
}
@keyframes badgePeriodoPulsoVerde {
  0%, 100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, .55); opacity: 1; }
  50% { box-shadow: 0 0 0 12px rgba(25, 135, 84, 0); opacity: .85; }
}

.badge-periodo-bloqueado {
  animation: badgePeriodoPulsoAmbar 1.4s ease-in-out infinite;
}
@keyframes badgePeriodoPulsoAmbar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, .55); opacity: 1; }
  50% { box-shadow: 0 0 0 12px rgba(255, 193, 7, 0); opacity: .85; }
}

.badge-periodo-cerrado {
  animation: badgePeriodoParpadeoGris 1.8s ease-in-out infinite;
}
@keyframes badgePeriodoParpadeoGris {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* Modal "Solicitar cuenta" (login): estilo azul marino translúcido, a juego
   con el vidrio (glassmorphism) del login-card. */
.crear-cuenta-modal .modal-content{
  background: rgba(10, 22, 48, .72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(147, 197, 253, .25);
  border-radius: 14px;
  box-shadow: 0 0 40px rgba(2, 8, 23, .55);
  color: #eaf0fb;
}
.crear-cuenta-modal .modal-header,
.crear-cuenta-modal .modal-footer{
  border-color: rgba(147, 197, 253, .18);
}
.crear-cuenta-modal .modal-title{
  color: #eaf0fb;
}
.crear-cuenta-modal .btn-close{
  filter: invert(1) grayscale(100%) brightness(200%);
}
.crear-cuenta-modal .form-label{
  color: #cfe0fb;
  font-size: 13px;
}
.crear-cuenta-modal .form-control{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(147, 197, 253, .3);
  color: #eaf0fb;
}
.crear-cuenta-modal .form-control::placeholder{
  color: rgba(234,240,251,.55);
}
.crear-cuenta-modal .form-control:focus{
  background: rgba(255,255,255,.14);
  border-color: rgba(147, 197, 253, .6);
  box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .25);
  color: #eaf0fb;
}
.crear-cuenta-modal .modal-body p.text-muted{
  color: rgba(234,240,251,.7) !important;
}
.crear-cuenta-modal .btn-secondary{
  background: rgba(255,255,255,.1);
  border-color: rgba(147, 197, 253, .3);
  color: #eaf0fb;
}
.crear-cuenta-modal .btn-secondary:hover{
  background: rgba(255,255,255,.18);
}
.crear-cuenta-modal .modal-backdrop{
  background: #020817;
}


/* El dropdown de notificaciones no se veía: .topbar tiene overflow:hidden
   (para recortar el degradado de vidrio) y eso también recortaba el menú
   desplegable, que es descendiente suyo y se posiciona absoluto. Como el
   menú es chico y siempre cuelga del botón de notificaciones (extremo
   derecho del topbar), basta con permitir overflow visible verticalmente
   sin perder el recorte horizontal del degradado.*/
.topbar{
  overflow-x:hidden;
  overflow-y:visible;
}
.topbar-notificaciones{
  position: relative;
  z-index: 1030;
}
#notifDropdownMenu{
  z-index: 1030;
}

/* ===== Fondo "océano" para la sección Configuración =====
   Solo afecta al contenedor .configuracion-oceano (nunca al body ni al
   layout general): burbujas ascendiendo + un submarino animado detrás de
   los cuadros de acceso, que se vuelven traslúcidos (glassmorphism) para
   dejar ver la animación a través de ellos. */
.configuracion-oceano{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background: linear-gradient(180deg, #cdeaf7 0%, #8fc7e8 45%, #4f8fc4 100%);
  padding:24px 16px;
  min-height:320px;
}

.configuracion-oceano-content{
  position:relative;
  z-index:2;
}

.oceano-bubbles{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.oceano-bubble{
  position:absolute;
  bottom:-40px;
  left:var(--bx, 50%);
  width:var(--bs, 30px);
  height:var(--bs, 30px);
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.6) 0%, rgba(255,255,255,.18) 42%, rgba(255,255,255,.03) 72%);
  border:1px solid rgba(255,255,255,.32);
  box-shadow:
    inset 0 0 10px rgba(255,255,255,.4),
    inset 0 0 2px rgba(255,255,255,.6);
  opacity:0;
  animation: oceanoBubbleFloat var(--bd, 20s) ease-in-out infinite;
  animation-delay: var(--bdelay, 0s);
}

@keyframes oceanoBubbleFloat{
  0%{
    transform: translate3d(0, 0, 0) scale(.85);
    opacity:0;
  }
  10%{ opacity:.8; }
  50%{
    transform: translate3d(var(--bdrift, 20px), -260px, 0) scale(1.05);
    opacity:.6;
  }
  90%{ opacity:.3; }
  100%{
    transform: translate3d(calc(var(--bdrift, 20px) * 2), -420px, 0) scale(1.1);
    opacity:0;
  }
}

.oceano-submarino-wrap{
  position:absolute;
  z-index:1;
  right:2%;
  bottom:6%;
  width:min(46%, 340px);
  pointer-events:none;
}

.oceano-submarino{
  width:100%;
  height:auto;
  filter: drop-shadow(0 8px 14px rgba(6,20,45,.25));
  animation: oceanoSubmarinoFloat 10s ease-in-out infinite;
  transform-origin: 50% 50%;
}

@keyframes oceanoSubmarinoFloat{
  0%{ transform:none; }
  25%{ transform: translateY(-14px) translateX(6px) rotate(2deg); }
  50%{ transform: translateY(8px) translateX(-8px) rotate(-2deg); }
  75%{ transform: translateY(-14px) translateX(8px) rotate(-2deg); }
  100%{ transform: translateY(0) translateX(0) rotate(0deg); }
}

@media (max-width: 576px){
  .oceano-submarino-wrap{ width:64%; opacity:.85; }
}

@media (prefers-reduced-motion: reduce){
  .oceano-bubble{ animation:none; opacity:.2; }
  .oceano-submarino{ animation:none; }
}

/* Cuadros de acceso traslúcidos dentro del fondo océano, para dejar ver la
   animación a través de ellos. */
.configuracion-oceano .config-tile{
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.45);
  color:#fff;
  box-shadow: 0 4px 14px rgba(6,20,45,.2);
}
.configuracion-oceano .config-tile:hover{
  background: rgba(255,255,255,.34);
  transform: translateY(-2px);
}
.configuracion-oceano .config-tile i,
.configuracion-oceano .config-tile-label{
  color:#0a1a3f;
  text-shadow: 0 1px 2px rgba(255,255,255,.35);
}

/* ===== Modal "Solicitud de cuenta": paneles encapsulados + botones placa
   metálica ===== */
.soc-panel{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:16px;
}
.soc-panel-title{
  color:var(--nav-blue-deep);
  font-weight:700;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:8px;
}
.soc-panel-solicitud{
  background:#f1f6fb;
}
.soc-panel-cuenta{
  background:#f4f9f5;
}

/* Botones "placa metálica": degradado con relieve tipo placa de metal y un
   brillo diagonal sutil que recorre el botón lentamente. Se mantiene de
   baja opacidad a propósito para que el texto siga siendo legible mientras
   pasa el brillo. */
.btn-placa-metalica{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  font-weight:600;
  letter-spacing:.02em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -2px 3px rgba(0,0,0,.18),
    0 2px 5px rgba(0,0,0,.25);
}
.btn-placa-metalica-label{
  position:relative;
  z-index:2;
  text-shadow:0 1px 1px rgba(0,0,0,.4);
}
.btn-placa-metalica::before{
  content:"";
  position:absolute;
  top:0;
  left:-60%;
  width:35%;
  height:100%;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-20deg);
  animation: placaMetalicaBrillo 6s ease-in-out infinite;
}
.btn-placa-metalica-verde{
  background:linear-gradient(180deg, #4f9d6c 0%, #2f7a4c 55%, #205934 100%);
}
.btn-placa-metalica-verde:hover{
  background:linear-gradient(180deg, #5aab78 0%, #368657 55%, #26643b 100%);
  color:#fff;
}
.btn-placa-metalica-rojo{
  background:linear-gradient(180deg, #c8585a 0%, #a5393b 55%, #7c2628 100%);
}
.btn-placa-metalica-rojo:hover{
  background:linear-gradient(180deg, #d4666a 0%, #b24345 55%, #8a2c2e 100%);
  color:#fff;
}
.btn-placa-metalica:disabled{
  background:linear-gradient(180deg, #9aa4ad 0%, #737d85 55%, #545c63 100%);
  color:rgba(255,255,255,.7);
  box-shadow:none;
}
.btn-placa-metalica:disabled::before{
  animation:none;
  display:none;
}

@keyframes placaMetalicaBrillo{
  0%{ left:-60%; }
  45%{ left:120%; }
  100%{ left:120%; }
}

@media (prefers-reduced-motion: reduce){
  .btn-placa-metalica::before{ animation:none; display:none; }
}

/* ===== Modal de revisión (solicitudes_gestion): dos filas apilables
   (petición actual arriba, histórico del usuario abajo) con scroll propio
   y delgado en azul; el histórico se puede ocultar para darle más alto a
   la fila de trabajo. ===== */
.revision-modal-body{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  overflow:hidden;
}

.revision-fila{
  min-height:0;
  display:flex;
  flex-direction:column;
}

.revision-fila-actual{
  flex:1 1 0;
}

.revision-fila-historial{
  flex:1 1 0;
}

.revision-fila-historial.d-none{
  display:none !important;
}

/* Cuando el histórico está oculto, la fila de la petición actual es la
   única visible dentro del flex column y toma automáticamente el 100%
   del alto disponible (sin necesidad de JS extra). */

.revision-historial-header{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 2px 8px;
}

.revision-scroll{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.revision-scroll .table-scroll-x__bar{
  display:none; /* el body ya scrollea en ambos ejes con su propio scrollbar delgado */
}

.revision-scroll .table-scroll-x__body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#5b9bd8 #eaf2fb;
}

.revision-scroll .table-scroll-x__body::-webkit-scrollbar{
  width:8px;
  height:8px;
}
.revision-scroll .table-scroll-x__body::-webkit-scrollbar-track{
  background:#eaf2fb;
  border-radius:8px;
}
.revision-scroll .table-scroll-x__body::-webkit-scrollbar-thumb{
  background-color:#5b9bd8;
  border-radius:8px;
  border:2px solid #eaf2fb;
}
.revision-scroll .table-scroll-x__body::-webkit-scrollbar-thumb:hover{
  background-color:#3f7fc1;
}

/* Reportes: columna de botones de descarga CSV, con scroll vertical propio. */
.reporte-botones-lista{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  max-height:360px;
  overflow-y:auto;
  padding-right:.25rem;
  scrollbar-width:thin;
  scrollbar-color:#2a78d6 #eef2f7;
}
.reporte-botones-lista::-webkit-scrollbar{
  width:8px;
}
.reporte-botones-lista::-webkit-scrollbar-track{
  background:#eef2f7;
  border-radius:8px;
}
.reporte-botones-lista::-webkit-scrollbar-thumb{
  background-color:#2a78d6;
  border-radius:8px;
}
.reporte-botones-lista .btn{
  white-space:normal;
}

/* Reportes: botones de descarga CSV con acabado azul metalizado. */
.btn-azul-metalizado{
  color:#fff;
  background:linear-gradient(180deg, #6fa8e8 0%, #2f6fc4 45%, #1c4f9c 100%);
  border:1px solid #163f7d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.2);
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.btn-azul-metalizado:hover,
.btn-azul-metalizado:focus{
  color:#fff;
  background:linear-gradient(180deg, #7fb4ee 0%, #3a7ad0 45%, #2159a8 100%);
  border-color:#163f7d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 4px rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.25);
}
.btn-azul-metalizado:active{
  background:linear-gradient(180deg, #2f6fc4 0%, #1c4f9c 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.35);
}

/* Modal de periodos: botones Anterior/Siguiente con fondo anaranjado. */
.btn-naranja-periodo{
  color:#fff;
  background:linear-gradient(180deg, #ffb066 0%, #f57c1f 45%, #c9590a 100%);
  border:1px solid #a84c08;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.2);
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.btn-naranja-periodo:hover,
.btn-naranja-periodo:focus{
  color:#fff;
  background:linear-gradient(180deg, #ffbb7a 0%, #ff8b2e 45%, #d6650c 100%);
  border-color:#a84c08;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 4px rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.25);
}
.btn-naranja-periodo:active{
  background:linear-gradient(180deg, #f57c1f 0%, #c9590a 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.35);
}

/* Home: cuadricula de tiles pequenos tipo "cabina" (mucha info, elementos chicos). */
.cockpit-tile .card-body{
  padding:.65rem .75rem;
}
.cockpit-tile__label{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:#7a8699;
  margin-bottom:.25rem;
  line-height:1.15;
  min-height:1.8em;
}
.cockpit-tile__value{
  font-size:1.6rem;
  font-weight:700;
  line-height:1.1;
  color:#1c2b3a;
}
.cockpit-tile__value--sm{
  font-size:1.05rem;
  font-weight:600;
}
.cockpit-tile__foot{
  font-size:.72rem;
  color:#8993a3;
  margin-top:.2rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cockpit-gauge{
  height:6px;
  border-radius:4px;
  background:#e9edf3;
  overflow:hidden;
  margin-top:.35rem;
}
.cockpit-gauge__fill{
  height:100%;
  border-radius:4px;
  background:#1baf7a;
  width:0%;
  transition:width .3s ease;
}
.cockpit-gauge__fill--warning{ background:#eda100; }
.cockpit-gauge__fill--danger{ background:#e34948; }
.cockpit-gauge__fill--info{ background:#2a78d6; }

/* Home cockpit: contenedor de alto FIJO para los canvas de Chart.js. Sin esto,
   maintainAspectRatio:false + un padre sin alto definido produce un bucle de
   redimensionado (el canvas crece, el padre crece, el canvas vuelve a crecer...)
   y la pagina termina con un scroll vertical enorme que sigue aumentando solo. */
.cockpit-chart-wrap{
  position:relative;
  width:100%;
  height:80px;
}
.cockpit-chart-wrap canvas{
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
}

/* Modal de usuario: el recuadro de "Plazas asignadas" -- antes usaba el
   borde/fondo gris por defecto de Bootstrap (.border) y no se notaba que
   ahi adentro se puede interactuar (marcar/desmarcar checkboxes). */
#alcancePlazasLista{
  border:1px solid #90caf9 !important;
  background-color:#eaf4fd;
}

/* Modal de usuario: plazas del catalogo que el operador (moderador, etc.)
   puede VER pero no puede asignar porque no las tiene vinculadas a su
   propia cuenta. Se listan al final (ver usuarios.js), con este estilo mas
   apagado para distinguirlas de las que si se pueden marcar. */
#alcancePlazasLista .form-check.text-muted .form-check-label{
  color:#9aa3b0;
}

/* Login/Crear cuenta: aviso "gracioso" flotante con esponja.gif cuando se
   detecta un intento básico de inyección (SQLi/XSS) en un campo. */
.esponja-alerta-overlay{
  position:fixed;
  inset:0;
  z-index:5000;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.45);
  animation: esponjaFadeIn .15s ease-out;
}
.esponja-alerta-overlay.esponja-alerta-visible{
  display:flex;
}
.esponja-alerta-caja{
  background:#fff;
  border-radius:16px;
  padding:1.25rem 1.5rem;
  text-align:center;
  box-shadow:0 1rem 3rem rgba(0,0,0,.4);
  max-width:90vw;
  animation: esponjaPop .25s cubic-bezier(.34,1.56,.64,1);
}
.esponja-alerta-caja img{
  max-width:220px;
  width:100%;
  display:block;
  margin:0 auto .5rem;
  border-radius:10px;
}
.esponja-alerta-caja p{
  margin:0;
  font-weight:600;
  color:#1c4f9c;
}
@keyframes esponjaFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes esponjaPop{
  0%{ transform:scale(.7); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}

/* Solicitudes Gestión: boton "Actualizar" en amarillo, para refrescar los
   datos de la pantalla sin necesidad de F5. */
.btn-amarillo-actualizar{
  color:#3a2e00;
  font-weight:600;
  background:linear-gradient(180deg, #ffe066 0%, #ffc107 45%, #e0a800 100%);
  border:1px solid #b38600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.2);
}
.btn-amarillo-actualizar:hover,
.btn-amarillo-actualizar:focus{
  color:#3a2e00;
  background:linear-gradient(180deg, #ffe680 0%, #ffca2c 45%, #e6ac00 100%);
  border-color:#b38600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 4px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.25);
}
.btn-amarillo-actualizar:active{
  background:linear-gradient(180deg, #ffc107 0%, #e0a800 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.3);
}

/* Boton "Invertir orden" en Solicitudes Gestión: verde metalizado. */
.btn-verde-metalizado{
  color:#fff;
  background:linear-gradient(180deg, #7ed17e 0%, #3e9b3e 45%, #276b27 100%);
  border:1px solid #1f5a1f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.2);
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.btn-verde-metalizado:hover,
.btn-verde-metalizado:focus{
  color:#fff;
  background:linear-gradient(180deg, #8fdb8f 0%, #4bab4b 45%, #2d7a2d 100%);
  border-color:#1f5a1f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 4px rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.25);
}
.btn-verde-metalizado:active{
  background:linear-gradient(180deg, #3e9b3e 0%, #276b27 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.35);
}

/* Modal "Condiciones de pedido por sucursal" (con_sucursales_prod_limit):
   dos columnas claramente diferenciadas — izquierda blanca (alta de
   condiciones), derecha azul suave (tabla de gestión de lo ya registrado). */
.condiciones-modal-grid{
  display:flex;
  min-height:100%;
}
.condiciones-col{
  flex:1 1 50%;
  min-width:0;
  padding:1.25rem;
  overflow-y:auto;
}
.condiciones-col-izq{
  background:#ffffff;
  border-right:1px solid #dee2e6;
}
.condiciones-col-der{
  background:#eaf3fc;
}
@media (max-width: 900px){
  .condiciones-modal-grid{
    flex-direction:column;
  }
  .condiciones-col-izq{
    border-right:none;
    border-bottom:1px solid #dee2e6;
  }
}

/* Encabezados ordenables (tabla de folios en solicitudes_gestion) */
thead th.th-ordenable{
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
thead th.th-ordenable:hover{
  opacity:0.85;
}
thead th.th-ordenable i{
  font-size:10px;
  margin-left:4px;
}

/* Modal "Eventos de la cadena de custodia" (solicitudes_gestion) */
#eventosModal .eventos-modal-header {
  background-color: #374151;
  color: #fff;
}
#eventosModal .eventos-modal-header .modal-title {
  color: #fff;
}
#eventosModal .eventos-modal-footer {
  background-color: #374151;
}
#eventosModal .btn-eventos-cerrar {
  background-color: #dc3545;
  border: none;
  color: #fff;
}
#eventosModal .btn-eventos-cerrar:hover, #eventosModal .btn-eventos-cerrar:focus {
  background-color: #c82333;
  color: #fff;
}

#eventosModal .evento-card-armado {
  background-color: #e0f2fe; /* azul pastel */
  border-color: #bae6fd !important;
}
#eventosModal .evento-card-recoleccion {
  background-color: #fef3c7; /* amarillo pastel */
  border-color: #fde68a !important;
}
#eventosModal .evento-card-recepcion {
  background-color: #dcfce7; /* verde pastel */
  border-color: #bbf7d0 !important;
}
#eventosModal .evento-switch-label {
  color: #555;
  min-width: 90px;
  text-align: right;
}

.btn-gris-oscuro {
  background-color: #374151;
  border: none;
  color: #fff;
}
.btn-gris-oscuro:hover, .btn-gris-oscuro:focus {
  background-color: #4b5563;
  color: #fff;
}
.btn-gris-oscuro:disabled {
  background-color: #9ca3af;
  opacity: 1;
  color: #fff;
}
.btn-gris-oscuro:disabled i {
  color: #fff;
}
.btn-gris-oscuro i {
  color: #fff;
}
.btn-rojo-oscuro {
  background-color: #7f1d1d;
  border: none;
  color: #fff;
}
.btn-rojo-oscuro:hover, .btn-rojo-oscuro:focus {
  background-color: #991b1b;
  color: #fff;
}
.btn-rojo-oscuro:disabled {
  background-color: #c99a9a;
  opacity: 1;
  color: #fff;
}
.btn-rojo-oscuro:disabled i {
  color: #fff;
}
.btn-rojo-oscuro i {
  color: #fff;
}
.btn-azul-cielo {
  background-color: #0ea5e9;
  border: none;
  color: #fff;
}
.btn-azul-cielo:hover, .btn-azul-cielo:focus {
  background-color: #38bdf8;
  color: #fff;
}
.btn-azul-cielo:disabled {
  background-color: #a5d8f0;
  opacity: 1;
  color: #fff;
}
.btn-azul-cielo:disabled i {
  color: #fff;
}
.btn-azul-cielo i {
  color: #fff;
}
.btn-naranja-claro {
  background-color: #fb923c;
  border: none;
  color: #fff;
}
.btn-naranja-claro:hover, .btn-naranja-claro:focus {
  background-color: #fdba74;
  color: #fff;
}
.btn-naranja-claro:disabled {
  background-color: #fed7aa;
  opacity: 1;
  color: #fff;
}
.btn-naranja-claro:disabled i {
  color: #fff;
}
.btn-naranja-claro i {
  color: #fff;
}

/* Modal "Eventos" — tarjetas de las cadenas de limpieza y papelería */
#eventosModal .evento-card-limp-armado {
  background-color: #ecfeff; /* cian muy claro */
  border-color: #a5f3fc !important;
}
#eventosModal .evento-card-limp-recoleccion {
  background-color: #cffafe; /* cian claro */
  border-color: #67e8f9 !important;
}
#eventosModal .evento-card-limp-recepcion {
  background-color: #a5f3fc; /* cian medio */
  border-color: #22d3ee !important;
}
#eventosModal .evento-card-paper-armado {
  background-color: #fff7ed; /* naranja muy claro */
  border-color: #fed7aa !important;
}
#eventosModal .evento-card-paper-recoleccion {
  background-color: #ffedd5; /* naranja claro */
  border-color: #fdba74 !important;
}
#eventosModal .evento-card-paper-recepcion {
  background-color: #fed7aa; /* naranja medio */
  border-color: #fb923c !important;
}

/* Encabezados de los 3 subgrupos dentro del modal "Eventos" (general,
   limpieza, papelería) — fondo negro con letras blancas para que se note
   claramente dónde empieza cada bloque de 3 etapas. */
#eventosModal .evento-grupo-header {
  background-color: #000;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
}
#eventosModal .evento-grupo-header i {
  color: #fff;
}

/* Contenedor del checkbox "Firmas" en solicitudes_gestion — mismo alto/
   estética que los botones vecinos (borde redondeado, padding parecido). */
.chk-firmas-envio-wrap {
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  padding: 0.25rem 0.75rem;
  background-color: #fff;
}
.chk-firmas-envio-wrap .form-check-input {
  width: 2.5em;
  height: 1.25em;
  margin-top: 0;
  cursor: pointer;
}
.chk-firmas-envio-wrap .form-check-label {
  cursor: pointer;
}

/* Botones de la columna "Acciones" en la tabla de Solicitudes Gestión: más
   delgados que un .btn-sm normal (menos padding vertical/horizontal y
   fuente más chica) para ganar espacio horizontal en la tabla. */
#foliosTable .btn-accion-tabla {
  padding: 0.15rem 0.4rem;
  font-size: 0.72rem;
  line-height: 1.3;
}
#foliosTable .btn-accion-tabla i {
  font-size: 0.72rem;
}

/* Resaltar una fila al hacer click sobre ella (fuera de sus botones), en
   TODAS las tablas del sitio — ver vista/js/common/resaltar-filas.js. Marca
   visual temporal (verde-lima), se reinicia cuando la tabla se vuelve a
   dibujar.
   La especificidad de estas reglas iguala a la de la "zebra" de arriba
   (table.table > tbody > tr:nth-of-type(odd/even) > td, con !important) a
   propósito: al tener el MISMO peso y estar declaradas DESPUÉS en este
   archivo, estas ganan el empate por orden de aparición. Con una
   especificidad menor (como ".table tbody tr.fila-resaltada > td"), la
   zebra siempre ganaba y el resaltado nunca se veía aunque la clase sí se
   aplicara. */
table.table > tbody > tr.fila-resaltada,
table.table > tbody > tr.fila-resaltada > td {
  background-color: #d4f34c !important;
}
.table tbody tr {
  cursor: pointer;
}

/* ===================== Picking (transportista) ===================== */
/* Tarjetas verticales para la lista de "Buscar paquetes": pensadas para
   verse bien en un teléfono (una columna, sin tabla ancha). */
#pickingResultadosLista{
  max-width: 480px;
  margin: 0 auto;
}
.picking-tarjeta{
  border-left: 4px solid #38bdf8;
}
#pickingSucursalResultados{
  border-radius: .375rem;
}
@media (max-width: 576px){
  #pickingCodigoInput{
    font-size: 1.1rem;
  }
  #pickingResultadosLista{
    max-width: 100%;
  }
}

/* ===== "Proyector" holográfico decorativo del login (a la derecha, apunta
   hacia el personaje de #fredFramesBg a la izquierda) =====
   Es puro adorno CSS + partículas generadas por JS (login_plantilla.php,
   fondoProyectorHolograma()): un pequeño "emisor" que brilla, 3 haces de luz
   en capas (para dar sensación de volumen) y unas líneas de escaneo sutiles,
   simulando que de ahí sale la proyección del personaje. */
.holograma-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.holograma-emisor{
  position:absolute;
  right:4%;
  top:50%;
  width:66px;
  height:192px;
  transform:translateY(-50%);
  border-radius:10px;
  background:linear-gradient(180deg, #bae6fd, #38bdf8 55%, #0369a1);
  box-shadow:0 0 26px 9px rgba(56,189,248,.6), 0 0 60px 20px rgba(56,189,248,.25);
  animation:hologramaEmisorPulso 2.4s ease-in-out infinite;
}
.holograma-emisor::before{
  content:"";
  position:absolute;
  left:-14px;
  top:50%;
  width:26px;
  height:26px;
  border-radius:50%;
  transform:translateY(-50%);
  background:#e0f2fe;
  box-shadow:0 0 24px 8px rgba(224,242,254,.95);
}

.holograma-haz{
  position:absolute;
  right:4%;
  top:50%;
  width:58%;
  height:780px;
  transform:translateY(-50%);
  transform-origin:right center;
  background:linear-gradient(90deg, rgba(125,211,252,.5), rgba(56,189,248,0) 85%);
  mix-blend-mode:screen;
}
.holograma-haz--1{
  clip-path:polygon(100% 46%, 100% 54%, 0% 6%, 0% 94%);
  opacity:.45;
  filter:blur(2px);
  animation:hologramaHaz1Flicker 2.8s ease-in-out infinite;
}
.holograma-haz--2{
  clip-path:polygon(100% 43%, 100% 57%, 0% 0%, 0% 100%);
  opacity:.25;
  filter:blur(7px);
  animation:hologramaHaz2Flicker 3.4s ease-in-out infinite .3s;
}
.holograma-haz--3{
  clip-path:polygon(100% 48%, 100% 52%, 0% 22%, 0% 78%);
  opacity:.55;
  filter:blur(1px);
  animation:hologramaHaz3Flicker 2s ease-in-out infinite .6s;
}

.holograma-scanlines{
  position:absolute;
  right:4%;
  top:50%;
  width:58%;
  height:780px;
  transform:translateY(-50%);
  clip-path:polygon(100% 43%, 100% 57%, 0% 0%, 0% 100%);
  background-image:repeating-linear-gradient(90deg, rgba(224,242,254,.35) 0 2px, transparent 2px 26px);
  background-size:200% 100%;
  mix-blend-mode:overlay;
  opacity:.5;
  animation:hologramaScanBarrido 3.6s linear infinite;
}

.holograma-particulas{
  position:absolute;
  inset:0;
}
.holograma-particula{
  position:absolute;
  right:6%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#e0f2fe;
  box-shadow:0 0 6px 2px rgba(224,242,254,.9);
  animation-name:hologramaParticulaFlota;
  animation-timing-function:linear;
  animation-iteration-count:1;
}

@keyframes hologramaEmisorPulso{
  0%, 100%{ box-shadow:0 0 18px 6px rgba(56,189,248,.6), 0 0 42px 14px rgba(56,189,248,.25); }
  50%{ box-shadow:0 0 26px 10px rgba(56,189,248,.85), 0 0 58px 20px rgba(56,189,248,.35); }
}
@keyframes hologramaHaz1Flicker{
  0%, 100%{ opacity:.45; }
  50%{ opacity:.7; }
}
@keyframes hologramaHaz2Flicker{
  0%, 100%{ opacity:.25; }
  50%{ opacity:.4; }
}
@keyframes hologramaHaz3Flicker{
  0%, 100%{ opacity:.55; }
  50%{ opacity:.3; }
}
@keyframes hologramaScanBarrido{
  0%{ background-position:0 0; }
  100%{ background-position:-200% 0; }
}
@keyframes hologramaParticulaFlota{
  0%{ transform:translate(0, 0); opacity:0; }
  12%{ opacity:1; }
  85%{ opacity:1; }
  100%{ transform:translate(var(--phx, -260px), var(--phy, 0)); opacity:0; }
}

@media (max-width: 900px){
  .holograma-bg{
    display:none;
  }
}
@media (prefers-reduced-motion: reduce){
  .holograma-emisor,
  .holograma-haz,
  .holograma-scanlines{
    animation:none;
  }
}

/* ----- Carcasa (housing) del proyector: envuelve al foco (.holograma-emisor)
   como un reflector metálico -- redondeado/tipo cilindro atrás, bisel de
   lente al frente -- con rejillas de ventilación traseras. ----- */
.holograma-carcasa{
  position:absolute;
  right:2.6%;
  top:50%;
  width:104px;
  height:222px;
  transform:translateY(-50%);
  border-radius:12px 54px 54px 12px;
  background:linear-gradient(160deg, #94a3b8 0%, #475569 45%, #1e293b 80%, #0f172a 100%);
  box-shadow:0 12px 26px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.12), inset 0 -3px 10px rgba(0,0,0,.4);
}
.holograma-carcasa::before{
  /* Bisel/aro de la lente, alrededor de donde asoma el foco luminoso. */
  content:"";
  position:absolute;
  left:-10px;
  top:50%;
  width:52px;
  height:52px;
  border-radius:50%;
  transform:translateY(-50%);
  border:7px solid #cbd5e1;
  box-shadow:0 0 0 3px rgba(15,23,42,.6), 0 0 14px rgba(0,0,0,.4);
}
.holograma-carcasa::after{
  /* Rejillas de ventilación en la parte trasera del reflector. */
  content:"";
  position:absolute;
  right:10px;
  top:16px;
  bottom:16px;
  width:34px;
  border-radius:8px;
  background-image:repeating-linear-gradient(180deg, rgba(15,23,42,.55) 0 4px, transparent 4px 12px);
  opacity:.8;
}

/* ----- Trípode: patas + cuello que "sostienen" la carcasa desde abajo. -----
   `.holograma-soporte` es un punto de anclaje (1x1px) posicionado justo
   debajo de la carcasa; las patas/cuello/eje se posicionan relativos a ese
   punto con `position:absolute` + `transform:rotate()`. */
.holograma-soporte{
  position:absolute;
  right:6%;
  top:calc(50% + 118px);
  width:1px;
  height:1px;
  pointer-events:none;
}
.holograma-cuello{
  position:absolute;
  left:-4px;
  top:0;
  width:8px;
  height:34px;
  border-radius:3px;
  background:linear-gradient(180deg, #64748b, #1e293b);
}
.holograma-tripode-hub{
  position:absolute;
  left:-11px;
  top:30px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #94a3b8, #1e293b 70%);
  box-shadow:0 3px 6px rgba(0,0,0,.5);
}
.holograma-pata{
  position:absolute;
  left:0;
  top:38px;
  width:7px;
  height:150px;
  border-radius:4px;
  background:linear-gradient(180deg, #64748b, #334155 70%, #1e293b);
  box-shadow:1px 0 2px rgba(0,0,0,.35);
  transform-origin:top center;
}
.holograma-pata::after{
  /* Pie/base de cada pata, apoyada en el "piso". */
  content:"";
  position:absolute;
  left:50%;
  bottom:-4px;
  width:22px;
  height:8px;
  border-radius:50%;
  transform:translateX(-50%);
  background:#1e293b;
  opacity:.7;
}
.holograma-pata--izq{ transform:rotate(-24deg); }
.holograma-pata--centro{ transform:rotate(2deg); height:160px; }
.holograma-pata--der{ transform:rotate(26deg); }

/* ===== Menú lateral en móvil =====
   En teléfono "100vh" incluye la zona tapada por la barra del navegador, así
   que el pie del menú (Mi cuenta / Cerrar sesión) quedaba fuera de pantalla.
   "dvh" (alto dinámico) sí se ajusta a lo visible. Además, la lista de
   opciones es la que hace scroll y el pie siempre queda a la vista. */
@supports (height: 100dvh) {
  .app-shell,
  .sidebar,
  .content {
    height: 100dvh;
  }
}

.sidebar-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media (max-height: 700px), (max-width: 767.98px) {
  .sidebar-nav {
    padding: 8px;
  }
  .sidebar-footer {
    padding: 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .sidebar-link-account {
    margin-bottom: 6px;
  }
}

/* ===== Solicitudes Gestión: filas de 3 niveles (clase .folios-niveles) =====
   Nivel 1: datos · Nivel 2: botones · Nivel 3: cadena de custodia.
   Para volver al diseño anterior: LAYOUT_FILAS = 'clasico' en solicitudes_gestion.js */
#foliosTable.folios-niveles thead tr {
  background: var(--nav-blue);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 14px;
  padding: 4px 8px;
}
#foliosTable.folios-niveles thead tr::before {
  content: "Ordenar por:";
  font-size: 11px;
  font-weight: 400;
  opacity: .75;
  order: 0;
}
#foliosTable.folios-niveles thead th {
  display: block;
  border: 0;
  padding: 2px 0;
  width: auto !important;
}
#foliosTable.folios-niveles thead th:not(.th-ordenable) { display: none; }
#foliosTable.folios-niveles thead th[data-sort-key="estado"]              { order: 1; }
#foliosTable.folios-niveles thead th[data-sort-key="resp_de_user"]        { order: 2; }
#foliosTable.folios-niveles thead th[data-sort-key="plaza_clave"]         { order: 3; }
#foliosTable.folios-niveles thead th[data-sort-key="perfil_solicitante"]  { order: 4; }
#foliosTable.folios-niveles thead th[data-sort-key="nickname_solicitante"]{ order: 5; }
#foliosTable.folios-niveles thead th[data-sort-key="nombre_solicitante"]  { order: 6; }
#foliosTable.folios-niveles thead th[data-sort-key="folio"]               { order: 7; }
#foliosTable.folios-niveles thead th[data-sort-key="fecha_pedido"]        { order: 8; }

#foliosTable .fila-niveles > td { padding: 8px 10px; }
#foliosTable .fn-nivel1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
}
#foliosTable .fn-nivel2 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
#foliosTable .fn-nivel3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 22px;
  margin-top: 6px;
}
#foliosTable .fn-grupo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 3px 12px;
  background: #fff;
  border: 1px solid #94a3b8;
  border-radius: 10px;
}
#foliosTable .fn-rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #475569;
  min-width: 38px;
}
#foliosTable .fn-etapa {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 1rem;
}
#foliosTable .fn-etapa .fn-figura { font-size: .6rem; }

/* Zebra de la tabla de folios (3 niveles): gris claro / azul ligeramente
   oscuro, para distinguir bien un folio del siguiente. La clase
   .fila-resaltada (click) y el hover se redefinen aquí para que sigan
   ganando sobre la zebra. */
#foliosTable.folios-niveles > tbody > tr:nth-of-type(odd) > td {
  background-color: #f1f5f9 !important;
}
#foliosTable.folios-niveles > tbody > tr:nth-of-type(even) > td {
  background-color: #c9dcf3 !important;
}
#foliosTable.folios-niveles > tbody > tr:hover > td {
  background-color: #b3cdee !important;
  box-shadow: none;
}
#foliosTable.folios-niveles > tbody > tr.fila-resaltada > td {
  background-color: #d4f34c !important;
}

/* ===== Gestionar períodos: etiqueta del mes con borde rojo giratorio =====
   El borde es un degradado cónico rojo que da una vuelta completa cada 5 s
   (variable CSS animada --pml-ang). Si el navegador no soporta @property,
   queda un borde rojo fijo. */
@property --pml-ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.periodo-mes-label {
  display: inline-block;
  padding: 4px 16px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.1rem;
  font-weight: 800 !important;
  letter-spacing: .6px;
  text-transform: capitalize;
  color: #7f1d1d;
  border: 3px solid transparent;
  border-radius: 10px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--pml-ang), #dc2626, #fca5a5 25%, #dc2626 50%, #7f1d1d 75%, #dc2626) border-box;
  animation: pmlGiro 5s linear infinite;
}
@keyframes pmlGiro {
  to { --pml-ang: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .periodo-mes-label { animation: none; }
}

/* ===== Mis insumos: panel del período (3 grupos) ===== */
.periodo-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:.6rem}
.pp-card{--pp-c:#64748b;--pp-bg:#f1f5f9;display:flex;align-items:center;gap:.75rem;padding:.7rem .9rem;background:#fff;border:1px solid #e2e8f0;border-left:5px solid var(--pp-c);border-radius:12px;box-shadow:0 2px 8px rgba(15,23,42,.06);min-width:0}
.pp-icono{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--pp-c);background:var(--pp-bg)}
.pp-cuerpo{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.pp-titulo{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#64748b;line-height:1.2}
.pp-valor{font-size:1rem;font-weight:700;color:#0f172a;line-height:1.25}
.pp-al{font-weight:500;color:#64748b;font-size:.85em;margin:0 .15rem}
.pp-estado-pill{align-self:flex-start;font-size:.7rem;font-weight:600;padding:.1rem .55rem;border-radius:999px;color:var(--pp-c);background:var(--pp-bg)}
.pp-verde{--pp-c:#15803d;--pp-bg:#dcfce7}
.pp-ambar{--pp-c:#b45309;--pp-bg:#fef3c7}
.pp-rojo{--pp-c:#b91c1c;--pp-bg:#fee2e2}
.pp-gris{--pp-c:#64748b;--pp-bg:#f1f5f9}
.pp-card-estado.pp-verde .pp-icono{animation:ppPulso 2.4s ease-in-out infinite}
@keyframes ppPulso{0%,100%{box-shadow:0 0 0 0 rgba(21,128,61,.35)}50%{box-shadow:0 0 0 8px rgba(21,128,61,0)}}
.pp-aviso{display:flex;align-items:flex-start;gap:.6rem;padding:.65rem .9rem;margin-bottom:.8rem;border-radius:10px;background:#fffbeb;border:1px solid #fde68a;border-left:5px solid #f59e0b;color:#78350f;font-size:.88rem}
.pp-aviso>i{font-size:1.2rem;color:#d97706;line-height:1.2}
@media (max-width:991.98px){.periodo-panel{grid-template-columns:1fr}}

/* ===== Panel del período: efecto vidrio metalizado con reflejo ===== */
.pp-card{position:relative;overflow:hidden;color:#fff;border:1px solid rgba(255,255,255,.45);border-left-width:1px;
  background:linear-gradient(135deg,var(--pp-g1) 0%,var(--pp-g2) 48%,var(--pp-g3) 52%,var(--pp-g4) 100%);
  box-shadow:0 6px 16px var(--pp-sombra),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 6px rgba(0,0,0,.18);
  backdrop-filter:blur(6px) saturate(1.3);-webkit-backdrop-filter:blur(6px) saturate(1.3)}
/* reflejo superior de vidrio */
.pp-card::before{content:"";position:absolute;left:0;right:0;top:0;height:48%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.08));border-radius:12px 12px 60% 60%/12px 12px 22px 22px}
/* destello que barre la tarjeta */
.pp-card::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:ppBrillo 6s ease-in-out infinite}
@keyframes ppBrillo{0%,60%{left:-60%}100%{left:140%}}
.pp-card>*{position:relative;z-index:1}
.pp-titulo{color:rgba(255,255,255,.92);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.pp-valor{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.pp-al{color:rgba(255,255,255,.85)}
.pp-icono{color:#fff;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.6),rgba(255,255,255,.12) 70%);
  border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 2px rgba(255,255,255,.7),0 2px 6px rgba(0,0,0,.25);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.pp-estado-pill{color:#fff;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.4);text-shadow:0 1px 2px rgba(0,0,0,.4)}
/* variantes metalizadas */
.pp-verde{--pp-g1:#0f7a3a;--pp-g2:#2fbf6a;--pp-g3:#14914a;--pp-g4:#0a5c2b;--pp-sombra:rgba(21,128,61,.40)}
.pp-ambar{--pp-g1:#b9770e;--pp-g2:#f4c542;--pp-g3:#d9961b;--pp-g4:#8a5509;--pp-sombra:rgba(217,150,27,.40)}
.pp-rojo{--pp-g1:#991b1b;--pp-g2:#ef6a6a;--pp-g3:#c53030;--pp-g4:#701313;--pp-sombra:rgba(185,28,28,.40)}
.pp-gris{--pp-g1:#5b6677;--pp-g2:#b4bfcd;--pp-g3:#8493a6;--pp-g4:#475264;--pp-sombra:rgba(71,82,100,.35)}
/* confirmar/reclamar: siempre naranja oro metalizado */
#ppConfirmar{--pp-g1:#c2570c;--pp-g2:#ffc94d;--pp-g3:#f29a1a;--pp-g4:#a8480a;--pp-sombra:rgba(242,154,26,.45)}
.pp-card-estado.pp-verde .pp-icono{animation:ppPulso 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.pp-card::after,.pp-card-estado .pp-icono{animation:none!important}}

/* ===== Aviso de penalización: rojo metalizado con reflejo ===== */
.pp-aviso{position:relative;overflow:hidden;align-items:center;color:#fff;font-size:.92rem;
  border:1px solid rgba(255,255,255,.4);border-left:1px solid rgba(255,255,255,.4);
  background:linear-gradient(135deg,#7f1111 0%,#d62828 45%,#b31c1c 52%,#6b0d0d 100%);
  box-shadow:0 6px 16px rgba(185,28,28,.45),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 6px rgba(0,0,0,.25);
  text-shadow:0 1px 3px rgba(0,0,0,.5)}
.pp-aviso::before{content:"";position:absolute;left:0;right:0;top:0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.05));border-radius:10px 10px 60% 60%/10px 10px 18px 18px}
.pp-aviso::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:35%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:ppBrillo 6s ease-in-out infinite}
.pp-aviso>*{position:relative;z-index:1}
.pp-aviso>i{color:#ffe14d;font-size:1.5rem;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
.pp-aviso strong{color:#ffe14d}
@media (prefers-reduced-motion:reduce){.pp-aviso::after{animation:none!important}}

/* ===== Home: etiquetas con efecto vidrio metalizado ===== */
.mt-card{position:relative;overflow:hidden;color:#fff;border:1px solid rgba(255,255,255,.45)!important;
  background:linear-gradient(135deg,var(--mt1) 0%,var(--mt2) 48%,var(--mt3) 52%,var(--mt4) 100%)!important;
  box-shadow:0 6px 16px var(--mts),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 6px rgba(0,0,0,.18)!important}
.mt-card::before{content:"";position:absolute;left:0;right:0;top:0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.06));border-radius:.375rem .375rem 60% 60%/.375rem .375rem 18px 18px}
.mt-card::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:35%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:ppBrillo 7s ease-in-out infinite}
.mt-card>*{position:relative;z-index:1}
.mt-card .text-muted,.mt-card .cockpit-tile__label,.mt-card .cockpit-tile__foot{color:rgba(255,255,255,.92)!important;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.mt-card .fs-3,.mt-card .cockpit-tile__value,.mt-card [class*="text-"]:not(.text-muted){color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.mt-card .cockpit-gauge{background:rgba(0,0,0,.28)!important;box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.mt-card .cockpit-gauge__fill{background:linear-gradient(180deg,#fff7c2,#ffd23f)!important}
.mt-azul{--mt1:#0b3d91;--mt2:#4f93e6;--mt3:#2563c9;--mt4:#072c6b;--mts:rgba(37,99,201,.40)}
.mt-verde{--mt1:#0f7a3a;--mt2:#2fbf6a;--mt3:#14914a;--mt4:#0a5c2b;--mts:rgba(21,128,61,.40)}
.mt-ambar{--mt1:#c2570c;--mt2:#ffc94d;--mt3:#f29a1a;--mt4:#a8480a;--mts:rgba(242,154,26,.45)}
.mt-rojo{--mt1:#991b1b;--mt2:#ef6a6a;--mt3:#c53030;--mt4:#701313;--mts:rgba(185,28,28,.40)}
.mt-gris{--mt1:#5b6677;--mt2:#b4bfcd;--mt3:#8493a6;--mt4:#475264;--mts:rgba(71,82,100,.35)}
@media (prefers-reduced-motion:reduce){.mt-card::after{animation:none!important}}