/* App de la congregación — estilo limpio, de lectura, con pestañas abajo en el celular y menú lateral en la compu. */
:root {
  --bg: #ffffff; --card: #f2f2f4; --tile: #ececef; --bar: #e9e9ec; --input: #fff;
  --text: #111113; --muted: #6b6b73; --line: #dcdce1; --hover: #e6e6ea;
  --accent: var(--ac-l); --accent-2: var(--ac-l2); --accent-soft: var(--ac-ls); --on-accent: #fff;
  --tesoros: #3d7c86; --maestros: #b97f1f; --vida: #93302a; --publico: #4a5f9c; --atalaya: #2f6b5c; --gris: #6b6f7a;
  --servicio: #6b2f6b; --publica: #5b3fb0; --tareas: #2e7d57;
  --ok: #2b7a4b; --ok-soft: #e6f3ea; --warn: #9a6300; --warn-soft: #fbf1df; --err: #b3261e; --err-soft: #fbe9e7;
  --mujer: #9b3d6b; --mujer-soft: #f6e8ef; --amarillo: #f5dd4b;
  --sombra: none; --r: 3px; --rail: 252px; --ancho: 880px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    --bg: #000; --card: #1c1c1e; --tile: #2c2c2e; --bar: #2a2a2c; --input: #2c2c2e;
    --text: #f2f2f4; --muted: #a2a2a9; --line: #3a3a3d; --hover: #333336;
    --accent: var(--ac-d); --accent-2: var(--ac-d2); --accent-soft: var(--ac-ds); --on-accent: #111;
    --tesoros: #64aeb9; --maestros: #dca54a; --vida: #d0665d; --publico: #95a8e2; --atalaya: #5fb39b; --gris: #9a9eaa;
    --servicio: #c27ac2; --publica: #a48bf0; --tareas: #67c08b;
    --ok: #67c08b; --ok-soft: #1c2e23; --warn: #e0a84a; --warn-soft: #33281a; --err: #f08a80; --err-soft: #3a2220;
    --mujer: #e08ab2; --mujer-soft: #3a2430;
    color-scheme: dark;
  }
}
:root[data-theme="oscuro"] {
  --bg: #000; --card: #1c1c1e; --tile: #2c2c2e; --bar: #2a2a2c; --input: #2c2c2e;
  --text: #f2f2f4; --muted: #a2a2a9; --line: #3a3a3d; --hover: #333336;
  --accent: var(--ac-d); --accent-2: var(--ac-d2); --accent-soft: var(--ac-ds); --on-accent: #111;
  --tesoros: #64aeb9; --maestros: #dca54a; --vida: #d0665d; --publico: #95a8e2; --atalaya: #5fb39b; --gris: #9a9eaa;
  --servicio: #c27ac2; --publica: #a48bf0; --tareas: #67c08b;
  --ok: #67c08b; --ok-soft: #1c2e23; --warn: #e0a84a; --warn-soft: #33281a; --err: #f08a80; --err-soft: #3a2220;
  --mujer: #e08ab2; --mujer-soft: #3a2430;
  color-scheme: dark;
}

/* Colores de acento (se eligen en Configuración → Apariencia) */
:root[data-acento="violeta"] { --ac-l: #6a4fa6; --ac-l2: #563c90; --ac-ls: #ece6f7; --ac-d: #b8a4ea; --ac-d2: #cdbdf3; --ac-ds: #352c4a; }
:root[data-acento="azul"] { --ac-l: #2f5f9e; --ac-l2: #244b7e; --ac-ls: #e3ecf7; --ac-d: #8db4ea; --ac-d2: #a9c7f0; --ac-ds: #1f2d42; }
:root[data-acento="turquesa"] { --ac-l: #0d7377; --ac-l2: #0a5c5f; --ac-ls: #dff1f1; --ac-d: #5fc4c4; --ac-d2: #85d4d4; --ac-ds: #173434; }
:root, :root[data-acento="verde"] { --ac-l: #3f7a4a; --ac-l2: #30603a; --ac-ls: #e4f0e6; --ac-d: #8fcb98; --ac-d2: #a9d8b0; --ac-ds: #1d3022; }
:root[data-acento="terracota"] { --ac-l: #b5532f; --ac-l2: #944224; --ac-ls: #f8e7df; --ac-d: #f0a07f; --ac-d2: #f4b69c; --ac-ds: #3a241b; }
:root[data-acento="dorado"] { --ac-l: #946500; --ac-l2: #7a5300; --ac-ls: #f6edd8; --ac-d: #e6bd5c; --ac-d2: #eccb7e; --ac-ds: #352a12; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
a { color: var(--accent); text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
p { margin: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.ic { width: 22px; height: 22px; flex: none; }
.ic.verde { color: var(--ok); width: 18px; height: 18px; vertical-align: middle; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- estructura ---------- */
main { min-height: 100vh; padding-bottom: calc(76px + env(safe-area-inset-bottom)); outline: none; }
.contenido { max-width: var(--ancho); margin: 0 auto; padding: 16px; }
.rail { display: none; }
.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 20; display: flex; background: var(--bar);
  backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px;
  color: var(--muted); font-size: 10px; letter-spacing: -.01em; font-weight: 500; min-width: 0;
}
.tabbar a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tabbar a.on { color: var(--accent); }
.tabbar .ic { width: 25px; height: 25px; }

@media (min-width: 900px) {
  .tabbar { display: none; }
  main { margin-left: var(--rail); padding-bottom: 40px; }
  .rail {
    display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: var(--rail); z-index: 20;
    background: var(--card); border-right: 1px solid var(--line); padding: 18px 12px;
  }
  .rail-marca { display: flex; align-items: center; gap: 10px; padding: 4px 10px 20px; font-weight: 700; font-size: 15px; line-height: 1.2; }
  .rail-marca img { border-radius: 8px; flex: none; }
  .rail nav { display: flex; flex-direction: column; gap: 2px; }
  .rail nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text); font-weight: 500; font-size: 15px; }
  .rail nav a:hover { background: var(--hover); }
  .rail nav a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
  .rail-user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; font-size: 14px; color: var(--muted); }
  .contenido { padding: 24px 32px; }
}

/* ---------- barra superior ---------- */
.barra {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 6px;
  min-height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(10px, calc((100% - var(--ancho)) / 2 + 10px)) 0;
  background: var(--bar); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--line);
}
.barra h1 { flex: 1; font-size: 20px; font-weight: 700; padding-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-acc { display: flex; align-items: center; gap: 6px; }
@media (min-width: 900px) { .barra h1 { font-size: 24px; } }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; min-height: 42px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text);
  font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--hover); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.pri:hover { background: var(--accent-2); }
.btn.peligro { color: var(--err); }
.btn.chico { padding: 6px 12px; min-height: 36px; font-size: 14px; }
.btn.chico .ic { width: 18px; height: 18px; }
.btn.ancho { width: 100%; }
.btn.grande { min-height: 50px; font-size: 16px; }
@media (max-width: 520px) { .barra-acc .btn.chico span:not(:only-child) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* oculto a la vista, pero lo leen los lectores de pantalla */ .barra-acc .btn.chico { padding: 6px 9px; } }
.ib {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%;
  background: transparent; color: var(--text); cursor: pointer;
}
.ib:hover { background: var(--hover); }
.ib.chico { width: 34px; height: 34px; }
.ib.chico .ic { width: 18px; height: 18px; }

/* ---------- textos ---------- */
.kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.sub { color: var(--muted); font-size: 14px; }
.hint { color: var(--muted); font-size: 13.5px; margin: 10px 2px; }
.texto { margin-bottom: 12px; }
.centro { text-align: center; }
.titulo-sec { font-size: 19px; font-weight: 700; margin: 28px 2px 12px; }
.titulo-sec small { color: var(--muted); font-weight: 500; font-size: 14px; }
.titulo-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 28px 2px 12px; }
.titulo-fila .titulo-sec { margin: 0; }
.titulo-fila a { font-weight: 600; font-size: 14px; }
.contenido > .titulo-sec:first-child { margin-top: 8px; }

/* ---------- inicio ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  padding: calc(env(safe-area-inset-top) + 36px) max(20px, calc((100% - var(--ancho)) / 2 + 20px)) 36px;
  background:
    radial-gradient(120% 90% at 85% 10%, rgba(255, 255, 255, .22), transparent 55%),
    radial-gradient(80% 70% at 0% 100%, rgba(20, 30, 70, .45), transparent 60%),
    linear-gradient(155deg, #34467c 0%, #4f65a6 50%, #7d93cc 100%);
}
.hero::after {
  content: ""; position: absolute; inset: auto -10% -60% 30%; height: 120%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .14), transparent); pointer-events: none;
}
.hero .kicker { color: rgba(255, 255, 255, .8); }
.hero h1 { font-size: 34px; font-weight: 700; margin: 2px 0 14px; letter-spacing: -.01em; }
.hero-prox {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; color: #fff;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); font-size: 14.5px; position: relative; z-index: 1;
}
.hero-prox .ic { width: 18px; height: 18px; }
@media (min-width: 900px) { .hero h1 { font-size: 42px; } .hero { padding-top: 56px; padding-bottom: 56px; } }
.banner {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r);
  background: var(--accent); color: var(--on-accent); box-shadow: var(--sombra);
}
.banner span { flex: 1; display: flex; flex-direction: column; }
.banner small { opacity: .85; }
.cartas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.carta {
  display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--r); background: var(--card);
  color: var(--text); box-shadow: var(--sombra); border-top: 4px solid var(--accent); min-height: 128px;
}
.carta h3 { font-size: 17px; flex: 1; }
.carta small { color: var(--muted); }
.carta.tesoros { border-top-color: var(--tesoros); }
.carta.atalaya { border-top-color: var(--atalaya); }
.carta.limpieza { border-top-color: var(--maestros); }
.fecha-cuadro {
  display: flex; flex-direction: column; align-items: center; justify-content: center; width: 46px; height: 50px; flex: none;
  border-radius: 10px; background: var(--accent-soft); color: var(--accent); line-height: 1;
}
.fecha-cuadro b { font-size: 19px; }
.fecha-cuadro small { font-size: 11px; text-transform: uppercase; font-weight: 600; margin-top: 3px; }

/* ---------- tarjetas, listas ---------- */
.tarjeta { background: var(--card); border-radius: var(--r); padding: 16px; box-shadow: var(--sombra); margin-bottom: 14px; }
.tarjeta-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tarjeta-cab h2 { font-size: 19px; }
.tarjeta-tit { font-size: 16px; font-weight: 700; }
.lista { background: var(--card); border-radius: var(--r); overflow: hidden; box-shadow: var(--sombra); }
.item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; background: transparent;
  color: var(--text); text-align: left; cursor: pointer; border-top: 1px solid var(--line);
}
.item:first-child { border-top: 0; }
a.item:hover, button.item:hover { background: var(--hover); }
.item > .ic { color: var(--muted); width: 18px; height: 18px; }
.item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: inherit; }
.item-txt strong { font-weight: 600; }
.item-txt span, .item-txt small { color: var(--muted); font-size: 14px; }
.item-txt small { font-size: 13px; }
.avatar {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 14px;
}
.avatar.m { background: var(--mujer-soft); color: var(--mujer); }
.avatar.grande { width: 64px; height: 64px; font-size: 26px; }
.tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.tag {
  display: inline-block; padding: 1px 6px; border-radius: 6px; font-size: 11.5px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent); margin-right: 3px;
}
.tag.inactivo { background: var(--err-soft); color: var(--err); }
.tag.irregular { background: var(--warn-soft); color: var(--warn); }
.pill { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--hover); color: var(--muted); white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.falta { background: var(--err-soft); color: var(--err); }
.vacio { text-align: center; padding: 44px 20px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vacio > .ic { width: 44px; height: 44px; opacity: .6; }
.vacio h3 { color: var(--text); font-size: 18px; }
.vacio p { max-width: 380px; }
.vacio .btn { margin-top: 6px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 12px; }
.tile {
  display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--r); background: var(--card);
  color: var(--text); box-shadow: var(--sombra); min-height: 136px;
}
.tile:hover { background: var(--hover); }
.tile strong { margin-top: auto; font-size: 15.5px; }
.tile small { color: var(--muted); font-size: 13px; }
.tile-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: #fff; }
.c1 { background: #4a5f9c; } .c2 { background: #7b5ea7; } .c3 { background: #2f7a68; }
.c4 { background: #b0702c; } .c5 { background: #3a72a8; } .c6 { background: #a5453b; }
.fila-link {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; background: var(--card);
  color: var(--text); text-align: left; cursor: pointer; border-top: 1px solid var(--line); font-size: 16px;
}
.fila-link:hover { background: var(--hover); }
.fila-link > span { flex: 1; display: flex; flex-direction: column; }
.fila-link small { color: var(--muted); font-size: 13px; }
.fila-link > .ic:first-child { color: var(--accent); }
.fila-link > .ic:last-child { color: var(--muted); width: 18px; height: 18px; }
.contenido > .fila-link { border-radius: var(--r); margin-top: 18px; border: 0; box-shadow: var(--sombra); }
.grupo-filas { border-radius: var(--r); overflow: hidden; box-shadow: var(--sombra); margin-bottom: 16px; }
.grupo-filas .fila-link:first-child { border-top: 0; }
.perfil { display: flex; align-items: center; gap: 16px; padding: 8px 4px 22px; }
.perfil h2 { font-size: 21px; }
.perfil p { color: var(--muted); }

/* ---------- semana / segmento / chips ---------- */
.semana {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; max-width: var(--ancho); margin: 0 auto; padding: 12px 10px 4px;
}
.semana-txt { display: flex; flex-direction: column; align-items: center; text-align: center; }
.semana-txt strong { font-size: 17px; }
.semana-txt span { color: var(--muted); font-size: 13px; }
.segmento {
  display: flex; gap: 4px; max-width: var(--ancho); margin: 8px auto 0; padding: 0 16px; border-bottom: 1px solid var(--line);
}
.segmento a {
  flex: 1; text-align: center; padding: 10px 6px; color: var(--muted); font-weight: 600; font-size: 14.5px;
  border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.segmento a.on { color: var(--accent); border-bottom-color: var(--accent); }
@media (min-width: 900px) { .segmento { padding: 0 32px; } .segmento a { flex: 0 0 auto; padding: 10px 18px; } }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips a {
  flex: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card);
  color: var(--text); font-size: 14px; font-weight: 500;
}
.chips a b { color: var(--muted); font-weight: 600; margin-left: 2px; }
.chips a.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chips a.on b { color: inherit; opacity: .8; }
.buscador { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); margin-bottom: 12px; }
.buscador .ic { color: var(--muted); width: 19px; height: 19px; }
.buscador input { flex: 1; border: 0; background: transparent; padding: 11px 0; font-size: 16px; color: var(--text); outline: none; }
.progreso { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin: 4px 2px 6px; }
.progreso span { display: block; height: 100%; background: var(--ok); border-radius: 99px; }

/* ---------- programa de reuniones ---------- */
.prog { background: var(--card); border-radius: var(--r); overflow: hidden; box-shadow: var(--sombra); }
.prog-cab { padding: 18px 16px 14px; }
.prog-cab h2 { font-size: 20px; text-transform: none; }
.prog-cab h2::first-letter { text-transform: uppercase; }
.lect { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 700; letter-spacing: .02em; }
.lect .ic { color: var(--muted); width: 19px; height: 19px; }
.sec {
  margin: 0; padding: 9px 16px; font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: #fff; background: var(--gris);
}
.sec.tesoros { background: var(--tesoros); } .sec.maestros { background: var(--maestros); } .sec.vida { background: var(--vida); }
.sec.publico { background: var(--publico); } .sec.atalaya { background: var(--atalaya); } .sec.limpieza { background: var(--maestros); }
:root[data-theme="oscuro"] .sec { color: #111; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="claro"]) .sec { color: #111; } }
.filas { list-style: none; margin: 0; padding: 0; }
.filas li {
  display: grid; grid-template-columns: 50px 1fr; column-gap: 8px; row-gap: 2px; padding: 11px 16px 11px 10px;
  border-top: 1px solid var(--line); align-items: start;
}
.filas li:first-child { border-top: 0; }
.filas .h { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; padding-top: 2px; text-align: right; padding-right: 4px; }
.filas .h .ic { width: 18px; height: 18px; }
.filas .t small { color: var(--muted); }
.filas .n { grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.filas .n em { font-style: normal; color: var(--muted); font-size: 13px; }
@media (min-width: 620px) {
  .filas li { grid-template-columns: 56px 1fr minmax(170px, 38%); }
  .filas .n { grid-column: auto; text-align: right; align-items: flex-end; }
}
.nom { color: var(--accent); font-weight: 600; }
.nom.yo { background: var(--accent); color: var(--on-accent); padding: 1px 8px; border-radius: 6px; }
.nom.falta { color: var(--muted); font-weight: 400; }
.ayu { color: var(--muted); font-size: 14px; display: block; }
.ayu .nom { color: var(--muted); }
.salab { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.salab em { font-style: normal; font-weight: 600; }
.nota-reu { display: flex; gap: 10px; align-items: center; margin: 0 16px 14px; padding: 12px 14px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.filas li.agregar { display: block; padding: 10px 16px; }
.filas li.parte-ed { grid-template-columns: 50px 1fr; }
.pe { display: flex; flex-direction: column; gap: 8px; grid-column: 2 / -1; min-width: 0; }
.pe-1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pe-1 > input.ancho { flex: 1 1 220px; }
.pe-1 select { flex: 0 1 200px; }
.pe-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; align-items: end; }
.pe-2 label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.fila-ed { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.fila-ed .ancho { flex: 1 1 260px; }
.prog input, .prog select { font-size: 15px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--input); color: var(--text); min-width: 0; }
.prog input.num { width: 58px; text-align: center; padding: 7px 4px; }
select.slot { width: 100%; }
select.slot.vacio { color: var(--muted); border-style: dashed; }
.prog .t input.num { margin: 0 4px; }
.deb-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .deb-grid { grid-template-columns: 1fr 1fr; } .deb-col + .deb-col { border-left: 1px solid var(--line); } }
.filas li.deb { grid-template-columns: 110px 1fr; padding-left: 16px; }
.filas li.deb .n { grid-column: 2; text-align: left; align-items: stretch; gap: 6px; }
.filas li.deb .n .nom { display: block; }
.tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.deberes { width: 100%; border-collapse: collapse; }
.deberes th, .deberes td { padding: 10px 12px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.deberes thead th { border-top: 0; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.deberes thead th small { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; }
.deberes tbody th { font-weight: 600; width: 120px; font-size: 14.5px; }
.deberes td { min-width: 170px; }
.deberes td .nom { display: block; }
.deberes td select { margin-bottom: 4px; }

/* ---------- tablas ---------- */
.tabla { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabla th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 8px; font-weight: 700; }
.tabla th small { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; }
.tabla td { padding: 9px 8px; border-top: 1px solid var(--line); text-transform: capitalize; }
.tabla td.notas { text-transform: none; color: var(--muted); font-size: 13px; max-width: 220px; }
.tabla tr.total td { font-weight: 700; }
.tabla .falta { color: var(--err); font-size: 13px; text-transform: none; }
.tabla.totales td:not(:first-child), .tabla.totales th:not(:first-child) { text-align: center; }
.tabla.asist td small { display: block; color: var(--muted); font-size: 12px; text-transform: none; }
.tabla.asist input { width: 84px; padding: 7px 8px; font-size: 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--input); color: var(--text); transition: border-color .3s; }
.tabla.asist input.guardado { border-color: var(--ok); }
.tabla.asist .tot { font-weight: 700; }
details.tarjeta > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
details.tarjeta > summary::-webkit-details-marker { display: none; }
details.tarjeta > summary h2 { font-size: 17px; text-transform: capitalize; }
details.tarjeta > summary .ic { transition: transform .2s; color: var(--muted); }
details.tarjeta[open] > summary .ic { transform: rotate(90deg); }
details.tarjeta[open] > summary { margin-bottom: 10px; }

/* ---------- territorios, grupos, anuncios ---------- */
.num-terr {
  display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 6px; border-radius: 10px; border: 0; flex: none;
  background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 16px; cursor: pointer;
}
.historial { list-style: none; padding: 0; margin: 0; }
.historial li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.historial li span { color: var(--muted); }
.grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.grupos .tarjeta { margin: 0; }
.miembros { list-style: none; padding: 0; margin: 0; }
.miembros li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.miembros li small { color: var(--accent); font-weight: 600; font-size: 12px; }
.miembros li.sup { font-weight: 600; }
.avisos { display: grid; gap: 10px; }
.aviso { background: var(--card); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--sombra); border-left: 4px solid transparent; }
.aviso.imp { border-left-color: var(--accent); }
.aviso-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.aviso h3 { font-size: 16px; }
.aviso p { margin: 6px 0; }
.aviso small { color: var(--muted); font-size: 13px; }
.avisos.viejos { opacity: .65; }
.informe .estado { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; margin-bottom: 14px; font-size: 14px; }
.estado.ok { background: var(--ok-soft); color: var(--ok); }
.estado .ic { width: 18px; height: 18px; }
.mes-sel { font-size: 15px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--input); color: var(--text); text-transform: capitalize; }

/* ---------- formularios ---------- */
.stack { display: flex; flex-direction: column; gap: 14px; }
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f > span { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.f input, .f select, .f textarea, fieldset select {
  width: 100%; font: inherit; font-size: 16px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--input); color: var(--text);
}
.f textarea { resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.grid2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 520px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.chk { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.chk input, .radio input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; margin: 0; }
.chks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 8px; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 700; font-size: 14px; padding: 0; }
.opciones { display: flex; flex-direction: column; }
.radio { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-top: 1px solid var(--line); cursor: pointer; }
.radio:first-child { border-top: 0; }
.interruptor { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 500; }
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor .sw { position: relative; width: 50px; height: 30px; flex: none; border-radius: 99px; background: var(--line); transition: background .2s; }
.interruptor .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.interruptor input:checked + .sw { background: var(--ok); }
.interruptor input:checked + .sw::after { transform: translateX(20px); }
.interruptor input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.botones { display: flex; justify-content: flex-end; gap: 10px; }
.clave-2fa { font: 600 19px/1.4 ui-monospace, Menlo, monospace; letter-spacing: .05em; text-align: center; padding: 12px; border-radius: 10px; background: var(--hover); user-select: all; }

/* ---------- hoja (ventana) ---------- */
dialog#hoja {
  padding: 0; border: 0; background: var(--card); color: var(--text); width: 100%; max-width: 100%;
  margin: auto 0 0; max-height: 92vh; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .2);
}
dialog#hoja[open] { animation: subir .22s ease-out; }
dialog#hoja::backdrop { background: rgba(0, 0, 0, .42); }
@keyframes subir { from { transform: translateY(30px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) {
  dialog#hoja { margin: auto; width: min(580px, calc(100% - 32px)); border-radius: 16px; max-height: 86vh; }
}
.hoja { display: flex; flex-direction: column; max-height: inherit; }
.hoja > header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.hoja > header h2 { flex: 1; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoja-cuerpo { padding: 18px 16px calc(22px + env(safe-area-inset-bottom)); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }

/* ---------- avisos flotantes ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 60;
  max-width: calc(100% - 32px); padding: 11px 18px; border-radius: 12px; background: #222; color: #fff; font-size: 15px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
.toast.si { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--err); }
@media (min-width: 900px) { .toast { bottom: 28px; left: calc(50% + var(--rail) / 2); } }
.cargando { display: grid; place-items: center; min-height: 70vh; }
.cargando span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- ingreso ---------- */
body.login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; background: var(--bg); padding: 0 0 32px; }
.login-portada { width: 100%; height: 34vh; min-height: 200px; max-height: 340px; background: radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.28), transparent 50%), radial-gradient(90% 90% at 0% 100%, rgba(0,0,0,.35), transparent 60%), linear-gradient(135deg, var(--ac-l2), var(--accent) 55%, var(--ac-d)); }
.login-wrap { width: 100%; max-width: 420px; padding: 0 16px; margin-top: -64px; position: relative; }
.login-card { display: flex; flex-direction: column; gap: 18px; padding: 26px 20px; border-radius: 6px; background: var(--card); box-shadow: 0 10px 40px rgba(0, 0, 0, .12); }
.login-logo { align-self: center; border-radius: 16px; margin-top: -60px; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
.login-card h1 { font-size: 26px; }
.login-err { color: var(--err); background: var(--err-soft); padding: 10px 12px; border-radius: 4px; font-size: 14px; }
.clave-wrap { position: relative; display: block; }
.clave-wrap input { padding-right: 84px; }
.ver-clave { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--accent); font-weight: 600; font-size: 14px; padding: 8px; cursor: pointer; }
.recordar { font-size: 15px; }

/* ---------- impresión ---------- */
#print { display: none; }
@media print {
  @page { margin: 12mm; }
  body { background: #fff !important; color: #000 !important; }
  body > *:not(#print) { display: none !important; }
  #print { display: block; }
  .pr { font: 10.5pt/1.35 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #000; }
  .pr-cab { border-bottom: 2px solid #000; margin-bottom: 10px; padding-bottom: 6px; }
  .pr-cab h1 { font-size: 15pt; }
  .pr-cab h2 { font-size: 11pt; font-weight: 600; text-transform: none; }
  .pr-sem { break-inside: avoid; margin-bottom: 14px; }
  .pr-sem h3 { font-size: 11pt; border-bottom: 1px solid #000; padding: 4px 0; margin-bottom: 4px; text-transform: capitalize; }
  .pr-sem h3 span { float: right; font-weight: 700; }
  .pr table { width: 100%; border-collapse: collapse; }
  .pr td, .pr th { padding: 3px 6px; vertical-align: top; text-align: left; }
  .pr-sem td:last-child { width: 42%; font-weight: 600; }
  .pr-sec td { color: #fff; font-weight: 700; font-size: 9pt; text-transform: uppercase; letter-spacing: .05em; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pr-sec.tesoros td { background: #3d7c86; } .pr-sec.maestros td { background: #b97f1f; } .pr-sec.vida td { background: #93302a; }
  .pr-tabla th, .pr-tabla td { border: 1px solid #999; font-size: 9.5pt; }
  .pr-tabla th { background: #eee; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pr-tabla td.c { text-align: center; }
  .pr-tabla small { color: #444; }
  .s13 th, .s13 td { font-size: 8pt; padding: 2px 3px; }
  .s21 h1 { font-size: 14pt; text-align: center; text-transform: uppercase; margin-bottom: 12px; }
  .s21-datos p { margin: 5px 0; }
  .cuadro { display: inline-block; width: 12px; height: 12px; border: 1px solid #000; text-align: center; line-height: 11px; font-size: 9pt; margin: 0 2px 0 8px; vertical-align: -1px; }
  .s21 .pr-tabla { margin-top: 12px; }
  .pr-nota { font-style: italic; }
}

/* =====================================================================
   Estilo JW Library: barra gris con título centrado, acento lavanda,
   bloques cuadrados, pestañas en mayúsculas.
   ===================================================================== */
.ic { stroke-width: 1.6; }
.barra {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 6px;
  background: var(--bar); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--line);
}
.barra > .ib:first-child { grid-column: 1; grid-row: 1; justify-self: start; color: var(--accent); }
.barra h1 { grid-column: 2; grid-row: 1; text-align: center; font-size: 17px; font-weight: 600; padding: 0; max-width: 62vw; }
.barra .barra-acc { grid-column: 3; grid-row: 1; justify-self: end; }
.barra .barra-acc .ib { color: var(--accent); }
@media (min-width: 900px) { .barra h1 { font-size: 19px; } }
.tabbar { background: var(--bar); backdrop-filter: none; -webkit-backdrop-filter: none; }
.tabbar a { color: var(--text); font-size: 10px; letter-spacing: -.03em; gap: 3px; padding: 9px 0 6px; }
.tabbar a span { overflow: visible; text-overflow: clip; }
.tabbar a.on { color: var(--accent); }
.tabbar .ic { width: 26px; height: 26px; stroke-width: 1.4; }
.rail { background: var(--bar); }
.rail nav a.on { background: var(--accent-soft); color: var(--accent); }
.rail-user { padding: 0; }
.rail-conf { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--muted); width: 100%; border-radius: 6px; }
.rail-conf:hover { background: var(--hover); }
.segmento { border-bottom: 1px solid var(--line); gap: 0; padding: 0; max-width: none; background: var(--bg); overflow-x: auto; scrollbar-width: none; }
.segmento::-webkit-scrollbar { display: none; }
.segmento a { text-transform: uppercase; letter-spacing: 0; color: var(--text); font-weight: 500; font-size: 12.5px; padding: 13px 8px; flex: 1 0 auto; }
@media (min-width: 420px) { .segmento a { font-size: 14px; padding: 13px 14px; letter-spacing: .02em; } }
.segmento a.on { color: var(--accent); font-weight: 700; border-bottom-color: var(--accent); }
@media (min-width: 900px) { .segmento { padding: 0 max(16px, calc((100% - var(--ancho)) / 2)); } .segmento a { flex: 0 0 auto; } }
.semana { padding-top: 14px; }
.semana .ib { color: var(--accent); }
.semana-txt strong { color: var(--accent); font-weight: 500; font-size: 18px; }
.titulo-sec { font-size: 22px; font-weight: 700; }
.lista, .grupo-filas, .prog, .tarjeta, .tile, .carta, .aviso, details.tarjeta { border-radius: var(--r); box-shadow: none; }
.lista { background: transparent; display: flex; flex-direction: column; gap: 4px; }
.item { background: var(--tile); border-top: 0; }
.grupo-filas { display: flex; flex-direction: column; gap: 4px; }
.fila-link { background: var(--tile); border-top: 0; }
.fila-link > .ic:first-child { color: var(--accent); }
.tarjeta, .prog, .aviso { background: var(--card); }
.btn { border-radius: 4px; }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chips a { border-radius: 4px; }
.cap { display: inline-block; }
.cap::first-letter { text-transform: uppercase; }
h2.cap, b.cap, strong.cap { display: block; }

/* franja del día (como el texto diario de JW Library) */
.dia { background: var(--card); border-bottom: 1px solid var(--line); padding: 20px 16px 22px; text-align: center; }
.dia-fecha { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); font-size: 24px; font-weight: 700; }
.dia-fecha .ic { width: 28px; height: 28px; }
.dia-fecha .ic:last-child { width: 20px; height: 20px; }
.dia p { margin-top: 8px; font-size: 16px; }
.dia p a { color: var(--accent); }

/* tablero de inicio */
.tablero { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.panel { display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--tile); color: var(--text); border-radius: var(--r); min-width: 0; }
.panel.ancho { margin-bottom: 8px; padding: 14px 14px 6px; }
.panel h2 { font-size: 19px; font-weight: 700; }
.panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.redondo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); flex: none; }
.redondo .ic { width: 20px; height: 20px; stroke-width: 2.2; }
.contador { min-width: 28px; padding: 2px 8px; text-align: center; border-radius: 4px; background: var(--amarillo); color: #222; font-weight: 700; }
.panel-mes { font-weight: 700; font-size: 15px; margin-top: 4px; }
.cifras { display: flex; gap: 6px; justify-content: space-around; text-align: center; margin: 4px 0 12px; }
.cifras > div { display: flex; flex-direction: column; align-items: center; flex: 1; }
.cifras b { font-size: 30px; font-weight: 600; color: var(--accent); line-height: 1.1; }
.cifras small { color: var(--muted); font-size: 12.5px; }
.cifras.mini { margin: 0; justify-content: flex-start; gap: 14px; }
.cifras.mini > div { flex: 0 0 auto; }
.cifras.mini b { font-size: 20px; color: var(--text); }
.estado-informe { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: 2px solid var(--accent); border-radius: 4px; color: var(--accent); font-weight: 600; margin-top: 4px; }
.estado-informe.falta { background: var(--accent); color: var(--on-accent); }
.estado-informe .ic { width: 20px; height: 20px; stroke-width: 2.4; }
.mini-asig { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-top: 1px solid var(--line); }
.mini-asig:first-of-type { border-top: 0; }
.mini-asig .ic { color: var(--accent); margin-top: 2px; }
.mini-asig span { display: flex; flex-direction: column; min-width: 0; }
.mini-asig b { font-weight: 500; font-size: 14.5px; }
.mini-asig small { color: var(--muted); font-size: 12.5px; }
.panel-fila { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); color: var(--text); font-size: 16px; }
.panel h2 + .panel-fila { border-top: 0; }
.panel-fila > span { flex: 1; display: flex; flex-direction: column; }
.panel-fila small { color: var(--muted); font-size: 13px; }
.panel-fila b { color: var(--accent); font-weight: 600; }
.panel-fila > .ic:first-child { color: var(--accent); }
.panel-fila > .ic:last-child { color: var(--muted); width: 18px; }
.c-anuncios .panel-fila > .ic:first-child { color: var(--vida); }
.c-eventos .panel-fila > .ic:first-child { color: var(--maestros); }
.banner { border-radius: var(--r); box-shadow: none; margin-bottom: 8px; width: 100%; border: 0; text-align: left; cursor: pointer; font: inherit; }

/* programas */
.programa { background: var(--tile); border-radius: var(--r); margin-bottom: 10px; border-left: 4px solid var(--accent); overflow: hidden; }
.programa h2 { font-size: 18px; font-weight: 700; padding: 14px 14px 6px; }
.c-vida { border-left-color: var(--vida); } .c-fin { border-left-color: var(--publico); } .c-servicio { border-left-color: var(--servicio); }
.c-publica { border-left-color: var(--publica); } .c-tareas { border-left-color: var(--tareas); }
.prog-fila { display: flex; align-items: center; gap: 8px; padding: 12px 14px; color: var(--text); border-top: 1px solid var(--line); font-size: 16px; }
.prog-fila > span:first-child { flex: 1; }
.prog-fila small { color: var(--muted); }
.prog-fila > .ic { color: var(--muted); width: 18px; height: 18px; }
.marcas { display: flex; gap: 4px; }
.marca { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.marca.grupo { background: var(--warn-soft); color: var(--warn); }
.marca .ic { width: 17px; height: 17px; }
.mas-menos { display: block; width: 100%; border: 0; background: transparent; color: var(--accent); padding: 4px 0 8px; cursor: pointer; }
.mas-menos .ic { margin: 0 auto; display: block; }

/* asignaciones y tareas */
.asigs { display: flex; flex-direction: column; gap: 8px; }
.asig { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--tile); border-radius: var(--r); color: var(--text); border-left: 4px solid var(--accent); }
.asig > .ic:first-child { width: 30px; height: 30px; color: var(--accent); }
.asig .item-txt strong { font-size: 17px; font-weight: 500; }
.grupal { color: var(--accent); }
.grupal .ic { width: 26px; height: 26px; }

/* actividad de predicación */
.stepper { display: inline-flex; gap: 6px; margin-top: 4px; }
.stepper .ib { background: var(--accent-soft); color: var(--accent); font-size: 18px; font-weight: 700; }
.registros { list-style: none; padding: 0; margin: 0 0 14px; }
.registros li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.registros li > span:first-child { flex: 1; font-weight: 500; }
.registros li > span:nth-child(2) { display: flex; flex-direction: column; align-items: flex-end; color: var(--accent); font-weight: 600; }
.registros small { color: var(--muted); font-weight: 400; }
.pill .ic { width: 15px; height: 15px; vertical-align: -3px; }
.sec.servicio { background: var(--servicio); } .sec.publica { background: var(--publica); }
.lista.viejos { opacity: .6; }
.item-chk { padding: 8px 10px; background: var(--tile); border-radius: var(--r); }
@media (max-width: 360px) { .tablero { grid-template-columns: 1fr; } }
.colores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.color-op { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: var(--r); background: var(--tile); cursor: pointer; font-size: 14px; border: 2px solid transparent; }
.color-op input { position: absolute; opacity: 0; pointer-events: none; }
.color-op:has(input:checked) { border-color: var(--text); }
.muestra { width: 34px; height: 34px; border-radius: 50%; }

/* ---------- inicio con imagen ---------- */
.hero-img { position: relative; height: 230px; background-size: cover; background-position: center; display: flex; align-items: flex-end; }
.hero-img-txt { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 16px 18px; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.hero-img-txt p { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .95; }
.hero-img-txt h1 { font-size: 34px; font-weight: 700; margin: 2px 0 4px; }
.hero-img-txt span { font-size: 15px; opacity: .95; }
@media (min-width: 900px) { .hero-img { height: 300px; } .hero-img-txt { padding: 0 32px 26px; } .hero-img-txt h1 { font-size: 42px; } }

/* ---------- eventos (estilo tarjeta con ícono) ---------- */
.panel h2 .ic { width: 20px; height: 20px; vertical-align: -3px; color: var(--muted); margin-right: 4px; }
.evento { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); color: var(--text); width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; font: inherit; cursor: pointer; }
.panel h2 + .evento, .eventos .evento:first-child { border-top: 0; }
.evento-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.evento-ic .ic { width: 26px; height: 26px; }
.evento > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.evento small { color: var(--muted); font-size: 13.5px; }
.evento b { color: var(--accent); font-weight: 500; font-size: 17px; line-height: 1.25; }
.ver-mas { display: block; padding: 10px 0 6px; color: var(--accent); font-weight: 500; }
.eventos.viejos { opacity: .6; }

/* ---------- detalle y datos ---------- */
.detalle { margin: 0 0 6px; display: grid; gap: 4px; }
.detalle dt { font-weight: 700; font-size: 15px; margin-top: 8px; }
.detalle dd { margin: 0; font-size: 17px; }
.detalle .rojo { color: var(--err); font-weight: 600; }
.asig { width: 100%; border-top: 0; border-right: 0; border-bottom: 0; text-align: left; font: inherit; cursor: pointer; }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0 0 12px; }
.datos.uno { grid-template-columns: 1fr; }
.dato dt { color: var(--muted); font-size: 13.5px; }
.dato dd { margin: 2px 0 0; font-size: 17px; overflow-wrap: anywhere; }
.acciones-txt { display: flex; gap: 22px; }
.lnk { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--accent); font-weight: 600; font-size: 16px; padding: 4px 0; cursor: pointer; }
.ausencia.pasada { opacity: .6; }
.solicitud h2 { font-size: 18px; text-transform: uppercase; letter-spacing: .02em; }
.botones.izq { justify-content: flex-start; flex-wrap: wrap; }
.portada-prev { height: 150px; border-radius: var(--r); background-size: cover; background-position: center; }
.ancho-sel { width: 100%; margin-bottom: 12px; padding: 11px 12px; font-size: 16px; }
.tabla.hist td { text-transform: none; }
.tabla.hist tr.total td { border-top: 2px solid var(--line); }

/* ---------- actividad: calendario y pasos ---------- */
.calendario { padding: 12px 10px; }
.cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-cab strong { color: var(--accent); font-size: 20px; font-weight: 500; }
.cal-cab .ib { color: var(--accent); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-dia-nom { font-size: 13px; color: var(--muted); padding: 4px 0; }
.dia-cal { aspect-ratio: 1; max-height: 52px; width: 100%; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--accent); font-size: 17px; cursor: pointer; position: relative; }
.dia-cal:disabled { color: var(--muted); opacity: .5; cursor: default; }
.dia-cal.fuera { color: var(--muted); opacity: .45; }
.dia-cal.hoy { font-weight: 700; }
.dia-cal.con::after { content: ""; position: absolute; bottom: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.dia-cal.sel { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.dia-cal.sel::after { background: var(--on-accent); }
.pasos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.paso { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.paso-lbl { color: var(--muted); font-size: 14px; }
.paso input { width: 100%; max-width: 140px; text-align: center; font-size: 22px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--input); color: var(--text); }
.paso small { color: var(--muted); }
.redondo-sm { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--accent); background: none; color: var(--accent); cursor: pointer; }
.redondo-sm:disabled { opacity: .35; cursor: default; }
.cifras > div > small:first-child { margin-bottom: 2px; }

/* ---------- territorio ---------- */
.terr-cab h2 { font-size: 44px; font-weight: 700; }
.terr-cab p { font-size: 20px; color: var(--muted); margin-bottom: 14px; }
.terr .btn.grande { margin-bottom: 12px; }
.barra-avance { position: relative; height: 34px; border-radius: 6px; background: var(--hover); overflow: hidden; margin-top: 10px; }
.barra-avance span { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.barra-avance b { position: relative; display: grid; place-items: center; height: 100%; font-size: 17px; font-weight: 500; }
.dirs { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dir { background: var(--tile); border-radius: var(--r); }
.dir-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; background: none; color: var(--text); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.dir-btn > .ic { color: var(--accent); }
.dir-btn span { flex: 1; }
.dir-btn small { font-weight: 600; font-size: 13px; }
.dir.e-casa .dir-btn > .ic, .dir.e-casa small { color: var(--ok); }
.dir.e-nocasa .dir-btn > .ic, .dir.e-nocasa small { color: var(--warn); }
.dir.e-novisitar .dir-btn > .ic, .dir.e-novisitar small { color: var(--err); }
.dir-estados { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 10px 12px; }
.dir-estados .btn { white-space: normal; font-size: 13.5px; }
.btn.ok { color: var(--ok); border-color: var(--ok); } .btn.warn { color: var(--warn); border-color: var(--warn); } .btn.err { color: var(--err); border-color: var(--err); }
.btn.ok.on { background: var(--ok); color: #fff; } .btn.warn.on { background: var(--warn); color: #fff; } .btn.err.on { background: var(--err); color: #fff; }
.titulo-fila a { white-space: nowrap; }

/* ---------- mapas ---------- */
.mapa-wrap { position: relative; }
.mapa-full { height: calc(100vh - 56px - 46px - 70px - env(safe-area-inset-bottom) - env(safe-area-inset-top)); min-height: 360px; }
@media (min-width: 900px) { .mapa-full { height: calc(100vh - 110px); } }
.mapa-ed { height: 58vh; min-height: 320px; }
.mapa-prev-wrap { position: relative; margin-bottom: 12px; }
.mapa-prev { height: 260px; border-radius: var(--r); overflow: hidden; }
.mover-btn { position: absolute; right: 10px; bottom: 10px; z-index: 500; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.leaflet-container { background: var(--card); font: inherit; }
.leyenda { position: absolute; left: 10px; bottom: 22px; z-index: 500; display: flex; flex-wrap: wrap; gap: 4px 10px; max-width: calc(100% - 20px); padding: 6px 10px; border-radius: 6px; background: var(--card); color: var(--text); font-size: 12.5px; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.leyenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.leyenda i.mio { background: var(--accent); }
.mapa-aviso { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 500; padding: 10px 12px; border-radius: 6px; background: var(--card); color: var(--text); font-size: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.mapa-ayuda { padding: 8px 16px; font-size: 13.5px; color: var(--muted); background: var(--card); border-bottom: 1px solid var(--line); }
.etq-terr { background: rgba(255, 255, 255, .9); border: 0; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); font-weight: 800; font-size: 13px; padding: 1px 6px; color: #111; }
.etq-terr::before { display: none; }
.leaflet-popup-content { font: 14px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif; }
.leaflet-popup-content .btn { margin-top: 8px; }
.casa-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); color: #fff; }
.casa-ic .ic { width: 16px; height: 16px; stroke-width: 2; }
.casa-ic.sel { outline: 3px solid #f5dd4b; }
.vertice { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); color: #111; font-size: 10px; font-weight: 700; }
.fila-form { display: flex; gap: 8px; margin-bottom: 10px; }
.fila-form input { flex: 1; min-width: 0; font-size: 16px; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--input); color: var(--text); }
.ed-dirs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ed-dir { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--tile); border-radius: var(--r); }
.ed-dir.sel { outline: 2px solid var(--accent); }
.ed-dir-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ed-dir-txt small { color: var(--muted); }
.punto { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--accent); }
.punto.man { background: #d9922e; } .punto.sin { background: transparent; border: 2px dashed var(--muted); }
.mosaico-oscuro { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6); }
.etq-otro { display: inline-block; padding: 0 5px; border-radius: 3px; background: rgba(120, 120, 120, .85); color: #fff; font-size: 11px; font-weight: 700; }
.leaflet-interactive { cursor: pointer; }
/* ---------- Zoom ---------- */
.c-zoom { border-left-color: #2d8cff; }
.zoom h2 { display: flex; align-items: center; gap: 8px; }
.zoom h2 .ic { color: #2d8cff; width: 24px; height: 24px; }
.zoom-cuerpo { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.zoom .btn.pri { background: #2d8cff; border-color: #2d8cff; color: #fff; }
.zoom-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; margin: 0; }
.zoom-datos dt { color: var(--muted); font-size: 13px; }
.zoom-datos dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.zoom-datos dd a { color: var(--accent); }
.prog + .zoom { margin-top: 12px; }
.zoom-datos dd { white-space: nowrap; }
.zoom-datos dd.horarios { flex-direction: column; align-items: flex-start; font-size: 15.5px; }
/* ---------- franjas destacadas (como los avisos de jw.org) ---------- */
.franja { display: flex; align-items: center; gap: 4px; padding: 0 6px 0 0; color: #fff; }
.franja.f-urgente { background: #b3261e; }
.franja.f-novedad { background: var(--accent); color: var(--on-accent); }
.franja-txt { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 8px 12px 16px; border: 0; background: none; color: inherit; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.franja-txt span { flex: 1; min-width: 0; }
.franja-txt > .ic:last-child { width: 18px; height: 18px; opacity: .85; }
.franja .ib { color: inherit; }
.franja .ib:hover { background: rgba(255, 255, 255, .15); }
.franja + .franja { border-top: 1px solid rgba(255, 255, 255, .25); }
@media (min-width: 900px) { .franja-txt { padding-left: max(16px, calc((100% - var(--ancho)) / 2)); } }
.etq-banner { display: inline-block; margin-bottom: 6px; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--accent); color: var(--on-accent); }
.aviso.b-urgente .etq-banner { background: #b3261e; color: #fff; }
.aviso.b-urgente { border-left-color: #b3261e; }
/* ---------- portadas ---------- */
.hero-img.degrade { height: 200px; }
.hero-img.sin-img { height: auto; background: var(--card); border-bottom: 1px solid var(--line); }
.hero-img.sin-img .hero-img-txt { color: var(--text); text-shadow: none; text-align: center; padding-top: 22px; }
.hero-img.sin-img .hero-img-txt p { color: var(--muted); }
.hero-img.sin-img .hero-img-txt > span:last-child { color: var(--accent); font-weight: 600; font-size: 19px; }
.hero-frase { display: block; font-size: 16px; margin-bottom: 4px; opacity: .95; }
.portadas-op { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.portada-op { display: flex; flex-direction: column; gap: 4px; font-size: 13px; text-align: center; cursor: pointer; }
.portada-op input { position: absolute; opacity: 0; pointer-events: none; }
.portada-mini { display: grid; place-items: center; height: 60px; border-radius: 6px; background-size: cover; background-position: center; border: 3px solid transparent; color: var(--muted); background-color: var(--hover); }
.portada-mini.sin-img { background: var(--card); border-color: var(--line); }
.portada-op:has(input:checked) .portada-mini { border-color: var(--text); }
/* ---------- pantalla de carga ---------- */
#carga { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; background: var(--bg); transition: opacity .4s; }
#carga.fuera { opacity: 0; pointer-events: none; }
#carga img { width: 112px; height: 112px; border-radius: 26px; box-shadow: 0 8px 30px rgba(0, 0, 0, .25); }
.barra-carga { width: 180px; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.barra-carga span { display: block; width: 8%; height: 100%; background: var(--accent); border-radius: 4px; transition: width .35s ease; }
#carga p { color: var(--muted); font-size: 13px; margin-top: -12px; }
.sin-conexion { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 12px; background: #5b5b60; color: #fff; font-size: 13.5px; }
.sin-conexion .ic { width: 18px; height: 18px; }
@media (min-width: 900px) { .sin-conexion { margin-left: var(--rail); } }
/* ---------- tablero electrónico (hojas de 1920×1080 que se exportan al doble: 4K) ---------- */
.tb-prev { margin: 18px 0; }
.tb-prev-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.tb-marco { position: relative; overflow: hidden; border-radius: 4px; box-shadow: 0 2px 12px rgba(0, 0, 0, .2); }
.tb-escala { width: 1920px; height: 1080px; transform-origin: 0 0; }
.tb-render { position: fixed; left: -99999px; top: 0; width: 1920px; height: 1080px; }
.tb-hoja { width: 1920px; height: 1080px; display: flex; flex-direction: column; background: #fff; color: #1b1b1f; font: 30px/1.35 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow: hidden; }
.tb-cab { display: flex; align-items: center; gap: 22px; padding: 26px 56px; background: #3f7a4a; color: #fff; }
.tb-cab img { width: 76px; height: 76px; border-radius: 18px; background: #fff; }
.tb-cab div { flex: 1; display: flex; flex-direction: column; }
.tb-cab b { font-size: 38px; }
.tb-cab span { font-size: 28px; opacity: .9; }
.tb-cab em { font-style: normal; font-size: 26px; opacity: .9; }
.tb-tit { margin: 30px 56px 10px; font-size: 56px; line-height: 1.1; }
.tb-tit small { display: block; font-size: 26px; text-transform: uppercase; letter-spacing: .08em; color: #6b6b73; margin-bottom: 6px; }
.tb-cuerpo { flex: 1; padding: 16px 56px; overflow: hidden; }
.tb-pie { display: flex; justify-content: space-between; padding: 18px 56px; border-top: 3px solid #e3e3e8; color: #555; font-size: 24px; }
.tb-pie span:first-child { font-weight: 700; color: #3f7a4a; }
.tb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.tb-col h3 { font-size: 34px; margin-bottom: 10px; display: flex; justify-content: space-between; gap: 20px; }
.tb-col h3::first-letter { text-transform: uppercase; }
.tb-col h3 span { font-size: 26px; color: #6b6b73; text-transform: uppercase; }
.tb-col table, .tb-tabla { width: 100%; border-collapse: collapse; font-size: 25px; }
.tb-col td { padding: 6px 8px; border-bottom: 1px solid #ececf0; vertical-align: top; }
.tb-col td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.tb-col td i { color: #777; font-style: normal; font-size: 21px; }
.tb-sec td { color: #fff; font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: .06em; text-align: left !important; }
.tb-sec.tesoros td { background: #3d7c86; } .tb-sec.maestros td { background: #b97f1f; } .tb-sec.vida td { background: #93302a; }
.tb-tabla th { text-align: left; background: #f2f2f5; padding: 14px 16px; font-size: 24px; color: #444; }
.tb-tabla td { padding: 14px 16px; border-bottom: 2px solid #ececf0; vertical-align: top; }
.tb-tabla td::first-letter { text-transform: uppercase; }
.tb-tabla small { display: block; color: #777; font-size: 21px; }
.tb-mini { margin-top: 24px; font-size: 26px; }
.tb-vacio { color: #999; font-style: italic; }
.tb-nota { color: #9a6300; font-weight: 600; }
.tb-eventos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tb-eventos li { display: flex; flex-direction: column; padding: 24px 28px; background: #f2f2f5; border-left: 10px solid #3f7a4a; border-radius: 6px; }
.tb-eventos span { color: #6b6b73; font-size: 26px; }
.tb-eventos b { font-size: 38px; color: #2c5a35; }
.tb-eventos i { font-style: normal; color: #555; font-size: 24px; }
.tb-aviso { display: flex; gap: 40px; height: 100%; font-size: 36px; }
.tb-aviso img { max-width: 60%; max-height: 100%; object-fit: contain; border: 2px solid #e3e3e8; }
.tb-aviso:not(.con-img) { font-size: 44px; }
.tb-aviso small { display: block; margin-top: 20px; color: #777; font-size: 24px; }
.tb-portada { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; }
.tb-portada img { width: 170px; height: 170px; border-radius: 38px; margin-bottom: 16px; }
.tb-portada h2 { font-size: 72px; }
.tb-portada h3 { font-size: 46px; color: #3f7a4a; margin-bottom: 20px; }
.tb-portada ol { columns: 2; column-gap: 80px; text-align: left; font-size: 30px; margin: 0; }
.tb-es-portada .tb-cuerpo { padding-top: 0; }
.tb-presentacion { position: fixed; inset: 0; z-index: 200; background: #000; cursor: pointer; }
.tb-presentacion .tb-escala { position: absolute; left: 0; top: 0; }
.tb-ayuda { position: absolute; bottom: 10px; right: 16px; color: #888; font-size: 13px; }
.imp-sem .chk { align-items: flex-start; }
.imp-partes { list-style: none; margin: 10px 0 0; padding: 0; font-size: 14.5px; }
.imp-partes li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.imp-partes small { color: var(--muted); }
.imp-partes b { color: var(--accent); font-weight: 600; text-align: right; }
/* ---------- historial de cambios ---------- */
.avatar.rojo { background: var(--err-soft); color: var(--err); }
.avatar.amarillo { background: var(--warn-soft); color: var(--warn); }
.difs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.difs li { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 8px 10px; background: var(--tile); border-radius: var(--r); font-size: 14.5px; }
.difs li span { color: var(--muted); font-size: 12.5px; }
.difs del { color: var(--err); text-decoration: line-through; }
.difs ins { color: var(--ok); text-decoration: none; font-weight: 600; }
.estado.aviso-amarillo { background: var(--warn-soft); color: var(--warn); }
.tb-cab img { border: 4px solid #fff; box-sizing: border-box; }
/* Degradé más chico, como tarjeta con bordes redondeados */
.hero-img.degrade { height: 150px; margin: 14px 16px 0; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.hero-img.degrade .hero-img-txt { padding: 0 18px 16px; }
.hero-img.degrade .hero-img-txt h1 { font-size: 28px; }
@media (min-width: 900px) { .hero-img.degrade { height: 170px; max-width: calc(var(--ancho) - 64px); margin: 24px auto 0; } .hero-img.degrade .hero-img-txt { padding: 0 26px 20px; } .hero-img.degrade .hero-img-txt h1 { font-size: 34px; } }
.ib.girando .ic { animation: girar .8s linear infinite; }
/* ---------- búsqueda ---------- */
.buscador.grande input { font-size: 18px; padding: 14px 0; }
.lista .item > .ic:first-child { color: var(--accent); width: 22px; height: 22px; }
mark { background: var(--warn-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
/* ---------- impresión: solo ancianos; tablero una hoja por página ---------- */
@media print {
  body.sin-imprimir > * { display: none !important; }
  body.sin-imprimir::after { content: "La impresión y la descarga están reservadas a los ancianos."; display: block; padding: 40px; font: 18px sans-serif; }
  .tb-pdf-hoja { page-break-after: always; break-after: page; width: 1920px; height: 1080px; zoom: .5; }
}
@page tablero { size: A4 landscape; }
/* ---------- panel del secretario ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px; background: var(--tile); border-radius: var(--r); }
.kpi small { color: var(--muted); font-size: 13px; }
.kpi b { font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--text); }
.kpi span { color: var(--muted); font-size: 12.5px; }
.kpi.alerta { border-left: 4px solid var(--err); }
.kpi.alerta b { color: var(--err); }
.barras { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; height: 170px; padding-top: 18px; }
.barra-col { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.bar-m { display: block; width: 70%; min-height: 2px; background: var(--accent); border-radius: 4px 4px 0 0; }
.barra-col:hover .bar-m { filter: brightness(1.15); }
.tabla.sin-mayus td { text-transform: none; }
.barra-val { font-size: 12px; color: var(--muted); }
.barra-col small { font-size: 11px; color: var(--muted); text-transform: capitalize; }
.tabla-datos summary { cursor: pointer; color: var(--accent); font-size: 14px; margin-top: 10px; }
.pila { display: flex; gap: 2px; height: 18px; border-radius: 5px; overflow: hidden; margin: 6px 0 10px; }
.pila-casa { background: #2e8b57; } .pila-nocasa { background: #d9922e; } .pila-novisitar { background: #c0392b; } .pila-sin { background: var(--line); }
.leyenda-viv { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 14.5px; }
.leyenda-viv li { display: flex; align-items: center; gap: 8px; }
.leyenda-viv i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.leyenda-viv b { margin-left: auto; }
.ideas { display: flex; flex-direction: column; gap: 6px; }
.idea { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--tile); border-radius: var(--r); color: var(--text); border-left: 4px solid var(--line); }
.idea > .ic { color: var(--accent); margin-top: 2px; }
.idea span { display: flex; flex-direction: column; gap: 2px; }
.idea small { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.idea b { font-weight: 600; } .idea em { font-style: normal; color: var(--muted); font-size: 13.5px; }
.idea.n-alta { border-left-color: var(--err); } .idea.n-alta small { color: var(--err); }
.idea.n-media { border-left-color: var(--warn); } .idea.n-media small { color: var(--warn); }
.por-grupo { list-style: none; margin: 0; padding: 0; }
.por-grupo li { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); }
.por-grupo li:first-child { border-top: 0; }
.etq-grupo { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 6px 6px; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; background: var(--accent-soft); color: var(--accent); }
.etq-grupo .ic { width: 14px; height: 14px; }
.aviso.de-grupo { border-left-color: var(--accent); }
.sin-cesion { color: var(--warn) !important; font-weight: 600; font-size: 11.5px; }
.pasos-guia { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pasos-guia li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.paso-n { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 14px; }
.guia.destacada { outline: 2px solid var(--accent); }
.prog.visita { margin-bottom: 12px; border-left: 4px solid var(--maestros); }
.prog.visita .kicker .ic { width: 16px; height: 16px; vertical-align: -3px; }
.lbl-slot { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted); font-weight: 600; flex: 1 1 220px; }
.salab-cab { display: flex; align-items: center; gap: 8px; margin: 0 16px 10px; color: var(--muted); font-size: 14px; }
.salab-cab .ic { width: 18px; height: 18px; color: var(--accent); }
.etq-mec { display: inline-block; align-self: flex-start; margin-bottom: 3px; padding: 1px 7px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tabbar a { font-size: 10.5px; letter-spacing: 0; }
.etqs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 3px; }
.etqs .etq-mec { margin: 0; }
.etq-mec.grupo { display: inline-flex; align-items: center; gap: 5px; background: color-mix(in srgb, #4a7fc1 16%, transparent); color: #3d6fae; }
.etq-mec.grupo svg { width: 14px; height: 14px; }
:root[data-theme="oscuro"] .etq-mec.grupo { color: #8fb6e6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="claro"]) .etq-mec.grupo { color: #8fb6e6; } }
/* Tamaño de letra elegido en Apariencia: agranda el contenido (no la barra de abajo). */
:root[data-letra] main, :root[data-letra] dialog { zoom: var(--zl, 1); }
:root[data-letra] main .leaflet-container { zoom: calc(1 / var(--zl, 1)); }
.letras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.letra-op { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; text-align: center; }
.letra-op input { position: absolute; opacity: 0; pointer-events: none; }
.letra-op b { line-height: 1.2; }
.letra-op span { font-size: 12px; color: var(--muted); }
.letra-op:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.letra-op:has(input:checked) span { color: var(--accent); font-weight: 600; }
.letra-op:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Pestaña activa: relleno en degradé detrás del ícono, como en JW Library. */
.tabbar a .ic { box-sizing: content-box; padding: 3px 16px; border-radius: 999px; transition: background .2s; }
.tabbar a.on .ic { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); }
/* Asignaciones de hoy: aviso de pendiente y globito en la pestaña */
.hoy-pend { margin: 4px 0 18px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.hoy-pend-cab { display: flex; align-items: center; gap: 12px; margin: 2px 4px 12px; color: var(--accent); }
.hoy-pend-cab .ic { width: 26px; height: 26px; flex: none; }
.hoy-pend-cab span { display: flex; flex-direction: column; }
.hoy-pend-cab b { font-size: 18px; color: var(--text); }
.hoy-pend-cab small { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.asig.hoy { border-left-color: var(--accent); }
.tabbar a, .rail nav a { position: relative; }
.insignia { position: absolute; top: 3px; left: calc(50% + 9px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #c0392b; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid var(--bar, #fff); box-sizing: content-box; }
.rail nav a .insignia { left: auto; right: 10px; top: 50%; transform: translateY(-50%); }
/* Informe del publicador (sin horas) */
.mes-nav { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 12px; }
.mes-nav strong { font-size: 19px; color: var(--accent); }
.opcion-grande { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card, transparent); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.opcion-grande span:last-child { display: flex; flex-direction: column; gap: 2px; }
.opcion-grande small, .cursos-fila small { color: var(--muted); font-size: 13px; }
.opcion-grande .check { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; color: #fff; }
.opcion-grande.on { border-color: var(--accent); background: var(--accent-soft); }
.opcion-grande.on .check { background: var(--accent); border-color: var(--accent); }
.opcion-grande .check .ic { width: 18px; height: 18px; }
.cursos-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 4px; }
.cursos-fila > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.cursos-fila .stepper { display: flex; align-items: center; gap: 12px; }
.num-grande { font-size: 28px; color: var(--accent); min-width: 28px; text-align: center; }
.cifras.mini b .ic { width: 26px; height: 26px; }
.cifras.mini b .ic { color: var(--accent); width: 30px; height: 30px; stroke-width: 2.4; }
.mes-nav .ib { color: var(--accent); }
/* Celulares muy angostos: que las etiquetas de la barra no se peguen */
@media (max-width: 359px) {
  .tabbar a { font-size: 9px; letter-spacing: -.02em; padding-left: 1px; padding-right: 1px; }
  .tabbar a .ic { padding: 3px 11px; }
}
/* Palabras o enlaces muy largos: que corten en vez de desbordar la pantalla (las tablas siguen con su scroll) */
main, dialog { overflow-wrap: anywhere; }
.tabla th, .tabla td, .cal-grid, .tabbar { overflow-wrap: normal; }
/* Franja del Inicio: como mucho 2 renglones; el texto completo se ve al tocarla */
.franja-txt span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.letras { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
.letra-op span { overflow-wrap: normal; white-space: nowrap; }
/* Encabezados de tarjeta con controles: si no entran, los controles bajan de renglón */
.tarjeta-cab { flex-wrap: wrap; row-gap: 8px; }
.tarjeta-cab > div:first-child { flex: 1 1 160px; min-width: 0; }