/* ───────────────────────────────────────────────────────────────────────────
   Tema visual de la app: sobrio, moderno y elegante.
   Marfil cálido de fondo, azul marino institucional, bronce como acento, títulos en serif
   y letra limpia (Inter) para todo lo demás. Se carga al final: reemplaza los valores de
   index.css y panel.css sin tocar su estructura.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* Colores: fondos claros, azul vivo, naranja, verde y turquesa (como los sitios institucionales adventistas) */
  --lienzo: #F3F7FC;
  --superficie: #FFFFFF;
  --borde: #CCDBEF;
  --borde-suave: #E8EFF7;
  --tinta: #10213B;
  --tinta-2: #475A74;
  --tinta-3: #7387A0;
  --navy: #0A66FF;            /* azul principal, vivo (botones, selección) */
  --navy-2: #0A55E0;
  --navy-oscuro: #0A4BA8;
  --titulo: #0749C9;          /* solo para títulos y números grandes */
  --azul-claro: #E7F0FC;
  --azul-medio: #CFE2F8;
  --bronce: #FF8000;          /* naranja, el acento de la marca */
  --bronce-2: #F26A00;
  --bronce-claro: #FFF0DD;
  --verde: #00C48C;
  --verde-claro: #E2F6EE;
  --rojo: #F0203A;
  --rojo-claro: #FDEAEC;
  --teal: #00CCE8;
  --teal-claro: #DCF4F7;

  /* Los nombres de siempre apuntan a la paleta nueva */
  --corporate-navy: var(--titulo);
  --corporate-navy-dark: var(--navy-oscuro);
  --institutional-orange: var(--bronce);
  --orange-accent: var(--bronce-2);
  --orange-light: #FFA03A;
  --teal-accent: var(--teal);
  --neutral-bg: var(--lienzo);
  --card-bg: var(--superficie);
  --text-main: var(--tinta);
  --text-muted: var(--tinta-2);
  --text-sub: var(--tinta-3);
  --border-subtle: var(--borde-suave);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --sombra-1: 0 1px 2px rgba(10, 102, 255, .06), 0 6px 18px rgba(10, 102, 255, .07);
  --sombra-2: 0 2px 4px rgba(10, 102, 255, .08), 0 16px 36px rgba(10, 102, 255, .14);
  --shadow-card: var(--sombra-1);
  --shadow-md: var(--sombra-2);
}

/* ───────── Base ───────── */
html { scroll-behavior: smooth; }
body {
  background: var(--lienzo);
  color: var(--tinta);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.app-container { background: transparent; box-shadow: none; border: 0; }
@media (min-width: 768px) { body { background: var(--lienzo); } .app-container { box-shadow: none; } }
::selection { background: var(--bronce-claro); color: var(--titulo); }
:focus-visible { outline: 2px solid var(--bronce); outline-offset: 2px; border-radius: 6px; }
button, input, select, textarea { font-family: var(--font-sans); }
h1, h2, h3, .view-title-main, .section-heading { font-family: var(--font-serif); color: var(--titulo); letter-spacing: -.01em; }
.nota, .vista-sub { color: var(--tinta-3); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ───────── Encabezado ───────── */
.web-institutional-header {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--borde);
  box-shadow: none;
}
.web-header-top-accent { height: 4px; background: linear-gradient(90deg, #0A66FF 0%, #00CCE8 42%, #FF8000 100%); }
.web-header-container { padding: 12px 28px; max-width: none; }
.web-header-brand img { height: 42px; }
.zoom-btn-primary-pill {
  background: var(--navy) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(10, 102, 255, .28) !important; padding: 9px 16px !important; font-weight: 600 !important; font-size: 13px !important;
}
.zoom-btn-primary-pill:hover { background: var(--navy-2) !important; }
.web-sub-header { background: transparent; border: 0; box-shadow: none; }
.web-sub-header-container { padding: 14px 28px 0; }
.web-breadcrumb { font-size: 12px; color: var(--tinta-3); letter-spacing: .01em; }
.web-breadcrumb strong { color: var(--titulo); font-weight: 600; }
.web-jurisdiction-pill {
  background: var(--superficie); border: 1px solid var(--azul-medio); color: var(--tinta-2);
  font-size: 12px; font-weight: 600; padding: 6px 12px; box-shadow: none;
}
.web-jurisdiction-pill i { color: var(--bronce); }
.app-content { padding: 18px 28px 48px; max-width: 1380px; width: 100%; margin: 0 auto; }
@media (max-width: 767px) { .app-content { padding: 14px 16px 90px; } .web-header-container, .web-sub-header-container { padding-left: 16px; padding-right: 16px; } }

/* ───────── Panel izquierdo (claro) ───────── */
.side-panel {
  background: #FFFFFF;
  border-right: 1px solid var(--borde);
  box-shadow: 8px 0 30px rgba(10, 102, 255, .10);
  color: var(--tinta-2);
}
@media (min-width: 900px) { .side-panel { box-shadow: none; } }
.side-brand { padding: 22px 22px 16px; border-bottom: 1px solid var(--borde-suave); background: linear-gradient(180deg, #EEF5FE 0%, #FFFFFF 100%); }
.side-logo { display: block; width: 92px; height: auto; margin: 0 0 12px -2px; filter: none; mix-blend-mode: multiply; opacity: 1; }
.side-brand .side-brand-tag { color: var(--bronce-2); letter-spacing: .14em; font-size: 9.5px; }
.side-brand .side-brand-name { color: var(--titulo); font-size: 21px; letter-spacing: -.01em; }
.side-brand .side-brand-sub { color: var(--tinta-3); font-size: 12px; }
.side-nav { padding: 14px 12px 8px; }
.side-nav::-webkit-scrollbar-thumb { background: var(--azul-medio); }
.side-link { border-radius: 12px; font-size: 13.5px; font-weight: 500; padding: 10px 14px; color: var(--tinta-2); }
.side-link i.icono { color: #6C9AD6; width: 20px; }
.side-link:hover { background: var(--azul-claro); color: var(--titulo); }
.side-link.activo { background: var(--azul-claro); color: var(--titulo); font-weight: 600; }
.side-link.activo i.icono { color: var(--titulo); }
.side-link.activo::before { background: var(--bronce); left: -12px; width: 4px; }
.side-sub { border-left: 1px solid var(--azul-medio); }
.side-sub .side-link { font-size: 12.5px; color: var(--tinta-3); }
.side-sub .side-link.activo { background: #F1F7FE; color: var(--titulo); }
.side-link .etiqueta { background: var(--bronce-claro); color: var(--bronce-2); white-space: nowrap; font-size: 9px; padding: 2px 7px; }
.side-link .punto-novedad { background: var(--bronce); }
.side-user { background: #F3F8FE; border-top: 1px solid var(--borde); }
.side-user .side-user-nombre { color: var(--titulo); }
.side-user .side-user-rol { color: var(--tinta-3); }
.side-user .side-user-lugar { color: var(--bronce-2); }
.side-user .side-user-accion { background: #fff; color: var(--titulo); border: 1px solid var(--azul-medio); font-weight: 600; }
.side-user .side-user-accion:hover { background: var(--azul-claro); }
.btn-hamburguesa { border-color: var(--azul-medio); color: var(--titulo); }

/* ───────── Inicio: bienvenida (clara) ───────── */
.hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 32px 38px; margin-bottom: 20px; border-radius: 26px; color: var(--tinta);
  background:
    radial-gradient(55% 140% at 100% 0%, rgba(242, 138, 34, .28) 0%, rgba(242, 138, 34, 0) 62%),
    radial-gradient(60% 140% at 0% 100%, rgba(14, 159, 179, .16) 0%, rgba(14, 159, 179, 0) 60%),
    linear-gradient(135deg, #E4F0FE 0%, #F6FAFF 100%);
  border: 1px solid var(--azul-medio); box-shadow: var(--sombra-1);
}
.hero::after {
  content: ''; position: absolute; right: -60px; bottom: -90px; width: 280px; height: 280px; border-radius: 50%;
  border: 1px solid rgba(242, 138, 34, .35); box-shadow: 0 0 0 26px rgba(242, 138, 34, .07), 0 0 0 54px rgba(242, 138, 34, .04);
  pointer-events: none;
}
.hero-contenido { position: relative; z-index: 1; min-width: 260px; flex: 1 1 420px; }
.hero-eyebrow { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--bronce-2); font-weight: 700; margin-bottom: 10px; }
.hero-titulo { font-family: var(--font-serif); font-weight: 600; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.12; color: var(--titulo); letter-spacing: -.015em; }
.hero-titulo em { font-style: italic; color: var(--bronce-2); }
.hero-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 13.5px; color: var(--tinta-2); }
.hero-rol { background: #fff; border: 1px solid var(--azul-medio); color: var(--titulo); padding: 4px 12px; border-radius: 999px; font-weight: 600; font-size: 12.5px; }
.hero-lugar i { color: var(--bronce); margin-right: 4px; }
.hero-acciones { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; }
.btn-hero {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px; cursor: pointer;
  background: #fff; color: var(--titulo); border: 1px solid var(--azul-medio); font: 600 13.5px var(--font-sans);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-hero:hover { background: var(--azul-claro); transform: translateY(-1px); }
.btn-hero.primario { background: var(--bronce); color: #fff; border-color: var(--bronce); box-shadow: 0 6px 16px rgba(242, 138, 34, .35); }
.btn-hero.primario:hover { background: #F59A3E; }

/* ───────── Inicio: cifras ───────── */
.kpis { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-bottom: 20px; }
.kpi {
  display: flex; gap: 14px; align-items: flex-start; padding: 20px 20px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 20px; box-shadow: var(--sombra-1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.kpi { border-top: 4px solid var(--navy); }
.kpi:nth-child(2) { border-top-color: var(--bronce); }
.kpi:nth-child(3) { border-top-color: var(--verde); }
.kpi:nth-child(4) { border-top-color: var(--teal); }
.kpi-icono {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 18px;
  background: var(--azul-claro); color: var(--titulo);
}
.kpi-icono.bronce { background: var(--bronce-claro); color: var(--bronce-2); }
.kpi-icono.verde { background: var(--verde-claro); color: var(--verde); }
.kpi-icono.teal { background: var(--teal-claro); color: var(--teal); }
.kpi-texto { min-width: 0; }
.kpi-etq { font-size: 12px; font-weight: 600; color: var(--tinta-3); letter-spacing: .01em; }
.kpi-valor { font-family: var(--font-serif); font-size: 32px; line-height: 1.1; font-weight: 600; color: var(--titulo); margin: 4px 0 4px; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.kpi-sub { font-size: 12px; color: var(--tinta-2); line-height: 1.4; }

/* ───────── Inicio: gráficas ───────── */
.graficas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); margin-bottom: 26px; }
.panel-card { background: var(--superficie); border: 1px solid var(--borde); border-radius: 20px; box-shadow: var(--sombra-1); padding: 22px 24px; }
.panel-card-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.panel-card-cab h3 { font-family: var(--font-serif); font-size: 19px; color: var(--titulo); font-weight: 600; margin-bottom: 2px; }
.grafica-caja { position: relative; height: 240px; }
.grafica-caja.dona { height: 210px; }
.dona-centro { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.dona-num { font-family: var(--font-serif); font-size: 28px; color: var(--titulo); font-weight: 600; line-height: 1; }
.dona-etq { font-size: 11px; color: var(--tinta-3); margin-top: 3px; text-transform: uppercase; letter-spacing: .08em; }
.dona-detalle { margin-top: 10px; font-size: 12.5px; color: var(--tinta-2); text-align: center; }
.segmento { display: inline-flex; background: #E6EFFA; padding: 3px; border-radius: 999px; gap: 2px; }
.segmento button {
  border: 0; background: transparent; color: var(--tinta-2); font: 600 12px var(--font-sans); padding: 6px 13px; border-radius: 999px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.segmento button:hover { color: var(--titulo); }
.segmento button.activo, .segmento button.active { background: var(--superficie); color: var(--titulo); box-shadow: 0 1px 3px rgba(10, 42, 77, .14); }
.segmento.chico { margin-top: 8px; } .segmento.chico button { font-size: 11px; padding: 4px 11px; }
.segmento.centrado { display: flex; width: fit-content; margin: 8px auto 0; }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.mini-stat { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: #F5F9FE; border: 1px solid var(--borde-suave); border-radius: 12px; }
.mini-punto { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.mini-etq { font-size: 10.5px; color: var(--tinta-3); line-height: 1.2; }
.mini-valor { font-family: var(--font-serif); font-size: 17px; color: var(--titulo); font-weight: 600; font-variant-numeric: tabular-nums; }
.mini-pct { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--tinta-2); }
@media (max-width: 560px) { .mini-stats { grid-template-columns: 1fr; } }
.seccion-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 6px 0 12px; }
.section-heading { font-size: 28px; text-transform: none; letter-spacing: -.015em; margin: 0; font-weight: 700; color: var(--titulo); line-height: 1.15; }
.seccion-cab { position: relative; padding-left: 14px; margin: 22px 0 16px; align-items: center; }
.seccion-cab::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 5px; border-radius: 4px; background: linear-gradient(180deg, var(--navy), var(--bronce)); }
.seccion-cab .nota { font-weight: 600; color: var(--navy); }
@media (max-width: 560px) { .section-heading { font-size: 23px; } }

/* ───────── Tarjetas y títulos de las demás pantallas ───────── */
.stitch-card, .tarjeta, .actas-action-card, .material-template-card, .role-item-card {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra-1);
}
.stitch-card-title, .tarjeta h3 { font-family: var(--font-serif); font-size: 18px; color: var(--titulo); font-weight: 600; letter-spacing: -.005em; text-transform: none; }
.view-title-main, .vista-titulo h1 { font-family: var(--font-serif); font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; color: var(--titulo); letter-spacing: -.015em; text-transform: none; }
.vista-titulo { margin-bottom: 4px; }
.vista-sub { font-size: 14px; max-width: 780px; }
.stitch-card[style*="background: linear-gradient(135deg, #002F5D"], .stitch-card[style*="#002F5D 0%"] { border-radius: 18px !important; }

/* ───────── Botones ───────── */
.btn-navy, .btn-u.primario, .zoom-btn-submit, .login-submit {
  background: var(--navy); color: #fff; border: 1px solid var(--navy); border-radius: 12px; font-weight: 600; letter-spacing: .005em;
  box-shadow: 0 1px 2px rgba(10, 42, 77, .2); transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-navy:hover, .btn-u.primario:hover { background: var(--navy-2); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(10, 42, 77, .22); }
.btn-u { border-radius: 11px; border: 1px solid var(--borde); background: var(--superficie); color: var(--titulo); font-weight: 600; transition: background .15s ease, border-color .15s ease; }
.btn-u:hover { background: #F5F9FE; border-color: #C5D6EA; }
.btn-u.peligro { color: var(--rojo); border-color: #EBC4C8; }
.btn-u.peligro:hover { background: var(--rojo-claro); }
.btn-stitch-asistencia { border-radius: 10px; font-weight: 600; }

/* ───────── Pastillas y pestañas ───────── */
.past-week-pill, .asistencia-type-pill, .pestana-panel {
  background: var(--superficie); border: 1px solid var(--borde); color: var(--tinta-2); border-radius: 999px; font-weight: 600; font-size: 12.5px;
  box-shadow: none; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.past-week-pill:hover, .asistencia-type-pill:hover, .pestana-panel:hover { border-color: #CFC7B5; color: var(--titulo); }
.past-week-pill.active, .asistencia-type-pill.active, .pestana-panel.activa { background: var(--navy); color: #fff; border-color: var(--navy); }
.admin-sub-tabs-bar { background: transparent; border: 0; gap: 6px; }
.admin-subtab-btn { border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta-2); font-weight: 600; }
.admin-subtab-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ───────── Campos ───────── */
input[type="text"], input[type="number"], input[type="search"], input[type="password"], input[type="email"], select, textarea, .campo-u {
  border: 1px solid #C9D8EA; border-radius: 11px; background: #fff; color: var(--tinta);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus, .campo-u:focus { outline: none; border-color: var(--bronce); box-shadow: 0 0 0 3px rgba(184, 121, 58, .18); }
.counter-box { background: #F5F9FE; border: 1px solid var(--borde-suave); border-radius: 14px; padding: 12px 14px; }
.counter-info h5 { color: var(--titulo); font-size: 14px; font-weight: 600; }
.btn-counter { background: var(--navy); border-radius: 10px; }
.asistencia-manual-input { border-radius: 10px; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--titulo); }
.badge { border-radius: 999px; font-weight: 700; letter-spacing: .02em; }
.badge-aprobada { background: var(--verde-claro); color: var(--verde); }
.badge-pendiente { background: #FBF1DC; color: #8A5A12; }
.pill-estado { background: var(--bronce-claro); color: var(--bronce-2); border: 1px solid #E6D2B3; font-weight: 700; }
.pill-estado.ok { background: var(--verde-claro); color: var(--verde); border-color: #BFE0D1; }
.ev-badge { background: #E6EDF6; color: var(--titulo); }
.ev-badge.grupo { background: var(--bronce-claro); color: var(--bronce-2); }

/* ───────── Tablas y listas de las pantallas nuevas ───────── */
.tabla-seg th { color: var(--tinta-3); border-bottom: 1px solid var(--borde); font-size: 10.5px; letter-spacing: .08em; }
.tabla-seg td { border-bottom: 1px solid var(--borde-suave); }
.barra-avance { background: #E6EEF8; height: 7px; }
.barra-avance > span { background: linear-gradient(90deg, #00C48C, #3DBB92); border-radius: 6px; }
.barra-avance.parcial > span { background: linear-gradient(90deg, #FF8000, #F8B15C); }
.u-fila { border-radius: 16px; border-color: var(--borde); box-shadow: 0 1px 2px rgba(10, 42, 77, .03); transition: box-shadow .15s ease; }
.u-fila:hover { box-shadow: var(--sombra-1); }
.faltan { color: var(--rojo); } .completo { color: var(--verde); }
.fecha-card { background: #F5F9FE; border: 1px solid var(--borde-suave); border-radius: 16px; }
.fecha-card.proxima { background: var(--bronce-claro); border-color: #E6D2B3; box-shadow: none; }
.fecha-card .mes { color: var(--bronce-2); }
.zona-titulo { font-family: var(--font-serif); color: var(--titulo); }
.ventana-u-caja { border-radius: 22px; }
.ventana-u { backdrop-filter: blur(4px); background: rgba(6, 27, 51, .55); }

/* ───────── Noticias y recursos ───────── */
.news-card-stitch { background: var(--superficie); border: 1px solid var(--borde); border-radius: 20px; box-shadow: var(--sombra-1); transition: transform .2s ease, box-shadow .2s ease; overflow: hidden; }
.news-card-stitch:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); }
.card-title-navy { font-family: var(--font-serif); color: var(--titulo); font-weight: 600; }
.card-author-navy { color: var(--bronce-2); font-weight: 600; }
.card-banner-img { filter: saturate(.85); }

/* ───────── Barra de abajo (celular) ───────── */
.bottom-nav { background: rgba(255, 255, 255, .94); border-top: 1px solid var(--borde); box-shadow: 0 -8px 24px rgba(10, 42, 77, .06); }
.nav-item { color: var(--tinta-3); font-family: var(--font-sans); font-weight: 600; }
.nav-item.active { color: var(--titulo); }
.nav-item.active::before { background: var(--bronce); }

/* ───────── Inicio de sesión (claro) ───────── */
.login-overlay {
  background:
    radial-gradient(70% 60% at 92% 0%, rgba(242, 138, 34, .26) 0%, rgba(242, 138, 34, 0) 62%),
    radial-gradient(70% 70% at 0% 100%, rgba(10, 102, 255, .22) 0%, rgba(10, 102, 255, 0) 62%),
    radial-gradient(50% 50% at 50% 100%, rgba(14, 159, 179, .12) 0%, rgba(14, 159, 179, 0) 70%),
    linear-gradient(160deg, #F6FAFF 0%, #E3EEFB 100%) !important;
}
.login-top-bar { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.login-top-nav-icons { display: none !important; }
.login-top-brand, .login-top-brand *, .login-top-brand-text, .login-top-brand-text * { color: var(--titulo) !important; }
.login-top-logo { background: #fff; border-radius: 10px; box-shadow: var(--sombra-1); }
.login-top-close-btn { background: #fff !important; color: var(--tinta-2) !important; border: 1px solid var(--azul-medio) !important; border-radius: 999px !important; }
.login-main-container { gap: 56px; }
.login-hero-panel { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; padding-left: 8px; }
.login-ticker-badge { background: #fff !important; border: 1px solid var(--azul-medio) !important; color: var(--titulo) !important; border-radius: 999px; letter-spacing: .06em; }
.slide-badge { background: transparent !important; border: 0 !important; color: var(--bronce-2) !important; letter-spacing: .16em; text-transform: uppercase; font-size: 11px; font-weight: 700; padding: 0 !important; }
.slide-title { font-family: var(--font-serif) !important; font-weight: 600 !important; font-size: clamp(28px, 3.4vw, 46px) !important; line-height: 1.12 !important; letter-spacing: -.02em !important; color: var(--titulo) !important; }
.slide-description { color: var(--tinta-2) !important; font-size: 15px !important; line-height: 1.65 !important; max-width: 520px; }
.slide-footer-info { border-top: 1px solid var(--azul-medio) !important; color: var(--tinta-3) !important; }
.zoom-login-card { background: #FFFFFF !important; border: 1px solid var(--borde); border-radius: 26px !important; box-shadow: 0 30px 70px rgba(10, 102, 255, .22) !important; }
.zoom-login-title { font-family: var(--font-serif) !important; font-weight: 600 !important; color: var(--titulo) !important; font-size: 28px !important; }
.zoom-login-subtitle { color: var(--tinta-3) !important; }
.zoom-input-label { color: var(--titulo) !important; font-weight: 600 !important; font-size: 12.5px !important; }
.zoom-input-box { background: #fff !important; border: 1px solid #C9D8EA !important; border-radius: 12px !important; }
.zoom-input-box:focus-within { border-color: var(--navy) !important; box-shadow: 0 0 0 3px rgba(10, 102, 255, .18) !important; }
.zoom-btn-submit { background: linear-gradient(135deg, #2F8CFF 0%, #0A66FF 100%) !important; border-radius: 13px !important; box-shadow: 0 10px 22px rgba(10, 102, 255, .35) !important; font-weight: 600 !important; letter-spacing: .01em; }
.zoom-btn-submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.zoom-link-help { color: var(--tinta-2) !important; }
.zoom-brand-tag { color: var(--tinta-3) !important; letter-spacing: .08em; }
.carousel-arrow { background: #fff !important; border: 1px solid var(--azul-medio) !important; color: var(--titulo) !important; }
.login-carousel-dot { background: var(--azul-medio) !important; }
.login-carousel-dot.active { background: var(--bronce) !important; }

/* ───────── Impresión ───────── */
@media print { .side-panel, .bottom-nav, .web-institutional-header, .web-sub-header, .btn-hamburguesa { display: none !important; } .app-container.con-panel { padding: 0 !important; } body { background: #fff; } }

/* ───────── Ajustes del encabezado ───────── */
.web-header-brand img { mix-blend-mode: multiply; }
@media (min-width: 900px) {
  .web-header-brand { display: none; }          /* el logo ya está en el panel izquierdo */
  .zoom-style-actions { margin-left: auto; }
  .web-header-container { padding-top: 14px; padding-bottom: 8px; }
}

/* ───────── Asistencia: barra del periodo ───────── */
.barra-periodo {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; padding: 14px 18px; margin-bottom: 14px; box-shadow: var(--sombra-1);
}
.barra-periodo-texto { display: flex; align-items: center; gap: 12px; }
.barra-periodo-icono { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--bronce-claro); color: var(--bronce-2); font-size: 17px; }
.barra-periodo h4 { font-family: var(--font-serif); font-size: 16px; color: var(--titulo); margin: 0; font-weight: 600; }
.barra-periodo-texto span { font-size: 12px; color: var(--tinta-3); }
.barra-periodo-controles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.barra-periodo select { padding: 8px 12px; font-weight: 600; font-size: 13px; color: var(--titulo); cursor: pointer; }
.btn-flecha { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--borde); background: #fff; color: var(--titulo); cursor: pointer; transition: background .15s ease; }
.btn-flecha:hover { background: #F5F9FE; }
.barra-periodo-etiqueta { background: var(--navy); color: #fff; font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 999px; }
.asistencia-manual-input { min-width: 92px; width: 92px; text-align: center; padding: 8px 6px; font-size: 16px; }
#view-asistencia > .section-heading { margin-bottom: 14px; }
.past-weeks-selector { gap: 8px; }

/* ───────── Actas: filtro por zona, distrito e iglesia ───────── */
.filtro-jerarquia { background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--sombra-1); }
.filtro-jerarquia-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.filtro-jerarquia-cab i { color: var(--bronce); }
.filtro-jerarquia-cab strong { font-family: var(--font-serif); font-size: 16px; color: var(--titulo); font-weight: 600; }
.filtro-jerarquia-cab .nota { margin-left: auto; font-size: 12px; }
.filtro-jerarquia-campos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.filtro-jerarquia-campos label { font-size: 11.5px; font-weight: 600; color: var(--tinta-3); display: block; }
.filtro-jerarquia-campos select { width: 100%; margin-top: 4px; padding: 9px 11px; font-size: 13px; font-weight: 600; color: var(--titulo); }

/* Tarjetas de acción y plantilla de Actas */
.actas-action-card { padding: 18px 20px; transition: transform .2s ease, box-shadow .2s ease; cursor: pointer; }
.actas-action-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.actas-action-icon { background: var(--bronce-claro); color: var(--bronce-2); border-radius: 12px; }
.actas-action-card h3 { font-family: var(--font-serif); color: var(--titulo); font-weight: 600; }
#view-actas .stitch-card[style*="1.5px solid var(--corporate-navy)"] { border: 1px solid var(--borde) !important; border-left: 4px solid var(--bronce) !important; background: var(--superficie) !important; border-radius: 18px !important; }
#btnOpenUploadFotoActa { background: var(--superficie) !important; color: var(--titulo) !important; border: 1px solid var(--borde) !important; border-radius: 10px !important; padding: 8px 14px !important; }
#btnOpenFormAgenda { background: var(--navy) !important; border-radius: 10px !important; padding: 8px 14px !important; }
#btnOpenFormActa { background: var(--bronce) !important; border-radius: 10px !important; padding: 8px 14px !important; }

.pie-pagina { text-align: center; color: var(--tinta-3); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding: 28px 0 8px; }
.pie-pagina::before { content: ''; display: block; width: 36px; height: 2px; margin: 0 auto 12px; background: var(--bronce); border-radius: 2px; }
.side-link .etiqueta { white-space: nowrap; font-size: 9px; padding: 2px 7px; letter-spacing: .01em; }
.side-link span:first-of-type + .etiqueta { margin-left: auto; }
@media (max-width: 767px) {
  .web-breadcrumb > span { display: none; }                 /* en celular solo el nombre de la pantalla */
  .web-breadcrumb { font-size: 13px; }
  .hero { padding: 26px 22px; border-radius: 22px; }
  .hero-acciones { width: 100%; }
}

/* ───────── Bloques que todavía traen un azul oscuro escrito en el HTML: se aclaran ───────── */
[style*="linear-gradient(135deg, #002F5D"], [style*="#002F5D 0%"], [style*="background: #002F5D"], [style*="background-color: #002F5D"] {
  background: linear-gradient(135deg, #2F8CFF 0%, #0A66FF 100%) !important;
}
.stitch-card[style*="#002F5D 0%"] { box-shadow: 0 10px 24px rgba(10, 102, 255, .25) !important; }
.pill-estado { background: var(--bronce-claro); color: var(--bronce-2); border: 1px solid #F6D9B0; }
.news-card-stitch .card-author-navy { color: var(--bronce-2); }

/* Botones de acción que usaban el azul oscuro de títulos (estilos en línea): ahora azul vivo */
button[style*="background-color: var(--corporate-navy)"], button[style*="background: var(--corporate-navy)"],
button[style*="background-color:var(--corporate-navy)"], button[style*="background:var(--corporate-navy)"], .btn-primary-sm {
  background: linear-gradient(135deg, #2F8CFF 0%, #0A66FF 100%) !important; color: #fff !important; border-color: transparent !important;
}
button[style*="--corporate-navy"]:hover, .btn-primary-sm:hover { filter: brightness(1.06); }

/* Nitidez: texto más definido, imágenes y gráficas con mejor resolución */
body { -moz-osx-font-smoothing: grayscale; font-synthesis: none; }
img { image-rendering: -webkit-optimize-contrast; }
h1, h2, h3, .kpi-valor, .panel-card h3 { letter-spacing: -.005em; }
.kpi, .panel-card, .tarjeta, .stitch-card { border-color: var(--borde); }

/* ───────── Más intensidad: colores más vivos en toda la página y encabezados más grandes ───────── */
html { filter: saturate(1.7) brightness(1.01); }
:root {
  --lienzo: #EAF2FF;
  --borde: #BCD2F0;
  --azul-claro: #D9E8FF;
  --azul-medio: #B4D0FA;
  --bronce-claro: #FFE5C2;
  --verde-claro: #CFF3E4;
  --teal-claro: #C4F0F7;
  --tinta-2: #2F4566;
  --tinta-3: #54698A;
}
.section-heading { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.seccion-cab::before { width: 6px; background: linear-gradient(180deg, #0A66FF, #FF8000); }
.vista-titulo h1, .view-title-main, #view-estadisticas h1, #view-panel h1 { font-size: 34px; font-weight: 800; color: var(--titulo); }
.panel-card h3, .graficas h3, .barra-periodo h4, .stitch-card h3 { font-size: 20px; font-weight: 700; color: var(--titulo); }
.hero { background:
  radial-gradient(900px 340px at 92% -10%, rgba(10, 102, 255, .38), transparent 60%),
  radial-gradient(700px 300px at 0% 110%, rgba(0, 204, 232, .30), transparent 60%),
  radial-gradient(520px 260px at 70% 120%, rgba(255, 128, 0, .28), transparent 60%),
  #FFFFFF; }
.kpi { border-top-width: 5px; }
@media (max-width: 560px) { .section-heading, .vista-titulo h1, .view-title-main { font-size: 26px; } }

/* ───────── Franja superior: accesos directos con icono (computadora) ───────── */
.web-desktop-nav { gap: 4px; flex: 1 1 auto; justify-content: flex-start; min-width: 0; }
.web-nav-link {
  padding: 9px 13px; font-size: 14px; font-weight: 700; color: var(--titulo); border-radius: 12px;
  border: 1px solid transparent; white-space: nowrap; background: transparent; box-shadow: none; border-bottom: 1px solid transparent;
}
.web-nav-link i { font-size: 17px; color: var(--navy); }
.web-nav-link:nth-child(2) i { color: var(--bronce); }
.web-nav-link:nth-child(3) i { color: var(--verde); }
.web-nav-link:nth-child(4) i { color: var(--teal); }
.web-nav-link:hover { background: var(--azul-claro); border-color: var(--azul-medio); color: var(--titulo); transform: translateY(-1px); }
.web-nav-link.active { background: var(--azul-claro); color: var(--titulo); box-shadow: none; border-color: var(--azul-medio); border-bottom: 3px solid var(--bronce); }
.web-nav-link.active i { color: var(--navy) !important; }
#navIniciarSesion { margin-left: auto; background: linear-gradient(135deg, #2F8CFF, #0A66FF); color: #fff; border-color: transparent; }
#navIniciarSesion i { color: #fff; }
#navIniciarSesion:hover { background: linear-gradient(135deg, #2F8CFF, #0A66FF); color: #fff; filter: brightness(1.07); border-color: transparent; }
@media (max-width: 1180px) { .web-nav-link span { display: none; } .web-nav-link { padding: 10px 12px; } .web-nav-link i { font-size: 19px; } #navIniciarSesion span { display: inline; } }

/* Que los accesos de la franja no «parpadeen» al cargar: se muestran cuando ya se sabe si hay sesión */
.web-desktop-nav:not(.listo) { visibility: hidden; }

/* Cambiar PIN y nombre de la persona en la franja superior */
.zoom-btn-outline-pill {
  align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  background: #fff; color: var(--titulo); border: 1.5px solid var(--azul-medio); box-shadow: none; cursor: pointer;
}
.zoom-btn-outline-pill i { color: var(--bronce); }
.zoom-btn-outline-pill:hover { background: var(--azul-claro); border-color: var(--navy); color: var(--titulo); }
.zoom-style-actions { display: flex; align-items: center; gap: 10px; }
@media (max-width: 1180px) { .zoom-btn-outline-pill span { display: none; } }