/* ============================================================
   CIV EMERGENCIA INMOBILIARIA 2026 — ESTILOS INSTITUCIONALES
   Paleta oficial del proyecto. Mobile-first. Tipografía de
   sistema por rendimiento en conectividad limitada (decisión
   deliberada para contexto de emergencia).
   ============================================================ */
:root{
  --civ-verde:#005326; --civ-verde-profundo:#003d1c; --civ-dorado:#C9A227;
  --civ-blanco:#FFFFFF; --civ-gris:#F4F6F5; --civ-gris-texto:#4B5563; --civ-negro:#111827;
  --civ-rojo:#DC2626; --civ-naranja:#F97316; --civ-amarillo:#FACC15; --civ-verde-ok:#16A34A;
  --civ-radio:14px; --civ-sombra:0 2px 12px rgba(0,40,20,.10);
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--civ-gris); color:var(--civ-negro); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.civ-oculto{display:none !important}

/* ---------- ENCABEZADO INSTITUCIONAL ---------- */
.civ-header{
  background:linear-gradient(160deg,var(--civ-verde-profundo),var(--civ-verde));
  color:var(--civ-blanco); padding:20px 16px 26px; text-align:center;
  border-bottom:4px solid var(--civ-dorado);
}
.civ-header img{max-width:230px; width:70%; height:auto; margin-bottom:12px}
.civ-header h1{font-size:1.45rem; font-weight:800; letter-spacing:.3px}
.civ-header .civ-subtitulo{font-size:.86rem; opacity:.92; max-width:520px; margin:6px auto 0}
.civ-lema{font-size:.8rem; color:var(--civ-dorado); font-weight:700; text-transform:uppercase; letter-spacing:1.4px; margin-top:10px}

/* Franja EN VIVO + contador (firma visual del proyecto) */
.civ-envivo{
  display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--civ-verde-profundo); color:var(--civ-blanco);
  padding:10px 14px; font-size:.85rem; border-bottom:1px solid rgba(255,255,255,.12);
}
.civ-envivo .civ-punto{width:9px;height:9px;border-radius:50%;background:var(--civ-rojo);
  display:inline-block; animation:civLatido 1.6s infinite}
@keyframes civLatido{0%,100%{opacity:1}50%{opacity:.35}}
.civ-envivo strong{color:var(--civ-dorado); font-size:1.05rem}

/* ---------- AVISOS ---------- */
.civ-banda-seguridad{
  background:#FEF3C7; color:#92400E; border-left:5px solid var(--civ-amarillo);
  padding:12px 16px; font-size:.9rem; font-weight:600;
}
.civ-principio{
  max-width:760px; margin:18px auto 0; padding:0 16px;
  font-size:.85rem; color:var(--civ-gris-texto); text-align:center;
}

/* ---------- GRID DE MÓDULOS ---------- */
.civ-contenedor{max-width:760px; margin:0 auto; padding:18px 16px 60px}
.civ-seccion-titulo{font-size:1.05rem; font-weight:800; color:var(--civ-verde-profundo);
  margin:22px 0 12px; text-transform:uppercase; letter-spacing:.8px}
#civ-grid-modulos{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:560px){#civ-grid-modulos{grid-template-columns:1fr 1fr}}
.civ-card-modulo{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left;
  background:var(--civ-blanco); border:1px solid #E5E7EB; border-radius:var(--civ-radio);
  padding:16px; cursor:pointer; box-shadow:var(--civ-sombra);
  transition:transform .15s, border-color .15s; min-height:112px;
}
.civ-card-modulo:hover,.civ-card-modulo:focus-visible{transform:translateY(-2px); border-color:var(--civ-dorado); outline:none}
.civ-card-icono{font-size:1.7rem}
.civ-card-titulo{font-weight:800; color:var(--civ-verde-profundo); font-size:1rem}
.civ-card-desc{font-size:.82rem; color:var(--civ-gris-texto)}

/* ---------- FORMULARIO POR PASOS ---------- */
#civ-formulario{max-width:640px; margin:0 auto; padding:16px 16px 70px}
.civ-form-encabezado{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.civ-btn-volver{background:none; border:none; color:var(--civ-verde); font-weight:700; cursor:pointer; font-size:.9rem}
.civ-form-nombre{font-weight:800; color:var(--civ-verde-profundo)}
.civ-progreso{background:#E5E7EB; border-radius:99px; height:10px; overflow:hidden}
.civ-progreso-barra{background:linear-gradient(90deg,var(--civ-verde),var(--civ-dorado)); height:100%; transition:width .3s}
.civ-progreso-texto{font-size:.78rem; color:var(--civ-gris-texto); margin:6px 0 12px}
.civ-aviso-seguridad{background:#FEF3C7; color:#92400E; border-radius:10px; padding:9px 12px; font-size:.82rem; margin-bottom:14px}
.civ-paso-titulo{font-size:1.15rem; color:var(--civ-verde-profundo); margin-bottom:14px}

.civ-campo{margin-bottom:16px}
.civ-campo label{display:block; font-weight:700; font-size:.92rem; margin-bottom:6px; color:var(--civ-negro)}
.civ-req{color:var(--civ-rojo)}
.civ-ayuda{font-size:.78rem; color:var(--civ-gris-texto); margin-bottom:6px}
input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{
  width:100%; padding:13px 14px; border:1.5px solid #D1D5DB; border-radius:12px;
  font-size:1rem; background:var(--civ-blanco); font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--civ-verde); box-shadow:0 0 0 3px rgba(0,83,38,.12)}
input.civ-error,select.civ-error{border-color:var(--civ-rojo)}
.civ-error-texto{color:var(--civ-rojo); font-size:.85rem; font-weight:700; margin:8px 0}
.civ-ubicacion select,.civ-ubicacion input{margin-bottom:8px}

.civ-opciones{display:flex; flex-direction:column; gap:8px}
.civ-opcion{
  display:flex; align-items:flex-start; gap:10px; background:var(--civ-blanco);
  border:1.5px solid #E5E7EB; border-radius:12px; padding:11px 12px;
  font-size:.9rem; font-weight:500; cursor:pointer;
}
.civ-opcion:has(input:checked){border-color:var(--civ-verde); background:#F0FDF4}
.civ-opcion input{margin-top:3px; accent-color:var(--civ-verde); width:18px; height:18px; flex-shrink:0}

/* Botones grandes, mobile-first */
.civ-btn{
  display:inline-block; padding:15px 22px; border-radius:14px; border:none;
  font-size:1rem; font-weight:800; cursor:pointer; text-decoration:none; text-align:center;
}
.civ-btn-primario{background:var(--civ-verde); color:var(--civ-blanco)}
.civ-btn-primario:hover{background:var(--civ-verde-profundo)}
.civ-btn-primario:disabled{opacity:.6; cursor:wait}
.civ-btn-secundario{background:var(--civ-blanco); color:var(--civ-verde); border:2px solid var(--civ-verde)}
.civ-btn-gps{background:var(--civ-gris); color:var(--civ-verde-profundo); border:1.5px dashed var(--civ-verde); width:100%; padding:12px}
.civ-form-botones{display:flex; gap:10px; margin-top:18px}
.civ-form-botones .civ-btn{flex:1}

.civ-legal{
  background:var(--civ-blanco); border:1px solid #E5E7EB; border-left:4px solid var(--civ-dorado);
  border-radius:10px; padding:14px; font-size:.8rem; color:var(--civ-gris-texto); margin-bottom:14px;
}

/* Fotos */
.civ-fotos-lista{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.civ-foto-chip{background:#E8F5EE; border-radius:99px; padding:5px 10px; font-size:.78rem}
.civ-foto-chip button{border:none; background:none; color:var(--civ-rojo); font-weight:800; cursor:pointer}

/* ---------- SISTEMA SEMÁFORO (firma del proyecto) ---------- */
.civ-nivel-verde{background:var(--civ-verde-ok)} .civ-nivel-amarillo{background:var(--civ-amarillo); color:#713F12}
.civ-nivel-naranja{background:var(--civ-naranja)} .civ-nivel-rojo{background:var(--civ-rojo)} .civ-nivel-negro{background:var(--civ-negro)}
.civ-fondo-verde{background:#DCFCE7; color:#14532D; border-left:5px solid var(--civ-verde-ok)}
.civ-fondo-amarillo{background:#FEF9C3; color:#713F12; border-left:5px solid var(--civ-amarillo)}
.civ-fondo-naranja{background:#FFEDD5; color:#7C2D12; border-left:5px solid var(--civ-naranja)}
.civ-fondo-rojo{background:#FEE2E2; color:#7F1D1D; border-left:5px solid var(--civ-rojo)}
.civ-fondo-negro{background:#111827; color:#F9FAFB; border-left:5px solid var(--civ-dorado)}

/* Pantalla de éxito */
.civ-exito{text-align:center; padding:26px 6px}
.civ-exito-icono{width:70px; height:70px; border-radius:50%; color:#fff; font-size:2rem; font-weight:900;
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px}
.civ-exito h2{color:var(--civ-verde-profundo); margin-bottom:8px}
.civ-exito-id{font-size:.9rem; color:var(--civ-gris-texto); margin-bottom:14px}
.civ-demo-aviso{font-size:.78rem; color:#92400E; background:#FEF3C7; border-radius:8px; padding:8px; margin-bottom:12px}
.civ-exito-nivel{border-radius:12px; padding:14px; font-size:.92rem; font-weight:600; text-align:left; margin-bottom:14px}
.civ-exito-nota{font-size:.82rem; color:var(--civ-gris-texto); margin-bottom:20px}
.civ-exito-ctas{display:flex; flex-direction:column; gap:10px}

/* ---------- PIE ---------- */
.civ-footer{
  background:var(--civ-verde-profundo); color:rgba(255,255,255,.85);
  text-align:center; padding:24px 16px; font-size:.78rem; margin-top:40px;
}
.civ-footer img{max-width:170px; opacity:.95; margin-bottom:10px}
.civ-footer a{color:var(--civ-dorado); text-decoration:none; font-weight:700}

/* ---------- PANEL PRIVADO (acceso.html) ---------- */
.civ-login{max-width:400px; margin:40px auto; background:var(--civ-blanco); border-radius:var(--civ-radio);
  box-shadow:var(--civ-sombra); padding:26px}
.civ-login h2{color:var(--civ-verde-profundo); margin-bottom:6px}
.civ-login p{font-size:.84rem; color:var(--civ-gris-texto); margin-bottom:16px}
.civ-kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:16px 0}
@media(min-width:640px){.civ-kpis{grid-template-columns:repeat(4,1fr)}}
.civ-kpi{background:var(--civ-blanco); border-radius:12px; padding:14px; box-shadow:var(--civ-sombra); border-top:4px solid var(--civ-verde)}
.civ-kpi.rojo{border-top-color:var(--civ-rojo)} .civ-kpi.dorado{border-top-color:var(--civ-dorado)}
.civ-kpi .civ-kpi-num{font-size:1.6rem; font-weight:900; color:var(--civ-verde-profundo)}
.civ-kpi .civ-kpi-et{font-size:.72rem; color:var(--civ-gris-texto); text-transform:uppercase; letter-spacing:.5px}
.civ-barra-fila{display:flex; align-items:center; gap:10px; margin:7px 0; font-size:.82rem}
.civ-barra-fila span:first-child{width:88px; flex-shrink:0; font-weight:700}
.civ-barra{flex:1; background:#E5E7EB; border-radius:99px; height:14px; overflow:hidden}
.civ-barra i{display:block; height:100%}
.civ-panel-cabecera{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin:14px 0}
.civ-chip-rol{background:var(--civ-dorado); color:var(--civ-verde-profundo); border-radius:99px; padding:4px 12px; font-size:.75rem; font-weight:800; text-transform:uppercase}
.civ-tabla{width:100%; border-collapse:collapse; background:var(--civ-blanco); border-radius:12px; overflow:hidden; box-shadow:var(--civ-sombra); font-size:.82rem}
.civ-tabla th{background:var(--civ-verde-profundo); color:#fff; padding:10px; text-align:left}
.civ-tabla td{padding:9px 10px; border-bottom:1px solid #F1F5F9}
.civ-etiqueta-nivel{border-radius:99px; padding:2px 10px; color:#fff; font-size:.72rem; font-weight:800; text-transform:uppercase}

/* Accesibilidad */
:focus-visible{outline:3px solid var(--civ-dorado); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }