/* ==========================================================================
   BASE — tokens, tipografía, botones, formularios, estados

   Criterio (sección 11 del documento): legibilidad y velocidad. Hay líderes de
   60+ años usando esto de pie, en un stand, con el celular en la mano.

   El color sale del mundo del sujeto y no de una paleta genérica: el verdín del
   cobre de las cúpulas y la tierra volcánica de la sierra. El acento de arcilla
   aparece en un solo sitio por pantalla — la acción principal — y en ningún
   otro, para que siempre signifique lo mismo.

   UN SOLO TEMA, claro, con todos los colores pintados explícitamente. Es una
   decisión, no un olvido: alto contraste para quien ya no ve de cerca, y la
   mitad de superficie donde equivocarse. La página se sostiene igual sobre un
   navegador en modo oscuro porque ningún color depende del fondo del host.
   ========================================================================== */

/* ------------------------------------------------------------- FUENTES ----
   Auto-hospedadas a propósito: sin petición a un tercero, la iglesia no le
   entrega la IP de cada visitante a nadie, y el sitio no se despinta si el CDN
   falla. Ambas familias son SIL OFL, así que redistribuirlas está permitido.
   Son variables: un archivo cubre todos los pesos.                          */

@font-face {
  font-family: 'Plex';
  src: url('../fonts/plexsans.woff2') format('woff2-variations'),
       url('../fonts/plexsans.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plex';
  src: url('../fonts/plexsans-ext.woff2') format('woff2-variations'),
       url('../fonts/plexsans-ext.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage';
  src: url('../fonts/bricolage.woff2') format('woff2-variations'),
       url('../fonts/bricolage.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage';
  src: url('../fonts/bricolage-ext.woff2') format('woff2-variations'),
       url('../fonts/bricolage-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* -- Marca: verde petróleo, el verdín del cobre --------------------------- */
  --marca:        #1D4B45;
  --marca-hover:  #163B36;
  --marca-claro:  #2F6E66;
  --marca-suave:  #E7EFED;
  --marca-borde:  #C4D8D4;

  /* -- Acento: arcilla. Un solo uso por pantalla: la acción principal ------- */
  --acento:       #B0522A;
  --acento-hover: #96441F;
  --acento-suave: #FAEDE4;
  --acento-borde: #EBD3C2;

  /* -- Neutros de sesgo cálido, elegidos, no heredados ---------------------- */
  --tinta:   #141C1A;
  --texto:   #2C3532;
  --suave:   #5E6B67;
  /* Elegido midiendo: 4.50 sobre el fondo mas oscuro que usa el sistema
     (#F2F0EB). Con el gris anterior los rotulos pequenos quedaban en 2.74,
     y esto lo leen lideres de 60+ anos. */
  --tenue:   #66706B;
  --borde:   #DFDAD1;
  --borde-f: #EDEAE4;
  --fondo:   #F2F0EB;
  --panel:   #FFFFFF;

  /* -- Estados del pipeline: el mismo color en todo el sistema -------------- */
  --e-inscrito:   #6B736E;
  --e-asignado:   #275E86;
  --e-contactado: #9A5B12;
  --e-asistio:    #2E6B42;
  --e-integrado:  #1D4B45;
  --e-nocont:     #A33629;
  --e-noasis:     #7C2D23;

  /* -- Semánticos, separados del acento ------------------------------------ */
  --ok:     #2E6B42;
  --alerta: #9A5B12;
  --error:  #A33629;
  --error-borde: #E6C4BF;   /* el rojo bajado a borde: marca lo irreversible */
  --wa:     #128C7E;        /* verde de WhatsApp: de la marca ajena, no nuestro */
  --wa-hover: #0F7A6E;

  --r:   10px;
  --r-s: 7px;
  --sombra:   0 1px 2px rgba(20,28,26,.05), 0 1px 3px rgba(20,28,26,.07);
  --sombra-m: 0 6px 20px -6px rgba(20,28,26,.18);
  --sombra-g: 0 18px 40px -14px rgba(20,28,26,.28);

  --display: 'Bricolage', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --fuente:  'Plex', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

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

body{
  margin:0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display solo en los títulos y en las cifras grandes. En el cuerpo mandaría
   demasiado y esto se lee, no se admira. */
h1,h2,h3,h4{
  margin:0 0 .5em; color: var(--tinta); line-height:1.18;
  font-family: var(--display); font-weight:700;
  letter-spacing:-.012em; text-wrap: balance;
}
h1{ font-size:1.7rem; font-weight:800; letter-spacing:-.02em; }
h2{ font-size:1.25rem; }
h3{ font-size:1.05rem; }
p{ margin:0 0 .8em; max-width:68ch; }
a{ color: var(--marca-claro); text-decoration:none; text-underline-offset:.18em; }
a:hover{ text-decoration:underline; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--acento); outline-offset:2px; border-radius:3px;
}
img{ max-width:100%; display:block; }
small{ font-size:.82rem; }
::selection{ background: var(--marca-suave); color: var(--tinta); }

.mudo   { color: var(--suave); }
.tenue  { color: var(--tenue); }
.centro { text-align:center; }
.derecha{ text-align:right; }
.nowrap { white-space:nowrap; }
.mono   { font-variant-numeric: tabular-nums; font-feature-settings:"tnum"; letter-spacing:.01em; }
.oculto { display:none !important; }
.mt0{margin-top:0}.mb0{margin-bottom:0}.mt1{margin-top:.5rem}.mt2{margin-top:1rem}.mt3{margin-top:1.5rem}

/* ------------------------------------------------------------ BOTONES ---- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45em;
  min-height:42px; padding:.55rem 1.05rem;
  border:1px solid transparent; border-radius: var(--r-s);
  background: var(--marca); color:#fff;
  font: inherit; font-weight:600; font-size:.94rem; letter-spacing:-.005em;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition: background .13s ease, border-color .13s ease, transform .06s ease;
}
.btn:hover{ background: var(--marca-hover); text-decoration:none; }
.btn:active{ transform: translateY(1px); }
.btn[disabled], .btn.disabled{ opacity:.45; cursor:not-allowed; }

/* Secundario: el que más se repite, así que el más callado. */
.btn-2{ background:#fff; color:var(--marca); border-color:var(--borde); }
.btn-2:hover{ background:var(--marca-suave); border-color:var(--marca-borde); }

/* Acento: la acción principal de la pantalla. Uno por vista. */
.btn-acento{ background:var(--acento); }
.btn-acento:hover{ background:var(--acento-hover); }

.btn-peligro{ background:#fff; color:var(--error); border-color:var(--error-borde); }
.btn-wa{ background:var(--wa); border-color:var(--wa); color:#fff; }
.btn-wa:hover{ background:var(--wa-hover); border-color:var(--wa-hover); }
.btn-peligro:hover{ background:#FBF0EE; border-color:var(--error); }

.btn-fantasma{ background:transparent; color:var(--suave); border-color:transparent; }
.btn-fantasma:hover{ background:var(--borde-f); color:var(--tinta); }

.btn-bloque{ width:100%; }
.btn-s{ min-height:32px; padding:.28rem .62rem; font-size:.83rem; }
.btn-xl{ min-height:54px; font-size:1.05rem; padding:.85rem 1.5rem; }

/* --------------------------------------------------------- FORMULARIOS ---- */

label{ display:block; font-weight:600; font-size:.88rem; color:var(--tinta); margin-bottom:.28rem; }
.campo{ margin-bottom:1rem; }
.campo .ayuda{ display:block; font-size:.81rem; color:var(--suave); margin-top:.28rem; line-height:1.45; }
.req{ color:var(--error); }

input[type=text],input[type=tel],input[type=number],input[type=email],
input[type=password],input[type=date],input[type=time],input[type=search],
select,textarea{
  width:100%; min-height:42px; padding:.5rem .7rem;
  border:1px solid var(--borde); border-radius: var(--r-s);
  background:#fff; color:var(--texto); font: inherit; font-size:1rem;
  transition: border-color .13s ease, box-shadow .13s ease;
}
textarea{ min-height:96px; resize:vertical; line-height:1.55; }
select{
  appearance:none; padding-right:2rem;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235E6B67' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1.2 1.6 6 6.4l4.8-4.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .7rem center; background-size:11px;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--marca-claro); box-shadow:0 0 0 3px rgba(47,110,102,.16);
}
input.err, select.err, textarea.err{ border-color:var(--error); background:#FDF7F6; }
.msg-err{ color:var(--error); font-size:.83rem; margin-top:.28rem; font-weight:600; }

.check{ display:flex; align-items:flex-start; gap:.6rem; font-weight:400; font-size:.92rem; line-height:1.45; cursor:pointer; }
.check input[type=checkbox], .check input[type=radio]{
  width:19px; height:19px; min-height:0; margin:.14rem 0 0; flex:none; accent-color:var(--marca);
}

.honeypot{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* -------------------------------------------------------------- ESTADO ---- */
/* La pastilla lleva el color como relleno tenue y el texto en el tono pleno:
   se distingue por color y por forma, no solo por color. */

.badge{
  display:inline-block; padding:.14em .5em; border-radius:5px;
  font-size:.73rem; font-weight:600; letter-spacing:.005em;
  background:var(--borde-f); color:var(--suave); white-space:nowrap; line-height:1.55;
  border:1px solid transparent;
}
.badge.e-inscrito  { background:#F0EFEC; color:var(--e-inscrito);   border-color:#DEDCD7; }
.badge.e-asignado  { background:#E6EFF6; color:var(--e-asignado);   border-color:#C6DBEA; }
.badge.e-contactado{ background:#FBF0DF; color:var(--e-contactado); border-color:#EDDBB8; }
.badge.e-asistio   { background:#E4F0E8; color:var(--e-asistio);    border-color:#C2DDCC; }
.badge.e-integrado { background:var(--e-integrado); color:#fff; border-color:var(--e-integrado); }
.badge.e-nocont    { background:#FAE7E4; color:var(--e-nocont);     border-color:#EFCAC4; }
.badge.e-noasis    { background:#F3DEDA; color:var(--e-noasis);     border-color:#E3BFB8; }
.badge-menor       { background:#FBF0DF; color:#8A5210; border-color:#EDDBB8; }
.badge-revisar     { background:#FCF4DA; color:#7A5B0C; border-color:#EFE0AE; }

/* -------------------------------------------------------------- AVISOS ---- */

.aviso{
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.8rem 1rem; border-radius:var(--r-s); margin-bottom:1rem;
  border:1px solid; border-left-width:3px; font-size:.92rem;
}
.aviso-ok    { background:#EDF5F0; border-color:#C2DDCC; border-left-color:var(--ok);     color:#1F4A2E; }
.aviso-info  { background:var(--marca-suave); border-color:var(--marca-borde); border-left-color:var(--marca-claro); color:#153B36; }
.aviso-alerta{ background:#FCF6E9; border-color:#EDDBB8; border-left-color:var(--alerta); color:#6B400C; }
.aviso-error { background:#FBEFED; border-color:#EFCAC4; border-left-color:var(--error);  color:#7C2318; }

.tarjeta{ background:var(--panel); border:1px solid var(--borde); border-radius:var(--r); box-shadow:var(--sombra); }

.vacio{ padding:2.75rem 1rem; text-align:center; color:var(--suave); }
.vacio strong{ display:block; font-family:var(--display); color:var(--tinta); margin-bottom:.35rem; font-size:1.08rem; }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

@media print{
  .no-print{ display:none !important; }
  body{ background:#fff; font-size:12px; }
  .tarjeta{ box-shadow:none; border-color:#bbb; }
  a{ color:inherit; text-decoration:none; }
}