/* =====================================================================
   CV · print.css — la home impresa como currículum de 1–2 páginas
   Se enlaza con media="print" después de cv.css; complementa el bloque
   "15. IMPRESIÓN" de base.css (no lo sustituye).

   Qué hace
   - Papel blanco y tinta oscura; un solo acento rojo (#ff2020 en reglas
     y marcas; #c00000 en texto, que sí pasa AA sobre blanco).
   - Oculta lo que solo tiene sentido en pantalla: canvas, header y nav,
     terminal, botones, filtros, portadas, barra de tareas, controles.
   - Reordena (flex + order) para leerse como CV:
       nombre y rol → contacto → resumen → Experiencia → Proyectos
       → Habilidades técnicas → Formación → Sobre mí
   - Los títulos de sección del CV impreso son genéricos y se generan
     aquí por idioma con :lang(); el resto del texto sale del DOM ya
     traducido por i18n.js, así que vale para ES, EN y FR.
   - Enlaces de repos y sitios impresos como URL; contacto clicable en
     el PDF (el <a> cubre cada dato de contacto, sin texto extra).
   - Texto mínimo de 9 pt (= 12 px). Pie de página con @page (nombre,
    kairomx.tech/cv y "n / total") donde el navegador lo admite.

   Los PDF de pdf/cv-<lang>.pdf se generan con este mismo CSS:
   node docs/rediseno-cv/herramientas/generar-cv-pdf.cjs
   (ES y EN en Carta, FR en A4; los tres caben en 2 páginas en ambos
   tamaños). Regenerarlos cada vez que cambie el contenido de la home.
   ===================================================================== */

@media print {

  /* ---------- Página ---------- */
  @page {
    margin: 12mm 14mm 14mm;
    @bottom-left {
      content: "Marco Sebastián Ortega Molina · kairomx.tech/cv";
      font: 400 9pt/1 'Space Mono', ui-monospace, monospace;
      color: #6b6b66;
      vertical-align: top;
      padding-top: 4mm;
    }
    @bottom-right {
      content: counter(page) " / " counter(pages);
      font: 700 9pt/1 'Space Mono', ui-monospace, monospace;
      color: #6b6b66;
      vertical-align: top;
      padding-top: 4mm;
    }
  }

  :root {
    --p-ink: #111;
    --p-ink-2: #2b2b29;
    --p-muted: #5c5c57;          /* 6.6:1 sobre blanco */
    --p-line: #cfcfca;
    --p-line-2: #9d9d97;
    --p-red: #ff2020;            /* reglas y marcas (no texto) */
    --p-red-text: #c00000;       /* texto en rojo: 6.6:1 sobre blanco */
  }

  html { background: #fff !important; }
  body {
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    background: #fff !important;
    color: var(--p-ink) !important;
    font: 400 9.5pt/1.45 var(--font-body);
    orphans: 3;
    widows: 3;
  }
  a { color: inherit; text-decoration: none; }
  .hit { color: var(--p-red-text) !important; }
  .dim { color: var(--p-muted) !important; }
  .u-mark { text-decoration-color: var(--p-red); }

  /* ---------- Fuera del papel ---------- */
  .skip-link,
  .site-header,
  .hero__canvas,
  .hero .avatar,
  .about-win__side,
  .hero__cta,
  .filters,
  .pgrid__empty,
  .pcard .win__bar,
  .pcard__cover,
  .pcard__view,
  .chip > img,
  .chip > .pi,
  .sec-head__icon,
  .sec-head__kicker,
  .sec-head__title,
  .sec-head__intro,
  .obj__art,
  .obj__num,
  .obj__note,
  .obj__foot,
  .tile > .logo,
  .tile > .pi,
  .tile > .osi,
  .timeline::before,
  .tl-item::before,
  .tl-node,
  .tl-card__ctrls,
  .tl-card__file,
  .about-win > .win__bar,
  .about-win > .win__menu,
  .about-win > .win__status,
  .props__title,
  .props__list > div:not(:has([data-i18n="about.v.studies"])),
  .contact__glow,
  .ccard .win__bar,
  .ccard__tag,
  .ccard__copy,
  .taskbar,
  .visually-hidden,
  .caret,
  .tl__caret,
  /* las dos frases de presentación se quedan en la web, no en el CV (D-1070) */
  .hero__title,
  .about-win__quote { display: none !important; }

  /* Un filtro activo en pantalla no debe quitar proyectos del papel */
  .pgrid > .pcard[data-cats][hidden] { display: block !important; }

  /* ---------- Lienzo: todo en una columna, sin cajas de pantalla ---------- */
  .wrap { max-width: none; padding-inline: 0; }
  main {
    display: flex;
    flex-direction: column;
  }
  .hero,
  .hero > .wrap,
  .hero__grid,
  .hero__copy { display: contents; }

  /* orden de lectura del CV */
  .hero__id      { order: 1; }
  #contacto      { order: 2; }
  .hero__title   { order: 3; }
  .hero__pitch   { order: 4; }
  .hero__status  { order: 5; }
  #proyectos     { order: 10; }
  #entrenamiento-ia { order: 9; }
  #stack         { order: 12; }
  #sobre-mi      { order: 13; }

  .section {
    padding: 0;
    margin-top: 13pt;
    border: 0;
    overflow: visible;
  }
  .win, .obj, .tl-stamp, .tl-card, .tile, .chip, .about-win__text, .props {
    background: none !important;
    box-shadow: none !important;
  }

  /* ---------- Encabezado del CV: foto, nombre, rol ---------- */
  .hero__id {
    display: flex;
    align-items: center;
    gap: 12pt;
    margin: 0 0 8pt;
  }
  .hero__id .hero__photo { display: block; }
  .hero__photo {
    --step: 4px;
    width: 64px;
    height: 64px;
    padding: 2px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;   /* conserva el marco escalonado rojo */
  }
  .hero__photo img { --step: 3px; }
  .hero__name {
    font: 700 21pt/1.08 var(--font-display);
    letter-spacing: -.02em;
    color: var(--p-ink);
  }
  .hero__role {
    margin-top: 4pt;
    font: 700 9pt/1.3 var(--font-mono);
    letter-spacing: .12em;
    color: var(--p-red-text);
  }
  /* en el papel el puesto es uno solo; la web conserva su rol (D-1070) */
  .hero__role > * { display: none !important; }
  .hero__role::before { content: "Full-Stack AI Developer"; }
  :lang(es) .hero__role::before { content: "Desarrollador Full-Stack con IA"; }
  :lang(fr) .hero__role::before { content: "Développeur Full-Stack IA"; }

  /* ---------- Contacto: barra bajo el nombre (motivo de barra de título) ---------- */
  #contacto { margin: 0; }
  #contacto .sec-head,
  #contacto .sec-head__intro { display: none !important; }
  .cgrid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3pt 16pt;
    padding: 5pt 0 5pt;
    border-top: 2pt solid var(--p-red);
    border-bottom: 1px solid var(--p-line);
  }
  .ccard {
    position: relative;
    display: block;
    border: 0;
    border-radius: 0;
    min-width: 0;
  }
  .ccard__body {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4pt;
    padding: 0;
    text-align: left;
  }
  .ccard__icon {
    display: inline-flex;
    width: auto;
    height: auto;
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--p-ink-2);
  }
  .ccard__icon .pi { width: 11pt; height: 11pt; }
  .cgrid > .ccard:has(.pi--mail-bit) { order: -1; }   /* correo primero */
  .ccard__info { display: block; flex: none; }
  .ccard__handle { font: 400 9pt/1.35 var(--font-mono); color: var(--p-ink); overflow-wrap: normal; }
  /* el enlace real cubre el dato: clicable en el PDF, invisible en papel */
  .ccard__actions {
    position: absolute;
    inset: 0;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .ccard__btn {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: transparent;
    font-size: 0;
  }
  .ccard__btn > * { display: none; }
  /* ubicación (igual en los 3 idiomas, como en la barra de tareas) */
  .cgrid::before {
    content: "";
    order: 9;
    width: 11pt;
    height: 11pt;
    margin-right: -12pt;
    background: var(--p-ink-2);
    -webkit-mask: url("../icons/pixel/map-pin.svg") center / 100% 100% no-repeat;
    mask: url("../icons/pixel/map-pin.svg") center / 100% 100% no-repeat;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .cgrid::after {
    content: "Hermosillo, Sonora, MX";
    order: 10;
    font: 400 9pt/1.35 var(--font-mono);
    color: var(--p-ink);
  }

  /* ---------- Resumen ---------- */
  .hero__title {
    margin: 10pt 0 4pt;
    max-width: none;
    font: 700 14pt/1.2 var(--font-display);
    letter-spacing: -.01em;
    color: var(--p-ink);
  }
  .hero__title br { display: none; }
  .hero__title .dim::after { content: " "; }
  .hero__pitch {
    max-width: none;
    font-size: 10pt;
    line-height: 1.5;
    color: var(--p-ink-2);
  }
  .hero__pitch b { color: var(--p-ink); }
  .hero__status {
    display: flex;
    align-items: baseline;
    gap: 6pt;
    margin-top: 5pt;
    max-width: none;
    font: 400 9pt/1.45 var(--font-mono);
    color: var(--p-muted);
  }
  .hero__status b { color: var(--p-ink); }

  /* ---------- Títulos de sección (generados por idioma) ---------- */
  .sec-head {
    display: flex;
    align-items: center;
    gap: 8pt;
    margin: 0 0 7pt;
    padding: 0;
    border: 0;
    break-after: avoid;
    page-break-after: avoid;
  }
  .sec-head::before,
  .about-win__text::before {
    flex: none;
    padding-left: 6pt;
    border-left: 5pt solid var(--p-red);
    font: 700 10pt/1.1 var(--font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--p-ink);
  }
  .sec-head::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--p-line-2);
  }

  #proyectos .sec-head::before        { content: "Projects"; }
  #entrenamiento-ia .sec-head::before { content: "Work experience"; }
  #stack .sec-head::before            { content: "Technical skills"; }
  #sobre-mi .sec-head::before         { content: "Education"; }
  .about-win__text::before            { content: "About me"; }

  :lang(es) #proyectos .sec-head::before        { content: "Proyectos"; }
  :lang(es) #entrenamiento-ia .sec-head::before { content: "Experiencia laboral"; }
  :lang(es) #stack .sec-head::before            { content: "Habilidades técnicas"; }
  :lang(es) #sobre-mi .sec-head::before         { content: "Formación"; }
  :lang(es) .about-win__text::before            { content: "Sobre mí"; }

  :lang(fr) #proyectos .sec-head::before        { content: "Projets"; }
  :lang(fr) #entrenamiento-ia .sec-head::before { content: "Expérience professionnelle"; }
  :lang(fr) #stack .sec-head::before            { content: "Compétences techniques"; }
  :lang(fr) #sobre-mi .sec-head::before         { content: "Formation"; }
  :lang(fr) .about-win__text::before            { content: "À propos"; }

  /* ---------- Proyectos: lista de "ventanas" compactas a todo el ancho ----------
     Cada tarjeta es una fila flexible:
       título · subtítulo · categoría
       descripción
       tecnologías · enlace (URL impresa; baja de línea si no cabe)       */
  .pgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6pt;
  }
  .pcard {
    display: block;
    border: 1px solid var(--p-line);
    border-top: 2pt solid var(--p-red);    /* franja de ventana activa */
    border-radius: 2px;
    transform: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .pcard::after { content: none !important; }
  .pcard__body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3pt 10pt;
    padding: 5pt 9pt 6pt;
  }
  .pcard__head { display: contents; }
  .pcard__title { order: 1; flex: none; font: 700 11.5pt/1.15 var(--font-display); letter-spacing: -.01em; color: var(--p-ink); }
  .pcard__sub {
    order: 2;
    flex: 1 1 0;
    min-width: 40%;
    margin: 0;
    font: 700 9pt/1.35 var(--font-mono);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--p-ink-2);
  }
  .pcard .status { order: 3; flex: none; gap: 5pt; font: 700 9pt/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--p-muted); white-space: nowrap; }
  .pcard .led { width: 6px; height: 6px; animation: none; }
  .pcard__desc { order: 4; flex: 0 0 100%; margin: 0; font-size: 9.5pt; line-height: 1.42; color: var(--p-ink-2); }
  .pcard__tags { order: 5; flex: 1 1 auto; display: block; min-width: 0; margin: 0; padding: 0; }
  .pcard__tags .chip {
    display: inline;
    min-height: 0;
    padding: 0;
    border: 0;
    font: 400 9pt/1.4 var(--font-mono);
    color: var(--p-muted);
    white-space: normal;
  }
  .pcard__tags .chip + .chip::before { content: " · "; color: var(--p-line-2); }
  .pcard__actions {
    order: 6;
    flex: none;
    display: block;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
  }
  .pcard__actions .link {
    display: inline-flex;
    align-items: center;
    gap: 4pt;
    min-height: 0;
    font: 400 9pt/1.35 var(--font-mono);
    letter-spacing: 0;
    text-transform: none;
    color: var(--p-ink);
    border: 0;
  }
  .pcard__actions .link .pi { width: 10pt; height: 10pt; color: var(--p-ink-2); }
  .pcard__actions .link__text { display: none; }
  .pcard__actions .link[href^="http"]::after {
    content: attr(href);
    font-size: 9pt;
    color: var(--p-ink);
    text-transform: none;
  }

  /* del séptimo proyecto en adelante, una línea cada uno: título · subtítulo · categoría (D-1130) */
  .pgrid > .pcard:nth-child(n+7) { border: 0; border-left: 2pt solid var(--p-line-2); border-radius: 0; }
  .pgrid > .pcard:nth-child(n+7) .pcard__body { padding: 1pt 0 1pt 8pt; }
  .pgrid > .pcard:nth-child(n+7) .pcard__title { font-size: 10pt; }
  .pgrid > .pcard:nth-child(n+7) .pcard__desc,
  .pgrid > .pcard:nth-child(n+7) .pcard__tags,
  .pgrid > .pcard:nth-child(n+7) .pcard__actions { display: none !important; }

  /* ---------- Experiencia ---------- */
  /* cada entrada va entera; la línea de tiempo puede partirse entre entradas */
  .timeline { display: block; }
  .tl-item {
    display: grid;
    grid-template-columns: 31mm minmax(0, 1fr);
    gap: 10pt;
    padding: 0;
    margin: 0 0 7pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .tl-stamp {
    display: block;
    padding: 1pt 0 0;
    border: 0;
  }
  .tl-stamp__big { display: block; font: 700 11pt/1.1 var(--font-mono); color: var(--p-red-text); }
  .tl-stamp__sub { display: block; margin-top: 2pt; font: 400 9pt/1.3 var(--font-mono); letter-spacing: .04em; color: var(--p-muted); }
  .tl-card { display: block; padding: 0 0 0 9pt; border: 0; border-left: 1px solid var(--p-line); border-radius: 0; }
  .tl-item--main .tl-card { border-left: 2pt solid var(--p-red); }
  .tl-card__title { margin: 0; font: 700 10.5pt/1.2 var(--font-display); color: var(--p-ink); }
  .tl-card__meta { margin-top: 1pt; font: 700 9pt/1.35 var(--font-mono); color: var(--p-ink-2) !important; }
  .tl-card__desc { margin-top: 2pt; max-width: none; font-size: 9.5pt; line-height: 1.42; color: var(--p-ink-2); }
  .certs { margin-top: 8pt; padding-left: 0; break-inside: avoid; page-break-inside: avoid; }
  .certs__title { margin: 0 0 3pt; font: 700 9pt/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--p-red-text); }
  .certs__list { display: block; }
  .certs__shot, .cert-lb { display: none !important; }
  .certs__item { display: block; margin: 0 0 2pt; padding: 0; border: 0; box-shadow: none; background: none; }
  .certs__name { display: inline; font: 700 9.5pt/1.4 var(--font-body); color: var(--p-ink); }
  .certs__name::after { content: " · "; font-weight: 400; color: var(--p-muted); }
  .certs__meta { display: inline; font-size: 9.5pt; line-height: 1.4; color: var(--p-ink-2); }
  .ai__note { break-before: avoid; page-break-before: avoid; margin: 2pt 0 0; padding: 0; font: 400 9pt/1.35 var(--font-mono); color: var(--p-muted); }

  /* ---------- Habilidades técnicas: grupo → lista en texto ---------- */
  .objs { display: block; }
  .obj {
    display: grid;
    grid-template-columns: 40mm minmax(0, 1fr);
    gap: 10pt;
    padding: 2.5pt 0;
    border: 0;
    border-bottom: 1px dotted var(--p-line);
    border-radius: 0;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .obj:last-child { border-bottom: 0; }
  .obj__head { display: block; }
  .obj__label { padding: 0; background: none !important; box-shadow: none; color: var(--p-ink); }
  .obj__title { margin: 0; font: 700 9.5pt/1.35 var(--font-display); letter-spacing: 0; color: var(--p-ink); }
  .obj__tray { display: block; }
  .tiles { display: block; }
  .tile {
    display: inline;
    min-height: 0;
    padding: 0;
    border: 0;
    font: 400 9.5pt/1.45 var(--font-body);
    color: var(--p-ink-2);
  }
  .tile + .tile::before { content: " · "; color: var(--p-line-2); }
  .tile__label { overflow-wrap: normal; }

  /* ---------- Formación + Sobre mí ---------- */
  .about-win { display: block; border: 0; border-radius: 0; }
  .about-win__body { display: block; }
  .props { padding: 0; border: 0; }
  .props__list { display: block; }
  .props__list > div { padding: 0; border: 0; }
  .props__list dt { display: none; }
  .props__list dd { margin: 0; font: 600 10pt/1.4 var(--font-display); color: var(--p-ink); }
  /* "Sobre mí" con el mismo título que .sec-head: texto (::before) + regla (::after) */
  .about-win__text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7pt 8pt;
    margin-top: 13pt;
    padding: 0;
  }
  .about-win__text::before { order: -2; }
  .about-win__text::after { content: ""; order: -1; flex: 1; border-top: 1px solid var(--p-line-2); }
  .about-win__text > * { flex: 0 0 100%; min-width: 0; }
  .about-win__bio { max-width: none; font-size: 9.5pt; line-height: 1.5; color: var(--p-ink-2); }
  .about-win__quote {
    margin-top: 6pt;
    padding: 0 0 0 9pt;
    border-left: 2pt solid var(--p-red);
    max-width: none;
    font: 600 10.5pt/1.35 var(--font-display);
    color: var(--p-ink);
    break-inside: avoid;
  }
}