/* Estilos propios del sitio. El tablero trae los suyos en tablero.css; aca solo
   va lo que rodea: cabecera, catalogo y estados. Comparte los mismos tokens de
   color y tipografia, definidos en tablero.css. */

.barra{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 22px;border-bottom:1px solid var(--line);background:var(--surface);
}
.barra .marca{font:600 15px/1 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.barra .marca a{color:inherit;text-decoration:none}
.barra .sep{flex:1}
.barra .quien{font:400 12px/1.3 var(--sans);color:var(--muted);text-align:right}
.barra .quien b{display:block;color:var(--ink);font-weight:500}
.barra button.salir{
  font:500 11.5px/1 var(--sans);color:var(--muted);background:none;
  border:1px solid var(--line);border-radius:4px;padding:7px 12px;cursor:pointer;
}
.barra button.salir:hover{color:var(--ink);border-color:var(--accent)}
.volver{
  font:500 12px/1 var(--sans);color:var(--accent);text-decoration:none;
  display:inline-flex;align-items:center;gap:5px;
}
.volver:hover{text-decoration:underline}

.catalogo{max-width:980px;margin:0 auto;padding:28px 22px 60px}
.catalogo h1{font:600 21px/1.25 var(--sans);margin:0 0 4px;letter-spacing:-.01em}
.catalogo .bajada{font:400 13px/1.5 var(--sans);color:var(--muted);margin:0 0 22px;max-width:62ch}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.tarjeta{
  display:block;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:16px 17px;
  transition:border-color .12s,transform .12s;
}
.tarjeta:hover{border-color:var(--accent);transform:translateY(-1px)}
.tarjeta h2{font:600 14.5px/1.3 var(--sans);margin:0 0 5px}
.tarjeta p{font:400 12px/1.5 var(--sans);color:var(--muted);margin:0 0 12px}
.tarjeta .pie{
  font:400 10.5px/1 var(--mono);color:var(--muted);
  display:flex;justify-content:space-between;gap:8px;
  border-top:1px solid var(--line);padding-top:9px;
}

.aviso{
  max-width:62ch;margin:8px 0 0;padding:16px 18px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface);
}
.aviso h2{font:600 14px/1.3 var(--sans);margin:0 0 6px}
.aviso p{font:400 12.5px/1.55 var(--sans);color:var(--muted);margin:0}
.aviso.problema{border-color:var(--rojo);background:var(--rojo-soft)}
.aviso.problema h2{color:var(--rojo)}
.cargando{font:400 12.5px/1 var(--sans);color:var(--muted);padding:26px 0}

.acciones{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
button.principal{
  font:600 11.5px/1 var(--sans);color:var(--accent-ink);background:var(--accent);
  border:1px solid var(--accent);border-radius:4px;padding:8px 14px;cursor:pointer;
}
button.principal:hover{filter:brightness(1.08)}
button.principal:disabled{opacity:.55;cursor:progress}
.estado-corrida{font:400 11.5px/1.3 var(--sans);color:var(--muted)}

/* ---------- login propio del sitio ---------- */
.acceso{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
}
.acceso form{
  width:100%;max-width:340px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 26px 22px;
}
.acceso .marca{font:600 17px/1 var(--sans);letter-spacing:-.01em;margin:0 0 4px}
.acceso .sub{font:400 12.5px/1.5 var(--sans);color:var(--muted);margin:0 0 20px}
.acceso label{display:block;margin-bottom:13px}
.acceso label span{
  display:block;font:600 9.5px/1 var(--cond);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px;
}
.acceso input{
  width:100%;font:400 13px/1 var(--sans);color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:4px;padding:9px 10px;
}
.acceso input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.acceso button[type="submit"]{
  width:100%;font:600 12.5px/1 var(--sans);color:var(--accent-ink);background:var(--accent);
  border:1px solid var(--accent);border-radius:4px;padding:11px;cursor:pointer;margin-top:6px;
}
.acceso button[type="submit"]:hover:not(:disabled){filter:brightness(1.08)}
.acceso button[type="submit"]:disabled{opacity:.6;cursor:progress}
.acceso .error{
  font:400 12px/1.45 var(--sans);color:var(--rojo);background:var(--rojo-soft);
  border-radius:4px;padding:9px 11px;margin:0 0 14px;
}
.acceso .pie{
  font:400 11px/1.45 var(--sans);color:var(--muted);margin:16px 0 0;
  border-top:1px solid var(--line);padding-top:12px;
}
.acceso .pie a{color:var(--accent)}