:root {
  --color-principal: #163A6B;   /* azul marino del logo (G / j) */
  --color-secundario: #2C6CA8;  /* azul medio para acciones secundarias */
  --color-acento: #3FA9E0;      /* azul claro del contorno del edificio en el logo */
  --color-fondo: #F4F8FC;
  --color-texto: #1C2733;
  --color-borde: #D6E4F0;
  --color-error: #C0392B;
  --color-exito: #2E7D32;
  --color-aviso-fondo: #FFF6D9;
  --color-aviso-borde: #F0D98B;
  --color-aviso-texto: #6B5600;
  --fuente: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --radio: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente);
  background: var(--color-fondo);
  color: var(--color-texto);
  -webkit-font-smoothing: antialiased;
}

.oculto { display: none !important; }

#app { max-width: 640px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
#app:has(.pantalla-ancha) { max-width: 980px; }

.pantalla { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; }

/* La pantalla del formulario NO debe encogerse/expandirse al ancho de su
   contenido (eso hacía que el encabezado cambiara de ancho según el largo
   del nombre de la copropiedad). Aquí forzamos a que todos sus hijos
   (encabezado, aviso, formulario, pie) ocupen siempre el 100% del ancho
   disponible, y alineamos el texto de párrafos a la izquierda para que se
   vea profesional en un bloque ancho. */
.pantalla-ancha {
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  text-align: left;
}
.pantalla-ancha .aviso,
.pantalla-ancha form#formulario-reporte {
  text-align: left;
}

.spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 4px solid var(--color-borde);
  border-top-color: var(--color-principal);
  animation: girar 0.8s linear infinite;
  margin-bottom: 16px;
}
@keyframes girar { to { transform: rotate(360deg); } }

.tarjeta {
  background: #fff; border-radius: var(--radio); padding: 32px 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06); width: 100%;
}

/* ---------- Portada ---------- */
/* Full-bleed: rompe el max-width de #app para ocupar todo el ancho de la
   ventana, aunque el contenedor padre esté centrado y limitado a 640/980px. */
.pantalla-portada {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 48px 24px;
  color: #fff;
  text-align: center;
  position: relative;
  /* La foto es opcional: si "portada-fondo.jpg" no existe todavía, el
     navegador simplemente no la pinta y queda el degradado azul de marca —
     no rompe nada. Cuando agregues una foto real con ese nombre en
     frontend/, aparece sola, sin tocar CSS. */
  background-color: var(--color-principal);
  background-image:
    linear-gradient(160deg, rgba(22, 58, 107, 0.93), rgba(44, 108, 168, 0.88)),
    url('portada-fondo.jpg');
  background-size: cover;
  background-position: center;
}
.portada-contenido { max-width: 560px; }
.pantalla-portada img#logo-portada {
  max-height: 90px; max-width: 260px; width: auto; height: auto;
  object-fit: contain; margin-bottom: 20px;
}
.pantalla-portada h1 { margin: 0 0 14px; font-size: 2rem; }
.portada-descripcion { margin: 0 0 32px; font-size: 1rem; line-height: 1.55; opacity: 0.95; }
.boton-portada { width: auto; padding: 14px 36px; }

/* ---------- Encabezado ---------- */
header#encabezado {
  background: linear-gradient(135deg, var(--color-principal), var(--color-secundario));
  color: #fff;
  padding: 24px 28px;
  margin: 24px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-radius: var(--radio);
  border-bottom: 3px solid var(--color-acento);
  box-shadow: 0 6px 16px rgba(22, 58, 107, 0.18);
}
header#encabezado h1 { margin: 0 0 6px; font-size: 1.45rem; overflow-wrap: break-word; }
.encabezado-subtitulo { margin: 0; opacity: 0.92; font-size: 0.95rem; overflow-wrap: break-word; }
.encabezado-texto { min-width: 0; }
/* El logo va en blanco puro (PNG transparente) directamente sobre el
   degradado azul del encabezado — sin chip ni fondo propio detrás. */
header#encabezado img#logo-empresa {
  max-height: 50px; max-width: 190px; height: auto; width: auto;
  object-fit: contain; flex-shrink: 0;
  display: block;
}

/* ---------- Aviso amarillo ---------- */
.aviso {
  background: var(--color-aviso-fondo);
  border: 1px solid var(--color-aviso-borde);
  color: var(--color-aviso-texto);
  border-radius: var(--radio);
  padding: 14px 18px;
  font-size: 0.88rem;
  margin: 16px 24px;
}
.aviso-final { margin: 20px 0 4px; }

/* ---------- Formulario ---------- */
/* El padding lateral del formulario (y el margen lateral del aviso, arriba)
   usan el MISMO valor que el padding lateral del encabezado (24px / 18px en
   móvil) para que las secciones numeradas queden alineadas con los bordes
   del encabezado en vez de verse más angostas. */
form#formulario-reporte { padding: 0 24px 40px; }

.seccion {
  border: none;
  border-top: 3px solid var(--color-principal);
  background: #fff;
  border-radius: var(--radio);
  padding: 22px 24px 24px;
  margin: 0 0 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  /* Se usa un div normal (no <fieldset>/<legend>) a propósito: el elemento
     <legend> nativo se posiciona sobre el borde del fieldset y queda FUERA
     de su fondo/padding en la mayoría de navegadores — por eso el título se
     veía "salido" de la tarjeta blanca. Con un div + h2 normales el título
     queda garantizado dentro de la caja, en cualquier navegador. */
}
.titulo-seccion {
  font-weight: 700;
  color: var(--color-principal);
  font-size: 1.05rem;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-borde);
  max-width: 100%;
  overflow-wrap: break-word;
}

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; }

.campo { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; font-size: 0.9rem; min-width: 0; }
/* min-height reserva el espacio de 2 líneas de etiqueta y alinea el texto
   contra el input (align-items: flex-end): así, cuando una etiqueta de la
   fila ocupa 2 líneas ("¿Ya reportó el siniestro...") y su vecina ocupa 1,
   los recuadros de ambas quedan a la misma altura en vez de desalinearse. */
.campo span {
  font-weight: 600;
  color: #333;
  overflow-wrap: break-word;
  line-height: 1.3;
  min-height: 2.6em;
  display: flex;
  align-items: flex-end;
}
/* Ejemplos entre paréntesis dentro de una etiqueta (ej. "Documento de
   identificación (cédula, pasaporte, etc.)") — más livianos que el texto
   principal para que se note que son solo ejemplos, no parte del requisito. */
.etiqueta-ejemplos { font-weight: 400; font-size: 0.85em; color: #667; }

/* Nota corta debajo de un campo puntual (distinta de .nota-seccion, que es
   para toda una sección). */
.nota-campo { font-size: 0.78rem; color: #666; line-height: 1.3; margin-top: -2px; }

input[type="text"], input[type="tel"], input[type="email"], input[type="date"],
select, textarea {
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
select {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-right: 30px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-principal);
  box-shadow: 0 0 0 3px rgba(22, 58, 107, 0.14);
}
textarea { resize: vertical; }

.campo-checkbox { flex-direction: row; align-items: flex-start; gap: 10px; }
.campo-checkbox input { width: auto; margin-top: 3px; }

.checkbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-top: 6px; }
.checkbox-grid label {
  display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 0.9rem;
  background: #F5F6F8; border-radius: 8px; padding: 10px 12px; overflow-wrap: break-word;
}
.checkbox-grid input { width: auto; }

/* ---------- Autocompletado de Copropiedad ---------- */
.campo-autocompletar { position: relative; }
.lista-sugerencias {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
  background: #fff; border: 1px solid var(--color-borde); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(22, 58, 107, 0.16);
  list-style: none; padding: 4px; max-height: 220px; overflow-y: auto; z-index: 20;
}
.lista-sugerencias li {
  padding: 9px 12px; border-radius: 6px; cursor: pointer;
  font-size: 0.92rem; font-weight: 400; color: var(--color-texto); overflow-wrap: anywhere;
}
.lista-sugerencias li:hover,
.lista-sugerencias li.sugerencia-activa { background: var(--color-fondo); color: var(--color-principal); }

.lista-archivos { list-style: none; padding: 0; margin: 10px 0 0; font-size: 0.85rem; }
.lista-archivos li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--color-borde); }
.lista-archivos button { border: none; background: none; color: var(--color-error); cursor: pointer; font-size: 0.85rem; }

/* ---------- Documentación y evidencias (sección 3) ---------- */
.nota-seccion { font-size: 0.85rem; color: #666; margin: -6px 0 14px; }

.documentos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; }

.campo-documento { background: #F8F9FA; border: 1px solid var(--color-borde); border-radius: 8px; padding: 14px 16px; margin: 8px 0; }
.campo-evidencias { grid-column: 1 / -1; }

.boton-adjuntar {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  background: #fff; border: 1px solid var(--color-borde); border-radius: 8px;
  padding: 9px 14px; font-size: 0.88rem; font-weight: 600; color: var(--color-texto);
  cursor: pointer; margin-top: 2px;
}
.boton-adjuntar:hover { border-color: var(--color-principal); color: var(--color-principal); }
.boton-adjuntar input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.lista-archivos-categoria { list-style: none; padding: 0; margin: 10px 0 0; font-size: 0.82rem; }
.archivo-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 6px; margin-bottom: 6px; background: #fff;
  border: 1px solid var(--color-borde);
}
.archivo-info { overflow-wrap: anywhere; }
.archivo-acciones { display: flex; gap: 8px; flex-shrink: 0; }
.archivo-acciones button {
  border: none; background: none; cursor: pointer; font-size: 0.8rem; font-weight: 600;
  color: var(--color-secundario); padding: 0;
}
.archivo-item.archivo-error { border-color: var(--color-error); background: #FDECEA; }
.archivo-item.archivo-error .archivo-info { color: var(--color-error); }
.archivo-item.archivo-error .archivo-acciones button:first-child { color: var(--color-error); }
.archivo-item.archivo-listo { border-color: var(--color-exito); }

/* ---------- Botones ---------- */
/* Separados del contenido de arriba con un divisor + espacio propio, y con
   el botón principal en su propia fila y los dos secundarios agrupados en
   una fila aparte, para que no se vean "amontonados" uno debajo del otro. */
.fila-botones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-borde);
}
.fila-botones-secundarios { display: flex; gap: 12px; }
.fila-botones-secundarios .boton { flex: 1; }

.boton {
  width: 100%; padding: 14px; border-radius: 10px; font-weight: 700; font-size: 0.98rem;
  cursor: pointer; border: none; transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
.boton:hover { opacity: 0.92; }
.boton-primario { background: var(--color-principal); color: #fff; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.boton-primario:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }
.boton-secundario { background: var(--color-secundario); color: #fff; }
.boton-terciario { background: #fff; color: var(--color-texto); border: 1px solid var(--color-borde); }

.barra-progreso { background: var(--color-borde); border-radius: 6px; height: 8px; overflow: hidden; margin-bottom: 8px; }
.barra-progreso-relleno {
  height: 100%; width: 30%; background: var(--color-principal);
  animation: avanzar 1.2s ease-in-out infinite;
}
@keyframes avanzar { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }

.mensaje-error {
  background: #FDECEA; color: var(--color-error); border: 1px solid #F5C6C0;
  border-radius: 8px; padding: 10px 12px; font-size: 0.88rem; margin-bottom: 14px;
}

footer#pie-copropiedad { text-align: center; font-size: 0.78rem; color: #888; padding: 20px; }

.tarjeta-exito .icono-exito {
  width: 56px; height: 56px; border-radius: 50%; background: var(--color-exito);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin: 0 auto 14px;
}
.numero-reporte { font-size: 1.3rem; font-weight: 800; color: var(--color-principal); margin: 4px 0 20px; }
#enlace-pdf-reporte {
  display: inline-block; margin-bottom: 16px; color: var(--color-principal); font-weight: 600;
}

/* ---------- Responsividad ----------
   Tres cortes: tablet (≤880px, baja el grid de 3 a 2 columnas), móvil
   (≤680px, reduce márgenes/paddings al mismo ritmo que el encabezado) y
   móvil angosto (≤480px, todo pasa a 1 columna y el encabezado se apila). */
@media (max-width: 880px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .pantalla-portada { padding: 36px 20px; }
  .pantalla-portada img#logo-portada { max-height: 64px; }
  .pantalla-portada h1 { font-size: 1.5rem; }
  .portada-descripcion { font-size: 0.92rem; margin-bottom: 26px; }
  header#encabezado { padding: 18px 20px; margin: 18px 18px 0; gap: 16px; }
  header#encabezado img#logo-empresa { max-height: 38px; max-width: 150px; }
  .aviso { margin: 14px 18px; padding: 12px 16px; }
  form#formulario-reporte { padding: 0 18px 32px; }
  .seccion { padding: 18px 18px 20px; }
  .documentos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
}

@media (max-width: 480px) {
  .grid-3, .grid-2, .documentos-grid, .checkbox-grid { grid-template-columns: 1fr; }
  .fila-botones-secundarios { flex-direction: column; }

  /* El encabezado se apila (logo arriba, centrado) para que el título nunca
     compita en ancho con el logo en pantallas muy angostas. */
  header#encabezado { flex-direction: column; align-items: center; text-align: center; padding: 20px 16px; }
  header#encabezado img#logo-empresa { order: -1; max-height: 42px; }
  header#encabezado h1 { font-size: 1.25rem; }
  .encabezado-texto { min-width: 0; width: 100%; }
}