/**
 * Archivo: assets/css/tema.css
 * Módulo: Layout compartido (todos los módulos)
 * Descripción: Variables de tema oscuro (por defecto) y claro, más
 *              estilos base reutilizados en todas las páginas.
 * Última actualización: 2026-08-11
 * Dev: Luis Carlos
 */

:root{
  /* Colores de marca — no cambian entre temas */
  --accent-amber:#E8A33D;
  --accent-amber-glow:#FFDFA1;
  --accent-amber-titulo:#E8A33D;
  --state-critical:#E5484D;
  --state-armed:#3FB27F;

  /* Modo oscuro (por defecto) */
  --bg-void:#0A0B0D;
  --bg-panel:#141619;
  --bg-panel-raised:#1B1E22;
  --border-hairline:#24272C;
  --text-primary:#F2F1EC;
  --text-muted:#8A8F98;
  --noise-dot: rgba(255,255,255,0.025);
  --hover-nav:#1B1E22;
  --hover-fila:#1B1E22;
  /* Color del logotipo — el SVG usa fill="currentColor", así hereda
     esto automáticamente sin duplicar el dibujo por tema. */
  --logo-color:#F2F1EC;
}

/* Modo claro — primer borrador, pendiente de validar con el cliente */
:root[data-tema="claro"]{
  --bg-void:#F5F4F0;
  --bg-panel:#FFFFFF;
  --bg-panel-raised:#ECE9E2;
  --border-hairline:#DEDAD1;
  --text-primary:#201D18;
  --text-muted:#6B6F76;
  --noise-dot: rgba(10,11,13,0.035);
  /* El ámbar de marca se ve apagado sobre blanco — este tono más
     profundo mantiene la misma familia de color pero con más contraste. */
  --accent-amber-titulo:#A8660E;
  /* Hover del sidebar/menú de usuario: mucho más tenue que --bg-panel-raised. */
  --hover-nav:#F1EEE7;
  /* Hover de filas de tabla: un paso más tenue todavía que el del
     sidebar, para que se note la diferencia entre ambos. */
  --hover-fila:#F7F5F1;
  /* Color del logotipo en modo claro: su azul original — el blanco de
     modo oscuro se perdía sobre fondo claro. */
  --logo-color:#021939;
}

html,body{
  background:var(--bg-void);
  color:var(--text-primary);
  font-family:'Manrope',sans-serif;
  transition: background-color .2s ease, color .2s ease;
}
.font-display{font-family:'Rajdhani',sans-serif;}
.font-mono{font-family:'JetBrains Mono',monospace;}
.tracked-wide{letter-spacing:0.22em;}
.card{
  background:var(--bg-panel);
  border:1px solid var(--border-hairline);
  transition: background-color .2s ease, border-color .2s ease;
}

/* El hover SOLO reacciona en tarjetas que son enlaces (<a class="card">).
   El sidebar, los modales y las cajas de sección dentro de los
   formularios usan la misma clase "card" mnemotécnicamente pero son
   contenedores fijos — nunca deben reaccionar al pasar el mouse. */
a.card:hover{
  background:var(--bg-panel-raised);
  border-color:#33373d;
}
:root[data-tema="claro"] a.card:hover{
  /* Mucho más tenue que en oscuro — apenas un tinte, no un salto de color. */
  background:#FBFAF8;
  border-color:#E7E1D5;
}

/* Hover con movimiento — SOLO para los botones de acceso a módulo
   (fila de abajo del panel de Inicio). Mismo movimiento en ambos temas;
   solo cambia la intensidad de la sombra (el negro no se ve en oscuro,
   así que ahí se usa un resplandor ámbar bien tenue). */
.card-modulo{
  transform: translateY(0) scale(1);
  position: relative;
  z-index: 1;
}
.card.card-modulo[data-reveal]{
  transition: background-color .2s ease, border-color .2s ease, opacity .55s ease,
              transform .28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow .28s cubic-bezier(0.22, 1, 0.36, 1);
}
.card-modulo[data-reveal]:hover{
  transform: translateY(-2px) scale(1.01);
  z-index: 20;
  box-shadow: 0 14px 26px rgba(232,163,61,0.07), 0 6px 14px rgba(0,0,0,0.3);
}
:root[data-tema="claro"] .card-modulo[data-reveal]:hover{
  box-shadow: 0 8px 16px rgba(0,0,0,0.06);
}
.glow-dot{
  box-shadow: 0 0 0 3px rgba(232,163,61,0.12), 0 0 10px 1px rgba(232,163,61,0.55);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow: 0 0 0 3px rgba(232,163,61,0.12), 0 0 8px 1px rgba(232,163,61,0.45); }
  50%{ box-shadow: 0 0 0 5px rgba(232,163,61,0.06), 0 0 16px 3px rgba(232,163,61,0.75); }
}
/* Punto del ojo del logotipo real (dentro de #wellsLogoFull / #wellsIcon).
   El halo se agranda y se desvanece en cada pulso; el punto en sí usa un
   degradado radial (ver <defs> en login.php / layout_header.php), no
   esta clase, para lograr el efecto de "verse más chico sin encogerse". */
.wells-mark-halo{
  fill: var(--accent-amber);
  opacity: 0.35;
  filter: url(#haloBlur);
  transform-origin: 757px 448px;
  animation: markPulse 2.6s ease-in-out infinite;
}
@keyframes markPulse{
  0%,100%{ transform: scale(1); opacity: 0.28; }
  50%{ transform: scale(1.9); opacity: 0.6; }
}
.glow-dot-red{
  box-shadow: 0 0 0 3px rgba(229,72,77,0.14), 0 0 10px 1px rgba(229,72,77,0.6);
  animation: pulse-red 1.4s ease-in-out infinite;
}
@keyframes pulse-red{
  0%,100%{ box-shadow: 0 0 0 3px rgba(229,72,77,0.14), 0 0 8px 1px rgba(229,72,77,0.5); }
  50%{ box-shadow: 0 0 0 6px rgba(229,72,77,0.05), 0 0 18px 4px rgba(229,72,77,0.85); }
}
.bg-noise{
  background-image: radial-gradient(circle at 1px 1px, var(--noise-dot) 1px, transparent 0);
  background-size: 22px 22px;
}
.scale-btn{ transition: transform .15s ease, background .15s ease; }
.scale-btn:hover{ transform: translateY(-1px); }

/* Hover de filas de tabla — regla genérica, aplica sola a cualquier
   tabla de listado dentro de una tarjeta (Clientes, Dispositivos,
   Cotizaciones, Cobranzas, y cualquier módulo nuevo que se agregue),
   sin tener que repetir clases en cada archivo. */
.card table tbody tr{
  transition: background-color .15s ease;
}
.card table tbody tr:hover{
  background: var(--hover-fila);
}

.icono-tema{
  width:2rem; height:2rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:2px;
  border:1px solid var(--border-hairline);
  color:var(--text-muted);
  background:transparent;
  cursor:pointer;
  transition: color .15s ease, border-color .15s ease;
}
.icono-tema:hover{
  color:var(--accent-amber);
  border-color:var(--accent-amber);
}

/* Icono del selector de fecha (<input type="date">) — el navegador lo
   dibuja siempre en negro; en modo oscuro hay que invertirlo. */
input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1);
}
:root[data-tema="claro"] input[type="date"]::-webkit-calendar-picker-indicator{
  filter: none;
}

/* Revelado al entrar en pantalla — mismo mecanismo (opacity + translateY
   vía transición CSS, disparado por JS con IntersectionObserver) que la
   referencia de Emerson. Solo se anima el movimiento, no hay colores
   nuevos acá. */
[data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
[data-reveal].revelado{
  opacity: 1;
  transform: translateY(0);
}
/* Mismo choque de "transition" que en .card-modulo — se corrige igual,
   con un selector compuesto más específico que no depende del orden. */
.card[data-reveal]{
  transition: background-color .2s ease, border-color .2s ease, opacity .55s ease, transform .4s ease;
}

/* Modales: fade del fondo + fade/deslizado del contenido. El elemento
   con id que empieza en "modal" es el fondo semitransparente; su
   primer hijo directo es la tarjeta que realmente se desliza. */
[id^="modal"]{
  transition: opacity .2s ease;
  opacity: 0;
}
[id^="modal"].modal-visible{
  opacity: 1;
}
[id^="modal"] > div{
  transition: opacity .25s ease, transform .25s ease;
  opacity: 0;
  transform: translateY(16px);
}
[id^="modal"].modal-visible > div{
  opacity: 1;
  transform: translateY(0);
}

/* Menú desplegable de usuario: mismo lenguaje que los modales
   (fade + deslizado), pero más rápido — es un menú chico, no una
   ventana grande. */
#menuUsuario{
  transition: opacity .16s ease, transform .16s ease;
  opacity: 0;
  transform: translateY(-8px);
}
#menuUsuario.menu-visible{
  opacity: 1;
  transform: translateY(0);
}