/* =========================================================================
   Capacitación IPAP · PHP + Laravel
   Documento institucional — "Programa de Formación General 2026"

   Por qué una hoja aparte y no `body.doc` de theme.css:
   este documento lleva el LOGO OFICIAL, y el indigo/coral del material
   didáctico (#6366f1 / #ff5436) al lado del cian institucional (#00B0C6)
   se lee como un error de color, no como una decisión. Acá manda la paleta
   de la marca, muestreada del propio logo (ver assets/img/README.md).

   Pensada para dos medios a la vez: pantalla y A4 impreso (@media print).
   ========================================================================= */

@import url('../fonts/fonts.css');

:root {
  /* Marca institucional (muestreada del logo oficial) */
  --inst:         #00b0c6;   /* cian IPAP */
  --inst-dark:    #00879a;   /* cian oscurecido, para texto sobre blanco */
  --inst-magenta: #b83880;
  --inst-grad:    linear-gradient(90deg, var(--inst-magenta), var(--inst));

  /* Grises del documento original del IPAP */
  --ink:          #1c2030;
  --ink-soft:     #3a4157;
  --gray:         #707070;
  --gray-head:    #404143;
  --gray-foot:    #767171;
  --rule:         #dfe3ec;
  --tint:         #f2fbfd;   /* cian al 4 % — fondo de fichas */

  --font-head:    'Sora', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Caja de texto del original: A4 con márgenes de 2,5 cm */
  --measure:      17.1cm;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #e9ecf2;
  font-family: var(--font-body);
  color: var(--ink-soft);
  font-size: 10.5pt;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Barra de acciones (solo pantalla) ---------- */
.acciones {
  max-width: calc(var(--measure) + 5cm);
  margin: 24px auto -10px; padding: 0 4px;
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
}
.acciones a {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: 8.6pt; font-weight: 600; text-decoration: none;
  padding: .42rem .8rem; border-radius: 999px;
  border: 1px solid #cfd6e4; background: #fff; color: var(--ink-soft);
  transition: border-color .15s ease, transform .15s ease, color .15s ease;
}
.acciones a:hover { border-color: var(--inst); color: var(--inst-dark); transform: translateY(-1px); }
.acciones .volver { border: 0; background: none; padding-left: 0; color: var(--gray); }

/* ---------- La hoja ---------- */
.sheet {
  max-width: calc(var(--measure) + 5cm);
  margin: 28px auto;
  padding: 2.2cm 2.5cm 2.5cm;
  background: #fff;
  box-shadow: 0 18px 50px -22px rgba(16, 21, 46, .35);
}

/* ---------- Encabezado institucional ---------- */
.inst-head { margin-bottom: 26px; }
.inst-head img {
  display: block; width: 100%; max-width: 14.75cm; height: auto;
}

/* Filete con el degradado de la silueta de la Provincia */
.rule-grad {
  height: 3px; border: 0; margin: 18px 0 0;
  background: var(--inst-grad);
}

/* ---------- Título ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 7.5pt; letter-spacing: .18em; text-transform: uppercase;
  color: var(--inst-dark); font-weight: 600; margin: 0 0 6px;
}
h1 {
  font-family: var(--font-head); font-weight: 800;
  font-size: 21pt; line-height: 1.12; letter-spacing: -.015em;
  color: var(--ink); margin: 0 0 6px;
}
.subtitle {
  font-size: 11pt; color: var(--gray); margin: 0;
  font-weight: 500;
}

/* ---------- Ficha técnica ---------- */
.ficha {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; margin: 24px 0 6px;
  background: var(--rule);      /* las "líneas" son el fondo asomando por el gap */
  border: 1px solid var(--rule);
  border-radius: 8px; overflow: hidden;
}
.ficha div { background: var(--tint); padding: 10px 12px; }
.ficha dt {
  font-family: var(--font-mono); font-size: 6.8pt; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gray); margin: 0 0 3px;
}
.ficha dd {
  margin: 0; font-family: var(--font-head); font-weight: 700;
  font-size: 10.5pt; color: var(--ink); line-height: 1.25;
}
.ficha dd small {
  display: block; font-family: var(--font-body); font-weight: 500;
  font-size: 7.8pt; color: var(--gray); letter-spacing: 0;
}

/* ---------- Secciones ---------- */
section { margin-top: 20px; }
h2 {
  font-family: var(--font-head); font-weight: 700; font-size: 11.5pt;
  color: var(--ink); margin: 0 0 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 9px;
}
/* Cuadradito de acento antes del título: barato y ordena mucho la lectura */
h2::before {
  content: ""; flex: 0 0 auto; width: 4px; height: 13px; border-radius: 2px;
  background: var(--inst);
}
p { margin: 0 0 8px; text-align: justify; hyphens: auto; }
p:last-child { margin-bottom: 0; }

/* ---------- Listas ---------- */
ul.tick { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
ul.tick li { position: relative; padding-left: 17px; }
ul.tick li::before {
  content: "▸"; position: absolute; left: 0; top: -1px;
  color: var(--inst); font-weight: 700;
}

/* ---------- Módulos ---------- */
.modulos { display: grid; gap: 9px; }
.modulo {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--rule); border-left: 3px solid var(--inst);
  border-radius: 0 8px 8px 0; background: #fbfdfe;
  break-inside: avoid;
}
.modulo .n {
  font-family: var(--font-mono); font-weight: 700; font-size: 13pt;
  color: var(--inst); line-height: 1; padding-top: 2px;
}
.modulo h3 {
  font-family: var(--font-head); font-size: 10.5pt; font-weight: 700;
  color: var(--ink); margin: 0 0 3px;
}
.modulo .clases {
  font-family: var(--font-mono); font-size: 7.2pt; color: var(--gray);
  letter-spacing: .04em; text-transform: uppercase; margin: 0 0 4px;
}
.modulo p { margin: 0; font-size: 9.6pt; text-align: left; }

/* ---------- Variante: una fila por clase (las 12) ----------
   Formato cronograma. Cada clase entra en una o dos líneas, así que las 12
   ocupan menos que los 4 párrafos de módulo de la versión agrupada. */
ol.clases {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--rule); border-radius: 8px;
  /* `overflow: hidden` está acá para que el cebrado respete las esquinas
     redondeadas, pero tiene un efecto de lado en impresión: crea un contexto
     que Chrome NO parte entre páginas, así que las 12 filas viajan juntas a la
     carilla 2. Es deliberado — deja la carilla 1 como presentación y la 2 con
     el cronograma completo de un vistazo, en vez de cortarlo por la mitad.
     Si preferís que se parta y llene la carilla 1, quitá esta línea. */
  overflow: hidden;
}
ol.clases li {
  display: grid; grid-template-columns: 26px 1fr; gap: 11px;
  padding: 6px 12px; border-top: 1px solid var(--rule);
  break-inside: avoid;
}
ol.clases li:first-child { border-top: 0; }
/* Cebrado tenue: con 12 filas seguidas, ayuda a no perder el renglón */
ol.clases li:nth-child(odd) { background: var(--tint); }

ol.clases .cn {
  font-family: var(--font-mono); font-weight: 700; font-size: 8.6pt;
  color: var(--inst); line-height: 1.5; text-align: right;
}
ol.clases .ct { font-size: 9.6pt; line-height: 1.45; }
ol.clases .ct b { color: var(--ink); font-family: var(--font-head); font-weight: 700; }
ol.clases .ct span { color: var(--gray); }

/* ---------- Nota al pie del cuerpo ---------- */
.nota {
  margin-top: 22px; padding: 11px 14px;
  border-left: 3px solid var(--inst-magenta); background: #fdf4f9;
  font-size: 9.2pt; color: var(--ink-soft); border-radius: 0 8px 8px 0;
}
.nota a { color: var(--inst-dark); font-weight: 600; }

/* ---------- Pie ---------- */
.inst-foot {
  margin-top: 26px; padding-top: 9px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 8.2pt; color: var(--gray-foot);
}
.inst-foot .dom { font-weight: 600; color: var(--gray-head); }

/* =========================================================================
   Impresión / export a PDF — A4 con los márgenes del documento original
   ========================================================================= */
/* Márgenes laterales 2,5 cm = los del documento original del IPAP.
   El inferior es algo menor que el original (1,8 cm) para que el pie
   institucional entre en la segunda carilla: sin esto el documento se
   estiraba a una tercera página que contenía SOLO el pie. */
@page { size: A4; margin: 1.6cm 2.5cm 1.4cm; }

@media print {
  body { background: #fff; font-size: 10pt; }
  .acciones { display: none; }
  .sheet {
    max-width: none; margin: 0; padding: 0;
    box-shadow: none; background: none;
  }

  /* Bloques que NO se pueden partir: cada uno es una unidad de lectura.
     Ojo: `section` queda deliberadamente FUERA de esta lista. Con
     `break-inside: avoid` en la sección, "Contenidos" (los 4 módulos) se
     trataba como un bloque indivisible y saltaba entera a la página
     siguiente, dejando media página 1 en blanco y estirando el documento
     a 3 páginas. Los módulos ya se protegen de a uno. */
  .modulo, .ficha, .nota, ul.tick li { break-inside: avoid; }

  /* Un título nunca queda solo al pie de una página */
  h2, h3 { break-after: avoid; }
  .inst-head { break-after: avoid; }

  /* Aire más ajustado en papel que en pantalla. Está calibrado: con los
     valores de pantalla el pie se pasaba ~1 cm y generaba una tercera
     carilla que contenía solo el pie. */
  section { margin-top: 11px; }
  .nota { margin-top: 12px; padding: 9px 12px; }
  .inst-foot { margin-top: 10px; padding-top: 6px; }
  p { orphans: 2; widows: 2; }

  a { color: inherit; text-decoration: none; }
}