/* Documentos de la propuesta — Farmacia Santa Fe, Etapa 1.
   Una sola hoja de estilo para pantalla e impresión (A4).
   Misma identidad que el prototipo: tema claro «agua», azul del logo
   para lo importante y la cinta de vencimientos como firma. */

@page { size: A4; margin: 13mm 14mm 14mm; }

:root {
  --fondo: #eef5f6; --superficie: #fdfefe; --hundido: #f1f6f7;
  --borde: #d5e2e5; --linea: #e3ecee;
  --tinta: #13244a; --tinta2: #3b4b6a; --tinta3: #63728e;
  --azul: #1f47b3; --azulh: #0d2f8c; --azulc: #e7eefc;
  --agua: #17808f; --aguav: #49b0c1; --aguac: #ddf1f3;
  --rojo: #c42f3c; --rojoc: #fbe7e8;
  --aviso: #9f6309; --avisoc: #fcf1db;
  --ok: #1a7c55; --okc: #def3e9;
  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --cuerpo: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }
html { font-size: 15.5px; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--cuerpo); font-size: 1rem; line-height: 1.55; color: var(--tinta);
  background: linear-gradient(180deg, #e4f0f2 0, var(--fondo) 420px) fixed;
  -webkit-font-smoothing: antialiased; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
h1, h2, h3 { font-family: var(--display); font-weight: 650; letter-spacing: -.015em; margin: 0; line-height: 1.15; }
h2 { font-size: 1.7rem; color: var(--azulh); margin: 0 0 .5rem; }
h3 { font-size: 1.12rem; margin: 1.5rem 0 .4rem; }
p { margin: 0 0 .7rem; }
a { color: var(--azul); text-underline-offset: 2px; }
a:hover { color: var(--azulh); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
ul { padding-left: 1.2rem; margin: .2rem 0 .7rem; }
li { margin-bottom: .25rem; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 6px; }

/* ── Barra de navegación entre documentos (solo pantalla) ── */
.nav {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
  padding: .55rem 1.2rem; background: rgba(253, 254, 254, .93); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde); font-size: .88rem;
}
.nav .marca { display: flex; align-items: center; gap: .55rem; font-family: var(--display); font-weight: 650; color: var(--azulh); margin-right: auto; text-decoration: none; }
.nav .marca img { width: 28px; height: 28px; border-radius: 50%; }
.nav a.enlace { text-decoration: none; color: var(--tinta2); padding: .32rem .7rem; border-radius: 999px; font-weight: 500; }
.nav a.enlace:hover { background: var(--hundido); color: var(--tinta); }
.nav a.enlace[aria-current="page"] { background: var(--aguac); color: var(--azulh); font-weight: 600; }
.nav a.demo { background: var(--azulh); color: #f1f5fe; }
.nav a.demo:hover { background: var(--azul); color: #fff; }

/* ── Hoja ── */
.hoja { max-width: 60rem; margin: 0 auto; padding: 1.6rem 1.4rem 4rem; }
section {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px;
  padding: 1.8rem 2rem 1.6rem; margin-top: 1.2rem;
  box-shadow: 0 1px 2px rgba(19, 36, 74, .04), 0 6px 22px rgba(19, 36, 74, .05);
}
.intro { color: var(--tinta2); max-width: 46rem; font-size: 1.04rem; }
.num-sec { font-family: var(--mono); font-size: .8rem; color: var(--agua); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; display: block; margin-bottom: .3rem; }

/* ── Portada ── */
.portada {
  position: relative; overflow: hidden; margin-top: .4rem;
  background: linear-gradient(135deg, #0d2f8c 0%, #1b46ae 55%, #17808f 130%);
  color: #e8eefb; border-radius: 20px; padding: 2.4rem 2.4rem 1.8rem;
  box-shadow: 0 18px 46px rgba(13, 47, 140, .22);
  display: flex; flex-direction: column; gap: 2.4rem;
}
.portada::after {
  content: ''; position: absolute; right: -90px; top: -90px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(73, 176, 193, .38), rgba(73, 176, 193, 0) 68%); pointer-events: none;
}
.portada-cab { display: flex; align-items: center; gap: .9rem; position: relative; z-index: 1; }
.portada-cab img { width: 58px; height: 58px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255, 255, 255, .16); background: #fff; }
.portada-cab strong { font-family: var(--display); font-size: 1.15rem; color: #fff; display: block; }
.portada-cab span { color: #b9c9ee; font-size: .9rem; }
.portada h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); color: #fff; max-width: 44rem; position: relative; z-index: 1; }
.portada .bajada { font-size: 1.15rem; color: #cfdaf5; margin: .9rem 0 0; max-width: 42rem; position: relative; z-index: 1; }
.cinta { display: flex; gap: 4px; height: 18px; margin: 1.6rem 0 0; max-width: 34rem; }
.cinta i { display: block; border-radius: 4px; }
.portada-pie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; font-size: .88rem; color: #c3d1f0; border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 1rem; position: relative; z-index: 1; }
.portada-pie b { display: block; color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .15rem; }

/* ── Bloques ── */
.frentes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin-top: .9rem; }
.frentes.tres { grid-template-columns: repeat(3, 1fr); }
.frente { border: 1px solid var(--borde); border-radius: 12px; padding: 1rem 1.1rem; break-inside: avoid; background: var(--superficie); }
.frente > b { font-family: var(--display); font-size: 1.08rem; display: block; margin-bottom: .2rem; color: var(--azulh); }
.frente p { font-size: .93rem; color: var(--tinta2); margin: 0; }
.frente .quien { font-size: .84rem; color: var(--agua); font-weight: 600; margin-top: .45rem; }
.frente ul { font-size: .93rem; color: var(--tinta2); margin: .3rem 0 0; }

.leyenda { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .86rem; color: var(--tinta2); margin: .5rem 0 .9rem; align-items: center; }
.et { display: inline-block; font-size: .74rem; font-weight: 600; padding: 0 .55rem; border-radius: 999px; white-space: nowrap; line-height: 1.7; }
.et.b { background: var(--rojoc); color: var(--rojo); }
.et.a { background: var(--avisoc); color: var(--aviso); }
.et.n { background: var(--aguac); color: var(--agua); }
.et.o { background: var(--hundido); color: var(--tinta2); }
.et.e1 { background: var(--agua); color: #f1fbfc; }
.et.e2 { background: var(--avisoc); color: var(--aviso); }
.et.e3 { background: var(--azulc); color: var(--azulh); }

.nota { border-radius: 10px; padding: .75rem 1rem; font-size: .93rem; margin: .9rem 0; break-inside: avoid; border-left: 4px solid; }
.nota.info { background: var(--azulc); color: #1b3577; border-color: var(--azul); }
.nota.aviso { background: var(--avisoc); color: #6b4306; border-color: #d9a441; }
.nota.ok { background: var(--okc); color: #15583d; border-color: var(--ok); }

table { width: 100%; border-collapse: collapse; margin: .4rem 0 .8rem; font-size: .92rem; }
thead { display: table-header-group; }
th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta3); font-weight: 600; padding: .5rem .6rem; border-bottom: 1.5px solid var(--borde); }
td { padding: .5rem .6rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
tr { break-inside: avoid; }
td small { display: block; color: var(--tinta3); font-size: .82rem; margin-top: .1rem; }
.chk { width: 1.5rem; }
.chk::before { content: ''; display: inline-block; width: .85rem; height: .85rem; border: 1.5px solid var(--tinta3); border-radius: 3px; margin-top: .2rem; }
ol.pasos { padding-left: 1.3rem; margin: .4rem 0 .8rem; }
ol.pasos li { margin-bottom: .4rem; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.fuentes { font-size: .82rem; color: var(--tinta2); word-break: break-all; }
.fuentes li { margin-bottom: .3rem; }
.tabla-scroll { overflow-x: auto; }

/* ── Camino por etapas ── */
.camino { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: .8rem; margin: 1rem 0 .4rem; }
.etapa { border-radius: 14px; padding: 1.1rem 1.2rem 1.2rem; border: 1px solid var(--borde); position: relative; break-inside: avoid; }
.etapa .cuando { font-family: var(--mono); font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; }
.etapa b.nombre { font-family: var(--display); font-size: 1.3rem; display: block; margin: .15rem 0 .4rem; line-height: 1.15; }
.etapa ul { font-size: .92rem; margin: 0; padding-left: 1.1rem; }
.etapa.e-uno { background: linear-gradient(160deg, #0d2f8c, #1f47b3); color: #dfe8fb; border-color: transparent; box-shadow: 0 10px 28px rgba(13, 47, 140, .2); }
.etapa.e-uno b.nombre { color: #fff; }
.etapa.e-uno .cuando { color: #9fd9e3; }
.etapa.e-dos { background: var(--aguac); }
.etapa.e-dos .cuando { color: var(--agua); }
.etapa.e-dos b.nombre { color: var(--azulh); }
.etapa.e-tres { background: var(--hundido); }
.etapa.e-tres .cuando { color: var(--tinta3); }
.etapa.e-tres b.nombre { color: var(--tinta); }

/* ── Cifras ── */
.cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin: 1rem 0 .3rem; }
.cifra { border: 1px solid var(--borde); border-radius: 12px; padding: .9rem 1rem; border-top: 3px solid var(--aguav); break-inside: avoid; }
.cifra strong { font-family: var(--display); font-size: 1.45rem; white-space: nowrap; color: var(--azulh); display: block; line-height: 1.1; letter-spacing: -.02em; }
.cifra span { font-size: .88rem; color: var(--tinta2); }

/* ── Gantt ── */
.gantt { --dias: 30; --etq: 17rem; margin: 1rem 0 .6rem; font-size: .88rem; min-width: 46rem; }
.g-fila { display: grid; grid-template-columns: var(--etq) 1fr; align-items: center; min-height: 2rem; }
.g-etq { padding: .2rem .8rem .2rem 0; color: var(--tinta); line-height: 1.25; }
.g-pista {
  display: grid; grid-template-columns: repeat(var(--dias), 1fr); align-items: center; align-self: stretch; padding: .25rem 0;
  background-image: linear-gradient(90deg, var(--borde) 1px, transparent 1px); background-size: calc(100% / 6) 100%;
  border-right: 1px solid var(--borde);
}
.g-cab .g-pista { background: none; border: 0; grid-template-columns: repeat(6, 1fr); padding: 0; }
.g-cab .g-pista span { font-family: var(--mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta3); padding: .3rem .4rem; border-left: 1px solid var(--borde); }
.g-cab .g-pista span b { display: block; font-family: var(--cuerpo); text-transform: none; letter-spacing: 0; font-size: .8rem; color: var(--tinta2); font-weight: 600; }
.g-grupo { font-family: var(--display); font-weight: 650; color: var(--azulh); font-size: .98rem; padding: .7rem 0 .15rem; border-bottom: 1px solid var(--linea); margin-bottom: .1rem; }
.g-barra {
  grid-column: var(--i) / calc(var(--f) + 1); grid-row: 1; height: 1.15rem; border-radius: 6px; background: var(--azul);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset;
}
.g-barra.cli { background: var(--aguav); }
.g-barra.mix { background: repeating-linear-gradient(135deg, var(--azul) 0 8px, var(--aguav) 8px 16px); }
.g-barra.prueba { background: #d9a441; }
.g-hito { grid-column: var(--i) / calc(var(--i) + 1); grid-row: 1; justify-self: center; width: .95rem; height: .95rem; background: var(--rojo); transform: rotate(45deg); border-radius: 2px; box-shadow: 0 0 0 3px var(--superficie); }
.g-ley { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .86rem; color: var(--tinta2); margin: .3rem 0 .2rem; align-items: center; }
.g-ley i { display: inline-block; width: 1.6rem; height: .7rem; border-radius: 4px; vertical-align: middle; margin-right: .35rem; background: var(--azul); }
.g-ley i.cli { background: var(--aguav); }
.g-ley i.mix { background: repeating-linear-gradient(135deg, var(--azul) 0 6px, var(--aguav) 6px 12px); }
.g-ley i.prueba { background: #d9a441; }
.g-ley i.hito { width: .7rem; background: var(--rojo); transform: rotate(45deg); border-radius: 2px; margin-right: .5rem; }
.gantt.meses { --dias: 12; }
.gantt.meses .g-pista { background-size: calc(100% / 3) 100%; }
.gantt.meses .g-cab .g-pista { grid-template-columns: repeat(3, 1fr); }
.gantt.meses .g-barra { background: var(--agua); }

/* ── Pantallas del prototipo ── */
.pantalla { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.5rem; align-items: start; padding: 1.3rem 0; border-top: 1px solid var(--linea); break-inside: avoid; }
.pantalla:first-of-type { border-top: 0; }
.pantalla figure { margin: 0; }
.pantalla img { width: 100%; display: block; border-radius: 10px; border: 1px solid var(--borde); box-shadow: 0 8px 26px rgba(19, 36, 74, .12); }
.pantalla h3 { margin: 0 0 .35rem; font-size: 1.3rem; color: var(--azulh); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pantalla dl { margin: .5rem 0 0; font-size: .93rem; }
.pantalla dt { font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--agua); margin-top: .6rem; }
.pantalla dd { margin: .1rem 0 0; color: var(--tinta2); }
.pantalla .abrir { display: inline-block; margin-top: .8rem; font-size: .88rem; font-weight: 600; }

/* ── Índice de la carpeta ── */
.indice { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin-top: 1.2rem; }
.doc {
  display: block; text-decoration: none; color: inherit; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 16px; padding: 1.3rem 1.4rem; box-shadow: 0 1px 2px rgba(19, 36, 74, .04), 0 6px 22px rgba(19, 36, 74, .05);
  transition: transform .17s, box-shadow .17s, border-color .17s;
}
.doc:hover { transform: translateY(-2px); border-color: var(--aguav); box-shadow: 0 12px 30px rgba(19, 36, 74, .11); color: inherit; }
.doc .n { font-family: var(--mono); font-size: .78rem; color: var(--agua); letter-spacing: .06em; }
.doc b { font-family: var(--display); font-size: 1.3rem; color: var(--azulh); display: block; margin: .1rem 0 .3rem; line-height: 1.15; }
.doc p { font-size: .93rem; color: var(--tinta2); margin: 0; }
.doc .ir { display: inline-block; margin-top: .7rem; font-size: .88rem; font-weight: 600; color: var(--azul); }
.doc.principal { grid-column: 1 / -1; background: linear-gradient(135deg, var(--aguac), var(--superficie) 70%); }
.pie { text-align: center; color: var(--tinta3); font-size: .84rem; margin-top: 2rem; }

/* ── Adaptación ── */
@media (max-width: 860px) {
  .frentes, .frentes.tres, .dos, .camino, .indice, .pantalla, .portada-pie { grid-template-columns: 1fr; }
  .cifras { grid-template-columns: 1fr 1fr; }
  section { padding: 1.3rem 1.1rem; }
  .portada { padding: 1.6rem 1.3rem; }
}

/* ── Impresión ── */
@media print {
  html { font-size: 9.6pt; }
  body { background: none; }
  .nav, .solo-pantalla { display: none !important; }
  .hoja { max-width: none; padding: 0; }
  section { border: 0; box-shadow: none; padding: 0; margin: 0; border-radius: 0; break-before: page; }
  section.continua { break-before: auto; margin-top: 1.4rem; }
  .portada { min-height: 262mm; justify-content: space-between; box-shadow: none; margin: 0; border-radius: 14px; }
  .doc, .etapa.e-uno { box-shadow: none; }
  .gantt { min-width: 0; --etq: 14.5rem; font-size: .84rem; }
  .tabla-scroll { overflow: visible; }
  a { color: inherit; text-decoration: none; }
  h2 { font-size: 1.6rem; }
}
th.chk::before { display: none; }