/* Diseño compartido de toda la app — tema CLARO, limpio, con tarjetas y sombras suaves. */
:root {
  --bg:#eef1f8; --fg:#131c33; --mut:#6b7488; --card:#ffffff; --card2:#f1f4fb;
  --acc:#3d7be0; --accd:#2f63bd; --line:#e6e9f2;
  --green:#18a957; --yellow:#d89516; --red:#e0453c;
  --ok-bg:#e7f6ee; --warn-bg:#fdf3e2;
  --shadow:0 1px 2px rgba(20,30,60,.05), 0 2px 8px rgba(20,30,60,.06);
  --r:16px; --nav:66px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { background:var(--bg); }
body {
  margin:0; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--fg);
  padding:16px 16px calc(var(--nav) + 24px);
  line-height:1.45; -webkit-font-smoothing:antialiased;
}
h1 { font-size:22px; margin:2px 0 2px; } h2 { font-size:17px; margin:0 0 10px; }
.muted,.mut { color:var(--mut); font-size:15px; }

/* Tarjetas */
.card { background:var(--card); border-radius:var(--r); padding:16px; margin-top:12px; box-shadow:var(--shadow); }
.card.tap { cursor:pointer; } .card.tap:active { transform:scale(.995); }

/* Botones */
.btn { display:block; width:100%; text-align:center; text-decoration:none; border:0; cursor:pointer;
  padding:15px; border-radius:14px; background:var(--acc); color:#fff; font-size:17px; font-weight:600; margin-top:12px; box-shadow:var(--shadow); }
.btn:active { background:var(--accd); } .btn.sec { background:var(--card); color:var(--acc); } .btn:disabled { opacity:.5; }
.btn.sm { padding:11px; font-size:16px; }

/* Lista de filas */
.list { background:var(--card); border-radius:var(--r); margin-top:12px; overflow:hidden; box-shadow:var(--shadow); }
.item { display:flex; align-items:center; gap:12px; padding:14px; border-bottom:1px solid var(--line); }
.item:last-child { border-bottom:0; }
.item .ic { width:26px; display:flex; align-items:center; justify-content:center; color:var(--acc); flex:0 0 26px; }
.item .txt { flex:1; min-width:0; } .item .txt .t { font-size:16px; } .item .txt .s { color:var(--mut); font-size:14px; margin-top:1px; }
.item .end { color:var(--mut); font-size:15px; text-align:right; white-space:nowrap; }
.item .del { color:var(--mut); font-size:17px; background:none; border:0; padding:4px 6px; cursor:pointer; }

/* Estado: hecho / falta */
.badge { font-size:14px; padding:4px 10px; border-radius:999px; font-weight:600; }
.badge.done { background:var(--ok-bg); color:var(--green); } .badge.todo { background:var(--card2); color:var(--mut); }

/* Semáforo (fondos suaves para fondo claro) */
.lamp-green { background:var(--ok-bg); color:#0c7a3c; } .lamp-yellow { background:var(--warn-bg); color:#9a6a08; }
.lamp-red { background:#fdeceb; color:#b4322a; } .lamp-cal { background:var(--card2); color:var(--fg); }

/* Chips / avisos */
.chip { display:inline-block; background:#e9f0fc; color:var(--acc); border-radius:999px; padding:4px 11px; font-size:14px; font-weight:600; }
.note { border-radius:14px; padding:12px 14px; font-size:16px; margin-top:10px; box-shadow:var(--shadow); background:var(--card); }
.note.ok { background:var(--ok-bg); border-left:4px solid var(--green); }
.note.warn { background:var(--warn-bg); border-left:4px solid var(--yellow); color:#8a5e10; }

.sec { color:var(--mut); font-size:14px; text-transform:uppercase; letter-spacing:.04em; margin:20px 0 6px; font-weight:600;
  position:sticky; top:52px; z-index:5; background:var(--bg); padding:10px 0 6px; }
/* Aparecido suave al entrar en pantalla (scroll) */
.eh-reveal { opacity:0; transform:translateY(12px); transition:opacity .45s ease, transform .45s ease; }
.eh-reveal.eh-in { opacity:1; transform:none; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.center { text-align:center; }
input,select,textarea { width:100%; padding:12px; border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--fg); font-size:16px; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--acc); }
label { font-size:14px; color:var(--mut); }
.spin { text-align:center; color:var(--mut); padding:30px 0; }
svg.i { display:block; }