/* ==================================
   FOTO DE PERFIL EN EL HEADER
================================== */

header {
  display: grid;
  grid-template-columns: 180px 1fr;
  column-gap: 40px;
  align-items: center;
}

.foto-perfil {
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: center;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 4px solid var(--rosa-brillante);
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.25);
  background: url("foto-florencia-600.webp") center / cover no-repeat;
  object-fit: cover;
  object-position: center;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

header > :not(.foto-perfil) {
  grid-column: 2;
}

header .availability {
  justify-self: start;
}

/* ==================================
   CELULAR (solo la web: el PDF se arma aparte y no usa estas reglas → html:not(.pdf-capture))
   Selectores reforzados + !important porque tech-style.css se carga DESPUÉS de este archivo.
================================== */
@media screen and (max-width: 700px) {
  /* Foto a la IZQUIERDA del nombre (como en PC), más chica para que el texto respire */
  html:not(.pdf-capture) body header {
    display: grid !important;
    grid-template-columns: 124px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
    text-align: left !important;
    align-items: center !important;
    justify-items: stretch !important;
  }
  /* FOTO SIEMPRE CIRCULAR: ancho = alto, sin estirarse ni achicarse, recortada con "cover" */
  html:not(.pdf-capture) body header > .foto-perfil,
  html:not(.pdf-capture) body header > img.foto-perfil {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    justify-self: start !important;
    align-self: center !important;
    box-sizing: border-box !important;
    width: 124px !important;
    height: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
    min-height: 124px !important;
    max-height: 124px !important;
    inline-size: 124px !important;
    block-size: 124px !important;
    aspect-ratio: 1 / 1 !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-width: 3px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    overflow: hidden !important;
    position: static !important;
    float: none !important;
    transform: none !important;
  }
  html:not(.pdf-capture) body header > :not(.foto-perfil) {
    grid-column: 2 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
  html:not(.pdf-capture) body header h1 { justify-content: flex-start !important; text-align: left !important; margin: 0 0 6px !important; padding: 0 !important; line-height: 1.1 !important; font-size: clamp(1.45rem, 6.6vw, 1.95rem) !important; }
  html:not(.pdf-capture) body header h1 a { display: inline !important; white-space: normal !important; }
  html:not(.pdf-capture) body header h1 a i { font-size: .7em !important; margin-left: 6px !important; position: static !important; vertical-align: middle !important; }
  html:not(.pdf-capture) body header > .availability { justify-self: start !important; }
  /* íconos (LinkedIn, GitHub, CV, Dossier, PDF): ancho completo, debajo de la foto y el texto */
  html:not(.pdf-capture) body header > .header-socials {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
    margin-top: 14px !important;
  }
}

@media screen and (max-width: 380px) {
  html:not(.pdf-capture) body header { grid-template-columns: 104px minmax(0, 1fr) !important; column-gap: 12px !important; }
  html:not(.pdf-capture) body header > .foto-perfil,
  html:not(.pdf-capture) body header > img.foto-perfil {
    width: 104px !important; height: 104px !important;
    min-width: 104px !important; max-width: 104px !important;
    min-height: 104px !important; max-height: 104px !important;
    inline-size: 104px !important; block-size: 104px !important;
  }
}

/* PROYECTOS en celular / tablet chica: TODOS uno debajo del otro, a todo el ancho.
   Vale para la web y también para el PDF generado desde el celular.
   (tech-style.css los fuerza "de a dos" con letra de 9-11 px: acá se anula con !important.) */
@media screen and (max-width: 820px) {
  html body #proyectos,
  html body:has(.project-filters .filter-btn.active) #proyectos {
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
    row-gap: 22px !important;
  }
  html body #proyectos .project-group:not(.hide-card) { display: block; }
  html body #proyectos .projects-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 22px !important;
  }
  html body #proyectos .projects-grid > .card:not(.hide-card) {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    grid-template-rows: none !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body #proyectos .projects-grid > .card > * {
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0 !important;
  }
  html body #proyectos .projects-grid > .card .media-container { width: 100% !important; max-width: 100% !important; }
}

/* En celular, con una sola columna, las tarjetas vuelven a tamaño NORMAL y legible
   (tech-style.css las achicaba a 9-11 px porque iban de a dos) */
@media screen and (max-width: 600px) {
  html body #proyectos .projects-grid > .card { --cp: 18px !important; border-radius: 18px !important; }
  html body #proyectos .projects-grid > .card::before { font-size: 11.5px !important; padding: 0 16px 0 66px !important; }
  html body #proyectos .projects-grid > .card h3 { font-size: 17px !important; }
  html body #proyectos .projects-grid > .card .project-type { font-size: 12px !important; }
  html body #proyectos .projects-grid > .card > p:not(.project-type) { font-size: 14.5px !important; line-height: 1.65 !important; }
  html body #proyectos .projects-grid > .card .project-tags { gap: 6px !important; }
  html body #proyectos .projects-grid > .card .project-tags span { font-size: 11px !important; padding: 4px 8px !important; }
  html body #proyectos .projects-grid > .card .featured-badge { font-size: 12px !important; padding: 4px 12px !important; }
  html body #proyectos .projects-grid > .card .buttons { flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; }
  html body #proyectos .projects-grid > .card .buttons .button { width: auto !important; flex: 1 1 140px !important; font-size: 12px !important; padding: 9px 12px !important; }
}

/* ==================================
   BOTÓN EXPORTAR PDF (mismo estilo que los íconos del header)
================================== */
.header-socials { align-items: center; flex-wrap: wrap; }

.export-pdf-btn {
  display: inline-block;
  padding: 0;
  background: none;
  border: none;
  color: var(--texto-secundario);
  font-family: inherit;
  font-size: 28px;
  line-height: inherit;
  cursor: pointer;
  transition: 0.3s;
}

.export-pdf-btn:hover:not(:disabled) {
  color: var(--rosa-brillante);
  transform: translateY(-3px);
}
.export-pdf-btn:disabled { opacity: 0.6; cursor: progress; }
.export-pdf-label {
  font-size: 14px;
  font-weight: 700;
  margin-left: 3px;
  vertical-align: middle;
}

/* ==================================
   IMPRESIÓN (Ctrl+P)
================================== */
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html, body { background-color: var(--rosa-fondo) !important; }
  html[data-theme="dark"], html[data-theme="dark"] body, html.dark, html.dark body { background-color: #0f0a0d !important; }

  .sticky-nav-wrapper, #panel-toggle, #float-panel, #back-to-top,
  .kawaii-bg-decor, .kawaii-modal, .gif-toggle-btn, .project-filters,
  #export-pdf, #copy-email-btn, button[onclick^="openModal"] { display: none !important; }

  /* Formulario de consultas y su desplegable: no se imprimen.
     (export-pdf.js además marca el bloque con [data-pdf-hide] al imprimir) */
  [data-pdf-hide],
  #contacto details, #contacto .contact-accordion, #contactForm, #formSuccess, #formError { display: none !important; }

  /* El "Desarrollado por…" vuelve al flujo normal y no se superpone */
  footer { position: static !important; transform: none !important; margin-top: 32px !important; clear: both; }

  /* Imprimir con TODOS los proyectos, sin importar el filtro activo */
  #proyectos .project-group,
  #proyectos .project-group.hide-card,
  #proyectos .card.hide-card { display: block !important; }

  header, section { opacity: 1 !important; animation: none !important; transform: none !important; }
  .card, .github-calendar-card { break-inside: avoid; }

  /* sin manchas rosas al imprimir */
  body section > h2::after { display: none !important; }
  .tk-dot { box-shadow: none !important; animation: none !important; }
  #contacto .contact-item::after { display: none !important; }
  body .projects-grid > .card, body .projects-grid > .card .media-container { box-shadow: none !important; }
}

/* CV y PDF: misma regla = mismo tamaño */
.header-socials a[aria-label="Descargar CV"],
.header-socials #export-pdf,
.header-socials .export-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  margin: 0;
  font-size: 28px;
  line-height: inherit;
}
.header-socials a[aria-label="Descargar CV"] i,
.header-socials #export-pdf i,
.header-socials .export-pdf-btn i {
  font-size: 26px;
  line-height: inherit;
}
.header-socials .cv-label,
.header-socials .export-pdf-label {
  font-size: 14px !important;
  font-weight: 700;
  margin-left: 0;
  vertical-align: baseline;
}

@media print {
  /* misma foto, mismo tamaño y misma posición que en pantalla (antes se achicaba a 150px) */
  .foto-perfil {
    width: 180px !important;
    height: 180px !important;
    border-radius: 50% !important;
    border: 4px solid #ec4899 !important;
    object-fit: cover !important;
  }
}

/* ==================================
   RESPONSIVE: NADA SE SALE DE LOS BORDES
================================== */
html, body { max-width: 100%; overflow-x: clip; }   /* clip (no hidden): no rompe el menú sticky */
img, video, canvas { max-width: 100%; }
header > *, .card > *, .projects-grid > * { min-width: 0; }
h1, h2, h3, h4, p, li, a { overflow-wrap: anywhere; }
header h1, .project-tags, .buttons, .tech-stack-general, .header-socials { flex-wrap: wrap; }
.github-calendar-card img, .github-calendar-card svg { max-width: 100%; height: auto; }

/* ==================================
   IMPRESIÓN (Ctrl+P): sin cortes feos ni hojas vacías
================================== */
@page { size: A4; margin: 12mm; }

@media print {
  html, body { overflow: visible !important; }
  .card, .github-calendar-card, .media-container, .project-tags, .buttons,
  .contact-grid, .summary-pill, #proyectos .project-group > .card {
    break-inside: avoid; page-break-inside: avoid;
  }
  h1, h2, h3, h4, .tech-title, .group-sub { break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  /* los colores de fondo y la barra rosa (pseudo-elementos) salen siempre */
  *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  /* los links siguen siendo links en el PDF impreso: no se tapan con capas */
  a { position: relative; z-index: 1; }
  a[href]::after { content: none !important; }
}

@media print {
  #contacto .contact-item::before, #contacto .contact-item::after { content: none !important; display: none !important; }
  #contacto { padding-bottom: 8px !important; margin-bottom: 0 !important; }
}

/* ==================================
   FOTO DE PERFIL BLINDADA
   (siempre cuadrada = círculo perfecto; la imagen se recorta con "cover", nunca se estira)
================================== */
.foto-perfil { max-width: none; flex-shrink: 0; aspect-ratio: 1 / 1; object-fit: cover; }

@media print {
  header .foto-perfil {
    position: static !important; transform: none !important;
    width: 180px !important; height: 180px !important;
    min-width: 180px !important; min-height: 180px !important; max-width: none !important;
    grid-column: 1 !important; grid-row: 1 / span 4 !important; align-self: center !important;
    border-radius: 50% !important; border: 4px solid #ec4899 !important;
    object-fit: cover !important;
    background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
    break-inside: avoid; page-break-inside: avoid;
  }
}

/* ==================================
   CONTACTO EN CELULAR = IGUAL QUE EN PC
   (las 3 tarjetas en fila, centradas: Email / LinkedIn / GitHub)
================================== */
@media screen and (max-width: 700px) {
  html body #contacto .contact-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 8px !important;
    grid-template-columns: none !important;
    width: 100% !important;
  }

  html body #contacto .contact-grid > .contact-item,
  html body #contacto .contact-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px 6px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
    border-radius: 12px !important;
  }

  html body #contacto .contact-item i {
    font-size: 12px !important;
    margin: 0 !important;
  }

  /* la etiqueta chiquita (mailto / in / git) */
  html body #contacto .contact-item span,
  html body #contacto .contact-item small,
  html body #contacto .contact-item .tag {
    font-size: 8.5px !important;
    padding: 2px 5px !important;
    white-space: nowrap !important;
  }
}

/* pantallas muy angostas: se achica un poquito más para que entren las 3 */
@media screen and (max-width: 380px) {
  html body #contacto .contact-grid { gap: 6px !important; }
  html body #contacto .contact-item { font-size: 10.5px !important; padding: 9px 4px !important; gap: 4px !important; }
  html body #contacto .contact-item span,
  html body #contacto .contact-item small,
  html body #contacto .contact-item .tag { font-size: 7.5px !important; padding: 2px 4px !important; }
}

/* ==================================
   SIN EL RECUADRO ROSA ALREDEDOR DE "Dossier" (y de los íconos del header al pasar el mouse / foco)
================================== */
html body header .header-socials a,
html body header .header-socials a:hover,
html body header .header-socials a:focus,
html body header .header-socials a:focus-visible,
html body header .header-socials a:active,
html body header .header-socials a[href*="github.io"],
html body header .header-socials a[href*="github.io"]:hover {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
}
html body header .header-socials a::before,
html body header .header-socials a::after {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Lo mismo para TODOS los íconos/botones del header (LinkedIn, GitHub, CV, Dossier, PDF), incluidos sus hijos */
html body header .header-socials > *,
html body header .header-socials > *:hover,
html body header .header-socials > *:focus,
html body header .header-socials > *:focus-visible,
html body header .header-socials > *:active,
html body header .header-socials > * > *,
html body header .header-socials button,
html body header .header-socials button:hover,
html body header .header-socials button:focus,
html body header .header-socials button:focus-visible {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
}
html body header .header-socials > *::before,
html body header .header-socials > *::after,
html body header .header-socials > * > *::before,
html body header .header-socials > * > *::after {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}