/* Cisternas — primero para celular. Una columna; desde 640px, mas aire. */

:root {
  --fondo: #f6f5f2;
  --superficie: #ffffff;
  --texto: #1d1f21;
  --suave: #5b6168;
  --borde: #d9d6cf;
  --acento: #0b5d4b;
  --acento-texto: #ffffff;
  --error-fondo: #fdecea;
  --error-texto: #8a1c12;
  --ok-fondo: #e7f4ee;
  --ok-texto: #0b5d4b;
  --vigente-fondo: #e7f4ee;
  --vigente-texto: #0b5d4b;
  --amarillo-fondo: #fff4c2;
  --amarillo-texto: #5e4700;
  --naranja-fondo: #ffe3c8;
  --naranja-texto: #8a3a00;
  --vencido-fondo: #fdecea;
  --vencido-texto: #8a1c12;
  --neutro-fondo: #eceae4;
  --neutro-texto: #4b5157;
  --radio: 10px;
  --toque: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #121416;
    --superficie: #1b1e21;
    --texto: #e9eaeb;
    --suave: #a3a9b0;
    --borde: #33383d;
    --acento: #3fb592;
    --acento-texto: #0b1210;
    --error-fondo: #3a1714;
    --error-texto: #f5b5ad;
    --ok-fondo: #12302a;
    --ok-texto: #8fe0c3;
    --vigente-fondo: #12302a;
    --vigente-texto: #8fe0c3;
    --amarillo-fondo: #3a3210;
    --amarillo-texto: #f2dc7a;
    --naranja-fondo: #402410;
    --naranja-texto: #ffc08a;
    --vencido-fondo: #3a1714;
    --vencido-texto: #f5b5ad;
    --neutro-fondo: #262a2e;
    --neutro-texto: #b5bbc2;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--acento); }

/* ── Barra y menu ─────────────────────────────────────────────────────── */

.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  min-height: 56px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

.marca { font-weight: 700; font-size: 1.1rem; color: var(--texto); text-decoration: none; }

.salir { margin: 0; }

.menu {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 8px 12px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

.menu a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--texto);
  text-decoration: none;
}

.menu a[aria-current="page"] { background: var(--acento); color: var(--acento-texto); }

/* ── Contenido ────────────────────────────────────────────────────────── */

.contenido { padding: 16px; max-width: 640px; margin: 0 auto; }

h1 { font-size: 1.4rem; margin: 8px 0 16px; }
h2 { font-size: 1.1rem; margin: 24px 0 8px; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  margin-bottom: 12px;
}

.suave { color: var(--suave); }

/* ── Formularios: 16px para que iOS no haga zoom, toques de 48px ─────── */

label { display: block; font-weight: 600; margin: 16px 0 6px; }

input[type="text"], input[type="password"], input[type="tel"], input[type="date"],
input[type="number"], select, textarea {
  width: 100%;
  min-height: var(--toque);
  padding: 10px 12px;
  font-size: 16px;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

input:focus, select:focus, textarea:focus, button:focus, a:focus {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--toque);
  margin-top: 20px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--acento-texto);
  background: var(--acento);
  border: 0;
  border-radius: var(--radio);
  text-decoration: none;
  cursor: pointer;
}

.boton-secundario { color: var(--acento); background: transparent; border: 1px solid var(--acento); }

.boton-texto {
  min-height: var(--toque);
  padding: 0 8px;
  font-size: 16px;
  color: var(--acento);
  background: none;
  border: 0;
  cursor: pointer;
}

.aviso { padding: 12px 14px; border-radius: var(--radio); margin: 12px 0; }
.aviso-error { background: var(--error-fondo); color: var(--error-texto); }
.aviso-ok { background: var(--ok-fondo); color: var(--ok-texto); }

/* ── Listas ───────────────────────────────────────────────────────────── */

.lista { list-style: none; margin: 0; padding: 0; }

.lista li {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: 8px;
}

.lista a, .lista .fila {
  display: block;
  padding: 14px 16px;
  min-height: var(--toque);
  color: var(--texto);
  text-decoration: none;
}

.etiqueta {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.85rem;
  border: 1px solid var(--borde);
  color: var(--suave);
}

/* ── Semaforo: el estado va con TEXTO, el color solo no alcanza ───────── */

.sem {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
}
.sem-vigente  { background: var(--vigente-fondo);  color: var(--vigente-texto); }
.sem-amarillo { background: var(--amarillo-fondo); color: var(--amarillo-texto); }
.sem-naranja  { background: var(--naranja-fondo);  color: var(--naranja-texto); }
.sem-vencido  { background: var(--vencido-fondo);  color: var(--vencido-texto); }
/* «Por cargar» y «Anulado»: neutro, a proposito. Que falte cargar no es una alarma. */
.sem-faltante { background: var(--neutro-fondo);   color: var(--neutro-texto); border: 1px dashed var(--borde); }
/* «No vence» (un papel de un tipo sin vencimiento): neutro, sin borde: esta cargado, solo que no tiene fecha. */
.sem-sin_vencimiento { background: var(--neutro-fondo); color: var(--neutro-texto); }
.sem-detalle { color: var(--suave); }

/* ── Documentos ───────────────────────────────────────────────────────── */

.doc-titulo { margin: 0 0 8px; }
.doc-fila { display: block; padding: 8px 0; color: var(--texto); text-decoration: none; }
.doc-anterior { margin: 4px 0; font-size: 0.9rem; }
.doc-imagen { display: block; max-width: 100%; height: auto; border-radius: var(--radio); }

input[type="file"] {
  width: 100%;
  min-height: var(--toque);
  padding: 10px 0;
  font-size: 16px;
  color: var(--texto);
}

/* ── Resumen del inicio ───────────────────────────────────────────────── */

.sin-margen { margin-top: 0; }

.cifras { display: flex; gap: 8px; list-style: none; margin: 0 0 8px; padding: 0; }
.cifras li { flex: 1; min-width: 0; }
.cifras a {
  display: block;
  padding: 10px 6px;
  text-align: center;
  color: var(--texto);
  text-decoration: none;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  min-height: var(--toque);
}
.cifra { display: block; margin-bottom: 4px; font-size: 1.6rem; font-weight: 700; border-radius: var(--radio); }

details summary { min-height: var(--toque); padding: 12px 0; cursor: pointer; color: var(--acento); }

/* ── Pantalla de entrada ──────────────────────────────────────────────── */

.entrar { max-width: 400px; margin: 10vh auto 0; }
.entrar h1 { text-align: center; }

@media (min-width: 640px) {
  .contenido { padding: 24px; }
  .boton { width: auto; }
}