:root{
  --azul:#0a3d91;
  --azul-osc:#082b66;
  --rojo:#cf1020;
  --verde:#1e8449;
  --amarillo:#f5c518;
  --gris-bg:#f4f6f7;
  --gris-borde:#dfe4e6;
  --texto:#1c2b2e;
  --texto-suave:#5a6c70;
  --blanco:#ffffff;
  --sombra:0 2px 10px rgba(0,0,0,.08);
  --radio:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--gris-bg) url("../img/avila.svg") bottom center / 100% auto no-repeat fixed;
  color:var(--texto);
  line-height:1.5;
  padding-bottom:90px;
}

/* Barra emergencia */
.emergencia{
  background:var(--rojo);
  color:#fff;
  font-size:.82rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding:7px 14px;
  flex-wrap:wrap;
}
.emergencia a{color:#fff;font-weight:700;text-decoration:underline}

/* Cabecera */
.cabecera{
  position:relative;
  background:linear-gradient(135deg,var(--azul),var(--azul-osc));
  color:#fff;
  padding:18px 16px 22px;
  overflow:hidden;
}
/* estrellas tenues de fondo en la cabecera */
.cabecera::before{
  content:"";position:absolute;inset:0;opacity:.10;pointer-events:none;
  background-image:radial-gradient(circle, #fff 1.4px, transparent 1.6px);
  background-size:34px 34px;background-position:6px 6px;
}
.marca{display:flex;align-items:center;gap:14px;max-width:760px;margin:0 auto;position:relative;z-index:1}
.logo-img{flex:0 0 auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.cabecera h1{font-size:1.8rem;letter-spacing:.5px;font-weight:800}
.cabecera h1 span{color:var(--amarillo)}
.lema{font-size:.85rem;opacity:.93}
/* Selector de idioma */
.lang-toggle{display:flex;gap:5px;margin-left:auto;align-items:center;flex-shrink:0}
.lang-btn{
  background:transparent;border:1px solid rgba(255,255,255,.45);
  color:#fff;padding:5px 11px;border-radius:20px;
  font-size:.78rem;font-weight:700;cursor:pointer;
  transition:background .15s,color .15s;
}
.lang-btn.activo{background:var(--amarillo);color:var(--azul-osc);border-color:transparent}
.lang-btn:hover:not(.activo){background:rgba(255,255,255,.15)}

/* franja tricolor de Venezuela */
.tricolor{display:flex;height:5px;position:absolute;left:0;right:0;bottom:0}
.tricolor span{flex:1}
.tricolor span:nth-child(1){background:var(--amarillo)}
.tricolor span:nth-child(2){background:var(--azul)}
.tricolor span:nth-child(3){background:var(--rojo)}

/* Tabs */
.tabs{
  display:flex;
  overflow-x:auto;
  background:var(--blanco);
  border-bottom:1px solid var(--gris-borde);
  position:sticky;top:0;z-index:20;
  box-shadow:var(--sombra);
}
.tab{
  flex:0 0 auto;
  border:none;background:none;
  padding:13px 15px;
  font-size:.9rem;font-weight:600;
  color:var(--texto-suave);
  border-bottom:3px solid transparent;
  cursor:pointer;white-space:nowrap;
}
.tab.activo{color:var(--azul);border-bottom-color:var(--azul)}

/* Vistas */
main{max-width:760px;margin:0 auto;padding:16px}
.vista{display:none;animation:fade .25s ease}
.vista.activa{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

h2{font-size:1.3rem;margin-bottom:6px;color:var(--azul-osc)}
.sub{color:var(--texto-suave);font-size:.9rem;margin-bottom:16px}

/* Inicio — hero con Caracas de fondo */
.hero{
  position:relative;overflow:hidden;
  border-radius:var(--radio);
  margin-bottom:20px;box-shadow:var(--sombra);
  background:#0e2730 url("../img/caracas.jpg") center 42% / cover no-repeat;
  color:#fff;
  padding:30px 22px 24px;
  min-height:210px;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(8,28,52,.10) 0%, rgba(8,28,52,.50) 55%, rgba(8,28,52,.84) 100%);
}
.hero-bienvenida{
  position:relative;align-self:flex-start;
  background:var(--amarillo);color:#082b66;
  font-size:.8rem;font-weight:800;letter-spacing:.3px;
  padding:5px 13px;border-radius:20px;margin-bottom:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.hero h2{position:relative;margin-bottom:8px;color:#fff;font-size:1.55rem;line-height:1.2;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.hero p{position:relative;font-size:.95rem;color:#eef3fa;max-width:46ch;text-shadow:0 1px 5px rgba(0,0,0,.5)}

.acciones-inicio{display:grid;gap:12px;margin-bottom:18px}
.card-accion{
  display:flex;flex-direction:column;gap:3px;
  text-align:left;border:none;cursor:pointer;
  border-radius:var(--radio);padding:16px;color:#fff;
  box-shadow:var(--sombra);
}
.card-accion .icono{font-size:1.8rem}
.card-accion strong{font-size:1.05rem}
.card-accion small{opacity:.92;font-size:.82rem}
.card-accion.roja{background:linear-gradient(135deg,#e74c3c,#c0392b)}
.card-accion.verde{background:linear-gradient(135deg,#27ae60,#1e8449)}
.card-accion.azul{background:linear-gradient(135deg,#1a56c4,#0a3d91)}

.explica{background:var(--blanco);border-radius:var(--radio);padding:18px;box-shadow:var(--sombra)}
.explica h3{font-size:1.05rem;margin-bottom:12px;color:var(--azul-osc)}
.capas{list-style:none;display:grid;gap:9px}
.capas li{display:flex;align-items:center;gap:10px;font-size:.9rem;flex-wrap:wrap}
.capas li span{font-size:1.2rem}
.obli{margin-left:auto;background:#fdecea;color:var(--rojo);font-size:.72rem;padding:2px 8px;border-radius:20px}
.opci{margin-left:auto;background:#eef3f4;color:var(--texto-suave);font-size:.72rem;padding:2px 8px;border-radius:20px}
.nota{margin-top:14px;font-size:.85rem;background:#eafaf1;border-left:4px solid var(--verde);padding:10px 12px;border-radius:8px}

/* Formularios */
.formulario{display:grid;gap:16px}
fieldset{
  border:1px solid var(--gris-borde);border-radius:var(--radio);
  padding:14px;background:var(--blanco);
}
legend{font-weight:700;font-size:.9rem;color:var(--azul);padding:0 6px}
label{display:block;font-size:.85rem;font-weight:600;color:var(--texto);margin-top:10px}
label:first-of-type{margin-top:4px}
input,select,textarea{
  width:100%;margin-top:5px;
  padding:11px 12px;font-size:.95rem;
  border:1px solid var(--gris-borde);border-radius:10px;
  background:#fbfcfc;color:var(--texto);font-family:inherit;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azul);border-color:var(--azul)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;align-items:flex-start;gap:9px;font-weight:500;font-size:.85rem;margin-top:12px}
.check input{width:auto;margin-top:3px;flex:0 0 auto}
.archivo small{display:block;font-weight:400;color:var(--texto-suave);margin-top:4px}
.consentimiento{background:#fffbea;border:1px solid #f0e2a8;border-radius:10px;padding:12px}
.previsualizacion{margin-top:8px}
.previsualizacion img{max-width:100%;border-radius:10px;border:1px solid var(--gris-borde)}

.btn-principal{
  background:var(--azul);color:#fff;border:none;
  padding:15px;border-radius:12px;font-size:1rem;font-weight:700;
  cursor:pointer;box-shadow:var(--sombra);
}
.btn-principal.verde{background:var(--verde)}
.btn-principal:active{transform:scale(.99)}
.btn-secundario{
  background:#fff;color:var(--azul);border:1px solid var(--azul);
  padding:10px 14px;border-radius:10px;font-weight:600;cursor:pointer;font-size:.85rem;
}

/* Lista ayudas */
.lista-ayudas{display:grid;gap:12px;margin-top:22px}
.tarjeta-ayuda{
  background:var(--blanco);border-radius:var(--radio);padding:14px;
  box-shadow:var(--sombra);border-left:5px solid var(--verde);
}
.tarjeta-ayuda h4{font-size:1rem;margin-bottom:4px}
.tarjeta-ayuda .meta{font-size:.82rem;color:var(--texto-suave)}
.etiqueta{display:inline-block;background:#eafaf1;color:var(--verde);font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:20px;margin-bottom:6px;margin-right:4px}
.etiqueta-pais{display:inline-block;background:#e9f0fb;color:var(--azul);font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:20px;margin-bottom:6px}

/* Panel familias */
.panel-cabecera{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.vol-auth{display:flex;align-items:center;gap:8px}
.vol-estado{font-size:.8rem;font-weight:700;color:var(--verde);background:#eafaf1;padding:6px 10px;border-radius:20px}
.login-voluntario{background:#fff;border:1px solid var(--gris-borde);border-radius:var(--radio);padding:14px;margin:12px 0;display:grid;gap:10px;box-shadow:var(--sombra)}
.login-titulo{font-size:.85rem;font-weight:700;color:var(--azul-osc)}
.login-voluntario input{margin-top:0}
.login-botones{display:flex;gap:10px}
.login-botones .btn-principal{flex:1}
.filtros{display:flex;gap:10px;margin:14px 0}
.filtros select,.filtros input{margin-top:0}
.aviso-publico{font-size:.82rem;background:#e9f5f7;border-left:4px solid var(--azul);padding:10px 12px;border-radius:8px;margin-bottom:14px}

.lista-familias{display:grid;gap:12px}
.tarjeta-familia{
  background:var(--blanco);border-radius:var(--radio);padding:14px;
  box-shadow:var(--sombra);cursor:pointer;border-left:5px solid var(--gris-borde);
}
.tarjeta-familia.verificada{border-left-color:var(--verde)}
.tarjeta-familia.en_verificacion{border-left-color:var(--azul)}
.tarjeta-familia.pendiente{border-left-color:var(--amarillo)}
.tarjeta-familia .fila{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tarjeta-familia h4{font-size:1.02rem}
.tarjeta-familia .datos{font-size:.83rem;color:var(--texto-suave);margin-top:5px}
.foto-tarjeta{width:100%;height:140px;object-fit:cover;border-radius:10px;margin:8px 0;border:1px solid var(--gris-borde)}
.foto-vivienda{width:100%;max-height:240px;object-fit:cover;border-radius:10px}
.foto-mascota{width:100%;height:180px;object-fit:cover;border-radius:10px;margin:6px 0;border:1px solid var(--gris-borde)}
.tarjeta-mascota{border-left-color:var(--amarillo)}
.sello{font-size:.73rem;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
.sello.verificada{background:#eafaf1;color:var(--verde)}
.sello.en_verificacion{background:#e9f5f7;color:var(--azul)}
.sello.pendiente{background:#fcf3d9;color:var(--amarillo)}
.sello.ayudada{background:#efe9fb;color:#6c3fb5}
.codigo{font-family:monospace;font-size:.78rem;color:var(--texto-suave)}

.vacio{text-align:center;color:var(--texto-suave);padding:30px 10px;font-size:.9rem}

/* Modal */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:flex;flex-direction:column;justify-content:flex-end;z-index:50;
}
.modal[hidden]{display:none}
.modal-contenido{
  background:#fff;border-radius:18px 18px 0 0;padding:20px;
  max-height:85vh;overflow-y:auto;max-width:760px;margin:0 auto;width:100%;
}
.modal-contenido img{max-width:100%;border-radius:10px;margin-top:8px}
.modal-contenido h3{color:var(--azul-osc);margin-bottom:8px}
.modal-contenido .campo{font-size:.9rem;margin:7px 0;border-bottom:1px solid var(--gris-borde);padding-bottom:7px}
.modal-contenido .campo b{color:var(--texto)}
.acciones-modal{display:grid;gap:9px;margin-top:16px}
.cerrar-modal{
  background:#fff;border:none;color:var(--texto);
  padding:14px;font-weight:700;cursor:pointer;max-width:760px;margin:0 auto;width:100%;
}

/* Cómo funciona */
.como-funciona{background:var(--blanco);border-radius:var(--radio);padding:18px;box-shadow:var(--sombra);margin-top:18px}
.como-funciona h3{font-size:1.05rem;margin-bottom:12px;color:var(--azul-osc)}
.pasos{padding-left:20px;display:grid;gap:9px}
.pasos li{font-size:.9rem;line-height:1.5}

/* Tarjeta ya ayudada */
.tarjeta-familia.ya-ayudada{opacity:.65}

/* Sección título lista */
.secc-titulo{margin-bottom:4px;color:var(--azul-osc)}

/* Conexión helper-familia */
.conexion-intro{font-size:.88rem;color:var(--texto-suave);margin:12px 0 10px}
.form-conexion{display:grid;gap:10px;margin-top:4px}
.form-conexion input,.form-conexion select{margin-top:0;padding:11px 12px;border:1px solid var(--gris-borde);border-radius:10px;font-size:.95rem;background:#fbfcfc;color:var(--texto);font-family:inherit;width:100%}
.form-conexion input:focus,.form-conexion select:focus{outline:2px solid var(--verde);border-color:var(--verde)}

.conexion-exito{text-align:center;padding:16px 8px;display:grid;gap:12px}
.conexion-ok{font-weight:700;color:var(--verde);font-size:1rem}
.conexion-instruc{font-size:.88rem;color:var(--texto-suave)}
.btn-whatsapp{
  display:block;background:#25D366;color:#fff;
  padding:14px;border-radius:12px;font-size:1rem;font-weight:700;
  text-decoration:none;box-shadow:var(--sombra);
}
.btn-whatsapp:hover{background:#1ebe5d}
.conexion-tel{font-family:monospace;font-size:.9rem;color:var(--texto-suave)}

.ya-atendida{
  background:#efe9fb;border-left:4px solid #6c3fb5;
  border-radius:10px;padding:12px 14px;font-size:.88rem;
  color:#4a2a80;margin-top:14px;
}

/* Ficha propia (familia ve su propio registro) */
.tarjeta-familia.mi-ficha{border-left-color:var(--azul-osc);background:#f0f4ff}
.aviso-mificha{
  background:#f0f4ff;border-left:4px solid var(--azul);
  border-radius:10px;padding:12px 14px;font-size:.88rem;
  color:var(--azul-osc);margin:14px 0;line-height:1.5;
}

/* Aviso anti-estafa */
.aviso-estafa{
  background:#fff4e5;border:1px solid #f0c98a;border-left:4px solid #e08a00;
  border-radius:10px;padding:11px 13px;font-size:.82rem;
  color:#7a4d00;line-height:1.45;margin-top:12px;text-align:left;
}

/* Badge de nivel del helper */
.badge-nivel{
  display:inline-block;font-size:.72rem;font-weight:700;
  padding:3px 9px;border-radius:20px;
  background:#fffbe6;border:1px solid currentColor;
}

/* Pie */
.pie{text-align:center;padding:20px 16px;color:var(--texto-suave);font-size:.8rem}
.pie p{margin-bottom:10px}
.credito{font-size:.72rem;opacity:.75;margin-top:12px}
.credito a{color:var(--azul)}

@media(min-width:600px){
  .acciones-inicio{grid-template-columns:repeat(3,1fr)}
  .hero{padding:48px 34px 30px;min-height:280px}
  .hero h2{font-size:2.1rem}
  .hero p{font-size:1.05rem}
  .cabecera h1{font-size:2rem}
  .grid-2{gap:16px}
}

/* PC: más ancho y mejor repartido */
@media(min-width:900px){
  main{max-width:920px;padding:24px}
  .hero{min-height:340px;padding:64px 48px 36px}
  .hero h2{font-size:2.4rem}
  /* formularios en dos columnas para aprovechar el ancho */
  .formulario{grid-template-columns:1fr 1fr;align-items:start}
  .formulario .btn-principal,
  .formulario .consentimiento{grid-column:1 / -1}
}