/* Hoja propia del home de noelbarral.com.
   1) Botón «Noel Barral.md» (descarga de los datos de la página en Markdown).
   2) Corrección del salto de las anclas del menú.
   3) Impresión: el CV técnico en PDF que se descarga desde esta página. */

/* --- 1. Botón de descarga, dentro del <h1>, a la derecha del nombre ------- */
/* El nombre es display:block, así que un enlace detrás cae a la línea
   siguiente; esta línea los mantiene juntos y deja que el botón baje solo
   en pantallas estrechas. */
.linea-nombre{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.45em;
}
.boton-md{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-left:.55em;
  padding:5px 12px;
  border:1px solid var(--borde);
  border-radius:999px;
  background:var(--panel);
  color:var(--texto-2);
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.02em;
  line-height:1.3;
  vertical-align:middle;
  white-space:nowrap;
  text-decoration:none;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.boton-md .ico-descarga{
  width:14px;
  height:14px;
  flex:0 0 14px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.boton-md:hover,.boton-md:focus-visible{
  border-color:var(--acento);
  color:var(--acento);
  text-decoration:none;
}
@media(max-width:520px){
  .boton-md{margin-left:0;margin-top:12px;display:inline-flex}
}
@media print{
  .boton-md{display:none}
}

/* --- 2. Anclas del menú ---------------------------------------------------- */
/* base.css pone `content-visibility:auto` en las secciones: mientras el navegador
   no las ha pintado, su altura es la estimada (`contain-intrinsic-size:auto 760px`)
   y el salto de ancla se calcula con esa estimación. Como las secciones reales
   miden 1.200-5.300px, el primer clic desde arriba aterrizaba a miles de píxeles
   del punto (móvil: «Contacto» a 4.175px en vez de 63px), en los dos idiomas.
   Con las secciones siempre pintadas el cálculo es exacto. El coste es mínimo:
   son páginas de texto y CSS, sin imágenes grandes. */
main > section:not(.hero){
  content-visibility:visible;
  contain-intrinsic-size:none;
}

/* --- 3. Impresión: el CV técnico en PDF ----------------------------------- */
/* Los botones «Descargar CV técnico (PDF)» sirven /cv-noel-barral.pdf y
   /cv-noel-barral-en.pdf, que son ESTA misma página impresa a A4. Este bloque
   arregla lo que salía mal en el PDF, y va aquí y no en base.css por una razón
   concreta: base.css ya traía un @media print en claro, pero tema-oscuro.css se
   carga DESPUÉS y vuelve a definir :root con los colores oscuros. Al imprimir
   ganaba el tema oscuro —fondos negros en el PDF— porque, a igualdad de
   especificidad, manda la última hoja cargada. home.css es la última de la
   portada, así que aquí las variables sí mandan; además se sube la
   especificidad a html:root para no depender del orden.
   Lo demás que corrige:
     - Las tarjetas y los casos se partían entre páginas (el pilar 02 quedaba
       cortado entre la 2 y la 3): con break-inside:avoid van enteros.
     - La última página quedaba huérfana, con solo los tres enlaces de contacto:
       el bloque de contacto se mantiene junto y se recorta el aire entre
       secciones para que el documento cierre entero. */
@page{size:A4;margin:14mm 13mm}

@media print{
  /* Paleta clara, gane quien gane. */
  html:root{
    --fondo:#fff;--fondo-2:#fff;--panel:#fff;--borde:#c9c9c9;--borde-suave:#e6e6e6;
    --texto:#111;--texto-2:#333;--texto-3:#555;--acento:#0a6b45;--acento-2:#0a6b45;
    --marca-oscura:#fff;--morado-tenue:#bbb;--morado-oscuro:#0a6b45;--mas-negro:#fff;
    --etiqueta:#333;--sombra-alta:none;--sombra-ambiente:none;
    color-scheme:light
  }
  html,body{background:#fff!important;color:#111!important}
  body{font-size:10pt;line-height:1.45}

  /* Fuera el cromo de la web. */
  .barra,.acciones,.saltar,.menu-movil,.pie,.boton-md,.pila-copia{display:none!important}
  .pila-carrusel{-webkit-mask-image:none!important;mask-image:none!important;overflow:visible;margin-top:10px}
  .pila-pista{animation:none!important;display:block;width:auto}
  .pila-pista .pila{flex-wrap:wrap;padding-right:0}

  /* Superficies en blanco, incluidas las que el tema oscuro pintaba. */
  .tarjeta,.caso,.contacto-item,.flujo,.metricas>div,.pila li,.pila-caso li,.nodo,.nodo-clave,.estado{
    background:#fff!important;color:#111!important;box-shadow:none!important
  }
  .tarjeta,.caso,.contacto-item,.flujo,.metricas,.metricas>div{border:1px solid var(--borde)!important}
  .nodo,.nodo-clave{border:1px solid var(--borde)!important;color:#111!important}
  .nodo small,.caso-contexto,.bloque h4,.lista li,.entrada,.valor,.trayectoria p,.linea p,.pila-caso{color:#333!important}
  .etiqueta,.num-pilar,.caso-num,.metricas dd span,.pila-caso b,.contacto-dato{color:#0a6b45!important}
  .flecha{background:#999!important}
  .flecha:after{border-left-color:#999!important}
  .flecha:before{display:none!important}
  .linea:before{background:var(--borde)!important}
  .linea li:before{background:#fff!important;border:1px solid #999!important}
  .linea-actual:before{background:#0a6b45!important;border-color:#0a6b45!important}
  .lista li:before{background:#999!important}

  /* Nada partido entre páginas. */
  .caso,.tarjeta,.contacto-item,.flujo,.metricas,.linea li,.pila-caso,.caso-cabecera,.bloque,.contacto{
    break-inside:avoid;page-break-inside:avoid
  }
  h1,h2,h3,h4,.etiqueta,.caso-num{break-after:avoid;page-break-after:avoid}
  /* El titular de sección y su entradilla viajan con el primer bloque: sin esto,
     «Arquitecturas en producción» y su frase se quedaban solos en una página
     casi vacía, porque el primer caso no cabía y saltaba entero a la siguiente. */
  .seccion > .envuelto > h2,.entrada{break-after:avoid;page-break-after:avoid}
  .pilares,.contacto,.metricas{grid-template-columns:repeat(3,1fr)}
  .caso-cuerpo{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}

  /* Menos aire: que no queden páginas casi vacías ni casos desbordados. */
  .seccion{padding:6mm 0}
  .hero{padding:0 0 6mm}
  .entrada{margin-bottom:4mm;max-width:none}
  .tarjeta{padding:4mm}
  .caso{padding:4mm;margin-bottom:4mm}
  .caso-cabecera{padding-bottom:3mm;margin-bottom:3mm}
  .lista{gap:1.5mm}
  .lista li{font-size:9.5pt}
  .bloque p{font-size:9.5pt}
  .metricas{margin-top:6mm}
  .metricas>div{padding:3mm}
  .linea{margin-top:6mm}
  .linea li{padding-bottom:4mm}
  .pila{margin-top:5mm}
  .pila li{font-size:8.5pt;padding:1mm 2.4mm}
  .pila-caso{margin-top:3mm;padding-top:2mm;font-size:8.5pt}
  .flujo{padding:2.5mm;gap:1.2mm;margin-top:3mm}
  .nodo,.nodo-clave{font-size:7.5pt;padding:1.2mm 2mm}

  /* Enlaces legibles, sin URLs kilométricas ni cortadas a mitad de palabra. */
  a{color:#111!important;text-decoration:none!important}
  a[href^=http]:after{content:""!important}
  .contacto-item{padding:3mm}
  .contacto-dato{font-family:var(--mono);font-size:8.5pt;white-space:nowrap}
  img{max-width:100%}
  .retrato img{width:32mm!important;border:1px solid var(--borde)!important;border-radius:2mm!important}
}

/* --- 4. Rejilla de contacto con dos tarjetas ------------------------------ */
/* Al retirar el CV en PDF, la sección de contacto se quedó con dos tarjetas
   (correo y LinkedIn) dentro de una rejilla de tres columnas, que dejaba un
   hueco vacío a la derecha. Con dos tarjetas, dos columnas. */
.contacto:has(> .contacto-item:nth-child(2):last-child){
  grid-template-columns:repeat(2,1fr);
}

/* --- 5. La chapa de estado del hero --------------------------------------- */
/* Deja de ser la píldora genérica de «disponible para trabajar» y pasa a ser una
   chapa de panel: esquinas apenas marcadas, un cepillado fino en la superficie y
   una escala de regla que cierra la pieza por la derecha. Sin punto ni luz: el
   texto va solo.
   Todo con las variables del tema, así que aguanta igual en claro y en oscuro.
   Va en home.css, como el bloque de impresión, porque es la última hoja que
   carga la portada y los temas también definen .estado. */
/* El tema claro envuelve sus reglas en html:has(#tema-claro:checked), que lleva
   un id y pesa más que cualquier clase: al fondo de la chapa solo se le gana con
   !important. Es el único sitio donde hace falta, y queda avisado.
   Ojo con la tipografía: del tema solo se toca el tamaño, y a petición expresa:
   el texto baja a 10 px y la interletra se aprieta a 0,4 px. Con 11 px y la
   interletra del tema la línea se iba a 714 px, más ancha que la columna del
   hero, y se partía en dos. La fuente y el peso se quedan como los deja el tema. */
.estado{
  display:inline-flex;
  align-items:center;
  margin:0 0 26px;
  padding:8px 26px 8px 14px;
  border:1px solid var(--borde);
  border-radius:4px;
  background:
    repeating-linear-gradient(135deg,color-mix(in srgb,var(--texto) 5%,transparent) 0 1px,transparent 1px 5px),
    var(--panel)!important;
  box-shadow:inset 0 1px 0 #ffffff12, inset 0 -1px 0 #0000004d, 0 1px 2px #00000033;
  font-size:10px!important;                            /* 11 px no cabía en la columna del hero */
  letter-spacing:.4px!important;                        /* con 1,2 px la línea se iba a 699 px */
  max-width:100%;
  position:relative;
  overflow:hidden;
}
/* La escala de regla que cierra la chapa por la derecha. */
.estado:after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:14px;
  border-left:1px solid var(--borde);
  background:repeating-linear-gradient(90deg,var(--borde) 0 1px,transparent 1px 5px);
  opacity:.65;
}

/* --- 6. La chapa, en papel ------------------------------------------------- */
/* El bloque de impresión de arriba es anterior a la chapa y no la conoce: como
   la chapa lleva !important (para ganarle al tema claro), y el minificador del
   build se come los @media screen, en papel ganaría ella. Este bloque va al
   final a propósito y deshace la pieza: en papel queda solo el texto. */
@media print{
  .estado{
    background:#fff!important;
    box-shadow:none!important;
    border-radius:3px!important;
    border:1px solid #c9c9c9!important;
    font-family:var(--sans)!important;
    font-size:12.5px!important;
    letter-spacing:normal!important;
    padding:6px 12px!important;
    color:#111!important;
  }
  .estado:after{display:none!important}
}