/* ============================================================
   CONSOLIDACION · Red Viva
   Sistema de consolidacion · interfaz movil

   Direccion visual: los colores de la camisa del ministerio de
   consolidacion. Marino del cuello, celeste del cuerpo. La marca es
   una oveja facetada, sin rostro.
   ============================================================ */

:root{
  /* Tomados de las camisas de consolidacion y del material del stand */
  --marino:      #12263D;   /* cuello y bordes de la camisa */
  --marino-80:   #1D3A5C;
  --acero:       #3E5F80;
  --gris:        #6E8AA5;
  --camisa:      #A9CFE6;   /* celeste del cuerpo de la camisa */
  --celeste:     #03A0CF;   /* celeste vivo del material impreso */
  --celeste-alto:#3FC0E4;
  --celeste-bajo:#0B7FA8;
  --turquesa:    #12A8C2;
  --agua:        #E8F4FA;
  --borde:       #D3E2EC;
  --papel:       #F1F6FA;
  --blanco:      #FFFFFF;

  /* Semaforo */
  --rojo:#B33A2E;  --rojo-suave:#FBEDEB;
  --ambar:#9A6B08; --ambar-suave:#FDF4E0;
  --verde:#1E7A55; --verde-suave:#E7F4EE;

  /* Forma */
  --r-sm:8px; --r:12px; --r-lg:18px;
  --barra:78px;
  --sombra:0 1px 2px rgba(18,38,61,.06), 0 4px 16px rgba(18,38,61,.05);
  --sombra-alta:0 2px 6px rgba(18,38,61,.10), 0 12px 32px rgba(18,38,61,.10);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

body{
  margin:0; padding:0 0 calc(var(--barra) + env(safe-area-inset-bottom));
  background:var(--papel); color:var(--marino);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-size:16px;                      /* menor a 16px hace que iOS haga zoom */
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--celeste-bajo);}

/* ============================================================
   CABECERA
   ============================================================ */

.cabecera{
  position:sticky; top:0; z-index:20;
  background:var(--marino);
  color:#fff;
  padding:13px 16px;
  display:flex; align-items:center; gap:12px;
}

.cabecera .titulo{flex:1;min-width:0;}
.cabecera .titulo strong{
  display:block;font-size:1rem;font-weight:650;letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cabecera .titulo span{
  display:block;font-size:.68rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--camisa);
}

.volver{
  width:34px;height:34px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.10);
  color:#fff;text-decoration:none;font-size:1.15rem;line-height:1;
}

.marca{width:36px;height:36px;flex:none;border-radius:10px;}

.marca-redviva{height:36px;width:auto;flex:none;opacity:.92;}

/* ============================================================
   ESTRUCTURA
   ============================================================ */

main{padding:18px 16px;max-width:600px;margin:0 auto;}

.rotulo{
  font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gris);
  margin:26px 2px 10px;
}
main > .rotulo:first-child{margin-top:4px;}

.tarjeta{
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius:var(--r);
  padding:18px;
  margin-bottom:12px;
  box-shadow:var(--sombra);
}

/* ============================================================
   PANEL DE INICIO
   ============================================================ */

/* Identificacion del usuario */
.perfil{
  display:flex;align-items:center;gap:14px;
  background:var(--marino);
  color:#fff;
  border-radius:var(--r-lg);
  padding:18px;
  margin-bottom:14px;
}
.perfil .inicial{
  width:48px;height:48px;flex:none;border-radius:14px;
  background:linear-gradient(150deg,var(--camisa),var(--celeste-bajo));
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.15rem;
}
.perfil .quien{flex:1;min-width:0;}
.perfil .quien strong{display:block;font-weight:650;letter-spacing:-.01em;}
.perfil .quien span{font-size:.8rem;color:var(--camisa);}

/* Que hacemos hoy */
.propuesta{
  margin:0 2px 16px;
  font-size:1.02rem;font-weight:600;letter-spacing:-.01em;
  color:var(--marino-80);
}

/* Cifras */
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
.cifra{
  background:var(--blanco);border:1px solid var(--borde);
  border-radius:var(--r);padding:14px 12px;text-align:center;
  box-shadow:var(--sombra);
}
.cifra strong{display:block;font-size:1.6rem;font-weight:700;letter-spacing:-.03em;line-height:1.1;}
.cifra span{font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);}
.cifra.alerta strong{color:var(--rojo);}

/* Accion principal */
.accion-principal{
  display:flex;align-items:center;gap:16px;
  background:linear-gradient(140deg,var(--celeste) 0%,var(--marino-80) 100%);
  color:#fff;text-decoration:none;
  border-radius:var(--r-lg);
  padding:20px 18px;
  margin-bottom:12px;
  box-shadow:var(--sombra-alta);
}
.accion-principal .icono{
  width:46px;height:46px;flex:none;border-radius:14px;
  background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
}
.accion-principal .icono svg{width:24px;height:24px;}
.accion-principal .cuerpo{flex:1;min-width:0;}
.accion-principal strong{display:block;font-size:1.08rem;font-weight:650;letter-spacing:-.015em;}
.accion-principal span{font-size:.84rem;color:rgba(255,255,255,.85);}
.accion-principal .flecha{font-size:1.3rem;opacity:.75;}

/* ============================================================
   FILAS DE NAVEGACION Y LISTAS
   ============================================================ */

.lista{list-style:none;margin:0;padding:0;}

.fila{
  display:flex;align-items:center;gap:13px;
  padding:14px 16px;
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius:var(--r);
  margin-bottom:8px;
  text-decoration:none;color:inherit;
  box-shadow:var(--sombra);
}
.fila:active{background:var(--agua);}

.fila .cuerpo{flex:1;min-width:0;}
.fila .nombre{font-weight:650;letter-spacing:-.01em;}
.fila .detalle{
  font-size:.82rem;color:var(--gris);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fila .flecha{color:var(--gris);font-size:1.1rem;flex:none;}

/* Icono cuadrado a la izquierda de la fila */
.simbolo{
  width:40px;height:40px;flex:none;border-radius:11px;
  background:var(--agua);color:var(--celeste-bajo);
  display:flex;align-items:center;justify-content:center;
}
.simbolo svg{width:20px;height:20px;}
.simbolo.oscuro{background:var(--marino);color:#fff;}

.miniatura{
  width:46px;height:46px;border-radius:12px;flex:none;object-fit:cover;
  background:var(--agua);border:1px solid var(--borde);
}
.miniatura.hueca{display:flex;align-items:center;justify-content:center;color:var(--acero);}
.miniatura.hueca svg{width:22px;height:22px;opacity:.6;}

/* ============================================================
   ETIQUETAS
   ============================================================ */

.etiquetas{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;}
.etiqueta{
  font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:6px;
  background:var(--agua);color:var(--celeste-bajo);
}
.etiqueta.roja{background:var(--rojo-suave);color:var(--rojo);}
.etiqueta.ambar{background:var(--ambar-suave);color:var(--ambar);}
.etiqueta.verde{background:var(--verde-suave);color:var(--verde);}
.etiqueta.gris{background:#EDF1F5;color:var(--acero);}

/* ============================================================
   FORMULARIOS
   ============================================================ */

.campo{margin-bottom:17px;}
.campo:last-child{margin-bottom:0;}

label{display:block;font-size:.83rem;font-weight:650;margin-bottom:7px;color:var(--marino-80);}
label .opcional{font-weight:500;color:var(--gris);font-size:.78rem;}
.req{color:var(--rojo);font-weight:800;margin-left:2px;}

input[type=text],input[type=tel],input[type=password],
input[type=email],input[type=number],input[type=search],select,textarea{
  width:100%;min-height:50px;
  padding:13px 14px;
  border:1.5px solid var(--borde);
  border-radius:var(--r);
  background:var(--blanco);
  color:var(--marino);
  font:inherit;
}
textarea{min-height:84px;resize:vertical;}

input::placeholder,textarea::placeholder{color:#A9BACB;}

select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='8'><path d='M1 1l5.5 5.5L12 1' fill='none' stroke='%233A5673' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:42px;
}

input:focus,select:focus,textarea:focus{
  outline:3px solid rgba(31,143,214,.28);
  outline-offset:0;
  border-color:var(--celeste);
}

.pista{font-size:.78rem;color:var(--gris);margin:7px 0 0;line-height:1.45;}

.par{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* Mayusculas visuales: el valor se normaliza al guardar, asi el
   cursor no salta mientras se escribe */
.mayus{text-transform:uppercase;}

/* ---------- Cedula ---------- */

.cedula-fila{display:flex;gap:10px;align-items:flex-start;}
.cedula-fila input{flex:1;}

.sello{
  min-width:52px;min-height:50px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r);font-size:1.2rem;font-weight:700;
  background:var(--papel);color:var(--gris);border:1.5px solid var(--borde);
}
.sello.ok{background:var(--verde-suave);color:var(--verde);border-color:var(--verde);}
.sello.mal{background:var(--ambar-suave);color:var(--ambar);border-color:var(--ambar);}

.nota-cedula{margin-top:8px;font-size:.81rem;display:none;padding:10px 12px;border-radius:var(--r-sm);}
.nota-cedula.visible{display:block;}
.nota-cedula.ok{background:var(--verde-suave);color:var(--verde);}
.nota-cedula.mal{background:var(--ambar-suave);color:var(--ambar);}

/* ---------- Casillas ---------- */

.casilla{
  display:flex;align-items:flex-start;gap:12px;
  padding:9px 0;cursor:pointer;margin:0;font-size:.92rem;font-weight:500;
}
.casilla input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--celeste-bajo);}
.casilla + .casilla{border-top:1px solid var(--papel);}
.casilla .detalle{font-size:.79rem;color:var(--gris);}

/* ---------- Botones de opcion ---------- */

.trio{display:flex;flex-direction:column;gap:9px;}
.trio .opcion span{justify-content:flex-start;text-align:left;padding:13px 15px;}

.opcion{position:relative;}
.opcion input{position:absolute;opacity:0;width:0;height:0;}
.opcion span{
  display:flex;align-items:center;justify-content:center;
  min-height:52px;padding:11px;
  border:1.5px solid var(--borde);border-radius:var(--r);
  background:var(--blanco);font-weight:650;cursor:pointer;
}
.opcion input:checked + span{
  background:var(--marino);border-color:var(--marino);color:#fff;
}
.opcion input:focus-visible + span{outline:3px solid rgba(31,143,214,.35);outline-offset:2px;}

/* ---------- Fichas ---------- */

.fichas{display:flex;flex-wrap:wrap;gap:8px;}
.ficha{position:relative;}
.ficha input{position:absolute;opacity:0;width:0;height:0;}
.ficha span{
  display:inline-flex;align-items:center;min-height:44px;padding:10px 15px;
  border:1.5px solid var(--borde);border-radius:10px;
  background:var(--blanco);font-weight:600;font-size:.9rem;cursor:pointer;
}
.ficha input:checked + span{
  background:var(--celeste-bajo);border-color:var(--celeste-bajo);color:#fff;
}
.ficha input:focus-visible + span{outline:3px solid rgba(31,143,214,.35);outline-offset:2px;}

/* ---------- Semaforo ---------- */

.semaforo{display:flex;flex-direction:column;gap:9px;}
.nivel{position:relative;}
.nivel input{position:absolute;opacity:0;width:0;height:0;}
.nivel > span{
  display:flex;align-items:center;gap:13px;min-height:62px;padding:13px 15px;
  border:1.5px solid var(--borde);border-radius:var(--r);
  background:var(--blanco);cursor:pointer;font-size:.92rem;
}
.nivel > span::before{
  content:"";width:14px;height:14px;border-radius:50%;flex:none;
  box-shadow:0 0 0 4px rgba(0,0,0,.05);
}
.nivel strong{display:block;font-weight:650;}
.nivel small{display:block;color:var(--gris);font-size:.78rem;}
.nivel.rojo  > span::before{background:#C4483A;}
.nivel.ambar > span::before{background:#D69A1E;}
.nivel.verde > span::before{background:#2A9367;}
.nivel.rojo  input:checked + span{background:var(--rojo-suave);border-color:var(--rojo);border-width:2px;}
.nivel.ambar input:checked + span{background:var(--ambar-suave);border-color:var(--ambar);border-width:2px;}
.nivel.verde input:checked + span{background:var(--verde-suave);border-color:var(--verde);border-width:2px;}
.nivel input:focus-visible + span{outline:3px solid rgba(31,143,214,.35);outline-offset:2px;}

/* ---------- Foto ---------- */

.foto-zona{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:22px 16px;background:var(--blanco);
  border:2px dashed var(--borde);border-radius:var(--r);text-align:center;
  margin-bottom:12px;
}
.foto-zona.bloqueada{opacity:.42;pointer-events:none;}
.foto-marco{
  width:132px;height:132px;border-radius:var(--r-lg);
  background:var(--agua);border:1px solid var(--borde);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  color:var(--acero);
}
.foto-marco img{width:100%;height:100%;object-fit:cover;display:none;}
.foto-marco.lleno img{display:block;}
.foto-marco.lleno .hueco{display:none;}
.hueco{width:52px;height:52px;opacity:.45;}
.foto-zona .pie{font-size:.84rem;color:var(--gris);margin:0;}
input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}

/* ============================================================
   BOTONES
   ============================================================ */

.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:54px;padding:13px 20px;
  border:0;border-radius:var(--r);
  background:var(--celeste-bajo);color:#fff;
  font:inherit;font-weight:650;font-size:1rem;
  text-decoration:none;cursor:pointer;
}
.boton:active{transform:translateY(1px);}
.boton:disabled{opacity:.6;}
.boton.secundario{background:var(--blanco);color:var(--marino);border:1.5px solid var(--borde);}
.boton.secundario:active{background:var(--agua);}
.boton.oscuro{background:var(--marino);}
.boton.separado{margin-top:10px;}
.boton.angosto{
  flex:0 0 auto;width:auto;
  min-height:44px;padding:9px 16px;font-size:.88rem;
}

.barra-inf{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:var(--blanco);
  border-top:1px solid var(--borde);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 12px rgba(18,38,61,.07);
}
@supports (backdrop-filter: blur(8px)) {
  .barra-inf{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);}
}
.barra-inf .interior{max-width:600px;margin:0 auto;display:flex;gap:10px;align-items:stretch;}

/* El principal se estira; el secundario ocupa solo lo que necesita.
   Hace falta width:auto porque .boton trae width:100% y con flex:none
   se quedaria con el ancho completo de la barra. */
.barra-inf .boton{flex:1 1 auto;width:auto;}
.barra-inf .boton.secundario{flex:0 0 auto;width:auto;min-width:104px;padding:13px 18px;}

/* ============================================================
   AVISOS Y VACIOS
   ============================================================ */

.aviso{
  padding:13px 15px;border-radius:var(--r);
  border-left:3px solid var(--verde);background:var(--verde-suave);color:var(--verde);
  margin-bottom:16px;font-size:.9rem;font-weight:500;
}
.aviso.error{border-left-color:var(--rojo);background:var(--rojo-suave);color:var(--rojo);}

.vacio{
  text-align:center;padding:48px 26px;color:var(--gris);
  background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);
}
.vacio .marca-vacia{width:76px;height:76px;margin:0 auto 14px;opacity:.42;display:block;}
.vacio p{margin:0 0 5px;font-weight:650;color:var(--marino);}
.vacio span{font-size:.88rem;}

/* Aviso flotante sobre la barra inferior.
   Se oculta con opacidad y visibility, NO desplazandolo: un translateY
   nunca lo saca de pantalla estando anclado sobre la barra, y terminaba
   tapando los botones. */
.brindis{
  position:fixed;left:16px;right:16px;z-index:40;
  bottom:calc(var(--barra) + env(safe-area-inset-bottom) + 12px);
  max-width:568px;margin:0 auto;
  background:var(--verde);color:#fff;
  padding:14px 16px;border-radius:var(--r);
  font-weight:600;box-shadow:var(--sombra-alta);
  opacity:0;visibility:hidden;transform:translateY(10px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.brindis.visible{opacity:1;visibility:visible;transform:translateY(0);}

/* ============================================================
   BUSCADOR Y PAGINACION
   ============================================================ */

.buscador{display:flex;gap:9px;margin-bottom:14px;}
.buscador input{flex:1;}
.buscador .boton{flex:0 0 auto;width:auto;min-height:50px;padding:13px 20px;}

.paginas{display:flex;gap:9px;justify-content:center;align-items:center;margin:18px 0;}
.paginas a,.paginas span{
  min-width:50px;min-height:50px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r);border:1px solid var(--borde);
  background:var(--blanco);text-decoration:none;color:var(--marino);font-weight:650;
}
.paginas span{color:var(--gris);border:0;background:none;}

/* ============================================================
   ENTRADA
   ============================================================ */

.pantalla-entrada{
  min-height:100vh;min-height:100dvh;
  background:
    radial-gradient(1000px 500px at 50% -10%, #1D3A5C 0%, transparent 60%),
    var(--marino);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.entrada{width:100%;max-width:390px;}
.entrada .encabezado{text-align:center;margin-bottom:26px;}
.entrada .encabezado img{width:92px;height:auto;margin-bottom:16px;}
.entrada .encabezado strong{
  display:block;color:#fff;font-size:1.45rem;font-weight:650;letter-spacing:-.025em;
}
.entrada .encabezado span{
  display:block;color:var(--camisa);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;margin-top:5px;
}
.entrada .tarjeta{border:0;box-shadow:0 20px 50px rgba(0,0,0,.28);padding:22px;}
.entrada .boton{margin-top:4px;}
.entrada .nota{text-align:center;color:#7FA0BC;font-size:.78rem;margin-top:18px;}

/* ============================================================
   FICHA
   ============================================================ */

.retrato{
  width:100%;max-width:320px;border-radius:var(--r-lg);
  display:block;margin:0 auto 14px;box-shadow:var(--sombra-alta);
}
.dato{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--papel);}
.dato:last-child{border-bottom:0;}
.dato dt{flex:0 0 40%;font-weight:600;font-size:.83rem;color:var(--gris);margin:0;}
.dato dd{flex:1;margin:0;font-weight:600;}

.oculto{display:none;}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
  .brindis{transform:none;}
}

/* Pregunta de apertura del panel */
.pregunta{
  font-size:1.3rem;font-weight:650;letter-spacing:-.025em;
  color:var(--marino);margin:2px 2px 14px;
}


/* Oveja de la marca */
.oveja-entrada{width:88px;height:88px;display:block;margin:0 auto 6px;}
.entrada .encabezado img{width:78px;margin:10px auto 14px;display:block;}