/* ============================================================================
   SISTEMA NOGALES — Territorios Los Nogales Tének
   Base visual field-first: se usa a una mano, bajo el sol, a veces sin senal.
   Un solo archivo, sin build, sin JS, sin fuentes que descargar.
   Los colores de DATOS (variante tenek, antiguedad) no se tocan: el equipo
   ya los tiene aprendidos.
   ==========================================================================*/

/* ---------------------------------------------------------------- TOKENS -- */
:root {
    /* Marca y acento */
    --brand:        #2b56d4;
    --brand-strong: #1f42ad;
    --brand-tint:   #e9edfc;
    --accent:       #0d9488;   /* teal: foco, enlaces, estados activos */
    --accent-ring:  #14b8a6;

    /* Neutrales (calido-frio, matiz azul apenas perceptible) */
    --paper:       #f6f7fb;    /* fondo de la app */
    --surface:     #ffffff;    /* tarjetas */
    --surface-2:   #eef1f7;    /* rellenos sutiles, encabezado de tabla */
    --ink:         #14161d;    /* texto principal */
    --ink-soft:    #5b6270;    /* texto secundario */
    --ink-faint:   #7b828f;    /* texto terciario / pistas */
    --line:        #dfe3ec;    /* borde hairline */
    --line-strong: #c7cdda;

    /* Semantico */
    --ok:     #16a34a;  --ok-tint:     #dcfce7;
    --danger: #dc2626;  --danger-tint: #fee2e2;
    --warn:   #ea580c;  --warn-tint:   #ffedd5;
    /* Rojo de ALARMA: constante en claro y oscuro. El SOS y el boton de
       peligro no se "suavizan" de noche -- deben verse igual de urgentes. */
    --alarma: #dc2626;

    /* Colores de DATOS -- NO se tocan */
    --data-veracruz:      #ec4899;
    --data-slp:           #ca8a04;
    --data-sin-confirmar: #2563eb;
    --rec-hoy:     #16a34a;
    --rec-semana:  #65a30d;
    --rec-mes:     #ca8a04;
    --rec-antiguo: #ea580c;
    --rec-nunca:   #dc2626;

    /* Forma */
    --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

    /* Espacio (base 4) */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;

    /* Elevacion: bordes primero; UNA sombra para overlays reales */
    --shadow-sm: 0 1px 3px rgba(20, 22, 29, .12);
    --shadow:    0 1px 2px rgba(20, 22, 29, .06), 0 12px 32px -10px rgba(20, 22, 29, .22);

    /* Tipografia */
    --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fs-xs: .78rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-lg: 1.125rem;
    --fs-xl:  clamp(1.2rem, 1.05rem + .6vw, 1.4rem);
    --fs-2xl: clamp(1.45rem, 1.25rem + 1vw, 1.85rem);

    /* Movimiento */
    --ease: cubic-bezier(.2, .6, .2, 1);
    --dur-1: 120ms; --dur-2: 180ms;

    /* Area tactil minima */
    --tap: 44px;

    /* Alias de compatibilidad (nombres viejos usados en algun style= suelto) */
    --azul: var(--brand); --azul-osc: var(--brand-strong);
    --verde: var(--ok); --rojo: var(--danger);
    --gris-100: var(--surface-2); --gris-300: var(--line);
    --gris-600: var(--ink-soft); --gris-900: var(--ink);
    --rosa: var(--data-veracruz); --amarillo: var(--data-slp);
    --radio: var(--r-md);

    color-scheme: light;
}

/* Modo oscuro: sigue al telefono si el usuario no eligio explicito.
   No es un invert -- se recalibra el contraste y el acento. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --brand:        #8098f6;
        --brand-strong: #9fb1f9;
        --brand-tint:   #1e2743;
        --accent:       #2dd4bf;
        --accent-ring:  #2dd4bf;

        --paper:       #0e1016;
        --surface:     #171a24;
        --surface-2:   #1f2331;
        --ink:         #e9ebf1;
        --ink-soft:    #aab1c0;
        --ink-faint:   #8b93a2;
        --line:        #2a2f3e;
        --line-strong: #3a4155;

        --ok:     #34d399;  --ok-tint:     #12271e;
        --danger: #f87171;  --danger-tint: #341616;
        --warn:   #fb923c;  --warn-tint:   #33220f;

        --shadow-sm: 0 1px 3px rgba(0, 0, 0, .55);
        --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -10px rgba(0, 0, 0, .6);

        color-scheme: dark;
    }
}

/* Eleccion explicita del usuario (gana sobre el sistema, en ambos sentidos) */
:root[data-theme="dark"] {
    --brand: #8098f6; --brand-strong: #9fb1f9; --brand-tint: #1e2743;
    --accent: #2dd4bf; --accent-ring: #2dd4bf;
    --paper: #0e1016; --surface: #171a24; --surface-2: #1f2331;
    --ink: #e9ebf1; --ink-soft: #aab1c0; --ink-faint: #8b93a2;
    --line: #2a2f3e; --line-strong: #3a4155;
    --ok: #34d399; --ok-tint: #12271e;
    --danger: #f87171; --danger-tint: #341616;
    --warn: #fb923c; --warn-tint: #33220f;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .55);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -10px rgba(0, 0, 0, .6);
    color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: var(--fs-base)/1.55 var(--font);
    -webkit-font-smoothing: antialiased;
    transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
h1 { font-size: var(--fs-2xl); margin: 0 0 var(--sp-2); letter-spacing: -.01em; }
h2 { font-size: var(--fs-xl); margin: var(--sp-7) 0 var(--sp-3); letter-spacing: -.005em; }
h3 { font-size: var(--fs-base); margin: 0 0 var(--sp-2); }
p { margin: 0 0 var(--sp-3); }
a { color: var(--accent); text-underline-offset: 2px; }

.subtitulo { color: var(--ink-soft); margin-top: 0; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--accent-ring);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}
::selection { background: color-mix(in oklab, var(--accent) 26%, transparent); }

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

/* ---------------------------------------------------------------- LAYOUT -- */
.topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    padding: 10px var(--sp-4);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
}
.brand {
    font-weight: 700;
    font-size: var(--fs-lg);
    color: var(--brand);
    text-decoration: none;
    letter-spacing: -.01em;
}
.topnav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
.topnav a {
    color: var(--ink-soft);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 550;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.topnav a:hover { color: var(--ink); background: var(--surface-2); }
.topnav a.activo { color: var(--brand); font-weight: 700; background: var(--brand-tint); }

.btn-hamburguesa {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    cursor: pointer;
}
.btn-hamburguesa span { display: block; width: 18px; height: 2px; background: var(--ink); margin: 0 auto; border-radius: 2px; }

.topuser { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--ink-soft); }
.topuser a { color: var(--danger); text-decoration: none; font-weight: 600; }

/* Selector "que grupo estoy viendo" (barra superior). */
.selector-grupo { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.selector-grupo label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.selector-grupo select {
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    padding: 7px 10px;
    max-width: 12rem;
    cursor: pointer;
}
.selector-grupo select:hover { background: var(--surface-2); }
.selector-grupo noscript button { font: inherit; padding: 6px 10px; }

/* Boton de tema (sol / luna) en la barra superior */
.btn-tema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--surface);
    color: var(--ink-soft);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    cursor: pointer;
    flex: none;
}
.btn-tema:hover { color: var(--ink); background: var(--surface-2); }
.btn-tema svg { width: 20px; height: 20px; }

.content { max-width: 1100px; margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-8); }

/* ------------------------------------------------------------ COMPONENTES -- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: var(--sp-4);
}
.stat .num {
    font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem);
    font-weight: 700;
    line-height: 1;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
    display: block;
}
.stat .label { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 4px; display: block; }

/* ---- Reportes: resumen visual + acordeones -------------------------------- */
.reporte-graficas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-3);
    margin: var(--sp-4) 0;
}
.reporte-graficas .card { margin: 0; }
.reporte-graficas h3 { font-size: var(--fs-sm); color: var(--ink-soft); font-weight: 650; }

.grafica { display: flex; flex-direction: column; gap: 6px; }
.grafica-fila { display: grid; grid-template-columns: 8.5rem 1fr 2rem; align-items: center; gap: var(--sp-2); }
.grafica-etq { font-size: var(--fs-xs); color: var(--ink-soft); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grafica-carril { background: var(--surface-2); border-radius: var(--r-pill); height: 12px; overflow: hidden; }
.grafica-relleno.badge {
    display: block;
    padding: 0;
    border: 0;
    min-width: 0;
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--c);
    color: transparent;
}
.grafica-num { font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }

.dona-wrap { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.dona {
    --pct: 0;
    width: 108px;
    height: 108px;
    flex: none;
    border-radius: 50%;
    background: conic-gradient(var(--ok) calc(var(--pct) * 1%), var(--surface-2) 0);
    display: grid;
    place-items: center;
    position: relative;
}
.dona::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--surface); }
.dona span { position: relative; font-weight: 700; font-size: var(--fs-lg); color: var(--ink); font-variant-numeric: tabular-nums; }
.dona-wrap p { margin: 0; flex: 1; min-width: 8rem; }

details.reporte-seccion {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-3);
}
details.reporte-seccion > summary {
    cursor: pointer;
    padding: var(--sp-3) var(--sp-4);
    font-weight: 650;
    font-size: var(--fs-base);
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
details.reporte-seccion > summary::-webkit-details-marker { display: none; }
details.reporte-seccion > summary::before {
    content: "";
    width: 8px; height: 8px;
    border-right: 2px solid var(--ink-faint);
    border-bottom: 2px solid var(--ink-faint);
    transform: rotate(-45deg);
    transition: transform var(--dur-1) var(--ease);
    flex: none;
}
details.reporte-seccion[open] > summary::before { transform: rotate(45deg); }
details.reporte-seccion > summary:hover { background: var(--surface-2); border-radius: var(--r-md); }
.reporte-cuerpo { padding: 0 var(--sp-4) var(--sp-4); }
.reporte-cuerpo > .card:first-child { margin-top: 0; }
.reporte-cuerpo .tabla-scroll { margin-top: var(--sp-2); }

table { width: 100%; border-collapse: collapse; background: var(--surface); font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
th { background: var(--surface-2); color: var(--ink-soft); font-weight: 650; }
tr:last-child td { border-bottom: none; }
.tabla-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }

form.form-simple { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 480px; margin-inline: auto; }
label { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
input, select, textarea {
    width: 100%;
    min-height: var(--tap);
    padding: 10px 12px;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    font-size: var(--fs-base);
    font-family: inherit;
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:hover, select:hover, textarea:hover { border-color: var(--ink-faint); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}
/* Los radios/checkbox NO se estiran al 100% como los demas input -- eso los
   deja gigantes y descoloca el texto de al lado. */
input[type="radio"], input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--brand); }
textarea { resize: vertical; min-height: 76px; }

.btn {
    --btn-bg: var(--brand);
    --btn-fg: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--tap);
    padding: 10px 18px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-size: var(--fs-base);
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:hover { background: var(--brand-strong); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.secundario {
    background: var(--surface);
    color: var(--brand);
    border-color: color-mix(in oklab, var(--brand) 40%, var(--line));
}
.btn.secundario:hover { background: var(--brand-tint); }
.btn.peligro { --btn-bg: var(--alarma); }
.btn.peligro:hover { background: color-mix(in oklab, var(--alarma) 85%, #000); }
.btn.chico { min-height: 34px; padding: 6px 12px; font-size: var(--fs-sm); }

/* Panel "Trabajar en campo" del mapa: descarga + interruptor de ubicacion en
   un solo contenedor, en vez de dos tarjetas separadas. */
.fila-campo { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

.btn-descarga {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--tap);
    padding: 10px 18px 10px 14px;
    background: var(--brand-tint);
    color: var(--brand-strong);
    border: 1px solid color-mix(in oklab, var(--brand) 30%, var(--line));
    border-radius: var(--r-pill);
    font: inherit;
    font-weight: 650;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background var(--dur-1) var(--ease);
}
.btn-descarga:hover { background: color-mix(in oklab, var(--brand) 16%, var(--brand-tint)); }
.btn-descarga:disabled { opacity: .55; cursor: not-allowed; }
.btn-descarga svg { flex: none; }

/* Interruptor "Compartir mi ubicacion": el estado (activo/inactivo) se ve en
   el color de la pista y la posicion de la bolita, no en el texto -- el
   texto se queda fijo, mas cerca de un switch real que de un boton. */
.interruptor {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--ink);
    cursor: pointer;
}
.interruptor-pista {
    position: relative;
    flex: none;
    width: 42px;
    height: 25px;
    border-radius: var(--r-pill);
    background: var(--line-strong);
    transition: background var(--dur-1) var(--ease);
}
.interruptor-bolita {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-1) var(--ease);
}
.interruptor.activo .interruptor-pista { background: var(--ok); }
.interruptor.activo .interruptor-bolita { transform: translateX(17px); }
.interruptor-texto { font-weight: 600; font-size: var(--fs-sm); }
.interruptor:focus-visible .interruptor-pista { outline: 2px solid var(--accent-ring); outline-offset: 2px; }

/* Badges: cada estado se genera desde UN tono con color-mix().
   Agregar un estado nuevo = una linea. */
.badge {
    --c: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 650;
    line-height: 1.4;
    background: color-mix(in oklab, var(--c) 15%, var(--surface));
    color: color-mix(in oklab, var(--c) 68%, var(--ink));
}
.badge.veracruz { --c: var(--data-veracruz); }
.badge.slp { --c: var(--data-slp); }
.badge.sin_confirmar { --c: var(--data-sin-confirmar); }
.badge.interesado, .badge.clase_iniciada { --c: var(--ok); }
.badge.no_interesado { --c: var(--danger); }
.badge.publicacion_entregada, .badge.dia { --c: #4f46e5; }
.badge.mudanza { --c: var(--warn); }
.badge.no_en_casa, .badge.pidio_no_volver, .badge.otro,
.badge.sin_visitar, .badge.sin_ordenar,
.badge.en_casa_no_salio, .badge.ocupado_volver, .badge.menor_en_casa { --c: var(--ink-faint); }
/* Ciclo de los cursos biblicos */
.badge.curso_comenzado, .badge.curso_continuacion, .badge.curso_reanudado { --c: var(--ok); }
.badge.curso_finalizado { --c: var(--accent); }
.badge.curso_no_estudio, .badge.curso_pausado { --c: var(--warn); }
.badge.curso_cancelado { --c: var(--danger); }
.badge.antiguedad-hoy { --c: var(--rec-hoy); }
.badge.antiguedad-semana { --c: var(--rec-semana); }
.badge.antiguedad-mes { --c: var(--rec-mes); }
.badge.antiguedad-mas_antiguo { --c: var(--rec-antiguo); }
.badge.antiguedad-nunca { --c: var(--rec-nunca); }

.alerta {
    --c: var(--ink-soft);
    padding: 10px 14px;
    border-radius: var(--r-sm);
    margin-bottom: var(--sp-3);
    font-size: var(--fs-sm);
    border: 1px solid color-mix(in oklab, var(--c) 35%, transparent);
    background: color-mix(in oklab, var(--c) 12%, var(--surface));
    color: color-mix(in oklab, var(--c) 72%, var(--ink));
}
.alerta.error { --c: var(--danger); }
.alerta.exito { --c: var(--ok); }
.alerta.info  { --c: var(--brand); }
.alerta.aviso { --c: var(--warn); }

.login-wrap { max-width: 360px; margin: 8vh auto; }

/* Alinea cada radio con su texto (por defecto el navegador los descoloca si
   el label no es flex). Reutilizable para cualquier fila de radios/checkbox. */
.fila-radios { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 10px; }
.fila-radios label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; white-space: nowrap; }
.fila-radios input[type="radio"] { margin: 0; flex-shrink: 0; }

/* Selector de "colorear el mapa por" (mapa.php): control segmentado tipo
   pastilla en vez de radios sueltos, con la leyenda de puntos justo debajo
   dentro de la misma tarjeta. */
.control-color { display: flex; flex-direction: column; gap: var(--sp-3); }

.segmentado {
    display: inline-flex;
    align-self: flex-start;
    gap: 4px;
    padding: 4px;
    background: var(--surface-2);
    border-radius: var(--r-pill);
}
.segmento { position: relative; cursor: pointer; }
.segmento input {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.segmento span {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.segmento input:checked + span { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }
.segmento input:hover + span { color: var(--ink); }
.segmento input:focus-visible + span { outline: 2px solid var(--accent-ring); outline-offset: 2px; }

/* ---------------------------------------------------------------------
   Regla general para pantallas angostas (celular y tablet vertical, tipo
   iPad): un elemento mas chico que su tarjeta/contenedor se ve raro pegado
   a la izquierda con un hueco muerto al lado -- aqui se centra. Para un
   grupo de botones/acciones sueltas dentro de una tarjeta, se marca su
   contenedor con la clase ".fila-acciones" (ya sea un <p> o un <div>) y
   queda centrado solo en este rango; en escritorio se deja como estaba.
   ------------------------------------------------------------------- */
@media (max-width: 900px) {
    .control-color {
        margin-inline: calc(-1 * var(--sp-3));
        border-radius: 0;
        border-left: none;
        border-right: none;
        align-items: center;
    }
    /* align-self:flex-start (arriba) gana sobre el align-items:center del
       padre si no se pisa aqui -- por eso el control se quedaba pegado a la
       izquierda en vez de centrado. */
    .segmentado { align-self: center; }
    .segmentado, .leyenda, .fila-campo { justify-content: center; }
    .fila-acciones { text-align: center; }
}

/* Lista de ruta arrastrable (ruta.php) */
.lista-ruta { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.lista-ruta li {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 10px 12px;
    margin-bottom: 8px;
}
.lista-ruta .asa { cursor: grab; color: var(--ink-faint); font-size: 1.1rem; }
.lista-ruta-info { flex: 1; }
.lista-ruta li.sortable-ghost { opacity: .4; border-style: dashed; }

/* ------------------------------------------------------------------ MAPA -- */
/* Mapa + columna para editar la ruta arrastrando (aparece viendo un
   territorio especifico o un conjunto de varios juntos): lado a lado en
   pantallas anchas, apilados en movil. */
#area-mapa { display: flex; gap: var(--sp-4); align-items: flex-start; }
#area-mapa #mapa-wrap { flex: 1 1 auto; min-width: 0; }
#panel-ruta {
    flex: 0 0 300px;
    max-height: 70vh;
    overflow-y: auto;
    margin: 0 0 var(--sp-4);
}
@media (max-width: 900px) {
    /* En columna, align-items pasa a controlar el ANCHO (no la altura) -- sin
       este stretch el mapa se encogia a su contenido en vez de ocupar todo el
       ancho, y su width:100% interno colapsaba a practicamente cero. */
    #area-mapa { flex-direction: column; align-items: stretch; }
    #panel-ruta { flex: 1 1 auto; width: 100%; max-height: 280px; }
}

#mapa-wrap { position: relative; margin-bottom: var(--sp-4); }
#mapa {
    width: 100%;
    height: 70vh;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
}

#mapa-wrap.pantalla-completa {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    margin: 0;
    background: var(--paper);
}
/* height:100% del contenedor (que ya cubre toda la pantalla): NO depende de
   vh/dvh, que en varios navegadores moviles se calculan mal en pantalla
   completa y dejaban el mapa a media pantalla. */
#mapa-wrap.pantalla-completa #mapa,
#mapa-wrap:fullscreen #mapa,
#mapa-wrap:-webkit-full-screen #mapa {
    height: 100%;
    border-radius: 0;
    border: none;
}
#mapa-wrap:fullscreen, #mapa-wrap:-webkit-full-screen { background: var(--paper); }
body.mapa-bloqueado { overflow: hidden; }

/* Modo oscuro para el mapa: se invierten SOLO las baldosas (imagenes PNG de
   OSM, siempre claras). Los pines, la ruta, las etiquetas y los controles van
   en otras capas de Leaflet, asi que no se tocan. El agua y las areas verdes
   quedan con un tono algo distinto: es lo normal de invertir un mapa. */
.leaflet-tile-pane {
    transition: filter var(--dur-2) var(--ease);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .leaflet-tile-pane {
        filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.85);
    }
}
:root[data-theme="dark"] .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.85);
}
:root[data-theme="light"] .leaflet-tile-pane { filter: none; }

/* Botones dentro del mapa (control propio de Leaflet, esquina superior
   derecha). Sin texto ni tooltip: su icono se entiende. */
.control-mapa-botones { display: flex; flex-direction: column; gap: 6px; }
.control-mapa-botones button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    padding: 0;
}
.control-mapa-botones button:hover { background: var(--surface-2); }
.control-mapa-botones .flecha-norte { transition: transform var(--dur-2) var(--ease); }

.pin-numero {
    background: var(--brand);
    color: #fff;
    border-radius: var(--r-pill);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    font-weight: 700;
    border: 2px solid var(--surface);
    box-shadow: var(--shadow-sm);
}
.pin-numero-mia      { box-shadow: 0 0 0 3px #f59e0b, var(--shadow-sm); }
.pin-numero-asignada { box-shadow: 0 0 0 3px #7c3aed, var(--shadow-sm); }
.pin-numero-curso    { box-shadow: 0 0 0 3px var(--accent-ring), var(--shadow-sm); }
.pin-numero.pin-seleccionado {
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 7px var(--ink), var(--shadow-sm);
    transform: scale(1.18);
}

/* Pin liso (direcciones "sin ordenar" o vista "Todos mis territorios"): icono
   HTML igual que el numerado, sin numero -- ver comentario en
   agregarMarcadorSeleccionable() de mapa.php sobre por que NO es un
   circleMarker/SVG (se congelaba durante un pellizco de zoom o un giro con
   dos dedos en movil). */
.pin-punto {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    box-shadow: var(--shadow-sm);
}
.pin-punto-mia      { box-shadow: 0 0 0 3px #f59e0b, var(--shadow-sm); }
.pin-punto-asignada { box-shadow: 0 0 0 3px #7c3aed, var(--shadow-sm); }
.pin-punto-curso    { box-shadow: 0 0 0 3px var(--accent-ring), var(--shadow-sm); }
.pin-punto.pin-seleccionado {
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 7px var(--ink), var(--shadow-sm);
    transform: scale(1.3);
}

/* Etiqueta con el nombre del voluntario asignado, sobre el pin (solo capitan) */
.etiqueta-asignada {
    background: #7c3aed;
    color: #fff;
    border: none;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}
.etiqueta-asignada::before { display: none !important; }

/* Etiqueta "Curso · Maestro" sobre el pin de una direccion con curso biblico */
.etiqueta-curso {
    background: var(--accent);
    color: #fff;
    border: none;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}
.etiqueta-curso::before { display: none !important; }

.pin-reunion {
    background: var(--ok);
    color: #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--surface);
    box-shadow: var(--shadow-sm);
}
.pin-reunion span { transform: rotate(45deg); font-size: 1rem; }

/* Punto de reunion AL TERMINAR un territorio (distinto del de partida,
   arriba): misma forma de pin, color de acento y una tacita en vez de la
   estrella, para diferenciarlo de un vistazo. */
.pin-final {
    background: var(--accent);
    color: #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--surface);
    box-shadow: var(--shadow-sm);
}
.pin-final svg { transform: rotate(45deg); }

/* Punto de reunion TEMPORAL de HOY (cuando se trabajan 2+ territorios juntos
   ese dia en especial): misma forma de pin, color propio (ambar) para no
   confundirlo con partida (verde) ni con final (acento), y un reloj de arena
   como icono -- recuerda que es de un solo dia. */
.pin-hoy {
    background: #d97706;
    color: #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--surface);
    box-shadow: var(--shadow-sm);
}
.pin-hoy svg { transform: rotate(45deg); }

/* Dialogos (modales) -- se aplica a todos, no solo #modal-editar */
dialog {
    border: none;
    border-radius: var(--r-md);
    padding: 0;
    max-width: 480px;
    width: 92%;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
}
dialog::backdrop { background: color-mix(in oklab, var(--ink) 55%, transparent); }
dialog .card { margin-bottom: 0; border: none; background: var(--surface); }

.leyenda { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: 10px 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
/* Cada punto de la leyenda como pastilla, no solo texto suelto con un punto
   al lado -- se lee mas como un chip de estado que como una lista plana. */
.punto-leyenda {
    padding: 6px 12px 6px 10px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-soft);
}
.dot { width: 10px; height: 10px; border-radius: var(--r-pill); display: inline-block; flex: none; }
.dot.veracruz { background: var(--data-veracruz); }
.dot.slp { background: var(--data-slp); }
.dot.sin_confirmar { background: var(--data-sin-confirmar); }
.dot.antiguedad-hoy { background: var(--rec-hoy); }
.dot.antiguedad-semana { background: var(--rec-semana); }
.dot.antiguedad-mes { background: var(--rec-mes); }
.dot.antiguedad-mas_antiguo { background: var(--rec-antiguo); }
.dot.antiguedad-nunca { background: var(--rec-nunca); }

/* Anillos de leyenda "= asignada a ..." */
.anillo-asignada, .anillo-asignada-otros {
    width: 14px;
    height: 14px;
    border-radius: var(--r-pill);
    box-sizing: border-box;
}
.anillo-asignada { border: 3px solid #f59e0b; }
.anillo-asignada-otros { border: 3px solid #7c3aed; }

.punto-gps-wrap { display: flex; align-items: center; justify-content: center; }
.punto-gps {
    width: 16px;
    height: 16px;
    border-radius: var(--r-pill);
    background: var(--data-sin-confirmar);
    border: 2px solid var(--surface);
    animation: pulso-gps 2s infinite;
}
@keyframes pulso-gps {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--data-sin-confirmar) 50%, transparent); }
    70%  { box-shadow: 0 0 0 14px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
/* No solo para #gps-estado: cualquier texto de estado corto (tambien lo usa
   #seleccion-estado) que necesite marcar "salio mal"/"salio bien". */
.gps-error { color: var(--danger); }
.gps-ok { color: var(--ok); }

/* Punto de alguien con alerta SOS activa: rojo, parpadeante, no pasa
   desapercibido entre los puntos azules normales. */
.punto-sos {
    width: 18px;
    height: 18px;
    border-radius: var(--r-pill);
    background: var(--alarma);
    border: 2px solid var(--surface);
    animation: parpadeo-sos 1s infinite;
}
@keyframes parpadeo-sos {
    0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 color-mix(in oklab, var(--alarma) 60%, transparent); }
    50%      { opacity: .55; box-shadow: 0 0 0 10px transparent; }
}
.etiqueta-sos { background: var(--alarma) !important; }

.etiqueta-equipo {
    background: var(--ink) !important;
    color: var(--surface) !important;
    border: none !important;
    border-radius: var(--r-pill);
    padding: 2px 8px !important;
    font-size: var(--fs-xs) !important;
    font-weight: 600;
    box-shadow: none !important;
    white-space: nowrap;
}
.etiqueta-equipo::before { display: none !important; }

/* Llamada normal (verde) vs SOS (rojo): distintos a proposito para que nunca
   se confundan, ni de reojo. */
.btn-llamar-normal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: var(--tap);
    padding: 10px 18px;
    background: var(--ok);
    color: #fff;
    border-radius: var(--r-sm);
    text-decoration: none;
    font-weight: 600;
}
.btn-llamar-normal:hover { background: color-mix(in oklab, var(--ok) 85%, #000); }

.btn-sos {
    position: relative;
    display: block;
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
    min-height: 56px;
    padding: 16px;
    background: var(--alarma);
    color: #fff;
    border: none;
    border-radius: var(--r-md);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    box-shadow: 0 8px 20px -8px color-mix(in oklab, var(--alarma) 70%, transparent);
}
.btn-sos-barra {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .3);
    width: 0%;
    transition: width linear;
}
.btn-sos-texto, #btn-sos-texto { position: relative; z-index: 1; }
.btn-sos:active { filter: brightness(.94); }

/* --------------------------------------------------------------- RESPONSIVE */
@media (max-width: 900px) {
    .content { padding: var(--sp-4) var(--sp-3) var(--sp-8); }
    .grid-stats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* El menu de arriba necesita bastante ancho en una sola fila (marca + hasta
   8 links + selector de grupo + tema + usuario + salir) -- en un iPad vertical
   (~768-834px) ya no cabe y se amontona en 2-3 filas en vez de verse limpio.
   Se colapsa a hamburguesa desde un corte mas ancho que un telefono comun,
   pensado para cubrir tablets en vertical tambien. */
@media (max-width: 1024px) {
    .topbar { row-gap: 8px; }
    .brand { flex: 1; font-size: var(--fs-base); }
    .btn-hamburguesa { display: flex; }
    .selector-grupo { width: 100%; order: 2; }
    .selector-grupo select { flex: 1; max-width: none; }
    .topuser { width: 100%; order: 3; justify-content: space-between; }
    .topnav {
        display: none;
        order: 4;
        width: 100%;
        flex-direction: column;
        gap: 2px;
        border-top: 1px solid var(--line);
        padding-top: 8px;
    }
    .topnav.abierto { display: flex; }
    .topnav a { padding: 12px 10px; }
}

@media (max-width: 640px) {
    form.form-simple { max-width: 100%; }
    dialog { width: 96%; max-height: 88vh; overflow-y: auto; }
}