/* Taller Fórmula 3 — estilo tomado del logo: metal oscuro, verde neón, tipografía itálica de carrera.
   Es un diseño oscuro a propósito (igual en modo claro y oscuro del sistema). */
:root{
  color-scheme:dark;
  --bg:#0b0e0c;
  --metal-1:#1a201c; --metal-2:#121613;         /* degradado de las superficies */
  --surface:#151a17;
  --ink:#eef3ef; --muted:#8e9b93; --line:#28312b;
  --neon:#6ef236; --neon-hi:#a4ff6e; --neon-ink:#08140a;
  --glow:0 0 0 1px rgba(110,242,54,.55),0 0 14px rgba(110,242,54,.35);
  --hover:#1d2520;
  --u-alta:#ff6b5e; --u-alta-bg:rgba(255,107,94,.12);
  --u-media:#ffc34d; --u-media-bg:rgba(255,195,77,.12);
  --u-baja:#6ef236; --u-baja-bg:rgba(110,242,54,.12);
  --shadow:0 -10px 40px rgba(0,0,0,.6);
  --sans:"Saira Condensed","Arial Narrow",system-ui,sans-serif;
  --display:"Saira","Arial Black",system-ui,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  background:var(--bg);
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 180px),
    radial-gradient(120% 60% at 50% -10%,#18201a 0%,var(--bg) 60%);
  background-attachment:fixed;
  color:var(--ink);font:15px/1.35 var(--sans);-webkit-text-size-adjust:100%;
}
a{color:inherit}

/* ---------- Barra superior ---------- */
nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;
  height:calc(42px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);padding-inline:16px;
  background:linear-gradient(180deg,var(--metal-1),var(--metal-2));
  border-bottom:1px solid var(--neon);box-shadow:0 1px 12px rgba(110,242,54,.25)}
nav .marca{display:flex;align-items:center;gap:7px;text-decoration:none;min-width:0}
nav .marca img{width:30px;height:30px;flex:none;display:block}
nav .marca span{font:italic 800 13px/1 var(--display);text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;
  background:linear-gradient(180deg,#ffffff 0%,#c9d1cc 55%,#8f9a93 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
nav .marca em{font-style:italic;color:var(--neon);-webkit-text-fill-color:var(--neon)}
nav .seccion{font-size:12px;color:var(--muted);padding-left:8px;border-left:1px solid var(--line);white-space:nowrap}
nav .count{margin-left:auto;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
nav form{margin:0}
nav .salir{background:none;border:0;color:var(--muted);font:inherit;font-size:12px;padding:6px 0 6px 6px;cursor:pointer}
nav .salir:hover{color:var(--neon)}
@media (max-width:370px){nav .seccion{display:none}}

/* ---------- Contenido ---------- */
main{padding-inline:16px;padding-block:12px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px}
.bar{display:flex;justify-content:flex-end;gap:10px;padding-inline:4px}

.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;
  font:italic 800 13px/1 var(--display);text-transform:uppercase;letter-spacing:.03em;
  border:0;border-radius:4px;padding:10px 16px;transform:skewX(-8deg);
  background:linear-gradient(180deg,var(--neon-hi),var(--neon));color:var(--neon-ink);box-shadow:var(--glow);
  transition:filter .15s,box-shadow .15s}
.btn:hover{filter:brightness(1.08);box-shadow:0 0 0 1px var(--neon),0 0 20px rgba(110,242,54,.5)}
.btn.ghost{background:transparent;color:var(--neon);box-shadow:inset 0 0 0 1.5px var(--neon)}
.btn.ghost:hover{background:rgba(110,242,54,.08)}
.btn.danger{background:transparent;color:var(--u-alta);box-shadow:inset 0 0 0 1.5px var(--u-alta)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,tr:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--neon-hi);outline-offset:2px}

/* ---------- Tabla ---------- */
.wrap{overflow-x:auto;background:linear-gradient(180deg,var(--metal-1),var(--metal-2));border:1px solid var(--line);border-radius:6px}
table{border-collapse:collapse;width:max-content;min-width:100%;font-size:14px}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;white-space:nowrap}
th{font:italic 700 11px/1.2 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--neon);background:#101411;border-bottom-color:rgba(110,242,54,.35)}
th:first-child,td:first-child{position:sticky;left:0;z-index:1;background:#141915}
th:first-child{background:#101411}
tbody tr[data-href]{cursor:pointer}
tbody tr:hover td{background:var(--hover)}
tbody tr:last-child td{border-bottom:0}
td a{text-decoration:none}
.num{font-variant-numeric:tabular-nums;text-align:right}
td.n{color:var(--muted)}
td.n a{color:var(--neon)}
td.wide{white-space:normal;min-width:150px;max-width:240px}
.pill{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:2px 8px;border-radius:3px}
.u-Alta{color:var(--u-alta);background:var(--u-alta-bg);box-shadow:inset 0 0 0 1px rgba(255,107,94,.4)}
.u-Media{color:var(--u-media);background:var(--u-media-bg);box-shadow:inset 0 0 0 1px rgba(255,195,77,.35)}
.u-Baja{color:var(--u-baja);background:var(--u-baja-bg);box-shadow:inset 0 0 0 1px rgba(110,242,54,.35)}
.empty{padding:20px;color:var(--muted);text-align:left;white-space:normal;margin:0}
.total{display:flex;justify-content:flex-end;gap:16px;color:var(--muted);font-size:13px}
.total b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.aviso{padding:8px 10px;border-radius:4px;font-size:14px;background:rgba(110,242,54,.1);color:var(--neon-hi);box-shadow:inset 3px 0 0 var(--neon)}
.aviso.error{background:var(--u-alta-bg);color:var(--u-alta);box-shadow:inset 3px 0 0 var(--u-alta)}

/* ---------- Hoja de alta/edición ---------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:10}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:11;max-height:90%;overflow-y:auto;
  background:linear-gradient(180deg,var(--metal-1),var(--metal-2));border-top:2px solid var(--neon);
  border-radius:12px 12px 0 0;box-shadow:var(--shadow),0 -2px 18px rgba(110,242,54,.25);
  padding-inline:16px;padding-block:14px calc(16px + env(safe-area-inset-bottom,0px))}
@media (min-width:640px){.sheet{left:50%;right:auto;width:560px;transform:translateX(-50%)}}
@media (prefers-reduced-motion:no-preference) and (max-width:639px){.sheet{animation:up .18s ease-out}@keyframes up{from{transform:translateY(24px)}}}
.sheet h2{margin:0 0 12px;font:italic 800 17px/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
label.full{grid-column:1/-1}
input,select,textarea{font:16px var(--sans);color:var(--ink);background:#0d100e;border:1px solid var(--line);border-radius:4px;padding:8px 9px;width:100%;text-transform:none;letter-spacing:0}
input:focus,select:focus,textarea:focus{border-color:var(--neon);box-shadow:0 0 10px rgba(110,242,54,.25);outline:0}
textarea{resize:vertical;min-height:58px}
.actions{grid-column:1/-1;display:flex;gap:10px;align-items:center;margin-top:6px}
.actions .sp{flex:1}
.err{grid-column:1/-1}
details.borrar{margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
details.borrar summary{cursor:pointer;color:var(--u-alta);font-size:13px;font-weight:600;list-style:none;display:inline-block}
details.borrar summary::-webkit-details-marker{display:none}
details.borrar form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px;font-size:14px}

/* ---------- Login ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding-inline:16px;padding-block:24px}
.login form{width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px}
.login .logo-grande{width:100%;max-width:260px;height:auto;align-self:center;border-radius:10px;
  -webkit-mask-image:radial-gradient(closest-side,#000 78%,transparent 100%);mask-image:radial-gradient(closest-side,#000 78%,transparent 100%)}
.login p{margin:0;color:var(--muted);font-size:14px;text-align:center}
.login .btn{width:100%;padding:12px}

/* ---------- Tareas ---------- */
.e-sin-empezar{color:var(--muted);background:rgba(142,155,147,.12);box-shadow:inset 0 0 0 1px rgba(142,155,147,.35)}
.e-en-proceso{color:#5cc8ff;background:rgba(92,200,255,.12);box-shadow:inset 0 0 0 1px rgba(92,200,255,.35)}
.e-avanzado{color:var(--neon-hi);background:rgba(164,255,110,.12);box-shadow:inset 0 0 0 1px rgba(164,255,110,.4)}
.e-pendiente{color:var(--u-media);background:var(--u-media-bg);box-shadow:inset 0 0 0 1px rgba(255,195,77,.35)}
.e-terminado{color:var(--neon-ink);background:var(--neon)}
tr.hecha td{color:var(--muted)}
tr.hecha td:not(:first-child){opacity:.7}
td.vencida{color:var(--u-alta)}
td.vencida .pill{margin-left:6px}
.total b.rojo{color:var(--u-alta)}
input[type="date"]{min-height:38px}
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.8) sepia(1) saturate(5) hue-rotate(50deg)}
td.fecha{font-variant-numeric:tabular-nums}