:root {
  --color-fondo: #f7f7f5;
  --color-texto: #1f2933;
  --color-texto-suave: #52606d;
  --color-borde: #d9dde1;
  --color-primario: #1b4965;
  --color-primario-oscuro: #123249;
  --color-alerta-fondo: #fdecea;
  --color-alerta-borde: #d64545;
  --color-alerta-texto: #7a1f1f;
  --color-exito: #2e7d32;
  --radio: 10px;
  --espacio: 16px;
  font-size: 17px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-fondo);
  color: var(--color-texto);
  line-height: 1.5;
}

header.app-header {
  background: var(--color-primario);
  color: white;
  padding: 20px var(--espacio);
}

header.app-header h1 { margin: 0 0 4px; font-size: 1.3rem; }
header.app-header p { margin: 0; font-size: 0.9rem; opacity: 0.9; }

main {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--espacio);
  padding-bottom: 100px;
}

.progreso {
  position: sticky;
  top: 0;
  background: var(--color-fondo);
  padding: 10px 0;
  z-index: 5;
}

.progreso-barra {
  height: 8px;
  background: var(--color-borde);
  border-radius: 4px;
  overflow: hidden;
}

.progreso-barra > div {
  height: 100%;
  background: var(--color-primario);
  transition: width 0.2s ease;
}

.progreso-texto {
  font-size: 0.85rem;
  color: var(--color-texto-suave);
  margin-top: 4px;
}

.seccion {
  background: white;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--espacio);
  margin-bottom: var(--espacio);
}

.seccion h2 { margin-top: 0; font-size: 1.1rem; }
.seccion .seccion-desc { color: var(--color-texto-suave); font-size: 0.9rem; margin-top: -8px; }

.pregunta {
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 4px solid var(--color-borde);
  transition: border-color 0.2s ease;
}
.pregunta:last-child { margin-bottom: 0; }
.pregunta.respondida { border-left-color: var(--color-exito); }
.pregunta.pendiente { border-left-color: var(--color-alerta-borde); }

.pregunta-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.pregunta-numero {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  color: white;
  margin-top: 1px;
}
.pregunta-numero.respondida { background: var(--color-exito); }
.pregunta-numero.pendiente { background: var(--color-alerta-borde); }

.pregunta label.texto-pregunta {
  display: block;
  font-weight: 600;
  margin: 0;
}

.opciones { display: flex; flex-direction: column; gap: 8px; }

.opcion-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: white;
  font-size: 1rem;
  cursor: pointer;
}

.opcion-btn.activa {
  border-color: var(--color-primario);
  background: #eaf2f7;
  font-weight: 600;
}

input[type="text"], input[type="tel"], input[type="number"], textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  font-size: 1rem;
  font-family: inherit;
}

textarea { min-height: 80px; resize: vertical; }

.evidencia-caja {
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed var(--color-borde);
  border-radius: var(--radio);
  background: #fbfbfa;
}

.evidencia-caja .instruccion {
  font-size: 0.88rem;
  color: var(--color-texto-suave);
  margin-bottom: 8px;
}

.evidencia-miniaturas { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.evidencia-miniaturas img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--color-borde); }

.evidencia-codigo {
  font-size: 0.9rem;
  margin: 6px 0;
  padding: 6px 10px;
  background: #eef4f8;
  border-radius: 6px;
  display: inline-block;
}

.subir-evidencia {
  display: inline-block;
  padding: 8px 12px;
  border-radius: var(--radio);
  border: 1px solid var(--color-primario);
  background: white;
  color: var(--color-primario);
  cursor: pointer;
  text-decoration: none;
  font-size: 0.95rem;
  margin: 4px 0;
}
.subir-evidencia:hover { background: #eaf2f7; }

.evidencia-confirmacion {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.9rem;
  cursor: pointer;
}
.evidencia-confirmacion:has(input:disabled) { opacity: 0.5; cursor: default; }

.evidencia-omitir { color: var(--color-texto-suave); }

.codigo-caso-banner {
  background: #eaf2f7;
  border: 1px solid var(--color-primario);
  border-radius: var(--radio);
  padding: 10px var(--espacio);
  margin-bottom: var(--espacio);
  font-size: 0.92rem;
}
.codigo-caso-banner:empty { display: none; }
.codigo-caso-banner p { margin: 4px 0 0; color: var(--color-texto-suave); }

.alerta-seguridad {
  background: var(--color-alerta-fondo);
  border: 1px solid var(--color-alerta-borde);
  color: var(--color-alerta-texto);
  border-radius: var(--radio);
  padding: var(--espacio);
  margin-bottom: var(--espacio);
  font-weight: 600;
}

.alerta-seguridad .alerta-titulo { display: block; margin-bottom: 4px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }

footer.acciones {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: white;
  border-top: 1px solid var(--color-borde);
  padding: 12px var(--espacio);
  display: flex;
  gap: 10px;
  justify-content: center;
}

button.primario {
  background: var(--color-primario);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: var(--radio);
  font-size: 1rem;
  cursor: pointer;
}
button.primario:hover { background: var(--color-primario-oscuro); }

button.secundario {
  background: white;
  color: var(--color-primario);
  border: 1px solid var(--color-primario);
  padding: 12px 20px;
  border-radius: var(--radio);
  font-size: 1rem;
  cursor: pointer;
}

.aviso-alcance {
  background: #fff8e1;
  border: 1px solid #e0c34c;
  border-radius: var(--radio);
  padding: 12px var(--espacio);
  font-size: 0.85rem;
  color: #5c4d00;
  margin-bottom: var(--espacio);
}

.estado-guardado { font-size: 0.8rem; color: var(--color-texto-suave); text-align: center; margin-top: 8px; }

table.tabla-admin { width: 100%; border-collapse: collapse; background: white; }
table.tabla-admin th, table.tabla-admin td { text-align: left; padding: 10px; border-bottom: 1px solid var(--color-borde); font-size: 0.92rem; }
table.tabla-admin tr:hover { background: #f5f7f8; cursor: pointer; }

.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.etiqueta.borrador { background: #eee; color: #555; }
.etiqueta.en-diligenciamiento { background: #fff3cd; color: #856404; }
.etiqueta.completo { background: #d4edda; color: #155724; }
.etiqueta.enviado { background: #cce5ff; color: #004085; }

.login-caja { max-width: 360px; margin: 60px auto; background: white; padding: 24px; border-radius: var(--radio); border: 1px solid var(--color-borde); }
.login-caja h1 { font-size: 1.2rem; }
.login-caja input { margin-bottom: 12px; }
.error-texto { color: var(--color-alerta-borde); font-size: 0.88rem; margin-top: 8px; }