/* IXION v3.2 - ixion.css
   Brand book aplicado: fondo #0D1F2D, acento primario #00FFFF,
   secundario #3399FF, texto #FFFFFF, tipografia Rajdhani.

   Concepto de layout: panel de control industrial para uso en campo -
   bordes de acento en vez de sombras genericas, alto contraste,
   objetivos de toque grandes (min 48px) para dispositivos moviles con
   guantes o luz solar directa. Nada de mayusculas sostenidas en labels
   ni tarjetas identicas con la misma sombra - la jerarquia se marca con
   el borde de acento lateral, igual que ya usa el modulo de normas.

   NOTA PENDIENTE (no bloquea Fase 4, registrar en STATE.md):
   Rajdhani se carga hoy desde Google Fonts via <link> en cada HTML. El
   Service Worker (sw.js) no la tiene en su lista de precache, por lo
   que la tipografia de marca puede no cargar en el primer uso sin red.
   Antes de cerrar Fase 4, autohospedar los .woff2 de Rajdhani y
   agregarlos a SHELL_URLS. Mientras tanto, la pila de fallback de
   sistema mantiene la interfaz usable sin conexion.
*/

:root {
  --ixion-bg: #0D1F2D;
  --ixion-surface: #132A3C;
  --ixion-surface-alta: #17334A;
  --ixion-border: rgba(255, 255, 255, 0.12);
  --ixion-border-fuerte: rgba(255, 255, 255, 0.24);
  --ixion-accent: #00FFFF;
  --ixion-accent-2: #3399FF;
  --ixion-text: #FFFFFF;
  --ixion-text-muted: rgba(255, 255, 255, 0.62);
  --ixion-ok: #2ECC8F;
  --ixion-warn: #F5B942;
  --ixion-danger: #FF5C5C;
  --ixion-conflicto: #E2984B;
  --ixion-font: 'Rajdhani', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ixion-radius: 4px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ixion-bg);
  color: var(--ixion-text);
  font-family: var(--ixion-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 {
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 0.5rem 0;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 0.75rem 0; color: var(--ixion-text-muted); }

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

/* --- Encabezado de marca --- */
.ixion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ixion-border);
  flex-wrap: wrap;
}

.ixion-marca {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ixion-marca .logo {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ixion-accent);
}

.ixion-marca .subtitulo {
  font-size: 0.75rem;
  color: var(--ixion-text-muted);
}

/* --- Indicador de conexion (siempre visible, no decorativo) --- */
.indicador-conexion {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--ixion-border);
  font-size: 0.85rem;
  color: var(--ixion-text-muted);
  white-space: nowrap;
}

.indicador-conexion::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ixion-text-muted);
  flex-shrink: 0;
}

.indicador-conexion[data-online="true"] { color: var(--ixion-ok); border-color: var(--ixion-ok); }
.indicador-conexion[data-online="true"]::before { background: var(--ixion-ok); }

.indicador-conexion[data-online="false"] { color: var(--ixion-warn); border-color: var(--ixion-warn); }
.indicador-conexion[data-online="false"]::before { background: var(--ixion-warn); }

/* --- Layout principal --- */
main {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem 1.25rem;
}

.panel {
  background: var(--ixion-surface);
  border: 1px solid var(--ixion-border);
  border-radius: var(--ixion-radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.panel-acento { border-left: 3px solid var(--ixion-accent); }

/* --- Formularios --- */
label {
  display: block;
  font-size: 0.9rem;
  color: var(--ixion-text-muted);
  margin-bottom: 0.3rem;
}

input, select, textarea {
  width: 100%;
  background: var(--ixion-surface-alta);
  border: 1px solid var(--ixion-border);
  border-radius: var(--ixion-radius);
  color: var(--ixion-text);
  font-family: var(--ixion-font);
  font-size: 1rem;
  padding: 0.75rem 0.85rem;
  margin-bottom: 1rem;
  min-height: 48px;
}

textarea { min-height: 120px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ixion-accent);
  box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.2);
}

button, .boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.25rem;
  border-radius: var(--ixion-radius);
  border: 1px solid transparent;
  font-family: var(--ixion-font);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}

.boton-primario { background: var(--ixion-accent); color: var(--ixion-bg); }
.boton-primario:hover { background: #33FFFF; }

.boton-secundario { background: transparent; border-color: var(--ixion-border-fuerte); color: var(--ixion-text); }
.boton-secundario:hover { border-color: var(--ixion-accent-2); }

/* --- Navegacion del hub (dashboard) --- */
.grilla-hub { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }

@media (min-width: 480px) {
  .grilla-hub { grid-template-columns: 1fr 1fr; }
}

.tarjeta-hub {
  display: block;
  background: var(--ixion-surface);
  border: 1px solid var(--ixion-border);
  border-left: 3px solid var(--ixion-accent-2);
  border-radius: var(--ixion-radius);
  padding: 1.1rem;
  text-decoration: none;
  color: var(--ixion-text);
}

.tarjeta-hub h3 { color: var(--ixion-text); }
.tarjeta-hub p { margin: 0; font-size: 0.85rem; }

/* --- Estados de captura/sincronizacion (constants.js SYNC_ESTADOS) --- */
.estado-pill {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--ixion-radius);
  font-size: 0.8rem;
  font-weight: 600;
}

.estado-pill[data-estado="pendiente"],
.estado-pill[data-estado="sincronizando"] { background: rgba(245, 185, 66, 0.15); color: var(--ixion-warn); }

.estado-pill[data-estado="sincronizada"],
.estado-pill[data-estado="duplicada"] { background: rgba(46, 204, 143, 0.15); color: var(--ixion-ok); }

.estado-pill[data-estado="fallida"] { background: rgba(255, 92, 92, 0.15); color: var(--ixion-danger); }

.estado-pill[data-estado="conflicto"] { background: rgba(226, 152, 79, 0.15); color: var(--ixion-conflicto); }

/* --- Listas de items (normas, informes) --- */
.lista-items { display: flex; flex-direction: column; gap: 0.6rem; }

.item-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--ixion-surface);
  border: 1px solid var(--ixion-border);
  border-radius: var(--ixion-radius);
}

.item-codigo {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  color: var(--ixion-text-muted);
}

.estado-vacio { text-align: center; padding: 2.5rem 1rem; color: var(--ixion-text-muted); }

.pie-sesion {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--ixion-border);
}

.enlace-volver {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--ixion-text-muted);
  text-decoration: none;
}
.enlace-volver:hover { color: var(--ixion-accent-2); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}