/* ================================================================
   ALIADAS - Hoja de estilos
   Mobile-first, accesible (WCAG AA), responsiva. Tema calido malva/arena.
   Sin dependencias externas.
   ================================================================ */
:root{
  --plum:#8b5a8c;          /* malva de marca */
  --plum-btn:#7a4a7c;      /* malva algo mas oscuro: texto blanco cumple AA */
  --plum-700:#6f4571;
  --plum-50:#f6eef6;
  --arena:#faf6f1;
  --tinta:#241f2b;         /* texto principal, alto contraste */
  --gris:#655e70;          /* texto secundario: cumple AA sobre blanco/arena */
  --linea:#e4dce6;
  --verde:#2f7d52;         /* cumple AA */
  --ambar:#9a5a16;         /* cumple AA sobre fondos claros */
  --rojo:#b23b3b;          /* cumple AA */
  --blanco:#ffffff;
  --foco:#1f6feb;          /* anillo de foco visible */
  --sombra:0 2px 12px rgba(80,50,80,.08);
  --radio:16px;
  --radio-s:12px;
  --tope:600px;            /* ancho maximo tipo app movil */
  --tap:44px;              /* objetivo tactil minimo */
}
*{box-sizing:border-box;margin:0;padding:0}
html{ -webkit-text-size-adjust:100%; }
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--arena);
  color:var(--tinta);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Accesibilidad: foco visible por teclado en todo elemento interactivo */
:focus-visible{ outline:3px solid var(--foco); outline-offset:2px; border-radius:6px; }
/* No quitamos el foco a quien navega con teclado; solo afinamos el radio */
a,button,input,textarea,select{ font-family:inherit; }

/* Salto al contenido: oculto hasta recibir foco por teclado (robusto) */
.skip{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--plum-700); color:#fff; padding:10px 16px; border-radius:0 0 10px 0;
}
.skip:focus{ left:0; }

/* Texto solo para lectores de pantalla */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.wrap{max-width:var(--tope);margin:0 auto;min-height:100%;display:flex;flex-direction:column}
.contenido{flex:1;padding:18px 16px 96px}

/* Cabecera */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;background:var(--blanco);border-bottom:1px solid var(--linea);
  position:sticky;top:0;z-index:20;min-height:56px;
}
.topbar .marca{font-weight:700;color:var(--plum-700);letter-spacing:.2px}
.topbar .saludo{font-size:.9rem;color:var(--gris)}

/* Tarjetas */
.card{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:18px;box-shadow:var(--sombra);margin-bottom:16px}
.card h2{font-size:1.1rem;margin-bottom:10px;line-height:1.3}
.card .sub{color:var(--gris);font-size:.92rem}

/* Bloque de racha / progreso */
.hero{background:linear-gradient(135deg,var(--plum),var(--plum-700));color:#fff;border:none}
.hero .num{font-size:2.6rem;font-weight:800;line-height:1}
.hero .etq{opacity:.95;font-size:.92rem}
.hero .fila{display:flex;gap:22px;align-items:flex-end;margin-top:6px;flex-wrap:wrap}
.hero .mini{font-size:1.35rem;font-weight:700}

/* Botones: objetivo tactil >= 44px, texto legible */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--plum-btn);color:#fff;border:none;border-radius:var(--radio-s);
  padding:0 18px;min-height:var(--tap);font-size:1rem;font-weight:600;cursor:pointer;width:100%;
  line-height:1.2;text-align:center;transition:filter .12s,transform .05s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn.sec{background:var(--plum-50);color:var(--plum-700)}
.btn.sec:hover{filter:brightness(.98)}
.btn.linea{background:transparent;border:1.5px solid var(--linea);color:var(--tinta)}
.btn.verde{background:var(--verde)}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* Escala de animo / ansiedad: accesible y tactil */
.escala{display:flex;gap:8px;margin:10px 0}
.escala button{flex:1;min-height:var(--tap);min-width:var(--tap);
  border:1.5px solid var(--linea);background:#fff;
  border-radius:var(--radio-s);font-size:1.05rem;font-weight:700;color:var(--gris);cursor:pointer;
  transition:background .12s,border-color .12s}
.escala button:hover{border-color:var(--plum)}
.escala button.on{background:var(--plum);color:#fff;border-color:var(--plum)}

/* Chips / etiquetas de estado */
.chip{display:inline-block;padding:4px 11px;border-radius:999px;font-size:.8rem;font-weight:700}
.chip.bajo{background:#e3f1e9;color:var(--verde)}
.chip.medio{background:#fbead6;color:var(--ambar)}
.chip.alto{background:#f7e0e0;color:var(--rojo)}
.chip.vet{background:var(--plum-50);color:var(--plum-700)}

/* Navegacion inferior (tipo app) con iconos SVG + etiqueta */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  max-width:var(--tope);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--blanco);border-top:1px solid var(--linea);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:56px;padding:6px 0;text-decoration:none;
  color:var(--gris);font-size:.72rem;font-weight:600}
.tabbar a svg{width:24px;height:24px;display:block}
.tabbar a[aria-current="page"]{color:var(--plum-700)}
.tabbar a[aria-current="page"] svg{stroke:var(--plum-700)}

/* Boton de ayuda flotante (siempre accesible) */
.sos{
  position:fixed;right:16px;bottom:86px;z-index:40;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--rojo);color:#fff;border:none;border-radius:999px;
  padding:0 20px;min-height:52px;font-weight:700;font-size:1rem;
  box-shadow:0 6px 18px rgba(178,59,59,.45);cursor:pointer;
}
.sos svg{width:20px;height:20px}
.sos:hover{filter:brightness(1.08)}

/* Lista de recursos / usuarias */
.item{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px;border:1px solid var(--linea);border-radius:var(--radio-s);background:#fff;margin-bottom:10px}
.item .ti{font-weight:600}
.item .de{color:var(--gris);font-size:.9rem}
a.item{text-decoration:none;color:inherit}
a.item:hover{border-color:var(--plum);background:var(--plum-50)}

/* Barra de evolucion (mini grafico sin libreria) */
.spark{display:flex;align-items:flex-end;gap:3px;height:52px;margin-top:8px}
.spark span{flex:1;background:var(--plum-50);border-radius:3px 3px 0 0;min-height:4px}
.spark span.c{background:var(--plum)}

/* Formularios: etiquetas claras, campos comodos */
label{display:block;font-size:.9rem;color:var(--gris);margin:14px 0 6px;font-weight:600}
input,textarea,select{width:100%;padding:12px;min-height:var(--tap);
  border:1.5px solid var(--linea);border-radius:var(--radio-s);font-size:1rem;background:#fff;color:var(--tinta)}
input:focus,textarea:focus,select:focus{border-color:var(--plum)}
textarea{resize:vertical;min-height:80px}

/* Aviso / nota legal */
.nota{font-size:.82rem;color:var(--gris);line-height:1.5}
.alerta{background:#fbead6;border:1px solid #e9c9a0;color:#7a4712;padding:12px;border-radius:var(--radio-s);font-size:.88rem;margin-bottom:14px}

/* Toast: anunciado por lectores de pantalla (role=status en el HTML) */
.toast{position:fixed;left:50%;bottom:150px;transform:translateX(-50%);
  background:var(--tinta);color:#fff;padding:12px 18px;border-radius:999px;font-size:.92rem;
  opacity:0;pointer-events:none;transition:opacity .25s;z-index:60;max-width:90%;text-align:center}
.toast.ver{opacity:1}

/* Gestion: tablas que no se desbordan en movil */
.tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radio-s)}
.tabla{width:100%;border-collapse:collapse;font-size:.92rem;min-width:420px}
.tabla th,.tabla td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--linea)}
.tabla th{color:var(--gris);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.3px}
.tabla tbody tr:hover{background:var(--plum-50)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--linea);border-radius:var(--radio-s);padding:14px;text-align:center}
.kpi .n{font-size:1.7rem;font-weight:800;color:var(--plum-700)}
.kpi .e{font-size:.78rem;color:var(--gris)}

/* Escritorio: mas aire y mejor uso del ancho */
@media(min-width:720px){
  .contenido{padding:26px 24px 110px}
  .card{padding:22px}
  .kpis{gap:16px}
}

/* Pantallas pequenas: KPIs en una fila compacta */
@media(max-width:380px){
  .kpis{grid-template-columns:repeat(3,1fr);gap:8px}
  .kpi{padding:10px}
  .kpi .n{font-size:1.4rem}
  .hero .fila{gap:16px}
}

/* Modales propios (sin ventanas del navegador) */
.modal-ov{position:fixed;inset:0;background:rgba(36,31,43,.55);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;pointer-events:none;transition:opacity .15s}
.modal-ov.ver{opacity:1;pointer-events:auto}
.modal{background:#fff;border-radius:16px;max-width:440px;width:100%;
  padding:22px;box-shadow:0 14px 50px rgba(0,0,0,.28);max-height:90vh;overflow-y:auto;
  transform:translateY(10px);transition:transform .15s}
.modal-ov.ver .modal{transform:none}
.modal h3{font-size:1.2rem;margin-bottom:8px;color:var(--tinta)}
.modal .m-sub{color:var(--gris);margin-bottom:16px;font-size:.95rem}
.modal-acc{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}
.modal-acc .btn{width:auto;min-width:120px}

/* Navegacion de secciones en gestion */
.subnav{display:flex;gap:4px;overflow-x:auto;background:var(--blanco);
  border-bottom:1px solid var(--linea);padding:0 16px;position:sticky;top:56px;z-index:19}
.subnav a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:13px 14px;min-height:48px;text-decoration:none;color:var(--gris);
  font-size:.92rem;font-weight:600;border-bottom:3px solid transparent}
.subnav a svg{width:18px;height:18px}
.subnav a[aria-current="page"]{color:var(--plum-700);border-bottom-color:var(--plum)}
.subnav a:hover{color:var(--plum-700)}

/* Banner de modo soporte (impersonacion) */
.soporte{position:sticky;top:0;z-index:25;background:#7a4712;color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;font-size:.9rem;font-weight:600}
.soporte a{color:#fff;text-decoration:underline;white-space:nowrap}

/* Tarjeta de accion (gestion): grande, clara, con icono */
.acciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.accion{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio-s);
  padding:16px;text-decoration:none;color:inherit;cursor:pointer;text-align:left;width:100%}
.accion:hover{border-color:var(--plum);background:var(--plum-50)}
.accion .ic{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:var(--plum-50);color:var(--plum-700);border-radius:9px}
.accion .ic svg{width:20px;height:20px}
.accion .t{font-weight:700;font-size:.98rem}
.accion .d{font-size:.82rem;color:var(--gris)}

/* Lista de participantes como tarjetas (mas legible que tabla en movil) */
.participante{display:flex;align-items:center;gap:12px;padding:12px 14px;
  border:1px solid var(--linea);border-radius:var(--radio-s);background:#fff;margin-bottom:10px;
  text-decoration:none;color:inherit}
.participante:hover{border-color:var(--plum);background:var(--plum-50)}
.participante .av{width:40px;height:40px;border-radius:50%;background:var(--plum);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.participante .info{flex:1;min-width:0}
.participante .nom{font-weight:600}
.participante .meta{font-size:.82rem;color:var(--gris)}

/* Respeta la preferencia de movimiento reducido */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}