/* Parte amistoso con la imagen de la web: negro y rojo, titulares en Barlow Condensed.
   Se carga después de los estilos propios del parte (Tailwind precompilado) y los ajusta.
   Todo va bajo body.parte para ganar a las clases de Tailwind sin tocar su HTML. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-hyperlegible-next-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-hyperlegible-next-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --rojo: #d73732;
  --rojo-oscuro: #b02a26;
  --rojo-claro: #f5b3ae;
  --negro: #141414;
  --tinta: #1a1a1a;
  --gris: #5c5c5c;
  --linea: #e2e2e2;
  --fondo: #f3f3f3;
  --foco: #ffbf47;
  --verde: #15803d;
  --titulares: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.parte {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}
body.parte :focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

.parte-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.saltar {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: #fff;
  color: var(--tinta);
  font-weight: 700;
  border-radius: 8px;
}
.saltar:focus { top: 1rem; }
.parte-contenedor { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1rem; }

/* ---------- Cabecera y franja roja, como en el resto de la web ---------- */
.parte-cabecera { background: var(--negro); color: #fff; }
.parte-cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.parte-cabecera__logo { display: block; flex: none; }
.parte-cabecera__logo img { display: block; width: 112px; height: auto; }
.parte-cabecera__telefono {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.parte-cabecera__telefono:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }
.parte-cabecera__telefono .icono { width: 1.15rem; height: 1.15rem; color: var(--rojo-claro); }
.parte-urgencias { background: var(--rojo); color: #fff; }
.parte-urgencias__fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.parte-urgencias__boton {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3.1rem;
  padding: 0.45rem 0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  color: #fff;
  font-weight: 700;
  font-size: 0.95em;
  line-height: 1.15;
  text-decoration: none;
}
.parte-urgencias__boton .icono { width: 1.6rem; height: 1.6rem; flex: none; color: #fff; }
.parte-urgencias__boton:hover { background: var(--rojo-oscuro); border-color: #fff; color: #fff; }
.parte-urgencias__boton[aria-current="page"] { background: #fff; color: var(--tinta); border-color: #fff; }
.parte-urgencias__boton[aria-current="page"] .icono { color: var(--rojo); }
@media (min-width: 48em) {
  .parte-urgencias__fila { display: flex; justify-content: flex-end; }
  .parte-urgencias__boton { min-height: 2.75rem; }
}

/* ---------- La hoja del parte ---------- */
body.parte #parte {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.25rem 0.75rem 2rem;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}
@media (min-width: 40em) {
  body.parte #parte { margin: 1.5rem auto; padding: 1.75rem; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
}
body.parte #parte > h1 {
  margin: 0 0 0.35rem;
  font-family: var(--titulares);
  font-weight: 700;
  font-size: clamp(2.4rem, 1.8rem + 3vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: 0;
  text-align: left;
  color: var(--negro);
}
body.parte #parte > p.text-center { text-align: left; margin-bottom: 0.75rem; color: var(--gris); font-size: 0.95rem; }
body.parte .nota-privacidad {
  max-width: none;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--linea);
  border-left: 4px solid var(--negro);
  border-radius: 6px;
  background: var(--fondo);
  color: var(--gris);
  font-size: 0.875rem;
  line-height: 1.5;
}
body.parte .nota-privacidad a, body.parte .guia a { color: var(--rojo-oscuro); text-decoration: underline; }
body.parte .nota-boton { max-width: 28rem; margin: 0.75rem auto 0; color: var(--gris); font-size: 0.85rem; }
body.parte .pendiente { background: #fff3b0; color: #5c4400; padding: 0 0.2em; border-radius: 3px; font-weight: 700; }

/* Guía rápida */
.guia { margin: 0 0 1.25rem; border: 2px solid var(--negro); border-radius: 8px; background: #fff; }
.guia__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  font-family: var(--titulares);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.05;
  cursor: pointer;
  list-style: none;
}
.guia__titulo::-webkit-details-marker { display: none; }
.guia__titulo::after { content: "+"; flex: none; font-size: 1.6rem; line-height: 1; color: var(--rojo); }
.guia[open] > .guia__titulo::after { content: "–"; }
.guia__lista { margin: 0; padding: 0 1rem 0 2.6rem; display: grid; gap: 0.55rem; list-style: decimal; }
.guia__lista li { padding-left: 0.2rem; }
.guia__lista li::marker { font-family: var(--titulares); font-size: 1.2em; color: var(--rojo); }
.guia__ayuda { margin: 0.75rem 1rem 0.9rem; font-weight: 700; }

/* Barra de pasos */
.progreso {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0 -0.75rem 1rem;
  padding: 0.55rem 0.75rem 0.5rem;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--linea);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
@media (min-width: 40em) { .progreso { margin: 0 -1.75rem 1.25rem; padding: 0.7rem 1.75rem 0.6rem; } }
.progreso[hidden] { display: none; }
.progreso__fila { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.progreso__texto { margin: 0; font-size: 0.9rem; line-height: 1.2; color: var(--gris); }
.progreso__texto strong { display: block; font-family: var(--titulares); font-size: 1.35rem; line-height: 1.05; color: var(--negro); }
.progreso__siguiente {
  flex: none;
  min-height: 2.75rem;
  padding: 0.45rem 1rem;
  border: 2px solid var(--negro);
  border-radius: 6px;
  background: var(--negro);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.progreso__siguiente:hover { background: #333; border-color: #333; }
.progreso__lista { display: flex; gap: 4px; margin: 0.45rem 0 0; padding: 0; list-style: none; }
.progreso__paso { flex: 1 1 0; min-width: 0; }
.progreso__paso a { position: relative; display: block; min-height: 1.1rem; padding-top: 0.55rem; color: var(--gris); font-size: 0.8rem; line-height: 1.2; text-decoration: none; }
.progreso__paso a::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 3px; background: #d4d4d4; }
.progreso__paso--completo a::before { background: var(--negro); }
.progreso__paso--actual a::before { background: var(--rojo); }
.progreso__paso--actual a { color: var(--negro); font-weight: 700; }
.progreso__etiqueta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 56em) {
  .progreso__etiqueta { position: static; width: auto; height: auto; overflow: hidden; clip: auto; display: block; white-space: nowrap; text-overflow: ellipsis; }
}
/* Que la barra no tape el principio de cada sección al saltar a ella */
body.parte [id^="paso-"] { scroll-margin-top: 6.5rem; }

/* Secciones */
body.parte .form-section { padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--linea); border-radius: 8px; }
@media (min-width: 40em) { body.parte .form-section { padding: 1.4rem; margin-bottom: 1.25rem; } }
body.parte .form-section-title {
  margin-bottom: 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 3px solid var(--negro);
  font-family: var(--titulares);
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1;
  letter-spacing: 0;
}
body.parte .form-section-title:focus { outline: none; }
body.parte .form-section h3 { font-size: 1.05rem; font-weight: 700; color: var(--tinta); }

/* Campos: letra de 16 px (evita el zoom del iPhone) y etiquetas más claras */
body.parte .input-group label { color: var(--tinta); font-weight: 700; font-size: 0.95rem; margin-bottom: 0.35rem; }
body.parte .input-group input,
body.parte .input-group textarea,
body.parte .input-group select { font-size: 1rem; min-height: 2.9rem; border-color: #b8b8b8; border-radius: 6px; color: var(--tinta); background-color: #fff; }
body.parte .input-group input[readonly] { background-color: var(--fondo); }
body.parte .input-group input:focus,
body.parte .input-group textarea:focus,
body.parte .input-group select:focus { border-color: var(--negro); box-shadow: 0 0 0 3px var(--foco); }

/* Botones Sí / No */
body.parte .btn-group-container { max-width: 20rem; }
body.parte .btn-choice { min-height: 2.9rem; font-size: 1rem; font-weight: 700; border-color: #b8b8b8; border-radius: 6px; background: #fff; color: var(--tinta); }
body.parte .btn-choice:hover { border-color: var(--negro); background: var(--fondo); }
body.parte .btn-choice.active { background: var(--negro); border-color: var(--negro); color: #fff; }

/* Botones principales en rojo, secundarios en negro o con borde */
body.parte .bg-blue-600,
body.parte .bg-blue-500 { background-color: var(--rojo); }
body.parte .bg-blue-600:hover,
body.parte .bg-blue-500:hover { background-color: var(--rojo-oscuro); }
body.parte #get-gps-btn { background-color: var(--negro); min-height: 2.9rem; font-weight: 700; }
body.parte #get-gps-btn:hover { background-color: #333; }
body.parte #clear-gps-btn { background-color: #fff; color: var(--tinta); border: 2px solid #b8b8b8; min-height: 2.9rem; font-weight: 700; }
body.parte #clear-gps-btn:hover { border-color: var(--negro); }
body.parte #today-btn { min-height: 2.9rem; font-weight: 700; border: 2px solid #b8b8b8; background: #fff; }
body.parte #submit-btn { min-height: 3.5rem; font-size: 1.15rem; border-radius: 6px; box-shadow: none; }
body.parte #submit-btn:hover { transform: none; }
body.parte #submit-btn:disabled { background-color: var(--gris); cursor: wait; }
body.parte .open-impact-modal-btn,
body.parte #open-croquis-modal-btn,
body.parte label[for="photo-input"] { min-height: 2.9rem; border: 2px solid var(--negro); background: #fff; color: var(--tinta); border-radius: 6px; box-shadow: none; }
body.parte .open-signature-modal-btn { min-height: 4rem; border-color: #9a9a9a; color: var(--gris); font-weight: 700; }

/* Circunstancias: casillas más grandes y fáciles de pulsar */
body.parte #circunstancias-list > div { padding-top: 0.4rem; padding-bottom: 0.4rem; border-color: var(--linea); }
body.parte #circunstancias-list input[type="checkbox"] { width: 1.6rem; height: 1.6rem; cursor: pointer; }
body.parte #circunstancias-list input[name="circunstanciasA"] { accent-color: #1d4ed8; }
body.parte #circunstancias-list input[name="circunstanciasB"] { accent-color: var(--verde); }
body.parte #circunstancias-list .text-sm { font-size: 0.95rem; }
body.parte #confirmacionA,
body.parte #confirmacionB { width: 1.35rem; height: 1.35rem; flex: none; accent-color: var(--negro); }
body.parte label[for="confirmacionA"],
body.parte label[for="confirmacionB"] { font-size: 0.85rem; color: var(--gris); }

/* Al terminar: envío a Elidio */
.enviar-elidio { max-width: 480px; margin: 1rem auto 0; padding: 1rem; border: 2px solid var(--negro); border-radius: 8px; background: #fff; text-align: left; }
.enviar-elidio__titulo { margin: 0 0 0.2rem; font-family: var(--titulares); font-weight: 700; font-size: 1.5rem; line-height: 1.05; color: var(--negro); }
.enviar-elidio__texto { margin: 0 0 0.8rem; color: var(--gris); font-size: 0.95rem; }
.enviar-elidio__botones { display: grid; gap: 0.5rem; }
.enviar-elidio__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.6rem 1rem;
  border: 2px solid var(--negro);
  border-radius: 6px;
  background: #fff;
  color: var(--tinta);
  font-weight: 700;
  text-decoration: none;
}
.enviar-elidio__boton:hover { background: var(--fondo); color: var(--tinta); }
.enviar-elidio__boton--whatsapp { background: var(--verde); border-color: var(--verde); color: #fff; }
.enviar-elidio__boton--whatsapp:hover { background: #116632; border-color: #116632; color: #fff; }
.enviar-elidio__boton svg { width: 1.25rem; height: 1.25rem; flex: none; }
.enviar-elidio__nota { margin: 0.7rem 0 0; color: var(--gris); font-size: 0.85rem; line-height: 1.4; }

/* Pie */
.parte-pie { margin-top: 0; padding: 2rem 0 2.5rem; background: var(--negro); color: #c9c9c9; font-size: 0.9rem; line-height: 1.5; }
.parte-pie a { color: #fff; }
.parte-pie__enlaces { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 1rem; }
.parte-pie__legal { max-width: 60rem; margin: 0 0 0.6rem; color: #b8b8b8; font-size: 0.85rem; }

/* Ventanas del parte (firma, croquis, punto de impacto, avisos): cerradas no se ven ni se llega
   a ellas con el teclado o el lector de pantalla. Se mantiene el fundido al abrir y cerrar. */
.modal-overlay { visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; }
.modal-overlay.visible { visibility: visible; transition: opacity 0.3s ease-in-out, visibility 0s; }

/* Generar → descargar → compartir */
.pasos-pdf { max-width: 28rem; margin: 0 auto 1.1rem; text-align: left; }
.pasos-pdf__lista { display: flex; gap: 0.4rem; margin: 0 0 0.6rem; padding: 0; list-style: none; }
.pasos-pdf__paso {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.45rem 0.3rem;
  border: 2px solid #d4d4d4;
  border-radius: 6px;
  color: var(--gris);
  font-weight: 700;
  font-size: 0.9rem;
}
.pasos-pdf__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: #d4d4d4;
  color: #fff;
  font-size: 0.8rem;
  line-height: 1;
}
.pasos-pdf__paso--actual { border-color: var(--rojo); color: var(--tinta); }
.pasos-pdf__paso--actual .pasos-pdf__num { background: var(--rojo); }
.pasos-pdf__paso--hecho { border-color: var(--negro); color: var(--tinta); }
.pasos-pdf__paso--hecho .pasos-pdf__num { background: var(--negro); }
.pasos-pdf__ayuda { margin: 0; padding: 0.6rem 0.75rem; border-left: 4px solid var(--negro); border-radius: 0 6px 6px 0; background: var(--fondo); color: var(--tinta); font-size: 0.95rem; line-height: 1.45; }
.pasos-pdf__ayuda--aviso { border-left-color: var(--rojo); background: #fbeeed; }

/* Botones para compartir bloqueados hasta descargar el PDF */
.area-descarga--bloqueada .compartir-bloqueable { pointer-events: none; user-select: none; }
/* Se apagan los botones; los textos siguen leyéndose bien para saber qué se activará */
.area-descarga--bloqueada .compartir-bloqueable a,
.area-descarga--bloqueada .compartir-bloqueable button { opacity: 0.4; filter: grayscale(1); }
.aviso-compartir { max-width: 480px; margin: 0.25rem auto 0.5rem; color: var(--tinta); font-weight: 700; font-size: 0.92rem; text-align: center; }
@media (max-width: 25rem) {
  /* En móviles estrechos, el número encima del nombre para que quepan los tres pasos */
  .pasos-pdf__paso { flex-direction: column; gap: 0.2rem; padding: 0.4rem 0.2rem; font-size: 0.85rem; }
}
/* Botón "Descargar PDF" del parte: verde más oscuro para que el texto blanco se lea bien */
#download-area a[download] { background-color: #15803d; }
#download-area a[download]:hover { background-color: #116632; }