[hidden]{display:none!important}
/* hola Swift · Gestión — maqueta. Los tokens vienen de ../estilo/tokens.css */

h1,h2,h3{font-family:var(--f-titulos);margin:0;letter-spacing:-.01em}
h1{font-size:clamp(26px,3.4vw,36px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
h2{font-size:22px;font-weight:700}
h3{font-size:17px;font-weight:600}
p{margin:0}
a{color:var(--enlace);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}

/* Estructura */
.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.lateral{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:24px;padding:24px 16px;border-right:1px solid var(--linea);background:rgba(247,247,247,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.lateral .logo img{display:block;height:36px;width:auto}
.lateral .logo span{display:block;margin-top:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--texto-3)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:12px;color:var(--texto);font-weight:500;font-size:15px}
.nav a:hover{background:var(--linea-2);text-decoration:none}
.nav a.activo{background:var(--superficie);box-shadow:inset 0 0 0 1px var(--linea);font-weight:600}
.nav a i{font-style:normal;font-size:12px;font-weight:700;color:var(--pendiente);background:var(--pendiente-fondo);border-radius:var(--r-pill);padding:2px 8px}
.yo{margin-top:auto;display:flex;align-items:center;gap:10px;padding:8px;border-radius:16px;background:var(--superficie);box-shadow:inset 0 0 0 1px var(--linea)}
.yo{color:var(--texto)} .yo:hover{text-decoration:none;box-shadow:inset 0 0 0 1px #C7C7CE}
.yo span{min-width:0} .yo b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yo small{display:block;font-size:12px;color:var(--texto-3)}
.principal{padding:32px clamp(16px,4vw,48px) 96px;max-width:1180px;width:100%}
.cinta{font-size:12.5px;color:var(--texto-3);margin-bottom:20px}
.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.cab p{color:var(--texto-2);margin-top:6px;max-width:60ch}
.cab .acc{display:flex;gap:8px;flex-wrap:wrap}
.miga{font-size:14px;color:var(--texto-3);margin-bottom:8px;display:block}

/* Piezas */
.tarjeta{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-tarjeta);padding:24px 26px;box-shadow:var(--sombra)}
.tarjeta + .tarjeta,.bloque + .bloque{margin-top:16px}
.tarjeta > h3{margin-bottom:12px}
.rejilla{display:grid;gap:16px}
.rejilla.dos{grid-template-columns:1.6fr 1fr}
.rejilla.tres{grid-template-columns:repeat(3,1fr)}
.etiqueta{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--texto-3)}
.cifra{font-family:var(--f-titulos);font-size:clamp(20px,2.4vw,28px);white-space:nowrap;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:4px}
.sub{color:var(--texto-2);font-size:14.5px}
.pill{display:inline-flex;align-items:center;border-radius:var(--r-pill);padding:3px 10px;font-size:12.5px;font-weight:600;white-space:nowrap;background:var(--linea-2);color:var(--texto-2)}
.pill.hecho{background:var(--hecho-fondo);color:var(--hecho)}
.pill.aviso{background:var(--aviso-fondo);color:var(--aviso)}
.pill.pendiente{background:var(--pendiente-fondo);color:var(--pendiente)}
.btn.peq{height:32px;padding:0 13px;font-size:13.5px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.nota{border-radius:var(--r-campo);padding:12px 14px;font-size:14.5px;background:var(--aviso-fondo);border:1px solid var(--aviso-borde);color:#5C4200}
.nota.bien{background:var(--hecho-fondo);border-color:#BFE3CB;color:#14602F}
.nota.mal{background:var(--pendiente-fondo);border-color:var(--pendiente-borde);color:#8F2413}

/* Listas y tablas */
.lista{display:flex;flex-direction:column}
.fila{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:13px 0;border-top:1px solid var(--linea-2);color:var(--texto)}
.fila:first-child{border-top:0}
a.fila:hover{text-decoration:none}
a.fila:hover b{color:var(--enlace)}
.fila .cuando{font-size:13.5px;color:var(--texto-3);font-variant-numeric:tabular-nums;min-width:92px}
.fila b{font-weight:600;display:block}
.fila small{color:var(--texto-2);font-size:13.5px}
.fila .fin{display:flex;gap:8px;align-items:center}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--texto-3);padding:0 12px 10px 0}
td{padding:12px 12px 12px 0;border-top:1px solid var(--linea-2);vertical-align:middle}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;padding:12px 0 12px 16px;white-space:nowrap}
th.num{padding:0 0 10px 16px}
td.neg{color:var(--texto)} td.pos{color:var(--hecho)}
.desborda{overflow-x:auto}
.barra{height:6px;border-radius:var(--r-pill);background:var(--linea-2);overflow:hidden;min-width:80px}
.barra i{display:block;height:100%;border-radius:inherit;background:var(--celeste)}

/* Pestañas y pasos */
.pest{display:flex;gap:4px;margin-bottom:20px;overflow-x:auto;padding-bottom:2px}
.pest a{padding:7px 14px;border-radius:var(--r-pill);font-size:14.5px;font-weight:500;color:var(--texto-2);white-space:nowrap}
.pest a:hover{background:var(--linea-2);text-decoration:none}
.pest a.activo{background:var(--texto);color:#fff}
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:24px}
.paso{padding:12px 14px;border-radius:16px;background:var(--superficie);border:1px solid var(--linea);font-size:14px;color:var(--texto-3)}
.paso b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.paso.hecho{color:var(--hecho);border-color:#BFE3CB;background:var(--hecho-fondo)}
.paso.ahora{color:var(--texto);border-color:var(--texto);font-weight:600}

/* Formularios */
.campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.campo{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--texto-2)}
.campo.ancho{grid-column:1/-1}
.campo input,.campo select,.campo textarea{border:1px solid var(--linea);border-radius:var(--r-campo);padding:10px 12px;background:var(--superficie);font-weight:400;font-size:15px;color:var(--texto);width:100%}
.campo output{font-weight:400;font-size:15px;color:var(--texto)}
.seg{display:inline-flex;background:var(--linea-2);border-radius:var(--r-pill);padding:3px}
.seg button{border:0;background:transparent;border-radius:var(--r-pill);padding:5px 13px;font-size:13.5px;font-weight:600;color:var(--texto-2);cursor:pointer}
.seg button.activo{background:var(--superficie);color:var(--texto);box-shadow:0 1px 2px rgba(17,17,17,.12)}
.persona{display:flex;align-items:center;gap:12px}
.persona img{width:40px;height:40px;border-radius:50%;object-fit:cover}

/* Texto para copiar */
.texto-plano{font:400 14px/1.6 var(--f-documento);white-space:pre-wrap;background:var(--pagina);border:1px solid var(--linea);border-radius:var(--r-campo);padding:18px 20px;margin:0;color:var(--texto)}

/* Editor */
.editor{border:1px solid var(--linea);border-radius:var(--r-panel);background:var(--superficie);box-shadow:var(--sombra);overflow:hidden}
.editor .barra-ed{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--linea)}
.editor .cuerpo-ed{display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.editor[data-modo="codigo"] .cuerpo-ed,.editor[data-modo="lectura"] .cuerpo-ed{grid-template-columns:1fr}
.editor[data-modo="codigo"] .papel,.editor[data-modo="lectura"] textarea{display:none}
.editor textarea{border:0;resize:none;outline:0;padding:22px;font:400 14px/1.6 var(--f-codigo);background:var(--superficie);border-right:1px solid var(--linea);min-height:560px;width:100%}
.editor textarea[readonly]{color:var(--texto-2);background:#FCFCFD}
.papel{background:var(--pagina);padding:24px;overflow:auto;max-height:820px;background-image:radial-gradient(circle at 1.5px 1.5px,var(--punto) 1.3px,transparent 1.6px);background-size:24px 24px}
.hoja{background:#fff;box-shadow:0 1px 2px rgba(17,17,17,.06),0 12px 32px -16px rgba(17,17,17,.25);padding:48px 44px;margin:0 auto;max-width:720px;min-height:640px}
.hoja .membrete{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #000;padding-bottom:10px;margin-bottom:28px;font:400 9pt/1.3 var(--f-documento);color:#000}
.hoja .membrete img{height:26px;width:auto;display:block}
.hoja .membrete b{border:1px solid #000;padding:1px 6px;letter-spacing:.1em}
.hoja .pie{border-top:1px solid #000;margin-top:36px;padding-top:8px;font:400 8.5pt/1.4 var(--f-documento);color:#000;word-break:break-all}
.documento{max-width:none;font-size:11pt}
.documento h1,.documento h2,.documento h3{font-family:inherit;letter-spacing:0;line-height:1.5}
.documento ul,.documento ol{margin:0 0 1em;padding-left:2.2em}
.documento blockquote{margin:0 0 1em;padding-left:1em;border-left:2px solid #000}
.documento hr{border:0;border-top:1px solid #000;margin:1.5em 0}
.documento mark{background:var(--pendiente-fondo);color:var(--pendiente);padding:0 3px;border-radius:3px}
.documento table{font:inherit;margin-bottom:1em}
.documento th{font:inherit;font-weight:700;text-transform:none;letter-spacing:0;color:#000;padding:4pt 6pt}
.documento td{border-top:1px solid #000;padding:4pt 6pt}

/* Entrada */
.entrada{min-height:100vh;display:grid;place-items:center;padding:24px}
.entrada .tarjeta{max-width:420px;width:100%;text-align:center;padding:40px 32px}
.entrada img{width:260px;max-width:80%;height:auto;margin-bottom:8px}
.entrada p{color:var(--texto-2);margin:10px 0 24px}
.vacio{text-align:center;padding:36px 16px;color:var(--texto-2)}
.vacio img{width:72px;height:auto;display:block;margin:0 auto 12px}

#aviso{position:fixed;inset:auto auto 28px 50%;margin:0;border:0;overflow:visible;transform:translate(-50%,20px);background:var(--texto);color:#fff;font-size:14.5px;font-weight:500;padding:10px 18px;border-radius:22px;max-width:min(560px,calc(100vw - 32px));width:max-content;text-align:center;text-wrap:balance;opacity:0;pointer-events:none;transition:opacity .25s,transform .4s var(--ease);z-index:50}
#aviso.ver{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .lateral{position:fixed;inset:auto 0 0 0;height:auto;flex-direction:row;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));border-right:0;border-top:1px solid var(--linea);z-index:30;gap:0}
  .lateral .logo,.yo{display:none}
  .nav{flex-direction:row;width:100%;justify-content:space-between;overflow-x:auto}
  .nav a{font-size:12.5px;padding:8px 9px;flex-direction:column;gap:2px}
  .rejilla.dos,.rejilla.tres,.campos{grid-template-columns:1fr}
  .pasos{grid-template-columns:repeat(2,1fr)}
  .editor[data-modo="partido"] .cuerpo-ed{grid-template-columns:1fr}
  .editor[data-modo="partido"] textarea{border-right:0;border-bottom:1px solid var(--linea);min-height:300px}
  .hoja{padding:28px 20px}
  .fila{grid-template-columns:minmax(0,1fr) auto}
  .fila .cuando{grid-column:1/-1;margin-bottom:-10px}
  #aviso{bottom:84px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Aplicación ---------- */
.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;display:inline-grid;place-items:center}
.avatar.sin{background:var(--linea-2);font-weight:700;color:var(--texto-2)}
.ayuda{font-size:14.5px;color:var(--texto-2);background:var(--superficie);border:1px dashed var(--linea);border-radius:var(--r-campo);padding:11px 14px;margin-bottom:16px}
.ayuda b{color:var(--texto)}
.btn.lg{height:52px;padding:0 26px;font-size:17px}
.btn.peligro{background:var(--pendiente);box-shadow:none;text-shadow:none}
.btn.sec.peligro,.btn.fantasma.peligro{background:transparent;color:var(--pendiente)}
.error{color:var(--pendiente);font-size:14.5px;font-weight:500;margin-top:12px}
.casilla{display:flex;align-items:center;gap:8px;font-weight:400;font-size:15px;color:var(--texto)}
.casilla input{width:auto}
.campo small{font-weight:400;font-size:13px;color:var(--texto-3)}
.campo textarea{resize:vertical;font-family:inherit;line-height:1.45}
.campo input[type=file]{padding:8px}
.entrada h2{font-size:24px}
.entrada .dev{margin-top:24px;padding-top:18px;border-top:1px dashed var(--linea);display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.entrada .dev .etiqueta{width:100%;margin-bottom:4px}

/* Diálogos */
.dlg{border:0;padding:0;border-radius:var(--r-tarjeta);background:var(--superficie);color:var(--texto);box-shadow:0 24px 80px -20px rgba(17,17,17,.45);width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto}
.dlg::backdrop{background:rgba(17,17,17,.32);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.dlg[open]{animation:subir .28s var(--ease)}
@keyframes subir{from{opacity:0;transform:translateY(14px) scale(.98)}}
.dlg > form,.dlg > h2,.dlg > p,.dlg > div,.dlg > footer{margin:0}
.dlg{padding:26px 26px 22px}
.dlg h2{margin-bottom:6px}
.dlg .sub{margin-bottom:6px}
.dlg .campos{margin-top:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.dlg footer{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap;
  position:sticky;bottom:-22px;margin:8px -26px -22px;padding:14px 26px 22px;background:linear-gradient(rgba(255,255,255,0),var(--superficie) 14px)} /* los botones, siempre a la vista aunque el diálogo sea largo */
.dlg .firma-pad{margin-top:16px}
.dlg .error{margin-top:12px}
.dlg.ancho{width:min(860px,calc(100vw - 24px))}
.dlg.pregunta{width:min(460px,calc(100vw - 24px))}
.dlg.pregunta h2{font-size:18px;font-weight:600;line-height:1.4;letter-spacing:0;text-wrap:pretty}
.dlg.pregunta .campos{display:none}

/* Firma */
.firma-pad{position:relative;margin-top:16px;border:1.5px dashed #C7C7CE;border-radius:var(--r-panel);background:#fff;touch-action:none;overflow:hidden}
.firma-pad canvas{display:block;width:100%;height:auto;aspect-ratio:14/5;cursor:crosshair;touch-action:none}
.firma-pad span{position:absolute;inset:auto 0 14px;text-align:center;font-size:13.5px;color:var(--texto-3);pointer-events:none}
.firmas{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;margin-top:36px;font:400 10pt/1.4 var(--f-documento);color:#000;text-align:center}
.firmas img,.firmas i{display:block;height:72px;max-width:100%;margin:4px auto;object-fit:contain}
.firmas i{border-bottom:1px solid #000;height:56px;margin-bottom:20px}
.firmas b{display:block;font-weight:700}
.firmas small{display:block;font-size:8.5pt}

@media (max-width:900px){
  .yo{display:none}
  .dlg .campos{grid-template-columns:1fr}
  .dlg{padding:22px 18px 18px}
  .dlg footer{bottom:-18px;margin:8px -18px -18px;padding:14px 18px 18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Imprimir: G.imprimir copia las hojas a #impresion y solo eso llega al papel, una hoja por página */
#impresion{display:none}
@media print{
  body{background:#fff}
  body::before,#aviso{display:none!important}
  body > :not(#impresion){display:none!important}
  #impresion{display:block}
  #impresion .hoja{box-shadow:none;max-width:none;padding:0;margin:0;min-height:0;break-after:page}
  #impresion .hoja:last-child{break-after:auto}
  #impresion .firmas,#impresion .documento blockquote,#impresion .documento tr{break-inside:avoid}
}