:root{
  --tinta:#1a1a19; --suave:#6b6a66; --linea:#e2e0da; --fondo:#faf9f6;
  --papel:#fff; --acento:#2d5f4f; --alerta:#8a4b2a; --ok:#2d5f4f;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:var(--acento)}

.barra{display:flex;justify-content:space-between;align-items:center;
  padding:14px 24px;background:var(--papel);border-bottom:1px solid var(--linea)}
.marca{font-weight:600;text-decoration:none;color:var(--tinta);letter-spacing:-.01em}
.marca span{color:var(--suave);font-weight:400}
.barra nav{display:flex;gap:16px;align-items:center;font-size:14px}
.quien{color:var(--suave)}

main{max-width:920px;margin:0 auto;padding:28px 24px 60px}
h1{font-size:26px;margin:0 0 4px;letter-spacing:-.02em}
h2{font-size:15px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--suave);margin:0 0 14px;font-weight:600}
h3{font-size:17px;margin:0 0 4px}
.sub{color:var(--suave);margin:0 0 18px;font-size:14px}
.volver{margin:0 0 14px;font-size:14px}
.vacio{color:var(--suave);font-style:italic;margin:0}

.caja{background:var(--papel);border:1px solid var(--linea);border-radius:10px;
  padding:20px;margin:22px 0}
.aviso{background:#fdf6ec;border:1px solid #e8d9bd;border-radius:8px;
  padding:11px 14px;font-size:14px;margin:16px 0}
.error{background:#fdecea;border:1px solid #e8c0ba;border-radius:8px;
  padding:11px 14px;font-size:14px;color:var(--alerta)}

input[type=text],input[type=email],input[type=password],input:not([type]){
  padding:9px 11px;border:1px solid var(--linea);border-radius:7px;
  font-size:15px;font-family:inherit;background:var(--papel);width:100%}
input:focus{outline:2px solid var(--acento);outline-offset:-1px}
button{padding:9px 20px;background:var(--acento);color:#fff;border:0;
  border-radius:7px;font-size:15px;font-family:inherit;cursor:pointer}
button:hover{opacity:.9}
.fila{display:flex;gap:10px;flex-wrap:wrap}
.fila input{flex:1;min-width:150px}

fieldset.clase{border:0;padding:0;margin:0 0 16px;display:grid;gap:8px}
fieldset.clase label{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;
  align-items:baseline;padding:11px 14px;border:1px solid var(--linea);
  border-radius:8px;cursor:pointer}
fieldset.clase label:has(:checked){border-color:var(--acento);background:#f4f8f6}
fieldset.clase span{grid-column:2;color:var(--suave);font-size:13px}
input[type=file]{margin-bottom:14px;font-size:14px;width:100%}

.lista{width:100%;border-collapse:collapse}
.lista tr{border-bottom:1px solid var(--linea)}
.lista tr:last-child{border-bottom:0}
.lista td{padding:11px 6px;vertical-align:top}
.lista .ico{width:26px;color:var(--suave);font-size:15px}
.lista .est{text-align:right;white-space:nowrap;width:110px}
.lista small{display:block;color:var(--suave);font-size:12.5px;margin-top:2px}
.lista small.err{color:var(--alerta)}
.lista tr.clase-consulta .ico{color:var(--alerta)}
.lista tr.nuevo{background:#f4f8f6}

.chip{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;
  border:1px solid var(--linea);color:var(--suave);background:var(--fondo)}
.chip.lista{color:var(--ok);border-color:#bcd6c9;background:#f0f6f3}
.chip.error{color:var(--alerta);border-color:#e8c0ba;background:#fdf1ee}
.chip.procesando{color:#7a6320;border-color:#e0d0a0;background:#fdf9ec}

.tarjetas{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.tarjeta{display:block;background:var(--papel);border:1px solid var(--linea);
  border-radius:10px;padding:17px;text-decoration:none;color:inherit}
.tarjeta:hover{border-color:var(--acento)}
.tarjeta .sub{margin:0 0 8px;font-size:13px}
.nums{margin:8px 0 0;font-size:13px;color:var(--suave);display:flex;
  gap:7px;align-items:center;flex-wrap:wrap}

.entrar{max-width:340px;margin:60px auto}
.entrar form{display:grid;gap:14px;margin-top:20px}
.entrar label{display:grid;gap:5px;font-size:14px;color:var(--suave)}

.pie{max-width:920px;margin:0 auto;padding:20px 24px 40px;
  color:var(--suave);font-size:13px;border-top:1px solid var(--linea)}

@media (prefers-color-scheme:dark){
  :root{--tinta:#e8e6e1;--suave:#9a9791;--linea:#33322e;--fondo:#141412;
        --papel:#1c1b19;--acento:#7fb89f}
  .aviso{background:#241f16;border-color:#4a3f28}
  .error{background:#2a1a17;border-color:#5a3a32}
  fieldset.clase label:has(:checked){background:#1a2420}
  .lista tr.nuevo{background:#182019}
  .chip.lista{background:#182019;border-color:#3a5044}
}

/* Menú de secciones */
.barra nav a{text-decoration:none;color:var(--suave);padding:4px 0;position:relative}
.barra nav a:hover,.barra nav a.on{color:var(--tinta)}
.barra nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-4px;
  height:2px;background:var(--acento)}
.pronto{font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  background:var(--linea);color:var(--suave);padding:1px 5px;border-radius:8px;
  vertical-align:middle;margin-left:2px}
.sep{flex:1}
.barra nav{width:100%;margin-left:32px}

/* Listas explicativas de las secciones que vienen */
.pasos{margin:0;padding-left:20px;color:var(--tinta)}
.pasos li{margin-bottom:7px}
.nota{color:var(--suave);font-size:14px;margin:14px 0 0}
.caja input:disabled,.caja button:disabled{opacity:.5;cursor:not-allowed}

@media (max-width:640px){
  .barra{flex-wrap:wrap;gap:10px}
  .barra nav{margin-left:0;flex-wrap:wrap;gap:12px;font-size:13px}
  .sep{flex:0}
}