/*
 * Tokens de diseño — Tracker Web (ver docs/DISEÑO_UI.md)
 * Ningún color se escribe directo en un componente: todo pasa por estas variables.
 */

[data-tema="oscuro"] {
  --bg: #0E1620;
  --panel: #16212C;
  --panel-alt: #1C2934;
  --border: #263542;
  --text: #EDF1F4;
  --text-muted: #8A98A5;
  --text-faint: #5B6A76;
  --accent: #F2A93B;
  --accent-soft: rgba(242, 169, 59, 0.14);
  --accent-2: #4FB8AE;
  --accent-2-soft: rgba(79, 184, 174, 0.14);
  --danger: #E2604F;
}

[data-tema="claro"] {
  --bg: #F4F6F8;
  --panel: #FFFFFF;
  --panel-alt: #EEF1F4;
  --border: #DDE3E8;
  --text: #16212C;
  --text-muted: #5B6A76;
  --text-faint: #8A98A5;
  --accent: #C97C1B;
  --accent-soft: rgba(201, 124, 27, 0.12);
  --accent-2: #2E8F86;
  --accent-2-soft: rgba(46, 143, 134, 0.12);
  --danger: #C94A3A;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100vh;
}

h1, h2, h3, .display {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

.dato, code, .mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
}

a {
  color: var(--accent-2);
}

/* ---- Overrides puntuales de Bootstrap: solo estructura, la piel es nuestra ---- */

.form-control,
.form-control:focus {
  background: var(--panel-alt);
  border-color: var(--border);
  color: var(--text);
}

.form-control:focus {
  box-shadow: none;
  outline: 2px solid var(--accent-2);
  outline-offset: 1px;
}

.form-control::placeholder {
  color: var(--text-faint);
}

.form-label {
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* Clases propias en vez de .btn-primary/.card de Bootstrap: evita pelear con los
   valores de color que Bootstrap ya trae compilados desde el CDN. */

.tw-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}

/* Tarjetas y filas "clickeables" (link completo a un sitio, fila completa de un
   cliente) -- mismo criterio de hover ya usado en el menú superior: --panel-alt de
   fondo, sin sombra ni transform, para no salirse del estilo plano del resto del
   proyecto (ver DISEÑO_UI.md, --panel-alt está documentado para "filas anidadas,
   hover"). */
.tw-card-clickeable {
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tw-card-clickeable:hover,
.tw-card-clickeable:focus-visible {
  background: var(--panel-alt);
  border-color: var(--accent-soft);
}

.tw-fila-clickeable {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.tw-fila-clickeable:hover {
  background: var(--panel-alt);
}

.tw-btn-accent {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #16212C;
  font-weight: 600;
  border-radius: 0.5rem;
  padding: 0.6rem 1rem;
  transition: opacity 0.15s ease;
}

.tw-btn-accent:hover {
  opacity: 0.9;
  color: #16212C;
}

.tw-btn-accent:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.tw-btn-outline {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  border-radius: 0.5rem;
  padding: 0.6rem 1rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tw-btn-outline:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.tw-btn-outline:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.tw-text-muted {
  color: var(--text-muted);
}

.tw-alert-error {
  background: rgba(226, 96, 79, 0.12);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 0.5rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
}

.tw-alert-success {
  background: var(--accent-2-soft);
  border: 1px solid var(--accent-2);
  color: var(--accent-2);
  border-radius: 0.5rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
}

/* Aviso neutral (ni error ni éxito) -- usado por el banner de "estás viendo el panel de
   un cliente como admin" (ver DECISIONES.md, 2026-08-29). Reutiliza --accent, el mismo
   color de acento que ya existe, en vez de sumar un tercer color nuevo a la paleta
   deliberadamente mínima de DISEÑO_UI.md. */
.tw-alert-aviso {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 0.5rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
}

/* Bootstrap 5.3 pinta <table class="table"> con --bs-table-bg, que hereda de
   --bs-body-bg (blanco, porque nunca lo sobreescribimos) — sin esto, cualquier tabla
   sale blanca encima de nuestras tarjetas oscuras, sin importar el color inline que
   le pongamos al texto. */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-striped-bg: var(--panel-alt);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: var(--panel-alt);
  --bs-table-hover-color: var(--text);
  --bs-table-border-color: var(--border);
  color: var(--text);
  vertical-align: middle;
}

/* Trazo de latido — firma visual del producto (ver DISEÑO_UI.md) */
.tw-latido {
  stroke: var(--accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Modal genérico — usado por cualquier formulario "nuevo X" para no empujar
   el contenido de la página (ver DECISIONES.md, 2026-08-22). JS vanilla, sin Bootstrap JS. */
.tw-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.tw-modal-backdrop.tw-modal-abierto {
  display: flex;
}

.tw-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
  position: relative;
}

.tw-modal-cerrar {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.tw-modal-cerrar:hover {
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Feed de actividad en vivo (panel cliente, ver REALTIME.md y DECISIONES.md 2026-08-22:
   "lo más visible debe ser los registros que se mueven en vivo") */
.tw-feed-linea {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid var(--border);
  animation: tw-feed-entrada 0.3s ease-out;
  border-left: 3px solid transparent;
}

.tw-feed-linea:last-child {
  border-bottom: none;
}

.tw-feed-linea.tw-feed-entro {
  border-left-color: var(--accent-2);
}

.tw-feed-linea.tw-feed-salio {
  border-left-color: var(--text-faint);
}

.tw-feed-bandera {
  flex-shrink: 0;
  padding-left: 0.4rem;
  padding-top: 0.1rem;
  font-size: 1.3rem; /* tamaño de reemplazo (🌐/👋) cuando no hay código de país */
  line-height: 1;
}

.tw-feed-bandera .fi {
  width: 1.6em;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.tw-feed-detalle {
  flex: 1;
  min-width: 0;
}

.tw-feed-titulo {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
}

.tw-feed-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.35rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-muted);
  word-break: break-word;
}

/* Ícono de tipo de dispositivo (móvil/escritorio/tablet) dentro de la línea del feed,
   ver DECISIONES.md 2026-08-23 y 2026-08-24 (tablet). */
.tw-feed-dispositivo {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--text-faint);
}

/* Ícono + nombre del navegador dentro de la línea del feed, ver DECISIONES.md
   2026-08-24 -- mismo criterio visual que .tw-feed-dispositivo, un poco más callado
   (texto en --text-faint) porque es información secundaria frente al dispositivo. */
.tw-feed-navegador {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  color: var(--text-faint);
}

.tw-feed-navegador svg {
  flex-shrink: 0;
}

/* Dominio del referrer en la línea del feed, ver DECISIONES.md 2026-08-23 — el
   subrayado punteado es la pista visual de que trae un tooltip (title) con la URL
   completa de origen al pasar el mouse. */
.tw-feed-referrer {
  border-bottom: 1px dotted var(--text-faint);
  cursor: help;
}

.tw-feed-referrer.tw-feed-referrer-directo {
  border-bottom-style: none;
  cursor: default;
  font-style: italic;
  color: var(--text-faint);
}

.tw-feed-hora {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-faint);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 0.1rem;
}

/* Fila del título del feed en vivo (texto + posible etiqueta "posible bot" al lado),
   ver DECISIONES.md 2026-08-23. */
.tw-feed-titulo-fila {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Etiqueta "posible bot" (heurística sobre el User-Agent, no una certeza — ver
   TrackingService::esPosibleBot(), DECISIONES.md 2026-08-23). Color de aviso
   (--danger) pero sin relleno sólido, para que no compita visualmente con el resto
   del feed ni parezca un error real. */
.tw-feed-bot {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  line-height: 1.5;
  cursor: help;
}

/* Gráfica de "Actividad por hora" (ver DECISIONES.md, 2026-08-23) — 24 barras CSS
   simples, sin librería de gráficos: es un solo número por hora, no amerita la
   dependencia. */
.tw-horas-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 80px;
  margin-bottom: 0.5rem;
}

.tw-hora-barra {
  flex: 1;
  background: var(--accent-2-soft);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}

.tw-hora-barra-pico {
  background: var(--accent-2);
}

@keyframes tw-feed-entrada {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Botón de confirmación destructiva (modal genérico de confirmar, reemplaza confirm()
   nativo del navegador — ver DECISIONES.md, 2026-08-22) */
.tw-btn-peligro {
  background: var(--danger);
  border: 1px solid var(--danger);
  color: #fff;
  font-weight: 600;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  transition: opacity 0.15s ease;
}

.tw-btn-peligro:hover {
  opacity: 0.85;
  color: #fff;
}

.tw-btn-secundario {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
}

.tw-btn-secundario:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

/* Navegación responsiva — menú hamburguesa en móvil (admin y panel cliente), ver
   DECISIONES.md 2026-08-22. Un solo bloque de HTML (#menuNav) que en escritorio se ve
   como una fila normal en la barra de navegación, y en móvil se convierte en un panel
   desplegable de ancho completo debajo de la barra. */
.tw-hamburguesa {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.tw-hamburguesa span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.tw-hamburguesa.tw-hamburguesa-abierta span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.tw-hamburguesa.tw-hamburguesa-abierta span:nth-child(2) {
  opacity: 0;
}

.tw-hamburguesa.tw-hamburguesa-abierta span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.tw-nav-menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.tw-nav-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-right: 1px solid var(--border);
  padding-right: 1.5rem;
}

/* Hover + estado activo de los links del menú superior (ver DECISIONES.md,
   2026-08-30) -- antes eran texto plano sin ningún indicio de en qué sección se está
   parado. La clase "activo" la agrega la vista comparando uri_string() contra cada
   link, no JS -- es una condición del lado del servidor, no algo que cambie después de
   cargar la página. */
.tw-nav-links a {
  padding: 0.35rem 0.65rem;
  border-radius: 0.4rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tw-nav-links a:hover {
  background: var(--panel-alt);
  color: var(--text) !important;
}

.tw-nav-links a.tw-nav-link-activo {
  background: var(--accent-soft);
  color: var(--accent) !important;
  font-weight: 600;
}

.tw-nav-cuenta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

@media (max-width: 767.98px) {
  .tw-hamburguesa {
    display: flex;
  }

  .tw-nav-menu {
    display: none;
    flex-basis: 100%;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.25rem 0 1rem;
    margin-top: 0.75rem;
    border-top: 1px solid var(--border);
  }

  .tw-nav-menu.tw-nav-menu-abierta {
    display: flex;
  }

  .tw-nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-right: none;
    padding-right: 0;
    width: 100%;
  }

  .tw-nav-links a {
    padding: 0.75rem 0.1rem;
    border-bottom: 1px solid var(--border);
  }

  .tw-nav-links a:last-child {
    border-bottom: none;
  }

  .tw-nav-cuenta {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    border-top: 1px solid var(--border);
    padding-top: 0.85rem;
    margin-top: 0.35rem;
    width: 100%;
  }

  .tw-nav-cuenta > button,
  .tw-nav-cuenta > span {
    width: 100%;
  }
}

/* Tarjeta "Tu código de rastreo" en el panel del cliente (solo lectura — ver
   DECISIONES.md 2026-08-22) */
.tw-paso-numero {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
}

/* Tooltips de ayuda en las tarjetas de tráfico (ver DECISIONES.md, 2026-08-30) -- un
   ícono pequeño junto al título de cada tarjeta que, al pasar el mouse (o al enfocarlo
   con teclado), muestra una leyenda corta explicando qué información contiene esa
   tarjeta. CSS puro, sin JS, mismo criterio que el estado activo del menú: la
   interacción es simple, no hace falta nada más pesado. */
.tw-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tw-tooltip-icono {
  display: inline-flex;
  color: var(--text-faint);
  cursor: help;
  border-radius: 50%;
  transition: color 0.15s ease;
}

.tw-tooltip-icono:hover,
.tw-tooltip-icono:focus-visible {
  color: var(--accent);
  outline: none;
}

.tw-tooltip-texto {
  position: absolute;
  z-index: 30;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: min(220px, 60vw);
  background: var(--panel-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: left;
  padding: 0.5rem 0.65rem;
  border-radius: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.tw-tooltip-texto::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border);
}

.tw-tooltip:hover .tw-tooltip-texto,
.tw-tooltip-icono:focus-visible + .tw-tooltip-texto {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Rótulo de sección dentro del detalle de un sitio (ver DECISIONES.md, 2026-08-30,
   reorganización de tarjetas) -- agrupa varias tarjetas bajo una pregunta en común
   ("De dónde vienen tus visitantes", etc.). Discreto a propósito: no es un título de
   tarjeta, solo una pista visual de que las tarjetas de abajo van juntas. */
.tw-seccion-titulo {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0.25rem 0 0;
}