/* ============================================================
   CUIDÁNDOTE — Sistema visual
   Impronta: claro, sereno, alto contraste funcional.
   La emergencia usa un rojo señal preciso; el resto respira.
   ============================================================ */

:root {
  /* Paleta */
  --ink:      #14181f;   /* texto principal, casi negro azulado */
  --ink-soft: #52606d;   /* texto secundario */
  --line:     #e4e7ec;   /* divisores */
  --paper:    #ffffff;   /* superficies */
  --canvas:   #f6f7f9;   /* fondo */
  --brand:    #1f6f6b;   /* verde azulado sereno: cuidado, salud */
  --brand-d:  #17544f;
  --signal:   #d92d20;   /* rojo señal: emergencia */
  --signal-d: #b42318;
  --amber:    #b54708;   /* modo prueba */
  --amber-bg: #fef7ec;
  --ok:       #067647;

  /* Tipografía */
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --r: 10px;      /* radio base */
  --r-sm: 7px;
  --sp: 8px;      /* unidad de espaciado */
  --shadow: 0 1px 2px rgba(20,24,31,.06), 0 4px 16px rgba(20,24,31,.05);
  --shadow-lg: 0 8px 40px rgba(20,24,31,.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1,h2,h3 { line-height: 1.2; margin: 0 0 .4em; letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; font-weight: 680; }
h2 { font-size: 1.2rem; font-weight: 640; }
h3 { font-size: 1rem;   font-weight: 620; }
p  { margin: 0 0 1em; }
small, .muted { color: var(--ink-soft); }

.mono { font-family: var(--mono); }

/* ---- Layout base ---- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 12px; align-items: center; }
.row.wrap-r { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grid { display: grid; gap: 16px; }

/* ---- Marca ---- */
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 680; letter-spacing: -0.02em; color: var(--ink);
}
.brand .mark {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), var(--brand-d));
  position: relative; flex: 0 0 auto;
}
.brand .mark::after {
  content: ""; position: absolute; inset: 7px 7px auto 7px; height: 3px;
  border-radius: 3px; background: #fff; box-shadow: 0 6px 0 rgba(255,255,255,.75);
}

/* ---- Barra superior app ---- */
.topbar {
  background: var(--paper); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.topbar .wrap { display: flex; align-items: center; gap: 20px; height: 58px; }
.topbar nav { display: flex; gap: 4px; margin-left: auto; }
.topbar nav a {
  color: var(--ink-soft); padding: 7px 12px; border-radius: var(--r-sm);
  font-weight: 520; font-size: .93rem;
}
.topbar nav a:hover { background: var(--canvas); text-decoration: none; color: var(--ink); }
.topbar nav a.active { color: var(--brand-d); background: #ecf5f4; }

/* ---- Modo prueba (banner permanente) ---- */
.testbar {
  background: var(--amber-bg); color: var(--amber);
  border-bottom: 1px solid #f6dcae;
  font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  text-align: center; padding: 6px 12px;
}
.testbar .dot { display:inline-block; width:7px; height:7px; border-radius:50%;
  background: var(--amber); margin-right: 7px; vertical-align: middle;
  animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---- Tarjetas ---- */
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 20px; box-shadow: var(--shadow);
}
.card.pad-lg { padding: 26px; }
.card .card-h { display:flex; align-items:center; justify-content: space-between;
  margin: -4px 0 14px; }
.card .card-h h2, .card .card-h h3 { margin: 0; }

/* ---- Botones ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: .95rem;
  padding: 11px 18px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer; transition: .14s;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-d); }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--canvas); }
.btn-signal { background: var(--signal); color: #fff; box-shadow: 0 2px 8px rgba(217,45,32,.25); }
.btn-signal:hover { background: var(--signal-d); }
.btn-block { width: 100%; }
.btn-lg { padding: 15px 22px; font-size: 1.05rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Formularios ---- */
label.field { display: block; margin-bottom: 14px; }
label.field > span { display:block; font-size:.82rem; font-weight:600;
  color: var(--ink-soft); margin-bottom: 5px; }
.input, input[type=text], input[type=email], input[type=tel],
input[type=password], input[type=date], input[type=number], textarea, select {
  width: 100%; font: inherit; color: var(--ink);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper); transition: .14s;
}
.input:focus, input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(31,111,107,.14);
}
textarea { min-height: 84px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px){ .form-grid { grid-template-columns: 1fr; } }
.check { display:flex; gap:10px; align-items:flex-start; font-size:.9rem;
  color: var(--ink-soft); margin-bottom: 12px; }
.check input { margin-top: 3px; }

/* ---- Chips / etiquetas ---- */
.tag { display:inline-flex; align-items:center; gap:6px;
  font-size:.76rem; font-weight:600; padding:3px 9px; border-radius: 999px;
  background: var(--canvas); color: var(--ink-soft); border:1px solid var(--line); }
.tag.red    { background:#fef3f2; color:var(--signal-d); border-color:#fecdca; }
.tag.green  { background:#ecfdf3; color:var(--ok); border-color:#abefc6; }
.tag.amber  { background:var(--amber-bg); color:var(--amber); border-color:#f6dcae; }
.tag.brand  { background:#ecf5f4; color:var(--brand-d); border-color:#c5e5e2; }

.dot-live { width:8px; height:8px; border-radius:50%; background:var(--signal);
  box-shadow:0 0 0 0 rgba(217,45,32,.5); animation: ring 1.4s infinite; }
@keyframes ring { 0%{box-shadow:0 0 0 0 rgba(217,45,32,.45)} 70%{box-shadow:0 0 0 8px rgba(217,45,32,0)} 100%{box-shadow:0 0 0 0 rgba(217,45,32,0)} }

/* ---- Tablas ---- */
table.data { width:100%; border-collapse: collapse; font-size:.9rem; }
table.data th { text-align:left; font-weight:600; color:var(--ink-soft);
  font-size:.78rem; text-transform:uppercase; letter-spacing:.03em;
  padding:10px 12px; border-bottom:1px solid var(--line); }
table.data td { padding:12px; border-bottom:1px solid var(--line); }
table.data tr:hover td { background: var(--canvas); }

/* ---- Timeline ---- */
.timeline { list-style:none; margin:0; padding:0; }
.timeline li { position:relative; padding: 0 0 18px 26px; }
.timeline li::before { content:""; position:absolute; left:5px; top:4px;
  width:9px; height:9px; border-radius:50%; background:var(--brand);
  border:2px solid var(--paper); box-shadow:0 0 0 1px var(--brand); }
.timeline li::after { content:""; position:absolute; left:9px; top:14px; bottom:0;
  width:2px; background:var(--line); }
.timeline li:last-child::after { display:none; }
.timeline .t { font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); }
.timeline .d { font-weight:520; }

/* ---- Escaneo público (móvil) ---- */
.scan-shell { min-height:100vh; background:var(--canvas);
  display:flex; flex-direction:column; }
.scan-body { flex:1; width:100%; max-width:440px; margin:0 auto; padding:18px; }
.scan-hero { background:linear-gradient(160deg,#fff, #fbfcfc);
  border:1px solid var(--line); border-radius:14px; padding:20px;
  box-shadow: var(--shadow); }
.scan-photo { width:64px; height:64px; border-radius:14px; object-fit:cover;
  background:#e9edf1; border:1px solid var(--line); }
.crit { background:#fef3f2; border:1px solid #fecdca; border-radius:var(--r-sm);
  padding:12px 14px; font-size:.9rem; color:var(--signal-d); }
.step-num { font-family:var(--mono); font-size:.75rem; color:var(--ink-soft);
  letter-spacing:.06em; text-transform:uppercase; }

/* ---- Mapa ---- */
#map { height: 560px; width:100%; border-radius: var(--r); border:1px solid var(--line); z-index: 1; }
.alert-item { padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper); cursor:pointer; transition:.14s; }
.alert-item:hover { border-color:var(--brand); background:#fbfdfd; }
.alert-item.hot { border-color:#fecdca; background:#fffbfa; }

/* ---- Login ---- */
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:20px;
  background: radial-gradient(1200px 500px at 50% -10%, #ecf5f4, var(--canvas)); }
.auth-card { width:100%; max-width:380px; }

/* ---- Utilidades ---- */
.hidden { display:none !important; }
.center { text-align:center; }
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.divider { height:1px; background:var(--line); margin:16px 0; border:0; }
.kpi { font-size:1.8rem; font-weight:700; letter-spacing:-.02em; }
.kpi-label { font-size:.8rem; color:var(--ink-soft); }
.list-plain { list-style:none; margin:0; padding:0; }
.list-plain li { padding:8px 0; border-bottom:1px solid var(--line); }
.list-plain li:last-child { border-bottom:0; }

@media (max-width:820px){
  .topbar nav a span { display:none; }
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
}
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-sidebar { grid-template-columns: 340px 1fr; }
@media (max-width:900px){ .grid-sidebar { grid-template-columns: 1fr; } }

/* ---- v4: captura de medios y badges de chat ---- */
.msg-badge {
  display: inline-block;
  background: var(--signal);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
}
#captureBox video { width: 100%; max-height: 280px; object-fit: cover; }