/* Documentos de cada serie: la lista, el editor sobre la hoja y la impresión.
   La hoja es siempre papel blanco, también en modo oscuro: así se ve como sale. */
@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@800;900&family=Source+Sans+3:wght@400;600;700&display=swap');

/* ---------------------------------------------------------- en la serie */
.documentos{background:var(--papel);border:1px solid var(--linea);border-left:4px solid var(--u-color);
  border-radius:var(--radio);padding:18px 20px;margin:16px 0;box-shadow:var(--sombra)}
.doc-alto{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.doc-alto h2{font-size:18px}
.doc-alto p{margin:4px 0 0}
.doc-nuevo{background:var(--u-color);color:#fff;border:0}
.doc-lista ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.doc-vacio{margin:12px 0 0}
.doc-item{width:100%;display:flex;align-items:center;gap:14px;text-align:left;font:inherit;color:inherit;
  background:transparent;border:1px solid var(--linea);border-radius:10px;padding:10px 14px;cursor:pointer}
.doc-item:hover{border-color:var(--u-color)}
.doc-hoja{flex:none;width:26px;height:34px;border-radius:3px;background:#fff;border:1px solid var(--linea);
  box-shadow:inset 0 5px 0 var(--u-color)}
.doc-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.doc-txt b,.doc-txt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-cuando{flex:none;text-align:right;font-size:12px;line-height:1.35}

/* --------------------------------------------------------------- editor */
body.con-editor{overflow:hidden}
.ed-capa{position:fixed;inset:0;z-index:50;background:var(--fondo);display:flex;flex-direction:column}
.ed-capa[hidden]{display:none}
.ed-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;
  background:var(--papel);border-bottom:1px solid var(--linea);box-shadow:var(--sombra)}
.ed-cerrar{background:var(--bruma);color:var(--tinta);border:1px solid var(--linea);white-space:nowrap}
.ed-herr{display:flex;align-items:center;gap:4px;flex-wrap:wrap;flex:1;min-width:0}
.ed-b{font:inherit;font-size:13px;min-width:34px;height:32px;padding:0 9px;border-radius:7px;cursor:pointer;
  background:transparent;color:var(--tinta);border:1px solid var(--linea)}
.ed-b:hover{background:var(--bruma)}
.ed-sep{width:1px;height:22px;background:var(--linea);margin:0 4px}
.ed-estado{min-width:90px;text-align:right}
.ed-acciones{display:flex;gap:6px;flex-wrap:wrap}
.ed-imprimir{background:var(--tinta);color:var(--papel);border:0}
.ed-mesa{flex:1;overflow:auto;padding:28px 16px 48px}
.ed-ayuda{max-width:8.5in;margin:14px auto 0;text-align:center}

/* ------------------------------------------------------------ la hoja */
.hd{--d-gris:#5b6166;--d-linea:#e4e6e8;color:#1a1a1a;font-family:var(--d-cuerpo);font-size:10.5pt;line-height:1.5}
.hd-hoja{background:#fff;width:100%;max-width:8.5in;min-height:11in;margin:0 auto;
  padding:0.45in 0.75in 0.4in;display:flex;flex-direction:column;
  box-shadow:0 2px 14px rgba(0,0,0,.14);border-radius:2px}
.hd-membrete{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  padding-bottom:12px;border-bottom:3px solid var(--d-tinta);position:relative}
.hd-membrete::after{content:"";position:absolute;left:0;bottom:-3px;width:90px;height:3px;background:var(--d-acento)}
.hd-membrete img{display:block;width:auto;max-width:60%;object-fit:contain}
.hd-datos{text-align:right;font-size:8pt;color:var(--d-gris);line-height:1.4}
.hd-datos b{color:var(--d-tinta);letter-spacing:.04em}
.hd-meta{display:grid;grid-template-columns:90px 1fr;gap:1px 10px;margin:18px 0 16px;font-size:9.5pt}
.hd-meta dt{color:var(--d-gris)}
.hd-meta dd{margin:0;font-weight:500}
.hd-titulo{font-family:var(--d-titulos);font-weight:900;font-size:18pt;line-height:1.15;margin:0 0 12px;
  color:var(--d-tinta);letter-spacing:-.01em}
.hd-cuerpo{flex:1}
.hd-cuerpo p{margin:0 0 10px}
.hd-cuerpo h2{font-family:var(--d-titulos);font-weight:900;font-size:13pt;margin:16px 0 6px;color:var(--d-tinta)}
.hd-cuerpo h3{font-weight:700;font-size:11pt;margin:12px 0 4px;color:var(--d-tinta)}
.hd-cuerpo ul,.hd-cuerpo ol{margin:0 0 10px;padding-left:22px}
.hd-cuerpo li{margin:0 0 3px}
.hd-cuerpo blockquote{margin:0 0 10px;padding:4px 12px;border-left:3px solid var(--d-acento);color:#333}
.hd-cuerpo table{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:9.5pt;line-height:1.35}
.hd-cuerpo th,.hd-cuerpo td{border:1px solid #cfd3d6;padding:5px 8px;vertical-align:top;text-align:left}
.hd-cuerpo th,.hd-cuerpo thead td{background:#f4f4f2;font-weight:700}
.hd-cuerpo tr{break-inside:avoid}
.hd-cuerpo td p,.hd-cuerpo th p{margin:0}
.hd-firma{margin-top:48px;width:3in;border-top:1px solid var(--d-tinta);padding-top:4px;font-size:9pt;
  display:flex;flex-direction:column;break-inside:avoid}
.hd-f-nombre{font-weight:700;color:var(--d-tinta)}
.hd-f-cargo{color:var(--d-gris)}
.hd-pie{margin-top:24px;display:flex;justify-content:space-between;font-size:7.5pt;color:var(--d-gris);
  border-top:1px solid var(--d-linea);padding-top:6px}
.hd-marca::before{content:"●";color:var(--d-acento);margin-right:6px}

/* los campos que se escriben */
.hd [contenteditable]{outline:none;border-radius:3px}
.hd [contenteditable]:hover{background:rgba(0,0,0,.025)}
.hd [contenteditable]:focus{background:rgba(0,0,0,.04);box-shadow:0 0 0 2px color-mix(in srgb,var(--d-acento) 45%,transparent)}
.hd-campo{display:inline-block;min-width:4ch}
.hd [data-ph]:empty::before{content:attr(data-ph);color:#9aa1a6;font-weight:400}
.hd-cuerpo[contenteditable]{min-height:3in;padding:2px 4px;margin:0 -4px}

@media (max-width:640px){
  .ed-mesa{padding:12px 8px 32px}
  .hd-hoja{padding:24px 18px;min-height:0}
  .hd-meta{grid-template-columns:64px 1fr}
  .ed-estado{min-width:0;text-align:left}
}

/* ----------------------------------------------------------- impresión */
#impresion{display:none}
@media print{
  @page{size:letter;margin:0}
  html,body{background:#fff!important}
  body>*:not(#impresion){display:none!important}
  #impresion{display:block}
  .imp-t{width:100%;border-collapse:collapse}
  .imp-t>thead>tr>td{padding:0.45in 0.75in 18px}
  .imp-t>tbody>tr>td{padding:0 0.75in}
  .imp-hueco{height:0.8in}
  .imp-pie{position:fixed;left:0.75in;right:0.75in;bottom:0.35in;margin:0}
  .hd-cuerpo h2,.hd-cuerpo h3{break-after:avoid}
}