/* ==========================================================================
   CAMBO — Sistema de diseño
   Mundo visual: tablero de auto + señalética vial de emergencia
   ========================================================================== */

:root {
  /* --- Tokens de marca (locked) ----------------------------------------- */
  --bg: #ffffff;
  --surface: #f9f9f9;
  --fg: #5e6a70;
  --muted: #b7bcbf;
  --border: #e8eaeb;
  --accent: #f59300;

  /* --- Extensiones semánticas (mundo vial) ------------------------------ */
  /* Estas NO rompen la paleta registrada: son tokens de estado derivados. */
  --ink: #0e0d0c;              /* asfalto — fondo MODO FARO */
  --ink-soft: #1a1916;         /* tarjeta elevada sobre asfalto */
  --ink-line: #2a2925;         /* separador sobre asfalto */
  --on-ink: #f0eee8;           /* texto principal sobre asfalto */
  --on-ink-muted: #8a857d;     /* texto muted sobre asfalto */
  --danger: #c53030;           /* cancelar / destructivo */
  --danger-soft: #f5dede;      /* fondo de alerta destructiva */
  --success: #2f7a47;          /* resuelta / confirmado */

  /* --- Estado de acento (hover/active) --------------------------------- */
  --accent-hover: #db8400;     /* amber one notch darker — CTA hover */

  /* --- Stage chrome (gallery + beacon mode) ---------------------------- */
  --stage-bg: #050504;         /* fondo más oscuro que --ink */
  --bezel: #1c1a17;            /* marco del phone frame en gallery */
  --ink-hi: #161513;           /* luz suave sobre ink (gradient stop) */

  /* --- Micro-contextos (mapas, tiles, tags) ---------------------------- */
  --map-bg: #eef0f1;           /* fondo del mapa SVG */
  --map-stroke: #d4d8da;       /* calles principales */
  --map-block: #dde0e2;        /* manzanas / bloques */
  --tile-bateria-bg: #fff4e0;  /* tile amarillo batería */
  --tile-bateria-border: #ffd590;
  --tag-resolved-bg: #e0f0e5;  /* fondo del tag Resuelto */
  --tag-cancelled-bg: #f5dede; /* fondo del tag Cancelado */

  /* --- Acento con alfa (halo, beacon) ---------------------------------- */
  --accent-08: rgba(245, 147, 0, 0.08);
  --accent-12: rgba(245, 147, 0, 0.12);
  --accent-24: rgba(245, 147, 0, 0.24);
  --accent-48: rgba(245, 147, 0, 0.48);

  /* --- Tipografía ------------------------------------------------------- */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica Neue, Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica Neue, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* --- Escala y geometría ---------------------------------------------- */
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --gutter: 16px;
  --baseline: 8px;
  --hairline: 1px;

  /* --- Sombras (calmas, no glossy) ------------------------------------- */
  --shadow-card: 0 1px 0 rgba(15, 13, 12, 0.04), 0 1px 3px rgba(15, 13, 12, 0.06);
  --shadow-float: 0 4px 16px rgba(15, 13, 12, 0.08), 0 1px 3px rgba(15, 13, 12, 0.06);
  --shadow-beacon: 0 0 0 6px var(--accent-12), 0 0 36px var(--accent-24);

  /* --- Estado de viewport ---------------------------------------------- */
  --vp-w: 390px;               /* iPhone 15 Pro */

  /* --- Tap targets ------------------------------------------------------ */
  --tap-min: 48px;             /* iOS HIG / Material */
}

/* --- Reset minimalista -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* --- Tipografía base --------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* --- Chevron stripe (cinta de obra vial) ------------------------------ */
.chevron-stripe {
  height: 12px;
  background: repeating-linear-gradient(
    -45deg,
    var(--ink) 0 12px,
    var(--accent) 12px 24px
  );
}

/* --- Animaciones -------------------------------------------------------- */
@keyframes beacon-pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-48); }
  70%  { box-shadow: 0 0 0 24px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes beacon-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.96); }
}
@keyframes dot-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@keyframes halo-out {
  from { transform: scale(0.6); opacity: 0.5; }
  to   { transform: scale(1.6); opacity: 0; }
}

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