/* Safraner · la hoja A4 del día (opción I, «La tablilla») y su página de presentación. */

/* La hoja A4, en milímetros */
.a4{display:block;width:210mm;height:297mm;background:var(--papel);color:#1d1b18;position:relative;overflow:hidden;font-family:var(--f-texto)}
.a4-in{position:absolute;inset:12mm 13mm 11mm;display:flex;flex-direction:column;gap:5mm}
.a4[data-plantilla="toile"] .a4-in{inset:17mm 18mm 15mm}
.a4-in{z-index:1}
.a4[data-plantilla="toile"]{background:var(--toile) 0 0/60mm repeat}
.a4[data-plantilla="toile"]::before{content:"";position:absolute;inset:9mm;background:var(--papel);outline:.3mm solid rgba(34,64,140,.5);outline-offset:-1.6mm}
.a4[data-plantilla="azafran"]::before{content:"";position:absolute;left:0;right:0;top:0;height:5mm;background:#F2C76A}
.a4[data-plantilla="tablilla"]::before{content:"";position:absolute;left:13mm;right:13mm;top:36mm;height:.4mm;background:var(--cobalto);opacity:.6}
.a4-cab{display:grid;justify-items:center;gap:1.5mm;text-align:center}
.a4-cab .logo{--ls:9.5mm}
.a4-dia{font-family:var(--f-titulo);font-style:italic;font-size:6.2mm;color:var(--cobalto)}
.a4 h3{font:700 2.9mm/1.2 var(--f-texto);letter-spacing:.22em;text-transform:uppercase;color:var(--cobalto);margin:0 0 1.6mm}
.a4 h3 small{font-weight:600;letter-spacing:.04em;text-transform:none;color:#6a6762}
.a4-hoy{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:6mm;align-items:start;padding:4mm 5mm;background:rgba(34,64,140,.05);border-left:1.2mm solid var(--cobalto)}
.a4[data-plantilla="azafran"] .a4-hoy{border-left-color:#7E4E9C;background:rgba(180,138,203,.1)}
.a4-gui span{display:block;font:700 2.9mm/1.2 var(--f-texto);letter-spacing:.22em;text-transform:uppercase;color:var(--cobalto)}
.a4-gui p{font-family:var(--f-mano);font-size:7.6mm;line-height:1.02;margin-top:1mm}
.a4 .mano{list-style:none;margin:0;padding:0;display:grid;gap:.4mm}
.a4 .mano li{display:flex;justify-content:space-between;gap:3mm;font-family:var(--f-mano);font-size:5.6mm;line-height:1.08;color:#25303f}
.a4 .mano b{white-space:nowrap}
.a4-cols{display:grid;grid-template-columns:1fr 1fr;gap:9mm;flex:1;min-height:0}
.a4-cols > div{display:flex;flex-direction:column;gap:0}
.a4 .pts{list-style:none;margin:0 0 5mm;padding:0;display:grid;gap:1.55mm}
.a4 .pts li{display:flex;align-items:baseline;gap:1.6mm;font-size:3.5mm;line-height:1.25}
.a4 .pts .n{min-width:0}
.a4 .pts em{font-style:normal;color:#6a6762}
.a4 .pts i{font-style:normal;color:#8a5f0c}
.a4 .pts .dl{flex:1;min-width:4mm;border-bottom:.25mm dotted rgba(34,64,140,.55)}
.a4 .pts b{font-weight:700;color:var(--marino);white-space:nowrap}
.a4-pie{font-size:2.7mm;color:#6a6762;text-align:center;border-top:.25mm solid rgba(34,64,140,.3);padding-top:2.4mm}

/* Página de presentación */
.presenta{background:radial-gradient(120% 90% at 50% 0%,#B7B2AA,#8E8A84 70%);min-height:100vh;padding-block:30px 60px}
.presenta .envoltura{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(24px,5vw,60px);align-items:start}
@media (max-width:900px){.presenta .envoltura{grid-template-columns:1fr}}
.presenta h1{font-size:clamp(34px,5vw,52px);color:var(--marino)}
.presenta .ficha{background:var(--crema);padding:clamp(22px,3vw,34px);display:grid;gap:14px;box-shadow:0 26px 50px -30px rgba(31,42,68,.6)}
.presenta dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 16px;margin:4px 0 0;font-size:15.5px}
.presenta dt{color:var(--suave)}
.presenta dd{margin:0}
.presenta .botones{display:flex;flex-wrap:wrap;gap:10px}
.presenta .botones button{border:1px solid var(--linea);background:var(--blanco);color:var(--marino);border-radius:99px;padding:9px 14px;font:700 13px/1 var(--f-texto)}
.presenta .botones button[aria-pressed="true"]{background:var(--cobalto);border-color:var(--cobalto);color:#fff}
.presenta .falta{font-size:14px;color:var(--suave)}
.presenta .falta li{margin-bottom:4px}

/* La tablilla con la hoja */
.tablilla{position:relative;width:100%;max-width:560px;justify-self:center;aspect-ratio:240/350;border-radius:14px;background:linear-gradient(135deg,#C29060,#8E5E33 55%,#AD7948);box-shadow:0 34px 50px -26px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.08);padding:9% 4.4% 4.4%;container-type:inline-size;cursor:zoom-in;border:0;display:block;font:inherit;text-align:left}
.tablilla::before{content:"";position:absolute;left:50%;top:1.8%;width:36%;height:7.5%;transform:translateX(-50%);border-radius:10px 10px 6px 6px;background:linear-gradient(180deg,#f2f2f2,#9a9a9a);box-shadow:0 6px 12px rgba(0,0,0,.4);z-index:3}
.tablilla .marco-a4{display:block;position:relative;width:100%;aspect-ratio:210/297;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.tablilla .a4,.grande .a4{transform-origin:0 0;position:absolute;left:0;top:0}
.tablilla small{position:absolute;left:0;right:0;bottom:-28px;text-align:center;color:#2b2b2b;font-size:13px}

/* La hoja en grande */
.grande{position:fixed;inset:0;z-index:80;background:rgba(20,24,34,.86);display:grid;place-items:center;padding:20px}
.grande .marco-a4{position:relative;width:min(92vw,calc((100vh - 60px) * 210 / 297));aspect-ratio:210/297;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.grande .cerrar{position:absolute;top:max(14px,env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px));width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--marino);font-size:24px;line-height:1}

@media print{
  @page{size:A4;margin:0}
  body{background:none}
  .no-imprimir{display:none!important}
}