/*
 * Portal de asesorías · Activistas Constructivos — Manual de marca v2 2026, Voz A (institucional).
 * Base blanca y aireada; el color solo resalta. Texto en grises, nunca negro. Solo Poppins.
 */
:root {
  /* Marca · base institucional */
  --turquesa: #00a097;
  --turquesa-oscuro: #008a82;
  --turquesa-claro: #f4fbfa;
  --azul: #0082be;
  --azul-claro: #f4f8fb;
  /* Acentos · solo para resaltar */
  --coral: #ea5543;
  --coral-claro: #fef4f2;
  --amarillo: #fdca3f;
  --amarillo-claro: #fffaf0;
  /* Neutros · texto y fondos */
  --blanco: #ffffff;
  --carbon: #3f3f42;       /* titulares y texto fuerte */
  --gris: #777778;         /* cuerpo */
  --gris-claro: #8b8b8c;   /* secundario */
  --fondo: #fafafa;
  --linea: #eceded;
  --linea-fuerte: #d8d8d9;
  --radio: 16px;
  --radio-chico: 10px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 400 15px/1.6 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--gris);
  background: var(--fondo);
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
h1, h2, h3 { color: var(--carbon); line-height: 1.2; text-wrap: balance; margin: 0 0 .35rem; }
h1 { font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 1.08rem; font-weight: 700; }
h3 { font-size: .98rem; font-weight: 600; }
p { margin: 0 0 .6rem; }
strong { color: var(--carbon); font-weight: 600; }
small, .suave { color: var(--gris-claro); }
a { color: var(--turquesa); }

/* ------------------------------------------------------------ Encabezado */
.barra {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--blanco); border-bottom: 1px solid var(--linea);
}
.marca { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; text-decoration: none; }
.marca img { height: 34px; width: auto; display: block; }
.marca-texto { min-width: 0; border-left: 1px solid var(--linea-fuerte); padding-left: 12px; }
.marca-texto strong { display: block; font-size: .9rem; font-weight: 600; }
.marca-texto small { display: block; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .marca-texto { display: none; } .marca img { height: 30px; } }
.usuario { flex: none; display: flex; align-items: center; gap: 4px; font-size: .85rem; color: var(--carbon); text-align: right; }
.usuario span { max-width: 36vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.contenido { max-width: 780px; margin: 0 auto; padding: 22px 16px calc(44px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 16px; }
.cargando { color: var(--gris-claro); }

/* ------------------------------------------------------------ Tarjetas y estructura */
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; display: grid; gap: 14px; }
.tarjeta > :last-child { margin-bottom: 0; }
.fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fila.entre { justify-content: space-between; }
.grilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .grilla-2 { grid-template-columns: 1fr; } }
.etiqueta-seccion { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--turquesa); margin: 0; }

/* ------------------------------------------------------------ Botones y campos */
button, .boton {
  font: inherit; font-weight: 500; cursor: pointer; border-radius: 999px; padding: 10px 20px; min-height: 44px;
  border: 1px solid var(--linea-fuerte); background: var(--blanco); color: var(--carbon);
}
button:hover { border-color: var(--turquesa); color: var(--turquesa-oscuro); }
button.primario { background: var(--turquesa); border-color: var(--turquesa); color: var(--blanco); font-weight: 600; }
button.primario:hover { background: var(--turquesa-oscuro); border-color: var(--turquesa-oscuro); color: var(--blanco); }
button.enlace { border: none; background: none; color: var(--turquesa); padding: 6px 8px; min-height: 0; text-decoration: underline; font-weight: 500; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:disabled:hover { border-color: var(--linea-fuerte); color: var(--carbon); }
button.primario:disabled:hover { background: var(--turquesa); color: var(--blanco); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid rgba(0, 160, 151, .35); outline-offset: 2px; }

label { display: grid; gap: 6px; font-weight: 500; font-size: .9rem; color: var(--carbon); }
label .ayuda { font-weight: 400; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=search], select, textarea {
  font: inherit; width: 100%; padding: 10px 14px; border-radius: var(--radio-chico); border: 1px solid var(--linea-fuerte);
  background: var(--blanco); color: var(--carbon); min-height: 44px;
}
input:focus, select:focus, textarea:focus { border-color: var(--turquesa); }
textarea { min-height: 110px; resize: vertical; }
.contador { font-size: .78rem; text-align: right; color: var(--gris-claro); font-variant-numeric: tabular-nums; }
.contador.excede { color: var(--coral); font-weight: 600; }

.opciones { display: grid; gap: 8px; }
.opcion {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico); font-weight: 500; cursor: pointer; background: var(--blanco); color: var(--carbon);
}
.opcion input { margin-top: 5px; accent-color: var(--turquesa); }
.opcion.activa { border-color: var(--turquesa); background: var(--turquesa-claro); }
.segmentado { display: inline-flex; border: 1px solid var(--linea-fuerte); border-radius: 999px; overflow: hidden; }
.segmentado button { border: none; border-radius: 0; min-width: 64px; }
.segmentado button.activo { background: var(--turquesa); color: var(--blanco); }

.resultados { display: grid; gap: 6px; }
.resultado { text-align: left; display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--radio-chico); border: 1px solid var(--linea-fuerte); background: var(--blanco); }
.resultado small { font-variant-numeric: tabular-nums; }
.elegida { border: 1px solid var(--turquesa); background: var(--turquesa-claro); border-radius: var(--radio-chico); padding: 12px 14px; }

/* ------------------------------------------------------------ Pasos, avisos y estados */
.pasos { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pasos li { flex: 1; height: 5px; border-radius: 3px; background: var(--linea); }
.pasos li.hecho { background: var(--turquesa); }

.aviso { padding: 12px 14px; border-radius: var(--radio-chico); font-size: .9rem; border-left: 4px solid transparent; color: var(--carbon); }
.aviso.ok { background: var(--turquesa-claro); border-left-color: var(--turquesa); }
.aviso.mal { background: var(--coral-claro); border-left-color: var(--coral); }
.aviso.revisar { background: var(--amarillo-claro); border-left-color: var(--amarillo); }
.aviso.pendiente, .aviso.info { background: var(--azul-claro); border-left-color: var(--azul); }
.aviso strong { color: var(--carbon); }
.aviso ul { margin: 6px 0 0; padding-left: 18px; }

.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
.chip.ok { background: var(--turquesa); color: var(--blanco); }
.chip.mal { background: var(--coral); color: var(--blanco); }
.chip.revisar { background: var(--amarillo); color: var(--carbon); }
.chip.pendiente { background: var(--azul); color: var(--blanco); }
.chip.suave { background: var(--turquesa-claro); color: var(--turquesa-oscuro); }

/* ------------------------------------------------------------ Inicio: resumen y grupos por organización */
.saludo { display: grid; gap: 4px; }
.contadores { display: flex; gap: 8px; flex-wrap: wrap; }
.contador-caja { background: var(--turquesa-claro); border-radius: var(--radio-chico); padding: 8px 14px; color: var(--carbon); font-size: .85rem; }
.contador-caja b { color: var(--turquesa-oscuro); font-size: 1.15rem; font-weight: 800; margin-right: 4px; font-variant-numeric: tabular-nums; }

.grupos { display: grid; gap: 14px; }
.grupo { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.grupo > summary { list-style: none; cursor: pointer; padding: 16px 18px; display: grid; gap: 6px; }
.grupo > summary::-webkit-details-marker { display: none; }
.grupo[open] > summary { border-bottom: 1px solid var(--linea); }
.grupo-titulo { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.grupo-titulo strong { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.grupo-meta { font-size: .8rem; color: var(--gris-claro); }
.grupo-cuerpo { padding: 6px 18px 16px; display: grid; }
.barra-horas { height: 6px; border-radius: 3px; background: var(--linea); overflow: hidden; }
.barra-horas span { display: block; height: 100%; background: var(--turquesa); }
.cifras { font-size: .78rem; color: var(--gris-claro); font-variant-numeric: tabular-nums; }

.sesion-fila { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.sesion-fila:last-of-type { border-bottom: none; }
.sesion-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sesion-texto strong { font-size: .95rem; font-weight: 600; }
.cuando { font-size: .78rem; color: var(--gris-claro); }
.cuando.atrasada { color: var(--coral); font-weight: 600; }
@media (max-width: 520px) {
  .sesion-fila { flex-wrap: wrap; }
  .sesion-fila button { width: 100%; }
}

.calendario {
  flex: none; width: 58px; border-radius: 12px; overflow: hidden; text-align: center; background: var(--blanco);
  border: 1px solid var(--linea-fuerte); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.calendario .sem { display: block; background: var(--turquesa); color: var(--blanco); font-size: .66rem; font-weight: 600; letter-spacing: .08em; padding: 3px 0; }
.calendario .dia { display: block; color: var(--carbon); font-size: 1.35rem; font-weight: 800; padding-top: 4px; }
.calendario .mes { display: block; color: var(--gris); font-size: .66rem; font-weight: 600; letter-spacing: .08em; padding-bottom: 5px; }

.registradas { margin-top: 6px; font-size: .85rem; }
.registradas summary { cursor: pointer; color: var(--gris); padding: 8px 0; }
.registradas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.registradas li { display: flex; justify-content: space-between; gap: 8px; align-items: center; color: var(--gris); }

/* Franja "Soportando…" en el asistente */
.franja { display: flex; gap: 14px; align-items: center; background: var(--turquesa-claro); border: 1px solid rgba(0, 160, 151, .25); border-radius: var(--radio-chico); padding: 12px 14px; }
.franja .etiqueta-seccion { margin-bottom: 2px; }
.franja strong { display: block; font-size: 1rem; }

/* ------------------------------------------------------------ Registros del mes (compacto) */
.registros { display: grid; gap: 8px; }
.registro { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--radio-chico); border: 1px solid var(--linea); }
.registro details { font-size: .85rem; color: var(--gris); }

/* ------------------------------------------------------------ Archivos y resumen */
.archivo { display: grid; gap: 8px; }
.archivo img { max-width: 100%; max-height: 180px; border-radius: var(--radio-chico); border: 1px solid var(--linea); object-fit: contain; background: var(--fondo); }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.selector .boton { justify-self: start; display: inline-flex; align-items: center; }
.selector:focus-within .boton { outline: 3px solid rgba(0, 160, 151, .35); outline-offset: 2px; }
.selector:hover .boton { border-color: var(--turquesa); color: var(--turquesa-oscuro); }

.resumen dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.resumen dt { color: var(--gris-claro); font-size: .88rem; }
.resumen dd { margin: 0; color: var(--carbon); overflow-wrap: anywhere; }
@media (max-width: 520px) { .resumen dl { grid-template-columns: 1fr; } .resumen dd { margin-bottom: 6px; } }

.acciones { display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.acciones .derecha { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.centro { text-align: center; justify-items: center; }
.sin-corte { white-space: nowrap; }
.sin-conexion {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 20;
  background: var(--carbon); color: var(--blanco); border-radius: 999px; padding: 10px 18px; font-size: .88rem; box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.error-pantalla h1 { font-size: 1.2rem; }
/* Si pasados 15 s sigue "Cargando…", sugerir revisar la conexión. */
.cargando::after { content: ' ¿Tarda mucho? Revisa tu conexión y recarga la página.'; opacity: 0; animation: aparecer 0s 15s forwards; }
@keyframes aparecer { to { opacity: 1; } }
.franja-grupo { display: grid; gap: 10px; }
.sesion-fila.por-corregir { background: var(--coral-claro); margin: 4px -18px; padding: 12px 18px; border-bottom: none; }
.comentario { font-size: .82rem; color: var(--carbon); }
.pie { text-align: center; font-size: .75rem; color: var(--gris-claro); }
.centro .aviso { text-align: left; }
.enlace-largo { overflow-wrap: anywhere; }