@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&family=DM+Sans:wght@400;500&display=swap');

:root{
  --tinta:#14181E; --azul:#1B3A6B; --papel:#FAFAF8; --blanco:#fff;
  --suave:#7C7C76; --tenue:#8A8A84; --linea:rgba(27,58,107,.13);
  --alerta:#9C4A32; --serif:'Playfair Display',Georgia,serif; --sans:'DM Sans',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--papel);color:var(--tinta);font:16px/1.55 var(--sans);
     -webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}

.env{max-width:1080px;margin:0 auto;padding:18px 18px 56px}
.cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:22px}
.marca{font-family:var(--serif);font-size:21px;color:var(--azul)}
.lb{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue)}
h1{font-family:var(--serif);font-size:26px;font-weight:400;margin:0 0 3px;line-height:1.15}
h2{font-family:var(--serif);font-size:20px;font-weight:400;margin:0}
.sub{font-size:13px;color:var(--suave);margin:0 0 16px}

.fichas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.chip{font-size:12px;padding:4px 11px;border:1px solid var(--linea);border-radius:20px;color:var(--azul);white-space:nowrap}
.chip.on{background:var(--azul);color:var(--papel);border-color:var(--azul)}
.chip.gris{color:var(--tenue);border-color:rgba(0,0,0,.13)}

.fila{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:baseline;
      padding:12px 0;border-bottom:1px solid var(--linea)}
.fila:last-child{border-bottom:none}
.nm{font-size:15px;font-weight:500;margin:0}
.og{font-size:12px;color:var(--suave);margin:2px 0 0}
.dd{font-size:12px;font-weight:500;white-space:nowrap}
.tarde{color:var(--alerta)}
.luego{color:var(--suave)}
.vacio{font-size:14px;color:var(--suave);padding:22px 0}

.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:10px;padding:16px}
.dato{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:5px 0}
.dato span:first-child{color:var(--suave)}
.hist{font-size:13px;margin:0 0 11px;line-height:1.45}
.hist .cuando{font-size:12px;color:var(--tenue)}

form.acc{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
input[type=text],input[type=password],select,textarea{
  font:15px var(--sans);color:var(--tinta);background:var(--blanco);
  border:1px solid var(--linea);border-radius:6px;padding:9px 11px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(27,58,107,.35);outline-offset:-1px}
button{font:14px/1 var(--sans);font-weight:500;padding:10px 14px;border-radius:6px;
       border:1px solid var(--azul);background:var(--azul);color:var(--papel);cursor:pointer}
button.tenue{background:transparent;color:var(--azul)}
.aviso{background:#FBEFEA;border:1px solid rgba(156,74,50,.3);color:var(--alerta);
       font-size:13px;padding:9px 12px;border-radius:6px;margin-bottom:14px}

.entrada{max-width:330px;margin:14vh auto;text-align:center}
.entrada .marca{font-size:40px;display:block;margin-bottom:4px}
.entrada form{margin-top:34px;text-align:left}
.entrada button{width:100%;margin-top:10px}
.pie{font-size:12px;color:var(--tenue);margin-top:16px}

.volver{font-size:13px;color:var(--azul);display:inline-block;margin-bottom:14px}
.dos{display:grid;gap:26px}
@media (min-width:820px){
  .dos{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:30px;align-items:start}
  .volver{display:none}
  .env{padding:26px 26px 70px}
  h1{font-size:30px}
}
@media (max-width:819px){
  .con-ficha .lista{display:none}
}