:root{
  --primary:#3b82f6;
  --text:#0f172a;
  --muted:#6b7280;
  --border:#e5e7eb;
  --gap-under-header:8px;
}

/* Layout */
body{font-family:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial; background:#f3f4f6; color:var(--text);}
.container{max-width:1100px; margin:24px auto; padding:0 16px}
.card{background:#fff; border:1px solid var(--border); border-radius:16px; padding:18px; margin-bottom:16px; box-shadow:0 10px 30px rgba(0,0,0,.06)}
.card h2{margin-top:0; font-size:20px}

.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr}}

.field label{display:block; margin-bottom:6px; color:#334155}
.field input[type="text"], .field input[type="number"], .field input[type="date"], textarea{width:100%; background:white; color:var(--text); border:1px solid var(--border); border-radius:12px; padding:10px 12px}
textarea{resize:vertical}

.divider{grid-column:1 / -1; height:1px; background:var(--border); margin:6px 0}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:8px; background:white; border:1px solid var(--border); border-radius:999px; padding:8px 12px; cursor:pointer}
.chip input{accent-color:var(--primary)}

.btn{border:1px solid var(--border); background:white; color:var(--text); padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600}
.btn.primary{background:linear-gradient(160deg, var(--primary), #60a5fa); color:#fff}
.btn.secondary{background:#eef2ff}
.btn.danger{background:#fee2e2; border-color:#fecaca; color:#7f1d1d}
.btn:active{transform:translateY(1px)}

.actions-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.muted{color:var(--muted)}
.sticky-actions{position:sticky; bottom:0; z-index:5; backdrop-filter: blur(6px) saturate(1.1)}

.subsections details{border:1px solid var(--border); border-radius:12px; padding:10px 12px; margin-bottom:10px; background:#fff}
.subsections summary{cursor:pointer; font-weight:700}

.hidden{display:none}

.preview-wrapper{margin-top:16px}
.print-area{display:flex; flex-direction:column; gap:16px}

/* === Page layout === */
.page{background:white; color:#111827; border-radius:12px; overflow:hidden; border:1px solid #e5e7eb}
.page-inner{ padding:16px 22px 16px 22px; display:flex; flex-direction:column }
.page-header{display:flex; align-items:center; gap:10px; border-bottom:1px solid #e5e7eb; padding-bottom:6px}
.page-header img{max-height:1.8cm; width:auto; height:auto}
.page-header .hdr-title{font-weight:800; font-size:16px}
.page-patient{font-size:14px; margin-top:6px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
@media (max-width:700px){.page-patient{grid-template-columns:1fr 1fr}}
.page-body{flex:1 1 auto; margin-top:var(--gap-under-header)}
/* columns for page 1 only */
.columns-2{column-count:2; column-gap:16px}
.columns-2 .section{break-inside:avoid; page-break-inside:avoid}
.section-title{font-weight:800; margin:0 0 6px 0; border-top:2px solid #e5e7eb; padding-top:8px}
ul.clean{margin:6px 0 10px 18px}
ul.clean li{margin:2px 0}

.page-sign{margin-top:6px; border-top:1px dashed #e5e7eb; padding-top:6px; display:flex; align-items:flex-end; gap:16px; justify-content:flex-start}
.sign-firma{max-height:2cm; height:auto; width:auto}
.sign-timbre{max-height:2cm; height:auto; width:auto}
.sign-id{font-size:12px; margin-top:4px}

.page-footer{margin-top:6px; border-top:1px solid #e5e7eb; padding-top:6px; text-align:center; font-size:11px; color:#444}

/* Lists in generated sections */
.page .section ol{margin:6px 0 8px 18px}
.page .section ul{margin:6px 0 8px 18px}
.page .section li{margin:2px 0}

/* === Peritajes editor normalization === */
#peritajeTexto{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial;
  font-size: 11px;
  line-height: 1.5;           /* interlineado simple */
  text-align: justify;
  outline: none;
  white-space: pre-wrap;
}
#peritajeTexto *{ /* se respeta font-size del origen */ }
#peritajeTexto p{ margin: 0 0 8pt 0; } /* un poco de espacio entre párrafos */
#peritajeTexto ul, #peritajeTexto ol{ margin: 0 0 0 1.2em; padding: 0; }
#peritajeTexto li{ margin: 0; }

/* === Peritajes generated body === */
.peritaje-body{
  font-size: 11px;
  line-height: 1.5;          /* interlineado simple */
  text-align: justify;
}
.peritaje-body *{ /* se respeta font-size del origen */ }
.peritaje-body p{ margin: 0 0 8pt 0 !important; }
.peritaje-body ul, .peritaje-body ol{ margin: 0 0 0 1.2em !important; padding: 0 !important; }
.peritaje-body li{ margin: 0 !important; }

/* === Print rules === */
@media print {
  @page{ size: A4; margin: 22mm 18mm; }
  body{background:white}
  .app-topbar, .actions, .actions-row, .card:not(.keep), .topnav, .chips, .subsections details > summary{ display:none !important; }
  .print-area{ gap:0 !important; }                 /* evita espacio extra que puede crear hoja en blanco */
  .page{ page-break-after: always; break-after: page; border:none; border-radius:0; margin:0; break-inside: avoid }
  .page:last-child{ page-break-after: auto; break-after: auto; }
  .columns-2{font-size:12.2px; line-height:1.25}
  /* Peritaje en impresión */
  .peritaje-body{ font-size: 11pt !important; line-height: 1.5; text-align: justify !important; }
  .peritaje-body *{ /* se respeta font-size del origen */ }
  .peritaje-body p{ margin: 0 0 8pt 0 !important; }
  .peritaje-body ul, .peritaje-body ol{ margin: 0 0 0 1.2em !important; padding:0 !important; }
}
.grid-4 .field{ margin-bottom:6px }

.app-topbar .brand{flex:1}
.app-topbar .topnav{ margin-left:auto }


@media print {
  /* Patient meta as vertical list to allow full-width name */
  .page-patient{ display:block !important; grid-template-columns:initial !important; }
  .page-patient > div{ margin: 2mm 0; }
}

/* === Patch: más espacio entre campos en "Datos del paciente" === */
.container > .card:first-of-type .grid-4 {
  gap: 22px; /* más separación horizontal/vertical entre cajas */
}
.container > .card:first-of-type .field input,
.container > .card:first-of-type .field select,
.container > .card:first-of-type .field textarea {
  padding: 12px 14px; /* un poquito más de aire dentro del campo */
}


/* === Print v4: permitir flujo continuo entre Datos del paciente y Peritaje === */
@media print {
  /* Ya no "pegamos" secciones o cards completas: se pueden dividir si hace falta */
  .section, .card { break-inside: auto; page-break-inside: auto; }

  /* Conservamos cohesión solo en elementos pequeños/críticos */
  table, thead, tbody, tr, th, td { break-inside: avoid; page-break-inside: avoid; }
}

/* === Placeholder visual para peritaje (no se exporta) === */
#peritajeTexto:empty:before{
  content: "Escribe o pega aquí el texto del peritaje (se conservarán viñetas y estilo básico).";
  color: #9ca3af;
}

/* Evitar que el placeholder se imprima */
@media print{
  #peritajeTexto:before{ content: none !important; }
}

/* === GES: firmas y layout === */
.firma-line{ margin-top:12px; display:flex; gap:26px; align-items:flex-end; flex-wrap:wrap }
.firma-col{ flex:1 1 320px; }
.firma-col .line{ border-top:1px solid #9ca3af; height:0; margin-top:24px }
.firma-col .lbl{ text-align:center; font-size:12px; color:#374151; margin-top:4px }
.ges-headline{ font-weight:900; text-align:center; font-size:16px; margin-top:6px }
.ges-sub{ text-align:center; font-size:12px; color:#374151; margin:2px 0 10px 0 }
.ges-grid, .ges-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:800px){ .ges-grid, .ges-row{ grid-template-columns:1fr } }
.ges-box{ border:1px solid var(--border); border-radius:10px; padding:10px; background:#fff }
.kv{ display:grid; grid-template-columns:180px 1fr; gap:6px; margin:4px 0 }
.kv-label{ font-weight:600; color:#374151 }
.kv-val{ color:#111827; }
.ges-sign-inline{ margin-top:8px; display:flex; align-items:flex-end; gap:12px }
.ges-sign-inline img{ max-height:2cm; height:auto; width:auto }
.ges-sign-id{ font-size:12px; color:#374151; margin-top:4px }


/* Título centrado para documentos (peritajes, etc.) */
.doc-title{ text-align:center; font-weight:900; font-size:16px; margin-top:6px }


/* Ajustes de la línea de firma GES */
.firma-col.narrow {
  flex: 0 0 20%;
}
.firma-col.narrow .line {
  margin-top: 40px; /* más espacio para firmar */
}


/* === Ajustes GES para impresión en una sola hoja === */
@media print {
  .page-inner{ padding:16px 22px 16px 22px; display:flex; flex-direction:column }
  .ges-headline{ font-size:13px !important; margin:0 0 4px 0 !important; }
  .ges-sub{ font-size:10px !important; margin:0 0 6px 0 !important; }
  .ges-grid, .ges-row{ gap:6px !important; }
  .ges-box{ padding:6px !important; }
  .ges-box h4{ margin:0 0 4px 0 !important; font-size:12px !important; }
  .kv{ grid-template-columns:140px 1fr !important; gap:4px !important; margin:2px 0 !important; }
  .kv-label, .kv-val{ font-size:11px !important; }
  .page-body{ font-size:11px !important; }
  .ges-constancia{ font-size:10.5px !important; line-height:1.25 !important; margin-top:6px !important; text-align:justify; }
  /* Firma: más espacio sobre la línea para firma manual cómoda */
  .firma-col.narrow .line{ margin-top:95px !important; }
  /* Evitar cortes de sección GES */
  .page{ page-break-inside:avoid !important; }
}

#gesDiagSel{ width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:12px; }

/* Inasistencia: usa estilos base */


/* === Peritaje: jerarquía de títulos (editor y export) === */
#peritajeTexto h1, .peritaje-body h1{ font-size: 20pt; text-transform: uppercase; font-weight: 800; margin: 0.45em 0 0.3em; }
#peritajeTexto h2, .peritaje-body h2{ font-size: 16pt; font-weight: 700; margin: 0.4em 0 0.28em; }
#peritajeTexto h3, .peritaje-body h3{ font-size: 13pt; font-weight: 700; margin: 0.38em 0 0.26em; }
#peritajeTexto h4, .peritaje-body h4{ font-size: 12pt; font-weight: 600; margin: 0.36em 0 0.24em; }


@media print {
  .inasistencia-body { font-size: 14pt !important; line-height: 1.5 !important; }
}