/* =============================================================================
   Estilos de la plataforma. Fuente: docs/diseno/Ministerio Creativo App.dc.html
   (Claude Design, sistema "Vida en Acción"). Variables copiadas del diseño;
   no inventar colores ni medidas: tomarlos de ahí.
   ============================================================================= */

/* Figtree (OFL), servida desde el propio sitio */
@font-face { font-family: 'Figtree'; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url(/fonts/figtree-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url(/fonts/figtree-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* --- Variables del diseño (tema claro) --- */
:root {
  color-scheme: light;
  --font-display: 'Figtree', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --color-teal-500: #0f9bb4; --color-teal-600: #0c7e93; --color-navy-700: #1e366e;
  --color-ink: #0f3a47; --color-ink-soft: #5a7580;
  --color-mist-100: #edf3f5; --color-mist-200: #dfe8ec; --color-mist-300: #cbd8de;
  --radius-sm: 18px; --radius-md: 26px; --radius-lg: 28px;
  --shadow-card: 0 10px 30px rgba(30,54,110,0.12);
  --sh-btn: 0 6px 16px rgba(30,54,110,0.25); --sh-chip: 0 2px 10px rgba(30,54,110,0.10); --sh-shell: 0 24px 60px rgba(30,54,110,0.18);
  --mc-deep: #1E366E; --mc-soft: #58aebb; --mc-coral: #f08c68; --mc-sand: #efe3d3; --mc-bg: #ffffff; --mc-shell: #ffffff;
  --surface-card: #ffffff; --lock-bg: #eceae7;
  --hatch: repeating-linear-gradient(135deg, #c3d5dc 0 2px, #e4edf0 2px 5px);
  --tint-navy: #e8ebf5; --tint-teal: #e6f6f7; --tint-teal2: #eaf7f9; --tint-green: #e5f4ea; --tint-green-border: #b9dfc6; --tint-red: #fdeef0; --tint-amber: #fbeed9;
  --text-amber: #7a4a0c; --text-navy: #1e366e; --text-teal: #0c7e93; --text-green: #1f8a4c; --text-magenta: #701478; --text-magenta2: #5a1060; --text-red: #c0293b;
}

/* --- Tema oscuro --- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --sh-btn: none; --sh-chip: none; --sh-shell: 0 24px 60px rgba(0,0,0,0.45);
  --mc-bg: #0c0d10; --mc-shell: #131418; --mc-deep: #2a2d36;
  --color-ink: #f1f2f4; --color-ink-soft: #8d929c;
  --color-mist-100: #1b1d23; --color-mist-200: #24272e; --color-mist-300: #323641;
  --surface-card: #17191e; --lock-bg: #1f2227;
  --hatch: repeating-linear-gradient(135deg, #323641 0 2px, #1f2227 2px 5px);
  --tint-navy: #232a45; --tint-teal: #14313a; --tint-teal2: #16353e; --tint-green: #15302a; --tint-green-border: #25503f; --tint-red: #3a2128; --tint-amber: #38301f;
  --text-amber: #e9bd7e; --text-navy: #b9c6ee; --text-teal: #4cc4dc; --text-green: #6fd0a0; --text-magenta: #d9a0e0; --text-magenta2: #d9a0e0; --text-red: #f08f9a;
  --shadow-card: 0 6px 20px rgba(0,0,0,0.35);
}

/* --- Base --- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); background: var(--mc-bg); color: var(--color-ink); }
a { color: var(--color-teal-500); text-decoration: none; }
a:hover { color: var(--text-navy); text-decoration: underline; }

/* --- Controles --- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--color-ink); }
.input { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--color-mist-300); font: inherit; font-size: 14px; color: var(--color-ink); width: 100%; background: var(--surface-card); }
.input:focus { outline: 2px solid var(--color-teal-500); outline-offset: 1px; }
.boton-primario { padding: 11px 22px; border-radius: 999px; border: none; background: var(--mc-deep); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: var(--sh-btn); }
.boton-primario.grande { padding: 13px; font-size: 15px; }
.alerta { padding: 10px 14px; border-radius: 12px; background: var(--tint-red); color: var(--text-red); font-size: 14px; }
.etiqueta { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-soft); }

/* --- Interruptor de tema (claro / oscuro) --- */
.tema-fijo { position: fixed; top: 16px; right: 16px; z-index: 5; }
.tema-switch { position: relative; width: 34px; height: 20px; border-radius: 999px; border: 1px solid var(--color-mist-300); background: var(--color-mist-200); padding: 0; cursor: pointer; flex-shrink: 0; }
.tema-switch span { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-teal-500); color: #fff; display: flex; align-items: center; justify-content: center; transition: left 0.15s; }
:root[data-theme="dark"] .tema-switch span { left: 15px; }
.tema-switch .icono-luna { display: none; }
:root[data-theme="dark"] .tema-switch .icono-sol { display: none; }
:root[data-theme="dark"] .tema-switch .icono-luna { display: block; }

/* --- Pantallas de acceso (login, instalar, errores) --- */
.acceso { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--mc-bg); padding: 24px 24px 48px; }
.acceso-envoltura { width: 100%; max-width: 1180px; display: flex; align-items: center; justify-content: center; gap: 64px; }
.acceso-texto { flex: 1 1 420px; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; max-width: 560px; }
.acceso-logo { width: 240px; max-width: 100%; height: auto; display: block; flex: none; }
.logo-oscuro { display: none; }
:root[data-theme="dark"] .logo-claro { display: none; }
:root[data-theme="dark"] .logo-oscuro { display: block; }
.acceso-intro { display: flex; flex-direction: column; gap: 14px; }
.acceso-intro .etiqueta { font-size: 12px; letter-spacing: 0.08em; }
.acceso-titulo { font-family: var(--font-display); font-size: 44px; font-weight: 800; color: var(--color-ink); line-height: 1.15; margin: 0; }
.acceso-subtitulo { font-size: 16px; color: var(--color-ink-soft); margin: 0; max-width: 440px; }
.casilla-recordar { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--color-ink); cursor: pointer; line-height: 1.35; }
.casilla-recordar input { width: 17px; height: 17px; margin: 1px 0 0; flex: none; accent-color: var(--color-navy-700); cursor: pointer; }
.tarjeta { width: 100%; max-width: 420px; flex: 0 0 420px; background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 40px 36px; display: flex; flex-direction: column; gap: 22px; }
.tarjeta-encabezado { display: flex; flex-direction: column; gap: 4px; }
.tarjeta-titulo { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--color-ink); margin: 0; }
.tarjeta form, .tarjeta-cuerpo { display: flex; flex-direction: column; gap: 16px; }
.tarjeta p { margin: 0; font-size: 14px; color: var(--color-ink-soft); }

@media (max-width: 899px) {
  .acceso-envoltura { flex-direction: column; gap: 40px; }
  .acceso-texto { flex: 0 0 auto; align-items: center; text-align: center; max-width: 480px; }
  .acceso-logo { width: 200px; }
  .acceso-titulo { font-size: 30px; }
  .tarjeta { flex: 0 0 auto; padding: 32px 28px; }
}
a.boton-primario { display: block; text-align: center; color: #fff; text-decoration: none; }

/* --- Botones secundarios, íconos y ayudas --- */
.boton-primario { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
a.boton-primario:hover { color: #fff; text-decoration: none; }
.boton-secundario { display: inline-flex; align-items: center; gap: 6px; justify-content: center; padding: 11px 20px; border-radius: 8px; border: 1px solid var(--color-mist-300); background: var(--surface-card); color: var(--color-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
a.boton-secundario:hover { color: var(--color-ink); text-decoration: none; background: var(--color-mist-100); }
.boton-icono { background: transparent; border: none; color: var(--color-ink-soft); cursor: pointer; padding: 4px; display: flex; }
.boton-icono:hover { color: var(--color-ink); }
.ayuda { font-size: 12px; color: var(--color-ink-soft); }
.texto-suave { color: var(--color-ink-soft); font-weight: 400; }
.aviso-ok { padding: 10px 14px; border-radius: 12px; background: var(--tint-green); border: 1px solid var(--tint-green-border); color: var(--text-green); font-size: 14px; margin-bottom: 18px; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--color-ink); cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--color-teal-500); width: 16px; height: 16px; }
select.input { appearance: auto; }

/* --- Contenido: secciones, listas, chips, formularios --- */
.seccion-titulo { margin: 0 0 14px; font-size: 17px; font-weight: 700; color: var(--color-ink); }
.seccion-titulo .texto-suave { font-size: 13px; }
.tarjeta-seccion { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-md); padding: 22px 24px; }
.tarjeta-seccion p { margin: 0; }
.lista { display: flex; flex-direction: column; gap: 10px; }
.fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface-card); border: 1px solid var(--color-mist-200); color: var(--color-ink); }
.fila:hover { text-decoration: none; color: var(--color-ink); border-color: var(--color-mist-300); background: var(--color-mist-100); }
.fila.inactiva { opacity: 0.62; }
.fila-texto { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.fila-titulo { font-size: 14px; font-weight: 600; }
.fila-detalle { font-size: 12px; color: var(--color-ink-soft); }
.chip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.chip-rol-admin { background: var(--tint-navy); color: var(--text-navy); }
.chip-rol-creador_contenido { background: var(--tint-teal); color: var(--text-teal); }
.chip-rol-miembro { background: var(--color-mist-100); color: var(--color-ink-soft); }
.chip-activo { background: var(--tint-green); color: var(--text-green); }
.chip-inactivo { background: var(--tint-red); color: var(--text-red); }
.formulario { max-width: 560px; display: flex; flex-direction: column; gap: 16px; }
.formulario-botones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* =============================================================================
   Animaciones del diseño (docs/diseno/README.md → "Animaciones").
   Curva común: cubic-bezier(.4,0,.2,1). Se desactivan con "reducir movimiento".
   ============================================================================= */
:root { --ease: cubic-bezier(.4,0,.2,1); }
@keyframes mcPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes mcFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mcFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes mcSlideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mcSlideDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(10px); } }
@keyframes mcPageIn { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mcPageOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(56px); } }
@keyframes mcSlideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes mcSlideOutRight { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes mcSubIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

/* =============================================================================
   Marco de la app — escritorio
   ============================================================================= */
.app-raiz { position: relative; min-height: 100vh; background: var(--mc-bg); padding: 32px; }
.app-shell { position: relative; z-index: 1; display: flex; height: calc(100vh - 64px); border-radius: 36px; overflow: hidden; background: var(--mc-shell); box-shadow: var(--sh-shell); border: 1px solid rgba(255,255,255,0.6); }
:root[data-theme="dark"] .app-shell { border-color: var(--color-mist-200); }

/* Menú lateral (252 px; contraído 72 px) */
.sidebar { width: 252px; flex-shrink: 0; display: flex; flex-direction: column; padding: 24px 14px; gap: 6px; position: relative; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; transition: width 0.3s var(--ease), padding 0.3s var(--ease); }
.sidebar-logo { display: flex; align-items: center; justify-content: center; min-height: 64px; margin: -6px 0 6px; }
.sb-logo { display: none; height: auto; max-width: 100%; flex: none; }
.sb-largo-claro, .sb-largo-oscuro { width: 204px; }
.sb-corto-claro, .sb-corto-oscuro { width: 30px; }
:root .sb-largo-claro { display: block; }
:root[data-theme="dark"] .sb-largo-claro { display: none; }
:root[data-theme="dark"] .sb-largo-oscuro { display: block; }

.nav { position: relative; display: flex; flex-direction: column; gap: 6px; }
.nav-item { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 999px; color: var(--color-ink-soft); font-size: 14px; font-weight: 500; white-space: nowrap; transition: color 0.15s, background 0.15s; }
.nav-item svg { flex-shrink: 0; }
.nav-item:hover { background: rgba(88,174,187,0.16); color: var(--color-ink-soft); text-decoration: none; }
.nav-item.activo, .nav-item.activo:hover { background: var(--mc-deep); color: #fff; font-weight: 700; box-shadow: var(--sh-btn); }
.nav-etiqueta { flex: 1 1 auto; min-width: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; transition: max-width 0.28s var(--ease), opacity 0.18s; }
.nav-chevron { display: grid; place-items: center; flex-shrink: 0; width: 16px; overflow: hidden; color: var(--color-ink-soft); transition: transform 0.22s var(--ease), opacity 0.15s, width 0.28s; }
.nav-item.activo .nav-chevron { color: rgba(255,255,255,0.8); transform: rotate(90deg); }
/* Píldora que se desliza de la sección anterior a la actual (app.js) */
.nav-pildora { position: absolute; left: 0; right: 0; height: 44px; border-radius: 999px; background: var(--mc-deep); box-shadow: var(--sh-btn); z-index: 0; pointer-events: none; transition: top 0.3s var(--ease); }
.nav.deslizando .nav-item.activo { background: transparent; box-shadow: none; }
/* Sub-menú: se abre con grid-template-rows (como el diseño) */
.nav-sub-envoltura { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.26s var(--ease); }
.nav-sub-envoltura.abierta { grid-template-rows: 1fr; }
.nav-sub-recorte { min-height: 0; overflow: hidden; }
.nav-sub { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 4px 8px; margin-left: 21px; border-left: 1px solid var(--color-mist-200); }
.nav-sub-item { display: flex; align-items: center; min-height: 34px; padding: 0 10px; border-radius: 8px; color: var(--color-ink-soft); font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.15s, color 0.15s; }
.nav-sub-item:hover { color: var(--color-ink); text-decoration: none; background: var(--color-mist-100); }
.nav-sub-item.activo { background: var(--color-mist-100); color: var(--color-ink); font-weight: 700; }
.nav-sub-envoltura.animar .nav-sub-item { animation: mcSubIn 0.2s ease both; }
/* Tercer nivel del menú (VeA, 19-oct-2026): el nombre abre la página; la flecha despliega sus páginas. */
.nav-sub-fila { display: flex; align-items: center; gap: 2px; }
.nav-sub-fila .nav-sub-item { flex: 1; min-width: 0; }
.nav-sub-item.padre:not(.activo) { color: var(--color-ink); font-weight: 600; }
.nav-sub-flecha { flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: none; border-radius: 6px; background: none; color: var(--color-ink-soft); cursor: pointer; }
.nav-sub-flecha:hover { background: var(--color-mist-100); color: var(--color-ink); }
.nav-sub-flecha svg { transition: transform 0.2s var(--ease); }
.nav-sub-grupo.abierto .nav-sub-flecha svg { transform: rotate(90deg); }
.nav-sub3-envoltura { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.22s var(--ease); }
.nav-sub-grupo.abierto .nav-sub3-envoltura { grid-template-rows: 1fr; }
.nav-sub3 { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 2px 8px; margin-left: 12px; border-left: 1px solid var(--color-mist-200); }
.nav-sub3-item { min-height: 30px; font-size: 12.5px; }
.nav-sub-envoltura.animar .nav-sub3-item { animation: none; }
.nav-sub-envoltura.animar .nav-sub-item:nth-child(1) { animation-delay: 60ms; }
.nav-sub-envoltura.animar .nav-sub-item:nth-child(2) { animation-delay: 105ms; }
.nav-sub-envoltura.animar .nav-sub-item:nth-child(3) { animation-delay: 150ms; }
.nav-sub-envoltura.animar .nav-sub-item:nth-child(4) { animation-delay: 195ms; }

.sidebar-espacio { flex: 1; }
.sidebar-pie { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-top: 1px solid var(--color-mist-200); margin-top: 8px; }
.sidebar-pie form { margin: 0; }
.sidebar-usuario { flex: 1; min-width: 0; display: flex; flex-direction: column; }
a.sidebar-usuario:hover { text-decoration: none; }
.sidebar-nombre { color: var(--color-ink); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-rol { color: var(--color-ink-soft); font-size: 11px; }

/* Menú contraído (botón del encabezado o Ctrl/⌘+B) */
:root[data-sidebar="col"] .sidebar { width: 72px; padding: 24px 10px; }
:root[data-sidebar="col"] .sb-largo-claro, :root[data-sidebar="col"] .sb-largo-oscuro { display: none; }
:root[data-sidebar="col"] .sb-corto-claro { display: block; }
:root[data-theme="dark"][data-sidebar="col"] .sb-corto-claro { display: none; }
:root[data-theme="dark"][data-sidebar="col"] .sb-corto-oscuro { display: block; }
:root[data-sidebar="col"] .nav-item { justify-content: center; gap: 0; padding: 0; border-radius: 22px; }
:root[data-sidebar="col"] .nav-pildora { border-radius: 22px; }
:root[data-sidebar="col"] .nav-etiqueta { max-width: 0; opacity: 0; flex: 0 0 auto; }
:root[data-sidebar="col"] .nav-chevron { width: 0; opacity: 0; }
:root[data-sidebar="col"] .nav-sub-envoltura { grid-template-rows: 0fr; }
:root[data-sidebar="col"] .sidebar-pie { flex-direction: column; gap: 8px; padding: 10px 0; }
:root[data-sidebar="col"] .sidebar-pie .sidebar-usuario { display: none; }

/* Columna principal */
.app-columna { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pagina-encabezado { position: relative; z-index: 30; flex-shrink: 0; padding: 28px 36px 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.encabezado-titulo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.boton-menu { width: 34px; height: 34px; border-radius: 8px; border: none; background: transparent; color: var(--color-ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.15s, color 0.15s; }
.boton-menu:hover { background: var(--color-mist-100); color: var(--color-ink); }
.pagina-titulo { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; letter-spacing: -0.02em; color: var(--color-ink); }
.pagina-acciones { display: flex; align-items: center; gap: 10px; }
.app-main { flex: 1; min-height: 0; padding: 22px 36px 32px; overflow-y: auto; }

/* Avatar (foto de perfil o ícono) */
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--color-mist-200); display: inline-flex; align-items: center; justify-content: center; color: var(--color-ink-soft); flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-38 { width: 38px; height: 38px; }
.avatar-grande { width: 96px; height: 96px; }
.avatar-grande svg { width: 44px; height: 44px; }

/* Perfil en celular (botón + menú) y pestañas: ocultos en escritorio */
.perfil-movil { position: relative; display: none; }
.perfil-boton { border: none; background: transparent; padding: 0; cursor: pointer; border-radius: 50%; display: flex; }
.perfil-menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); padding: 12px; display: flex; align-items: center; gap: 10px; min-width: 210px; z-index: 30; animation: mcFadeIn 0.18s ease; }
.perfil-menu[hidden] { display: none; }
.perfil-menu form { margin: 0; }
.perfil-menu-usuario { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.perfil-menu-usuario:hover { text-decoration: none; }
.pestanas, .pestanas3 { display: none; }
.nav-movil { display: none; }

/* Mi cuenta */
.rejilla-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: start; }
.foto-perfil { display: flex; align-items: center; gap: 16px; }
.formulario-fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.boton-archivo { position: relative; overflow: hidden; }
.boton-archivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.boton-enlace { background: none; border: none; padding: 0; font: inherit; font-size: 13px; color: var(--text-red); cursor: pointer; }
.boton-enlace:hover { text-decoration: underline; }
.alerta-bloque { margin-bottom: 18px; }
:root.js .solo-sin-js { display: none; }

/* =============================================================================
   Marco de la app — celular (< 900 px, igual que el diseño)
   ============================================================================= */
@media (max-width: 899px) {
  .app-raiz { padding: 0; }
  .app-shell { height: auto; min-height: 100vh; border-radius: 0; box-shadow: none; border: none; overflow: visible; }
  :root[data-theme="dark"] .app-shell { border: none; }
  .sidebar { display: none; }
  .boton-menu { display: none; }
  .perfil-movil { display: block; }
  .pagina-encabezado { padding: 14px 16px; }
  .pestanas { display: flex; gap: 6px; border-bottom: 1px solid var(--color-mist-200); }
  .pestana { flex: 1 1 0; min-width: 0; padding: 10px 2px 8px; border-bottom: 3px solid transparent; color: var(--color-ink-soft); font-size: 12px; font-weight: 500; text-align: center; line-height: 1.25; }
  .pestana:hover { text-decoration: none; color: var(--color-ink); }
  .pestana.activa { border-bottom-color: var(--color-teal-500); color: var(--color-ink); font-weight: 700; }
  .pestanas3 { display: flex; gap: 6px; padding: 10px 16px 0; overflow-x: auto; scrollbar-width: none; }
  .pestanas3::-webkit-scrollbar { display: none; }
  .pestana3 { flex-shrink: 0; padding: 6px 12px; border-radius: 999px; background: var(--color-mist-100); color: var(--color-ink-soft); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
  .pestana3:hover { text-decoration: none; color: var(--color-ink); }
  .pestana3.activa { background: var(--mc-deep); color: #fff; }
  .app-main { padding: 20px 16px 84px; overflow: visible; }
  .nav-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; padding: 6px 4px 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); background: var(--surface-card); border-top: 1px solid var(--color-mist-200); }
  .nav-movil-item { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; color: var(--color-ink-soft); font-size: 10.5px; font-weight: 500; }
  .nav-movil-item:hover { text-decoration: none; color: var(--color-ink); }
  .nav-movil-item.activo { color: var(--text-magenta); font-weight: 700; }
}

/* --- Notificaciones (campana del encabezado) --- */
.notif { position: relative; }
.notif-boton { width: 42px; height: 42px; border-radius: 50%; background: var(--surface-card); box-shadow: var(--sh-chip); border: none; display: flex; align-items: center; justify-content: center; color: var(--color-ink-soft); cursor: pointer; flex-shrink: 0; position: relative; }
.notif-boton:hover { color: var(--color-ink); }
:root[data-theme="dark"] .notif-boton { border: 1px solid var(--color-mist-200); }
.notif-punto { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #d0263a; color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; border: 2px solid var(--surface-card); box-sizing: content-box; pointer-events: none; }
.notif-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 480px; display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: 20px; box-shadow: var(--shadow-card); z-index: 30; overflow: hidden; max-height: min(78vh, 680px); animation: mcFadeIn 0.18s ease; }
.notif-panel[hidden] { display: none; }
.notif-cabecera { padding: 22px 24px 0; display: flex; flex-direction: column; gap: 16px; flex-shrink: 0; }
.notif-titulo-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notif-titulo-fila form { margin: 0; }
.notif-titulo { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--color-ink); letter-spacing: -0.01em; }
.boton-circular { width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; color: var(--color-ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.boton-circular:hover { background: var(--color-mist-100); color: var(--color-ink); }
.notif-pestanas { display: flex; gap: 2px; padding: 4px; background: var(--color-mist-100); border-radius: 14px; align-self: flex-start; max-width: 100%; }
.notif-pestana { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: none; border-radius: 11px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; background: transparent; color: var(--color-ink-soft); white-space: nowrap; }
.notif-pestana.activa { font-weight: 600; background: var(--surface-card); color: var(--color-ink); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.notif-conteo { font-size: 12px; font-weight: 700; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-ink); }
.notif-pestana.activa .notif-conteo { background: var(--color-mist-100); }
.notif-lista { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 8px 24px 12px; flex: 1; min-height: 0; }
.notif-fila { margin: 0; border-bottom: 1.5px dashed var(--color-mist-300); display: flex; align-items: flex-start; gap: 6px; }
.notif-fila-form { flex: 1; min-width: 0; margin: 0; }
.notif-borrar-form { margin: 0; padding-top: 16px; }
.notif-borrar { width: 24px; height: 24px; border-radius: 50%; border: none; background: transparent; color: var(--color-ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.55; transition: opacity 0.15s, background 0.15s; }
.notif-borrar:hover, .notif-borrar:focus-visible { opacity: 1; background: var(--color-mist-100); color: var(--color-ink); }
.notif-fila.saliendo { animation: mcFadeOut 0.2s ease forwards; }
.notif-fila:nth-last-child(2) { border-bottom: none; }
.notif-fila[hidden] { display: none; }
.notif-fila-boton { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border: none; background: transparent; text-align: left; width: 100%; cursor: pointer; font: inherit; }
.notif-icono { width: 40px; height: 40px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-assign { background: #701478; } .notif-status { background: #1e366e; } .notif-msg { background: var(--color-teal-500); }
.notif-meet { background: #4b4c93; } .notif-cam { background: #8e3a96; } .notif-queue { background: #c9711a; } .notif-ok { background: var(--text-green); } .notif-inbox { background: #0c7e93; }
.notif-no { background: var(--text-red); } .notif-cancel { background: #8a1f2b; }
.notif-print { background: #1e366e; } .notif-bill { background: #8a6a1f; } .notif-arroba { background: #0c7e93; }
.notif-texto { flex: 1; min-width: 0; font-size: 15px; color: var(--color-ink); line-height: 1.35; }
.notif-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; min-height: 20px; }
.notif-no-leida { width: 8px; height: 8px; border-radius: 50%; background: var(--color-teal-500); margin-top: 4px; }
.notif-hora { font-size: 13px; color: var(--color-ink-soft); white-space: nowrap; }
.notif-vacio { padding: 36px 8px; text-align: center; font-size: 14px; color: var(--color-ink-soft); }
.notif-vacio[hidden] { display: none; }

/* --- Estado vacío / en construcción --- */
.vacio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 56px 24px; border: 1.5px dashed var(--color-mist-300); border-radius: var(--radius-md); color: var(--color-ink-soft); }
.vacio p { margin: 0; max-width: 460px; }
.vacio-titulo { font-size: 17px; font-weight: 700; color: var(--color-ink); }

@media (max-width: 899px) {
  .notif-panel { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; z-index: 60; max-height: min(78vh, 640px); }
  .pagina-acciones { gap: 8px; flex-shrink: 0; }
  .notif-boton { width: 38px; height: 38px; }
  .pagina-encabezado { flex-wrap: nowrap; }
  .encabezado-titulo { flex: 1; }
  .pagina-titulo { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pagina-acciones .boton-primario { padding: 10px 16px; }
  .solo-escritorio { display: none; }
}

/* =============================================================================
   Tareas (diseño: filas, chips de estado/prioridad, carga, panel de tarea)
   ============================================================================= */
:root { --color-magenta-700: #701478; --color-magenta-800: #5a1060; --color-teal-400: #3ab4c9; }

/* Colores de estado (backlog C2, colores del diseño) */
.estado-sin_comenzar { background: var(--color-mist-300); color: var(--color-ink); }
.estado-en_curso { background: var(--color-teal-500); color: #fff; }
.estado-en_revision { background: #c9711a; color: #fff; }
.estado-terminada_listo { background: #1f8a4c; color: #fff; }
.estado-terminada_no_entregado { background: #8a1f2b; color: #fff; }
/* Prioridad */
.prioridad-baja { background: var(--color-mist-300); color: var(--color-ink); }
.prioridad-media { background: var(--color-navy-700); color: #fff; }
.prioridad-alta { background: var(--color-magenta-800); color: #fff; }
.prioridad-urgente { background: #c0293b; color: #fff; }

.estado-select { min-width: 112px; padding: 4px 10px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700; border: none; outline: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.estado-select:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }

/* Fila de tarea */
.lista-tareas { display: flex; flex-direction: column; gap: 10px; }
.lista-vacia { padding: 6px 4px; font-size: 13px; }
.tarea-fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; background: var(--surface-card); border-radius: var(--radius-sm); border: 1px solid var(--color-mist-200); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.tarea-fila:hover { border-color: var(--color-mist-300); }
.tarea-fila.atrasada { border-color: #c0293b; }
.tarea-subs-zona { min-width: 52px; display: flex; align-items: center; justify-content: center; margin-right: -6px; }
.tarea-subs-zona.con-subs { flex-direction: column; gap: 2px; }
/* Botón de avance de estado (VeA, 14-oct-2026): el ícono toma el color del estado siguiente */
.avance-boton { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 2.5px solid currentColor; background: transparent; cursor: pointer; flex-shrink: 0; transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; }
.avance-boton svg { margin-left: 1px; }
.avance-boton:hover:not(:disabled) { transform: scale(1.1); background-color: var(--color-mist-100); box-shadow: 0 0 0 4px var(--color-mist-100); }
.avance-boton:active:not(:disabled) { transform: scale(0.92); }
.avance-boton:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.avance-boton.avanzando { animation: mcAvance 0.45s ease forwards; cursor: progress; }
.avance-en_curso { color: var(--color-teal-500); }
.avance-en_revision { color: #c9711a; }
.avance-terminada_listo { color: #1f8a4c; }
.avance-imp-diseno_cotizacion { color: #0c7e93; }
.avance-imp-aprobacion_administracion { color: #c9711a; }
.avance-imp-en_produccion { color: var(--color-navy-700); }
.avance-imp-completado { color: #1f8a4c; }
:root[data-theme="dark"] .avance-imp-en_produccion { color: #6f8fd9; }
.avance-pausa { color: var(--color-ink-soft); opacity: 0.6; cursor: not-allowed; }
.avance-pausa svg { margin-left: 0; }
.avance-listo { background: #1f8a4c; border-color: #1f8a4c; color: #fff; cursor: default; animation: mcSubIn 0.2s ease; }
.avance-listo svg { margin-left: 0; }
@keyframes mcAvance { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 0.5; } }
.subs-chip { display: inline-flex; align-items: center; gap: 3px; padding: 6px 8px 6px 6px; border-radius: 8px; border: none; background: transparent; color: var(--color-ink-soft); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.subs-chip:hover, .subs-chip[aria-expanded="true"] { background: var(--color-mist-100); color: var(--color-ink); }
.subs-chip svg { transition: transform 0.15s; }
.subs-chip[aria-expanded="true"] svg { transform: rotate(180deg); }
.tarea-info { flex: 1; min-width: 180px; }
.tarea-nombre { display: block; font-size: 14px; font-weight: 600; color: var(--color-ink); }
.tarea-nombre:hover { color: var(--color-ink); }
.tarea-fila.hecha .tarea-nombre { color: var(--color-ink-soft); text-decoration: line-through; }
.tarea-detalle { font-size: 12px; color: var(--color-ink-soft); margin-top: 2px; }
.tarea-fecha { font-size: 12px; color: var(--color-ink-soft); white-space: nowrap; }
.tarea-fecha.vencida { color: var(--text-red); font-weight: 700; }
.tarea-avatares { display: flex; gap: 6px; }
.avatar-24 { width: 24px; height: 24px; }
.avatar-24 svg { width: 13px; height: 13px; }
.tarea-subs { flex-basis: 100%; display: flex; flex-direction: column; padding: 6px 0 0 4px; border-top: 1px dashed var(--color-mist-300); cursor: default; }
.tarea-subs[hidden] { display: none; }
.tarea-subs.deslizando { overflow: hidden; transition: height 0.24s var(--ease), opacity 0.24s var(--ease), padding-top 0.24s var(--ease); }
.tarea-subs.plegada { opacity: 0; padding-top: 0; }
.tarea-sub { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; color: var(--color-ink); }
.sub-check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-mist-300); background: var(--surface-card); color: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; flex-shrink: 0; }
.sub-check.marcada { border: none; background: var(--color-teal-500); color: #fff; }
.tachada { color: var(--color-ink-soft); text-decoration: line-through; }

/* Mi Espacio: resumen */
.mi-espacio { display: flex; flex-direction: column; gap: 28px; max-width: 1100px; }
.bloque-titulo { margin: 0 0 14px; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--color-ink); }
.bloque-sub { font-size: 12px; font-weight: 500; color: var(--color-ink-soft); }
.bloque-encabezado { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.bloque-encabezado.entre { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.bloque-titulo-grande { margin: 0 0 4px; font-family: var(--font-display); font-size: 18px; color: var(--color-ink); }
.acciones-fila { display: flex; gap: 10px; flex-wrap: wrap; }
.resumen-fila { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.tarjeta-resumen { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 14px; flex: 0 1 460px; min-width: 280px; }
.resumen-total { display: flex; align-items: baseline; gap: 10px; }
.resumen-numero { font-family: var(--font-display); font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--color-ink); }
.resumen-unidad { font-size: 12px; font-weight: 600; color: var(--color-ink-soft); }
.barras { display: flex; gap: 8px; }
.barra { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 7px; border: none; background: none; padding: 0; font: inherit; cursor: pointer; }
.barra-pista { height: 130px; border-radius: 12px; background: var(--color-mist-100); display: flex; align-items: flex-end; outline-offset: 2px; }
.barra[aria-expanded="true"] .barra-pista { outline: 2px solid var(--color-ink-soft); }
.barra-relleno { width: 100%; border-radius: 12px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 9px; transition: height 0.3s var(--ease); }
.barra-relleno.vacia { background: transparent; }
.barra-asa { position: absolute; top: 7px; width: 24px; height: 4px; border-radius: 99px; background: rgba(255,255,255,0.45); }
.barra-num { font-size: 19px; font-weight: 800; line-height: 1; color: var(--color-ink-soft); }
.barra-relleno:not(.vacia) .barra-num { color: #fff; }
.barra-etiqueta { text-align: center; font-size: 12px; font-weight: 600; color: var(--color-ink-soft); }
.barra[aria-expanded="true"] .barra-etiqueta { font-weight: 800; color: var(--color-ink); }
.col-gris { background: #6b7280; } .col-teal { background: #0f9bb4; } .col-verde { background: #1f8a4c; } .col-rojo { background: #c0293b; }
.alto-30 { height: 30%; } .alto-35 { height: 35%; } .alto-40 { height: 40%; } .alto-45 { height: 45%; } .alto-50 { height: 50%; }
.alto-55 { height: 55%; } .alto-60 { height: 60%; } .alto-65 { height: 65%; } .alto-70 { height: 70%; } .alto-75 { height: 75%; }
.alto-80 { height: 80%; } .alto-85 { height: 85%; } .alto-90 { height: 90%; } .alto-95 { height: 95%; } .alto-100 { height: 100%; }
.resumen-izquierda { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; }
.resumen-izquierda .tarjeta-resumen { flex: none; min-width: 0; }
.resumen-derecha { flex: 2 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.resumen-fila + .tarjeta-lateral { margin-top: 14px; }
.tarjeta-lateral { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.tarjeta-lateral-titulo { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--color-ink); }
.texto-chico { font-size: 13px; }
.reunion-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--color-mist-200); }
.reunion-fila.vacia { font-size: 13px; color: var(--color-ink-soft); }
.reunion-nombre { font-size: 14px; font-weight: 600; color: var(--color-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reunion-cuando { font-size: 12px; color: var(--color-ink-soft); white-space: nowrap; }
.grupo-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; animation: mcSlideUp 0.2s ease; }
.grupo-lista[hidden] { display: none; }
.grupo-item { display: block; padding: 11px 14px; border-radius: 8px; background: var(--surface-card); border: 1px solid var(--color-mist-200); font-size: 14px; font-weight: 600; color: var(--color-ink); }
.grupo-item:hover { text-decoration: none; color: var(--color-ink); background: var(--color-mist-100); }
.grupo-item > span:first-child { display: flex; flex-direction: column; }
.grupo-item-nombre { font-size: 14px; font-weight: 600; }
.grupo-item-detalle { font-size: 12px; color: var(--color-ink-soft); }
.grupo-item-chips { display: flex; align-items: center; gap: 10px; }

/* Botón "+ Nuevo" del encabezado */
.nuevo { position: relative; }
.boton-nuevo { padding: 11px 18px; font-weight: 600; }
.menu-nuevo { position: absolute; top: calc(100% + 8px); right: 0; background: var(--surface-card); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); padding: 6px; display: flex; flex-direction: column; min-width: 190px; z-index: 30; animation: mcFadeIn 0.18s ease; }
.menu-nuevo[hidden] { display: none; }
.menu-nuevo a { padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--color-ink); }
.menu-nuevo a:hover { background: var(--color-mist-100); text-decoration: none; color: var(--color-ink); }

/* Panel lateral (modal): escritorio entra desde la derecha; celular sube como tarjeta */
.modal-fondo { position: fixed; inset: 0; z-index: 50; display: flex; align-items: stretch; justify-content: flex-end; background: rgba(20,20,24,0.32); animation: mcFadeIn 0.18s ease; }
.modal-fondo[hidden] { display: none; }
.modal-fondo.cerrando { animation: mcFadeOut 0.18s ease forwards; }
.modal-panel { background: var(--surface-card); width: 600px; max-width: 92vw; height: 100vh; display: flex; flex-direction: column; box-shadow: var(--shadow-card); animation: mcSlideInRight 0.2s ease-out; }
.modal-fondo.cerrando .modal-panel { animation: mcSlideOutRight 0.2s ease-in forwards; }
body.con-modal { overflow: hidden; }
.panel-cabecera { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--color-mist-200); flex-shrink: 0; }
.panel-titulo { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--color-ink); }
.panel-cabecera { gap: 12px; }
.panel-cabecera-acciones { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.boton-cabecera { padding: 9px 16px; font-size: 13.5px; white-space: nowrap; }
/* Aviso de cambios sin guardar al cerrar un panel */
.aviso-salir-fondo { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20,20,24,0.45); animation: mcFadeIn 0.15s ease; }
.aviso-salir { width: 100%; max-width: 380px; background: var(--surface-card); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 22px; animation: mcSlideUp 0.18s ease; }
.aviso-salir-titulo { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--color-ink); }
.aviso-salir-texto { margin: 8px 0 18px; font-size: 14px; color: var(--color-ink-soft); }
.rejilla-campos[hidden], .ayuda[hidden] { display: none; }
.serie-texto { padding: 9px 0; font-size: 14px; color: var(--color-ink); }
.serie-icono { display: inline-flex; margin-left: 6px; color: var(--color-ink-soft); vertical-align: -2px; }
.aviso-salir-botones { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.panel-cerrar { color: var(--color-ink-soft); padding: 6px; border-radius: 50%; display: flex; }
.panel-cerrar:hover { color: var(--color-ink); background: var(--color-mist-100); }
.panel-cuerpo { padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; flex: 1; min-height: 0; margin: 0; }
.panel-pie { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--color-mist-200); flex-wrap: wrap; }
.panel-pie-derecha { display: flex; gap: 10px; margin-left: auto; }
.panel-pagina { max-width: 640px; background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-md); overflow: hidden; }
.boton-peligro { padding: 11px 20px; border-radius: 8px; border: 1px solid var(--tint-red); background: var(--tint-red); color: var(--text-red); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.boton-peligro:hover { border-color: var(--text-red); }
.obligatorio { color: var(--text-magenta); }
.opcional { color: var(--color-ink-soft); font-weight: 400; }
.etiqueta-campo { font-size: 13px; font-weight: 600; color: var(--color-ink); }
.rejilla-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.campo-ancho { grid-column: 1 / -1; }
.con-candado { position: relative; }
.con-candado .candado { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-ink-soft); display: flex; }
.input:disabled { background: var(--lock-bg); color: var(--color-ink-soft); cursor: not-allowed; border-color: var(--color-mist-200); }
.input[readonly] { background: var(--lock-bg); color: var(--color-ink-soft); border-color: var(--color-mist-200); }
.con-candado select:disabled { appearance: none; }
.valor-bloqueado { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--color-mist-200); background: var(--lock-bg); font-size: 14px; color: var(--color-ink-soft); }
.nota-bloqueo { display: flex; align-items: center; gap: 8px; background: var(--color-mist-100); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--color-ink-soft); }
.chips-seleccion { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-seleccion { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--color-mist-300); background: var(--surface-card); font-size: 13px; color: var(--color-ink); cursor: pointer; }
.chip-seleccion input { accent-color: var(--color-teal-500); margin: 0; }
.chip-seleccion:has(input:checked) { border-color: var(--color-teal-500); background: var(--tint-teal2); }
.chip-seleccion.bloqueado { background: var(--lock-bg); border-color: var(--color-mist-200); color: var(--color-ink-soft); cursor: default; }
.select-multiple { padding: 6px; }
.subtareas-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.subtareas-avance { font-size: 12px; font-weight: 800; color: var(--text-teal); }
.subtareas-lista { display: flex; flex-direction: column; gap: 8px; }
.subtarea-fila { display: flex; align-items: center; gap: 8px 10px; padding: 8px 10px; border: 1px solid var(--color-mist-200); border-radius: 12px; font-size: 13px; color: var(--color-ink); animation: mcFadeIn 0.18s ease; }
.subtarea-fila.nueva > span:not(.subtarea-agarrar) { flex: 1; }
.subtarea-agarrar { display: flex; align-items: center; justify-content: center; width: 18px; align-self: stretch; margin: -4px 0 -4px -4px; color: var(--color-ink-soft); cursor: grab; touch-action: none; border-radius: 6px; flex: none; }
.subtarea-agarrar svg { fill: currentColor; }
.subtarea-agarrar:hover, .subtarea-agarrar:focus-visible { color: var(--color-ink); background: var(--color-mist-100); outline: none; }
.subtarea-fila.arrastrando { background: var(--tint-teal); border-color: var(--color-teal-500); box-shadow: var(--sh-chip); cursor: grabbing; }
.subtarea-fila.arrastrando .subtarea-agarrar { cursor: grabbing; }
.subtarea-fila.quitada { opacity: 0.45; text-decoration: line-through; }
.subtarea-marca { flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.subtarea-marca input { accent-color: var(--color-teal-500); width: 16px; height: 16px; margin: 0; }
.subtarea-marca input:checked + span { color: var(--color-ink-soft); text-decoration: line-through; }
.subtarea-quitar { color: var(--color-ink-soft); cursor: pointer; display: flex; padding: 4px; }
.subtarea-quitar input { position: absolute; opacity: 0; width: 0; height: 0; }
.subtarea-quitar:hover { color: var(--text-red); }
.subtarea-agregar { display: flex; gap: 8px; flex-wrap: wrap; }
.subtarea-agregar .input { flex: 1; min-width: 160px; }

@media (max-width: 899px) {
  .modal-fondo { align-items: center; justify-content: center; padding: 20px; background: rgba(20,20,24,0.5); }
  .modal-panel { border-radius: var(--radius-md); width: 100%; max-width: 640px; max-height: 88vh; height: auto; animation: mcSlideUp 0.2s ease; }
  .modal-fondo.cerrando .modal-panel { animation: mcSlideDown 0.2s ease-in forwards; }
  .boton-nuevo { padding: 10px 14px; }
}
.con-candado .input:disabled { padding-right: 36px; text-overflow: ellipsis; }
:root[data-theme="dark"] .tarea-fila.atrasada, :root[data-theme="dark"] .personal-fila.atrasada { border-color: #e0465a; }

/* Espacios con color (diseño 9-oct-2026) */
.area-eventos_congregacionales, .espacio-eventos_congregacionales { background-color: #8a6a1f; color: #fff8e6; }
.area-solicitudes_ministeriales, .espacio-solicitudes_ministeriales { background-color: #6b4f40; color: #fbefe8; }
.area-medios_comunicaciones, .espacio-medios_comunicaciones { background-color: #3a6b4d; color: #eaf8ef; }
.area-identidad_vea, .espacio-identidad_vea { background-color: #3b6296; color: #eaf2ff; }
.area-discipulado_creativo, .espacio-discipulado_creativo { background-color: #6a4c80; color: #f5ecfb; }
.area-sin_area { background-color: var(--color-mist-300); }
.select-espacio[class*="espacio-"] { font-weight: 700; border-color: transparent; }
.select-espacio[class*="espacio-"]:disabled { opacity: 1; -webkit-text-fill-color: currentColor; }
.select-espacio option { background: var(--surface-card); color: var(--color-ink); font-weight: 400; }
/* Barra "Tareas por área de trabajo": una unidad por tarea, agrupadas por área */
.areas-barra { display: flex; height: 12px; }
.area-unidad { flex: 1 1 0; min-width: 4px; }
.area-unidad.area-inicio { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.area-unidad.area-fin { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
.area-unidad.area-inicio:not(:first-child) { margin-left: 3px; }
.areas-leyenda { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.area-item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--color-ink-soft); }
.area-item.dominante { font-weight: 800; color: var(--color-ink); }
.area-punto { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Guía de Sprint Points bajo el selector (diseño 9-oct-2026) */
.puntos-guia { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: var(--color-mist-100); border-radius: 8px; padding: 8px 10px; }
.puntos-tag { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--tint-navy); color: var(--text-navy); border: 1px solid transparent; }
.puntos-tag.vacia { background: var(--surface-card); color: var(--color-ink-soft); border: 1px dashed var(--color-mist-300); }
.puntos-ayuda { font-size: 12px; line-height: 1.4; color: var(--color-ink-soft); }

/* Comentarios de la tarea (D1/D2, diseño de comentarios del panel) */
.comentarios { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--color-mist-200); }
.comentarios-lista { display: flex; flex-direction: column; gap: 8px; }
.comentario { background: var(--color-mist-100); border-radius: 8px; padding: 10px 12px; }
.comentario-cabecera { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--color-ink-soft); margin-bottom: 4px; }
.comentario-cabecera b { color: var(--color-ink); }
.comentario-texto { font-size: 13px; color: var(--color-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.comentario-nuevo { display: flex; gap: 8px; }
.comentario-nuevo .input { flex: 1; min-width: 0; }
/* Menciones y link del material (VeA, 16-oct-2026) */
.comentario-nuevo { position: relative; }
.mencion-lista { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 30; min-width: 220px; max-width: 100%; background: var(--surface-card); border: 1px solid var(--color-mist-300); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); padding: 4px; display: flex; flex-direction: column; gap: 2px; animation: mcFadeIn 0.12s var(--ease); }
.mencion-lista[hidden] { display: none; }
.mencion-op { padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--color-ink); cursor: pointer; }
.mencion-op:hover, .mencion-op.activa { background: var(--tint-teal); color: var(--text-teal); }
.mencion { background: var(--tint-teal); color: var(--text-teal); font-weight: 700; border-radius: 4px; padding: 0 3px; }
.material-fila { display: flex; align-items: center; gap: 8px; }
.material-fila .input { flex: 1; min-width: 0; }
.material-boton { padding: 8px 14px; font-size: 13px; }

/* =============================================================================
   Campañas / Eventos (B2, L1; diseño "Campañas / Eventos" y "Mis Campañas y Eventos")
   ============================================================================= */
.ce-pantalla { display: flex; flex-direction: column; gap: 24px; max-width: 1100px; }
.ce-seccion { margin: 0 0 14px; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--color-ink); }
.ce-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.ce-vacio { font-size: 14px; color: var(--color-ink-soft); background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 18px 20px; }
.ce-tarjeta { background: var(--surface-card); border-radius: var(--radius-sm); border: 1px solid var(--color-mist-200); padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; min-width: 0; transition: border-color 0.15s; }
.ce-tarjeta:hover { border-color: var(--color-mist-300); }
.ce-tarjeta-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ce-nombre { font-size: 15px; font-weight: 700; color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; }
.ce-nombre:hover, .ce-nombre:visited { color: var(--color-ink); text-decoration: none; }
.ce-categoria { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--color-mist-200); color: var(--color-ink-soft); }
.ce-enfoque { font-size: 12px; color: var(--color-ink-soft); }
.ce-avance { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ce-avance-titulo { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-soft); }
.ce-avance-texto { font-size: 14px; font-weight: 600; color: var(--color-ink); }
.ce-barra { height: 6px; border-radius: 999px; background: var(--hatch); overflow: hidden; }
.ce-barra-relleno { display: block; height: 100%; background: #1f8a4c; border-radius: 999px; }
.ancho-0 { width: 0%; } .ancho-5 { width: 5%; } .ancho-10 { width: 10%; } .ancho-15 { width: 15%; } .ancho-20 { width: 20%; } .ancho-25 { width: 25%; } .ancho-30 { width: 30%; } .ancho-35 { width: 35%; } .ancho-40 { width: 40%; } .ancho-45 { width: 45%; } .ancho-50 { width: 50%; } .ancho-55 { width: 55%; } .ancho-60 { width: 60%; } .ancho-65 { width: 65%; } .ancho-70 { width: 70%; } .ancho-75 { width: 75%; } .ancho-80 { width: 80%; } .ancho-85 { width: 85%; } .ancho-90 { width: 90%; } .ancho-95 { width: 95%; } .ancho-100 { width: 100%; }
.ce-conteos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ce-conteo { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.ce-conteo.gris { background: var(--color-mist-200); color: var(--color-ink-soft); }
.ce-conteo.teal { background: var(--tint-teal); color: var(--text-teal); }
.ce-conteo.verde { background: var(--tint-green); color: var(--text-green); }
.ce-conteo.rojo { background: var(--tint-red); color: var(--text-magenta2); }
/* Colores de estado de campañas y eventos (diseño) */
.ce-estado-activa, .ce-estado-en_desarrollo { background: #0c7e93; color: #fff; }
.ce-estado-en_espera, .ce-estado-calendario { background: var(--color-mist-300); color: var(--color-ink); }
.ce-estado-terminada, .ce-estado-terminado { background: var(--color-navy-700); color: #fff; }
/* Tareas vinculadas en la ficha (solo lectura) */
.vinculadas { display: flex; flex-direction: column; gap: 8px; }
.vinculada { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--color-mist-100); border-radius: 8px; padding: 10px 12px; color: var(--color-ink); text-decoration: none; font-size: 13px; }
a.vinculada:hover { background: var(--color-mist-200); }
.vinculada-nombre { min-width: 0; overflow-wrap: anywhere; }
.vinculada-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.vinculada-fecha { font-size: 12px; color: var(--color-ink-soft); }
.vinculada-fecha.vencida { color: var(--text-red); font-weight: 700; }
.vinculada .chip { padding: 3px 10px; font-size: 11px; }
.enlace-accion { font-size: 13px; font-weight: 700; color: var(--text-teal); text-decoration: none; }
.enlace-accion:hover { text-decoration: underline; }

/* =============================================================================
   Reuniones (E1, L2): calendario mensual, lista del día y ficha (diseño)
   ============================================================================= */
.calendario { max-width: 1100px; }
.cal-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.cal-titulo-grupo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cal-titulo { margin: 0; font-family: var(--font-display); font-size: 18px; color: var(--color-ink); }
.boton-pildora { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; background: var(--color-teal-500); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
.boton-pildora:hover { background: var(--color-teal-600); }
.cal-nav { display: flex; align-items: center; gap: 10px; }
.cal-flecha { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--color-mist-300); background: var(--surface-card); color: var(--color-ink); font-size: 16px; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.cal-flecha:hover { background: var(--color-mist-100); }
.cal-mes { font-size: 14px; font-weight: 700; color: var(--color-ink); min-width: 150px; text-align: center; }
.cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dias-semana { margin-bottom: 6px; }
.cal-dias-semana div { font-size: 11px; font-weight: 700; color: var(--color-ink-soft); text-align: center; text-transform: uppercase; letter-spacing: 0.04em; }
.solo-movil-cal { display: none; }
.cal-dia { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 10px; background: var(--surface-card); border: 1px solid var(--color-mist-200); text-decoration: none; transition: background 0.15s; }
.cal-dia:hover { background: var(--color-mist-100); }
.cal-dia.fuera { opacity: 0.4; }
.cal-dia.mia { background: var(--tint-teal2); }
.cal-dia.hoy { border: 2px solid var(--color-teal-500); }
.cal-dia.elegido { background: var(--color-teal-500); border: 2px solid var(--color-teal-600); }
.cal-num { font-size: 13px; font-weight: 500; color: var(--color-ink); }
.cal-dia.fuera .cal-num { color: var(--color-ink-soft); }
.cal-dia.mia .cal-num, .cal-dia.elegido .cal-num { font-weight: 700; }
.cal-dia.elegido .cal-num { color: #fff; }
.cal-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--color-mist-300); }
.cal-dia.mia .cal-punto { background: var(--color-teal-500); }
.cal-dia.elegido .cal-punto { background: #fff; }
.cal-dia-titulo { margin: 18px 0 10px; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--color-ink); }
.reuniones-lista { display: flex; flex-direction: column; gap: 10px; }
.reuniones-vacio { font-size: 13px; color: var(--color-ink-soft); background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 14px 16px; }
.reunion-item { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--radius-sm); cursor: pointer; background: var(--surface-card); border: 1px solid var(--color-mist-200); }
.reunion-item.mia { background: var(--tint-teal2); border-color: var(--color-teal-400); }
.reunion-item-info { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.reunion-item-nombre { font-size: 14px; font-weight: 600; color: var(--color-ink); text-decoration: none; }
.reunion-item-personas { font-size: 12px; color: var(--color-ink-soft); }
.reunion-item-cuando { font-size: 13px; color: var(--color-ink-soft); white-space: nowrap; }
.reunion-item-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip-participas { font-size: 11px; font-weight: 700; color: #fff; background: var(--color-navy-700); padding: 3px 9px; border-radius: 999px; }
.reunion-solo-lectura { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--color-ink-soft); }
.boton-mini { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--color-mist-300); background: var(--surface-card); font: inherit; font-size: 12px; font-weight: 700; color: var(--color-ink); cursor: pointer; text-decoration: none; }
.boton-mini.peligro { border-color: #c0293b; color: var(--text-red); }
.en-linea { display: inline; margin: 0; }
.ficha-dato { display: flex; flex-direction: column; gap: 8px; }
.pub-ficha-fecha { max-width: 220px; }
.ficha-etiqueta { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-soft); }
.ficha-valor { font-size: 15px; font-weight: 600; color: var(--color-ink); }
.chip-persona { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--color-mist-100); border: 1px solid var(--color-mist-200); font-size: 13px; color: var(--color-ink); }
.chip-persona.yo { background: var(--tint-teal2); border-color: var(--color-teal-400); }
.chip-tu { font-size: 10.5px; font-weight: 700; color: var(--text-teal); }
.rejilla-campos.dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.reunion-fila[data-abrir-panel] { cursor: pointer; }
@media (max-width: 899px) {
  .cal-rejilla { gap: 4px; }
  .solo-escritorio-cal { display: none; }
  .solo-movil-cal { display: inline; }
  .cal-dia { min-height: 44px; }
  .cal-mes { min-width: 0; }
}
.cal-dia:hover, .cal-dia:focus, .cal-flecha:hover, .reunion-item-nombre:hover, .boton-mini:hover, .boton-pildora:hover { text-decoration: none; }

/* =============================================================================
   Grabaciones (E2): etiquetas de tipo, agenda, ficha y citados
   ============================================================================= */
.chip-tipo { display: inline-flex; align-items: center; padding: 2px 8px; margin-right: 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; vertical-align: middle; }
.chip-tipo.reunion { background: var(--tint-navy); color: var(--text-navy); }
.chip-tipo.grabacion { background: #f6e8f7; color: var(--text-magenta); }
:root[data-theme="dark"] .chip-tipo.grabacion { background: #35203a; }
.cal-puntos { display: flex; gap: 3px; }
.cal-punto.grab { width: 7px; height: 7px; background: #b04ab8; border-radius: 0; }
.cal-dia.mia .cal-punto.grab { background: #b04ab8; }
.cal-dia.elegido .cal-punto.grab { background: #fff; }
.cal-leyenda { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--color-ink-soft); }
.cal-leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.cal-leyenda .cal-punto { background: var(--color-teal-500); }
.cal-leyenda .cal-punto.grab { background: #b04ab8; }
/* Equipo › Calendario con eventos (VeA, 23-oct-2026): todo el ancho, eventos con el color de su categoría. */
.calendario.ecal { max-width: none; display: flex; flex-direction: column; gap: 10px; }
.ecal .cal-cabecera { margin-bottom: 0; }
.ecal-acciones { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.ecal-leyenda { flex-wrap: wrap; gap: 8px 16px; margin-top: 0; }
.ecal-muestra { width: 14px; height: 9px; border-radius: 3px; display: inline-block; }
.ecal-dia { min-height: 112px; }
/* Día elegido y día de hoy (VeA, 23-oct-2026; Equipo › Calendario y Parrilla › Calendario, clase
   .cal-marcas), sin que nada se mueva dentro de la casilla:
   - elegido: borde teal con halo, dibujados por fuera (sombra), sin cambiar el tamaño;
   - hoy: cuadro resaltado en teal suave y su número dentro de un círculo teal;
   - el número de todos los días ocupa siempre el mismo alto, con o sin círculo.
   Los días con algo propio no llevan fondo de color, para no confundirse. */
.cal-marcas .pcal-num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; }
.ecal .pcal-dia-cabeza { justify-content: flex-start; }
.cal-marcas .pcal-dia { border: 1px solid var(--color-mist-200); }
.ecal .ecal-dia.mia { background: var(--surface-card); }
.cal-marcas .pcal-dia.elegido { background: var(--surface-card); border: 1px solid var(--color-mist-200); box-shadow: 0 0 0 2px var(--color-teal-500), 0 0 0 5px rgba(15, 155, 180, 0.3); }
.cal-marcas .pcal-dia.hoy { background: var(--tint-teal2); border: 1px solid var(--color-mist-200); }
.cal-marcas .pcal-dia.hoy .pcal-num { background: var(--color-teal-500); color: #fff; font-weight: 800; }
.cal-marcas .pcal-dia.fuera.hoy { background: transparent; }
.ecal-items { gap: 4px; }
.ecal-evento { display: flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 700; line-height: 1.3; min-width: 0; text-decoration: none; }
.ecal-evento:hover { text-decoration: none; filter: brightness(1.08); }
.ecal-evento-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.ecal-evento .cal-punto.grab { flex: none; }
.ecal-item { display: flex; align-items: center; gap: 5px; padding: 1px 2px; font-size: 11.5px; color: var(--color-ink); min-width: 0; text-decoration: none; }
.ecal-item .cal-punto { flex: none; background: var(--color-teal-500); }
.ecal-item .cal-punto.grab { background: #b04ab8; }
.ecal-item.mia { font-weight: 700; }
.ecal-item-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ecal-mas { font-size: 11px; font-weight: 700; color: var(--color-ink-soft); padding-left: 2px; }
.ecal .pcal-puntos .cal-punto { background: var(--color-teal-500); }
.ecal .pcal-puntos .cal-punto.grab { background: #b04ab8; }
.ecal-agenda-evento { cursor: pointer; }
/* Evento con su grabación agrupada en la agenda (VeA, 23-oct-2026): una tarjeta con el color de la categoría. */
.ecal-agenda-grupo { border: 1px solid var(--color-mist-200); border-left: 5px solid var(--color-mist-300); border-radius: 14px; background: var(--surface-card); overflow: hidden; }
.ecal-agenda-grupo > .reunion-item { border: 0; border-radius: 0; }
.ecal-agenda-grabacion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; margin: 0 12px 12px 28px; padding: 10px 14px; border-radius: 10px; background: #f6e8f7; border: 1px solid #ecc9ef; cursor: pointer; }
:root[data-theme="dark"] .ecal-agenda-grabacion { background: #2c1f30; border-color: #4a2f50; }
.ecal-agenda-grabacion .reunion-item-nombre { display: inline-flex; align-items: center; gap: 7px; }
.ecal-agenda-grabacion .reunion-item-acciones { display: flex; align-items: center; gap: 8px; }
[data-cal-lista].entra { animation: mcSlideUp 0.28s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { [data-cal-lista].entra { animation: none; } }
/* Parrilla › Calendario a todo el ancho, como Equipo › Calendario (VeA, 23-oct-2026). */
.pcal.pub-pantalla { max-width: none; }
.borde-categoria-ministerial { border-left-color: #8b4a2b; }
.borde-categoria-congregacional { border-left-color: #8a6a1f; }
.borde-categoria-recurrente { border-left-color: #3b6296; }
.borde-categoria-especial { border-left-color: #7a3a63; }
.ecal-agenda-evento .reunion-item-personas .cal-punto.grab { display: inline-block; vertical-align: middle; }
.cev-grabaciones { display: flex; flex-direction: column; gap: 6px; }
.cev-grabacion { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.cev-par { font-weight: 600; }
.ce-fecha { font-size: 12.5px; font-weight: 700; color: var(--color-ink-soft); }
.ce-estado-archivado, .ce-estado-archivada { background: var(--color-mist-300); color: var(--color-ink); }
.nota-papel { background: var(--tint-teal2); border: 1px solid var(--color-teal-400); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--color-ink); }
.ficha-texto { font-size: 14px; color: var(--color-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.citados-lista { display: flex; flex-direction: column; gap: 8px; }
.citado-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--color-mist-100); border-radius: 8px; padding: 10px 12px; }
.citado-fila.yo { background: var(--tint-teal2); }
.citado-quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.citado-nombre { font-size: 13px; font-weight: 600; color: var(--color-ink); }
.citado-correo { font-size: 12px; color: var(--color-ink-soft); overflow-wrap: anywhere; }
.citado-roles { display: flex; flex-wrap: wrap; gap: 5px; }
.chip-rol-grab { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-card); border: 1px solid var(--color-mist-300); color: var(--color-ink); }
.orden-rodaje { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--color-mist-200); }
.orden-rodaje .boton-secundario:disabled { opacity: 0.5; cursor: not-allowed; }
.citados-editar { display: flex; flex-direction: column; gap: 10px; }
/* Fechas de un evento (VeA, 27-oct-2026) */
.evf-lista { display: flex; flex-direction: column; gap: 8px; }
.evf-fila { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border: 1px solid var(--color-mist-200); border-radius: 12px; background: var(--color-mist-100); animation: mcFadeIn 0.15s var(--ease); }
.evf-campos { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.evf-campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--color-ink-soft); min-width: 0; }
.evf-campo .input { min-width: 0; }
.evf-lista .evf-fila:only-child .evf-quitar { visibility: hidden; }
@media (max-width: 900px) { .evf-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .evf-fila { align-items: flex-start; padding: 10px; gap: 6px; } .evf-campo .input { padding-left: 10px; padding-right: 6px; font-size: 14px; } }
.citado-editar { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--color-mist-200); border-radius: 12px; background: var(--color-mist-100); }
.citado-editar-fila { display: flex; gap: 8px; align-items: center; }
.citado-editar-fila .input { flex: 1; min-width: 0; }
.citado-externo { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.citado-editar:has(option[value="externo"]:checked) .citado-externo { display: grid; }
.citado-editar .chip-seleccion { padding: 4px 9px; font-size: 12px; }
@media (max-width: 899px) { .citado-externo { grid-template-columns: 1fr; } }
.rejilla-campos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 899px) { .rejilla-campos.tres { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }

/* =============================================================================
   Tareas personales (F4; diseño "Tareas personales" en Todas mis tareas)
   ============================================================================= */
.mi-espacio > section + .bloque-encabezado { margin-top: 12px; }
.personal-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--surface-card); border-radius: var(--radius-sm); border: 1px solid var(--color-mist-200); cursor: pointer; }
.personal-fila.atrasada { border-color: #c0293b; }
.personal-fila.hecha .personal-nombre { color: var(--color-ink-soft); text-decoration: line-through; }
.personal-nombre { flex: 1; min-width: 160px; font-size: 14px; font-weight: 600; color: var(--color-ink); text-decoration: none; }
.personal-nombre:hover { text-decoration: none; }
.personal-fecha { font-size: 12px; color: var(--color-ink-soft); white-space: nowrap; }
.personal-fecha.vencida { color: var(--text-red); font-weight: 700; }
.personal-sin_comenzar { background: var(--color-mist-300); color: var(--color-ink); }
.personal-en_curso { background: var(--color-teal-500); color: #fff; }
.personal-listo { background: #1f8a4c; color: #fff; }

/* Colores de categoría de evento (pedido por VeA, 9-oct-2026) */
.categoria-ministerial { background-color: #8b4a2b; color: #fff4ec; }
.categoria-congregacional { background-color: #8a6a1f; color: #fff8e6; }
.categoria-recurrente { background-color: #3b6296; color: #eaf2ff; }
.categoria-especial { background-color: #7a3a63; color: #fbeaf4; }
.ce-categoria[class*="categoria-"] { font-weight: 700; }
.select-color[class*="categoria-"] { font-weight: 700; border-color: transparent; }
.select-color[class*="categoria-"]:disabled { opacity: 1; -webkit-text-fill-color: currentColor; }
.select-color option { background: var(--surface-card); color: var(--color-ink); font-weight: 400; }
.ce-categoria[class*="categoria-"] { align-self: flex-start; }
/* =============================================================================
   Parrilla de contenido (G1–G8; diseño "Parrilla de Contenido")
   ============================================================================= */
.nav-icono { position: relative; display: inline-flex; flex-shrink: 0; }
.nav-punto { position: absolute; top: -3px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-magenta-700, #701478); border: 2px solid var(--surface-card); }
.insignia { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #701478; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pestana .insignia { margin-left: 6px; min-width: 18px; height: 18px; font-size: 11px; vertical-align: middle; }
/* Estados de la publicación (colores del diseño) */
.pub-estado-idea_preliminar { background: var(--color-mist-300); color: var(--color-ink); }
.pub-estado-en_desarrollo { background: #0c7e93; color: #fff; }
.pub-estado-programada { background: var(--color-navy-700); color: #fff; }
.pub-estado-publicada { background: #1f8a4c; color: #fff; }
.pub-estado-cancelada { background: #8a1f2b; color: #fff; }
:root[data-theme="dark"] .pub-estado-programada { background: #3b5aa8; }
select.estado-select[class*="pub-estado-"] option { background: var(--surface-card); color: var(--color-ink); }
/* Chips de catálogo con la paleta de 10 tonos del diseño (por posición en el catálogo) */
.opc-0 { --h: 200; } .opc-1 { --h: 255; } .opc-2 { --h: 290; } .opc-3 { --h: 335; } .opc-4 { --h: 150; }
.opc-5 { --h: 85; } .opc-6 { --h: 45; } .opc-7 { --h: 20; } .opc-8 { --h: 230; } .opc-9 { --h: 115; }
.chip-opcion { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; background: oklch(0.94 0.045 var(--h)); color: oklch(0.34 0.11 var(--h)); }
.chip-opcion.chico { padding: 2px 9px; font-size: 11.5px; }
.chip-opcion-punto { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: oklch(0.6 0.15 var(--h)); }
:root[data-theme="dark"] .chip-opcion { background: oklch(0.32 0.06 var(--h)); color: oklch(0.9 0.06 var(--h)); }
.chip-catalogo:has(input:checked) { background: oklch(0.94 0.045 var(--h)); border-color: oklch(0.6 0.15 var(--h)); color: oklch(0.34 0.11 var(--h)); font-weight: 600; }
.chip-catalogo input { accent-color: oklch(0.6 0.15 var(--h)); }
:root[data-theme="dark"] .chip-catalogo:has(input:checked) { background: oklch(0.32 0.06 var(--h)); color: oklch(0.9 0.06 var(--h)); }
.pub-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Pantallas */
.pub-pantalla { display: flex; flex-direction: column; gap: 16px; max-width: 1100px; }
.pub-encabezado { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pub-seccion-titulo { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--color-ink); }
.pub-seccion-sub { font-size: 13px; color: var(--color-ink-soft); margin-top: 2px; }
.pub-filtros { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.pub-filtros-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pub-filtro-fechas { grid-column: span 2; }
.pub-filtros-acciones .pub-exportar { margin-left: auto; }
.pub-filtros-acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pub-filtros-acciones .boton-secundario { padding: 8px 14px; font-size: 13px; font-weight: 700; }
.pub-lista { display: flex; flex-direction: column; gap: 12px; }
.pub-tarjeta { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; transition: border-color 0.15s; min-width: 0; }
.pub-tarjeta:hover { border-color: var(--color-mist-300); }
.pub-tarjeta.publicada { background: var(--tint-green); border-color: var(--tint-green-border); }
.pub-tarjeta.cancelada .pub-nombre { text-decoration: line-through; }
.pub-tarjeta-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pub-titulos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pub-nombre { font-size: 17px; font-weight: 700; color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; }
.pub-nombre:hover, .pub-nombre:visited { color: var(--color-ink); text-decoration: none; }
.pub-fecha { font-size: 13px; color: var(--color-ink-soft); }
.pub-meta { display: grid; grid-template-columns: 1.2fr 1.4fr 0.9fr 1fr; gap: 12px 16px; }
.pub-meta-dato { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pub-meta-valor { font-size: 14px; font-weight: 600; color: var(--color-ink); }
/* Calendario de la parrilla */
.pcal-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pcal-mes { margin: 0 6px; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--color-ink); min-width: 170px; text-align: center; }
.pcal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.pcal-semana div { font-size: 11px; font-weight: 700; color: var(--color-ink-soft); text-align: center; text-transform: uppercase; letter-spacing: 0.04em; }
.pcal-dia { min-height: 118px; display: flex; flex-direction: column; gap: 5px; padding: 6px; border-radius: 10px; background: var(--surface-card); border: 1px solid var(--color-mist-200); min-width: 0; cursor: pointer; }
.pcal-dia.fuera { background: transparent; opacity: 0.55; }
.pcal-dia.hoy { border: 2px solid var(--color-teal-500); }
.pcal-dia.elegido { background: var(--tint-teal2); border: 2px solid var(--color-navy-700); }
.pcal-dia-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }
.pcal-num { font-size: 12px; font-weight: 600; color: var(--color-ink-soft); text-decoration: none; }
.pcal-num:hover { text-decoration: none; }
.pcal-dia.hoy .pcal-num { color: var(--color-teal-500); font-weight: 800; }
.pcal-alta { display: inline-flex; padding: 1px 7px; border-radius: 999px; background: #f9d9b4; border: 1px solid #e8862a; color: #5c3204; font-size: 11px; font-weight: 700; white-space: nowrap; font-family: var(--font-body); vertical-align: middle; }
.pcal-items { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pcal-item { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 8px; border-radius: 8px; background: var(--color-mist-100); border: 1px solid var(--color-mist-200); text-decoration: none; min-width: 0; }
.pcal-item:hover { text-decoration: none; border-color: var(--color-mist-300); }
.pcal-item.publicada { background: var(--tint-green); border-color: var(--tint-green-border); }
.pcal-item.cancelada { opacity: 0.75; }
.pcal-item.cancelada .pcal-item-nombre { text-decoration: line-through; }
.pcal-item-nombre { font-size: 12px; font-weight: 700; color: var(--color-ink); line-height: 1.25; overflow-wrap: anywhere; }
.pcal-item-plataformas { font-size: 11px; color: var(--color-ink-soft); }
.pcal-item .chip { padding: 1px 8px; font-size: 10.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pcal-item { cursor: pointer; }
a.pcal-item-nombre, a.pcal-item-nombre:hover { text-decoration: none; color: var(--color-ink); }
.pcal-item .chip-opcion { padding: 1px 8px; font-size: 10.5px; gap: 5px; }
.pcal-item .chip-opcion-punto { width: 6px; height: 6px; }
.pcal-item .estado-select { padding: 2px 8px; font-size: 10.5px; max-width: 100%; text-overflow: ellipsis; }
.pcal-puntos { display: none; gap: 3px; justify-content: center; }
.pcal-punto { width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); }
/* Ficha */
.pub-ficha-estado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pub-ficha-bloque { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--color-mist-200); }
.pub-vinculada { align-items: flex-start; }
.pub-vinculada-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pub-vinculada .vinculada-nombre { font-weight: 600; }
.chip-pendiente { background: var(--tint-amber); color: var(--text-amber); }
.pub-url { font-size: 13px; font-weight: 600; word-break: break-all; color: var(--text-teal); }
.vinculo-publicacion { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--tint-teal2); border: 1px solid var(--color-mist-200); border-radius: 10px; padding: 10px 12px; text-decoration: none; }
.vinculo-publicacion:hover { text-decoration: none; border-color: var(--color-teal-500); }
.vinculo-publicacion-nombre { font-size: 14px; font-weight: 700; color: var(--color-ink); }
.vinculo-publicacion-fecha { font-size: 12px; color: var(--color-ink-soft); }
/* Por aprobar */
.cola-grupo { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.cola-grupo-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cola-pub { font-size: 16px; font-weight: 700; color: var(--color-ink); text-decoration: none; }
.cola-pub:hover { text-decoration: none; color: var(--text-teal); }
.cola-tarea { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--color-mist-100); border-radius: 10px; padding: 12px 14px; }
.cola-tarea-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.cola-tarea-nombre { font-size: 14px; font-weight: 700; color: var(--color-ink); }
.cola-tarea-meta { font-size: 13px; color: var(--color-ink-soft); }
.cola-tarea-acciones { display: flex; gap: 10px; }
.boton-rechazar, .boton-aprobar { padding: 8px 14px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.boton-rechazar { border: 1px solid #c0293b; background: var(--surface-card); color: var(--text-red); }
.boton-aprobar { border: 1px solid #0f9bb4; background: #0f9bb4; color: #fff; }
.boton-aprobar:hover { background: #0c7e93; }
.cola-vacia { display: flex; flex-direction: column; gap: 4px; }
.cola-vacia-titulo { font-size: 15px; font-weight: 700; color: var(--color-ink); }
/* Formulario único (página completa que entra con mcPageIn, como el diseño) */
.pub-form-pagina { max-width: 860px; animation: mcPageIn 0.24s ease-out; }
.pub-form { display: flex; flex-direction: column; gap: 16px; }
.pub-form-cabeza { display: flex; flex-direction: column; gap: 6px; }
.pub-usar-plantilla { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; border: 1px dashed var(--color-mist-300); border-radius: var(--radius-sm); background: var(--surface-card); }
.pub-usar-plantilla .input { max-width: 420px; }
.enlace-volver { align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--text-teal); text-decoration: none; }
.enlace-volver:hover { text-decoration: underline; }
.pub-form-titulo { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--color-ink); }
.pub-form-seccion { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.pub-form-seccion-titulo { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--color-ink); }
.lista-errores { margin: 6px 0 0; padding-left: 20px; }
.pub-tarea-existente { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--color-mist-100); border-radius: 10px; padding: 10px 14px; }
.pub-tarea-existente-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pub-tareas-nuevas { display: flex; flex-direction: column; gap: 12px; }
.pub-tarea-nueva { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--color-mist-200); border-radius: 14px; padding: 14px 16px; background: var(--color-mist-100); }
.pub-tarea-nueva .chip-seleccion { padding: 4px 9px; font-size: 12px; }
.pub-tarea-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pub-tarea-titulo { font-size: 14px; font-weight: 700; color: var(--color-ink); }
.pub-tarea-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.boton-enlace { background: none; border: none; padding: 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--text-red); cursor: pointer; }
.pub-tareas-nuevas .pub-tarea-nueva:only-child [data-quitar-fila-tarea] { visibility: hidden; }
.nota-aprobacion { display: flex; align-items: center; gap: 8px; background: var(--tint-amber); color: var(--text-amber); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; }
.nota-aprobacion[hidden] { display: none; }
/* Aviso de sobrecarga al asignar tareas (VeA, 23-oct-2026): solo informativo. */
.carga-aviso { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; background: var(--tint-amber); color: var(--text-amber); border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.45; }
.carga-aviso[hidden] { display: none; }
.carga-aviso-titulo { font-weight: 700; }
/* Vincular tareas existentes (VeA, 16-oct-2026) */
.pub-tarea-acciones { display: flex; align-items: center; gap: 12px; }
.pub-tarea-existente .pub-vincular-aviso { flex-basis: 100%; }
.pub-tarea-existente.quitada .pub-tarea-existente-info { opacity: 0.5; text-decoration: line-through; }
.pub-tarea-existente.quitada [data-desvincular] { color: var(--color-ink-soft); }
.pub-vinculadas { display: flex; flex-direction: column; gap: 10px; }
.pub-vinculadas:empty { display: none; }
.pub-tarea-vinculada { border: 1px dashed var(--color-teal-500); }
.chip.chip-vincular { background: var(--tint-teal); color: var(--text-teal); }
.pub-vincular-aviso { font-size: 12.5px; font-weight: 600; color: var(--text-amber); }
.pub-vincular-aviso[hidden] { display: none; }
.pub-vincular { display: flex; flex-direction: column; gap: 6px; }
.pub-vincular-caja { position: relative; }
.pub-vincular-caja .input { padding-left: 36px; width: 100%; }
.pub-vincular-lupa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-ink-soft); pointer-events: none; }
.pub-vincular-lista { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--surface-card); border: 1px solid var(--color-mist-300); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); padding: 4px; display: flex; flex-direction: column; gap: 2px; animation: mcFadeIn 0.12s var(--ease); }
.pub-vincular-lista[hidden] { display: none; }
.pub-vincular-op { padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.pub-vincular-op:hover, .pub-vincular-op.activa { background: var(--color-mist-100); }
.pub-vincular-op.bloqueada { cursor: not-allowed; opacity: 0.55; }
.pub-vincular-op.bloqueada:hover { background: none; }
.pub-vincular-nombre { font-size: 13.5px; font-weight: 700; color: var(--color-ink); overflow-wrap: anywhere; }
.pub-vincular-detalle { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--color-ink-soft); }
.pub-vincular-fecha { white-space: nowrap; font-weight: 600; }
.pub-vincular-motivo { font-size: 12px; font-weight: 700; color: var(--text-red); }
/* Descripción y objetivo de la campaña elegida en una publicación (VeA, 27-oct-2026) */
.pub-campana-info { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--color-ink-soft); animation: mcFadeIn 0.15s var(--ease); }
.pub-campana-info[hidden], .pub-campana-info p[hidden] { display: none; }
.pub-campana-info p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.pub-campana-info strong { font-weight: 700; color: var(--color-ink); }
.pub-vincular-vacio { padding: 10px; font-size: 13px; color: var(--color-ink-soft); }
.pub-form-pie { display: flex; justify-content: flex-end; gap: 10px; padding-bottom: 8px; }
@media (max-width: 899px) {
  .pub-filtros-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-tarea-rejilla { grid-template-columns: minmax(0, 1fr); }
  .pcal-rejilla { gap: 4px; }
  .pcal-mes { min-width: 0; font-size: 17px; }
  .pcal-dia { min-height: 46px; align-items: center; padding: 6px 2px; }
  .pcal-dia-cabeza { flex-direction: column; gap: 2px; }
  .pcal-items { display: none; }
  .pcal-puntos { display: flex; }
  .pcal-alta { padding: 0 5px; font-size: 10px; }
  .pub-form-seccion { padding: 16px; }
}
@media (max-width: 1180px) and (min-width: 900px) {
  .pcal-item-plataformas { display: none; }
}
/* =============================================================================
   Equipo (L3–L6; diseño "Vista del equipo" y "Base de datos")
   ============================================================================= */
.texto-mini { font-size: 11.5px; }
.grupo-item .grupo-item-nombre { display: block; }
.grupo-item-meta { display: block; font-size: 12px; font-weight: 400; color: var(--color-ink-soft); }
.bloque-ayuda { font-size: 12.5px; color: var(--color-ink-soft); margin-top: 2px; }
/* Carga de la semana del equipo */
.carga-semana { justify-content: center; }
.carga-semana-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.carga-semana-pts { font-size: 13px; font-weight: 700; color: var(--text-green); }
.carga-barra { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--hatch); }
.carga-seg { display: block; height: 100%; flex-shrink: 0; }
.seg-verde { background: #1f8a4c; } .seg-teal { background: var(--color-teal-500); } .seg-gris { background: #8a94a0; } .seg-rojo { background: #c0293b; } .seg-vino { background: #8a1f2b; }
.seg-verde-trazo { color: #1f8a4c; } .seg-teal-trazo { color: var(--color-teal-500); } .seg-gris-trazo { color: #8a94a0; } .seg-vino-trazo { color: #8a1f2b; }
.carga-leyenda { display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; }
.carga-leyenda-item { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-ink-soft); white-space: nowrap; }
.carga-sin-estimar { font-size: 12px; margin-top: -6px; }
/* Tareas atrasadas */
.atrasadas { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); overflow: hidden; }
.atrasada-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--color-mist-200); color: var(--color-ink); text-decoration: none; }
.atrasada-fila:first-child { border-top: none; }
.atrasada-fila[hidden] { display: none; }
a.atrasada-fila:hover { background: var(--color-mist-100); text-decoration: none; }
.atrasada-info { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.atrasada-nombre { font-size: 14px; font-weight: 600; color: var(--color-ink); overflow-wrap: anywhere; }
.atrasada-meta { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: 12px; }
.atrasada-personas { font-size: 12.5px; color: var(--color-ink); }
.mini-avatares { display: flex; flex-shrink: 0; }
.mini-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--color-mist-200); color: var(--color-ink); border: 2px solid var(--surface-card); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.mini-avatar + .mini-avatar { margin-left: -7px; }
.atrasada-derecha { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.atrasada-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.atrasada-chips .chip { padding: 3px 10px; font-size: 12px; }
.dias-atraso { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.dias-atraso.medio { font-size: 14px; font-weight: 800; }
.dias-atraso.grave { font-size: 14px; font-weight: 800; color: #fff; background: #8a1f2b; padding: 3px 10px; border-radius: 999px; }
.atrasadas-mas { border-top: 1px solid var(--color-mist-200); padding: 10px 16px; display: flex; justify-content: center; }
.boton-ver-mas { padding: 6px 12px; border-radius: 8px; border: 1px solid #c0293b; background: var(--surface-card); color: var(--text-red); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.atrasadas-vacio { padding: 28px 16px; text-align: center; font-size: 14px; color: var(--color-ink-soft); }
/* Bloques solo admin: Carga y Cumplimiento por persona */
.equipo-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; align-items: start; }
.tarjeta-bloque { min-width: 0; background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 20px; }
.tarjeta-bloque .bloque-titulo-grande { font-size: 16px; }
.carga-leyenda-puntos { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; margin: 10px 0 14px; font-size: 12px; color: var(--color-ink-soft); }
.carga-leyenda-puntos > span { display: inline-flex; align-items: center; gap: 6px; }
.punto-leyenda { width: 10px; height: 10px; border-radius: 50%; }
.carga-persona { border-top: 1px solid var(--color-mist-200); }
.carga-persona-fila { display: grid; grid-template-columns: minmax(84px, 130px) minmax(0, 1fr) 34px 16px; align-items: center; gap: 12px; padding: 11px 4px; cursor: pointer; list-style: none; }
.carga-persona-fila::-webkit-details-marker { display: none; }
.carga-persona-quien { min-width: 0; display: flex; flex-direction: column; }
.carga-persona-nombre { font-size: 13.5px; font-weight: 600; color: var(--color-ink); }
.carga-persona-pista { height: 8px; border-radius: 999px; background: var(--hatch); overflow: hidden; }
.carga-persona-barra { display: flex; height: 100%; }
.carga-persona-barra .carga-seg { flex-shrink: 1; }
.carga-persona-pts { text-align: right; font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--color-ink); }
.carga-chevron { color: var(--color-ink-soft); transition: transform 0.15s; }
.carga-persona[open] .carga-chevron { transform: rotate(180deg); }
.carga-tareas { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 14px; animation: mcSlideUp 0.2s ease; }
.carga-tarea { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; background: var(--color-mist-100); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.carga-tarea-info { flex: 1 1 150px; min-width: 0; }
.carga-tarea-nombre { display: block; font-size: 13px; font-weight: 600; color: var(--color-ink); text-decoration: none; }
.carga-tarea-nombre:hover { text-decoration: none; }
.chip-puntos { padding: 3px 9px; font-size: 11px; background: var(--tint-navy); color: var(--text-navy); }
.select-reasignar { width: auto; padding: 5px 30px 5px 10px; font-size: 12px; border-radius: 8px; min-height: 0; height: auto; }
.cumpl-cabeza { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.cumpl-cabeza .bloque-titulo-grande { margin: 0; }
.ayuda-i { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--color-ink-soft); color: var(--color-ink-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; cursor: help; }
.ayuda-i-texto { display: none; position: absolute; left: 0; top: 28px; z-index: 20; width: 280px; background: var(--color-navy-700); color: #fff; border-radius: 8px; padding: 10px 12px; font-size: 12.5px; font-weight: 400; line-height: 1.5; box-shadow: var(--shadow-card); }
.ayuda-i:hover .ayuda-i-texto, .ayuda-i:focus .ayuda-i-texto { display: block; }
.chip-mes { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 14px; font-size: 12px; font-weight: 700; color: var(--text-navy); background: var(--tint-navy); border-radius: 999px; padding: 4px 11px; }
.cumpl-vacio { border-top: 1px solid var(--color-mist-200); padding: 28px 8px; text-align: center; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--color-ink); }
/* Carga por semana y Puntualidad por persona (VeA, 18-oct-2026). Rampa de un solo tono
   (azul de la marca) por % de la capacidad; sobre la capacidad = rojo + ▲. */
:root { --calor-n1: #dfe5f2; --calor-n2: #b3c0de; --calor-n3: #6b82b9; --calor-n4: #1e366e; --calor-sobre: #c0293b;
        --calor-txt-claro: #1e366e; --calor-txt-oscuro: #ffffff; --punt-ok: #1e366e; --punt-tarde: #a9b6d4; }
:root[data-theme="dark"] { --calor-n1: #232c45; --calor-n2: #344876; --calor-n3: #5873b5; --calor-n4: #9fb4ec; --calor-sobre: #d9475a;
        --calor-txt-claro: #e6ebf8; --calor-txt-oscuro: #0c1124; --punt-ok: #9fb4ec; --punt-tarde: #4a5675; }
.equipo-admin .punt { grid-column: 1 / -1; }
.calor-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.calor-cabeza .bloque-titulo-grande { margin: 0; }
.calor-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 12px 0 14px; font-size: 12px; color: var(--color-ink-soft); }
.calor-leyenda-grupo { display: inline-flex; align-items: center; gap: 4px 10px; white-space: nowrap; }
.calor-leyenda-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.calor-muestra { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 14px; border-radius: 4px; font-size: 8px; color: #fff; }
.calor-marco { overflow-x: auto; overflow-y: hidden; }
.calor-tabla { border-collapse: separate; border-spacing: 4px; width: 100%; min-width: 440px; }
.calor-semana { font-size: 11.5px; font-weight: 700; color: var(--color-ink-soft); text-align: center; white-space: nowrap; padding-bottom: 2px; }
.calor-persona { position: sticky; left: 0; z-index: 1; background: var(--surface-card); text-align: left; font-weight: 400; padding-right: 8px; min-width: 104px; }
.calor-persona .texto-mini { display: block; white-space: nowrap; }
.calor-nombre { display: block; font-size: 13.5px; font-weight: 700; color: var(--color-ink); margin: 0; }
.calor-td { padding: 0; }
.calor-celda { position: relative; height: 40px; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 3px; font-family: var(--font-display); font-size: 14px; font-weight: 800; cursor: default; }
.calor-celda:focus-visible { outline: 2px solid var(--color-teal-500); outline-offset: 1px; }
.calor-vacio { background: var(--color-mist-100); color: var(--color-ink-soft); }
.calor-neutro { background: var(--color-mist-300); color: var(--color-ink); }
.calor-n1 { background: var(--calor-n1); color: var(--calor-txt-claro); }
.calor-n2 { background: var(--calor-n2); color: var(--calor-txt-claro); }
.calor-n3 { background: var(--calor-n3); color: #fff; }
.calor-n4 { background: var(--calor-n4); color: var(--calor-txt-oscuro); }
.calor-sobre { background: var(--calor-sobre); color: #fff; }
.calor-cero { font-weight: 400; opacity: .7; }
.calor-alerta { font-size: 10px; }
.calor-sin-puntos { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .85; }
.calor-muestra .calor-sin-puntos { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); width: 7px; height: 7px; color: var(--color-ink-soft); }
.punt-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.punt-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; }
.punt-panel { margin: 0; min-width: 0; }
.punt-svg { display: block; width: 100%; height: auto; overflow: visible; }
.punt-guia { stroke: var(--color-mist-200); stroke-width: 1; }
.punt-eje { fill: var(--color-ink-soft); font-size: 10px; font-family: var(--font-body); }
.punt-zona { fill: transparent; }
.punt-barra { cursor: default; outline: none; }
.punt-barra:hover .punt-zona, .punt-barra:focus-visible .punt-zona { fill: var(--color-mist-100); }
path.punt-ok, rect.punt-ok { fill: var(--punt-ok); }
path.punt-tarde, rect.punt-tarde { fill: var(--punt-tarde); }
path.punt-vencida, rect.punt-vencida { fill: url(#punt-rayado); }
.punt-rayado-fondo { fill: var(--tint-red); }
.punt-rayado-linea { stroke: var(--text-red); stroke-width: 2; }
.punt-promedio { stroke: var(--color-ink); stroke-width: 1.4; stroke-dasharray: 4 3; opacity: .75; }
.punt-muestra { display: inline-block; width: 16px; height: 12px; border-radius: 3px; }
span.punt-ok { background: var(--punt-ok); } span.punt-tarde { background: var(--punt-tarde); }
.punt-muestra-svg { display: block; }
.punt-muestra-linea { display: inline-block; width: 20px; border-top: 1.6px dashed var(--color-ink); opacity: .75; }
.capacidad-lista { display: flex; flex-direction: column; gap: 8px; }
.capacidad-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.capacidad-nombre { font-size: 14px; font-weight: 600; color: var(--color-ink); }
.capacidad-input { width: 110px; flex: none; }
#cap-defecto { width: 140px; }
/* Detalle flotante de los gráficos (al pasar el cursor, enfocar o tocar) */
.graf-tip { position: fixed; z-index: 90; max-width: 280px; background: var(--color-navy-700); color: #fff; border-radius: 8px; padding: 8px 11px; font-size: 12.5px; line-height: 1.45; white-space: pre-line; pointer-events: none; box-shadow: var(--shadow-card); }
@media (max-width: 1100px) { .punt-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .punt-rejilla { grid-template-columns: minmax(0, 1fr); } }
/* Base de datos */
.bd { display: flex; flex-direction: column; gap: 16px; }
.bd-orden { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; cursor: pointer; }
.bd-orden:hover { text-decoration: none; color: var(--color-ink); }
.bd-orden.activa { color: var(--color-ink); }
.bd-flecha { flex: none; fill: currentColor; opacity: 0; transition: opacity 0.15s; }
.bd-orden:hover .bd-flecha { opacity: 0.35; }
.bd-orden.activa .bd-flecha { opacity: 1; }
.bd-tablas { display: flex; gap: 8px; flex-wrap: wrap; }
.bd-tabla { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--color-mist-200); background: var(--surface-card); color: var(--color-ink); font-size: 13px; font-weight: 700; text-decoration: none; }
.bd-tabla:hover { text-decoration: none; border-color: var(--color-mist-300); }
.bd-tabla.activa { background: var(--color-navy-700); border-color: var(--color-navy-700); color: #fff; }
.bd-filtros { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.bd-filtros-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.bd-filtro { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bd-control { height: 36px; min-height: 0; padding: 0 10px; font-size: 13px; border-radius: 8px; width: 100%; min-width: 0; }
.bd-rango { display: flex; align-items: center; gap: 6px; }
.bd-filtros-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bd-tabla-marco { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); overflow-x: auto; }
.bd-fila { display: grid; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--color-mist-200); align-items: center; color: var(--color-ink); text-decoration: none; }
.bd-fila:hover { text-decoration: none; }
a.bd-fila:hover { background: var(--color-mist-100); }
.bd-cabeza { background: var(--color-mist-100); border-top: none; border-bottom: 1px solid var(--color-mist-200); }
.bd-cabeza + .bd-fila { border-top: none; }
.bd-celda { font-size: 13px; min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.bd-celda .chip { padding: 3px 10px; font-size: 12px; }
.bd-vacio { padding: 32px 16px; text-align: center; font-size: 13px; color: var(--color-ink-soft); }
.bd-tareas { min-width: 1090px; } .bd-tareas .bd-fila { grid-template-columns: minmax(220px, 2.2fr) minmax(150px, 1.3fr) minmax(170px, 1.2fr) minmax(120px, 1fr) minmax(90px, 0.8fr) minmax(180px, 1.5fr) minmax(110px, 0.9fr); }
.bd-reuniones { min-width: 880px; } .bd-reuniones .bd-fila { grid-template-columns: minmax(220px, 2fr) minmax(110px, 0.9fr) minmax(90px, 0.7fr) minmax(110px, 0.8fr) minmax(220px, 2fr) minmax(130px, 1fr); }
.bd-campanas { min-width: 540px; } .bd-campanas .bd-fila { grid-template-columns: minmax(240px, 2.4fr) minmax(120px, 1fr) minmax(150px, 1.2fr); }
.bd-eventos { min-width: 1000px; } .bd-eventos .bd-fila { grid-template-columns: minmax(240px, 2.2fr) minmax(110px, 0.9fr) minmax(120px, 1fr) minmax(100px, 0.8fr) minmax(140px, 1.1fr) minmax(110px, 0.9fr) minmax(110px, 0.9fr); }
.bd-publicaciones { min-width: 1080px; } .bd-publicaciones .bd-fila { grid-template-columns: minmax(240px, 2.2fr) minmax(120px, 1fr) minmax(100px, 0.9fr) minmax(170px, 1.4fr) minmax(150px, 1.2fr) minmax(120px, 1fr) minmax(110px, 0.9fr); }
/* Base de datos › Tareas: selección múltiple y acciones */
.bd-tareas.bd-masivo { min-width: 1132px; }
.bd-tareas.bd-masivo .bd-fila { grid-template-columns: 28px minmax(220px, 2.2fr) minmax(150px, 1.3fr) minmax(170px, 1.2fr) minmax(120px, 1fr) minmax(90px, 0.8fr) minmax(180px, 1.5fr) minmax(110px, 0.9fr); }
.bd-fila-enlace { display: contents; color: inherit; text-decoration: none; }
.bd-fila-enlace:hover { text-decoration: none; }
.bd-fila-sel:hover { background: var(--color-mist-100); }
.bd-fila-sel:has(input:checked) { background: var(--color-mist-100); }
.bd-check { display: flex; align-items: center; justify-content: center; align-self: stretch; cursor: pointer; }
.bd-check input { width: 17px; height: 17px; margin: 0; cursor: pointer; accent-color: var(--color-navy-700); }
.bd-acciones { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 10px 16px; }
.bd-acciones-cuenta { font-size: 13px; font-weight: 700; color: var(--color-ink); }
.bd-acciones-controles { display: flex; align-items: center; gap: 8px; }
.bd-acciones-controles .bd-control { width: auto; min-width: 150px; }
.bd-aplicar { height: 36px; padding: 0 16px; }
.bd-aplicar:disabled { opacity: .5; cursor: not-allowed; }
.bd-paginas { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bd-paginas-nav { display: flex; align-items: center; gap: 10px; }
.bd-pagina-num { font-size: 13px; font-weight: 700; color: var(--color-ink); white-space: nowrap; }
.bd-paginas .boton-mini { border-radius: 999px; padding: 7px 14px; }
.boton-mini.apagado { opacity: 0.4; cursor: default; }
@media (max-width: 899px) {
  .atrasada-fila { grid-template-columns: minmax(0, 1fr); }
  .atrasada-derecha { align-items: flex-start; }
  .atrasada-chips { justify-content: flex-start; }
  .bd-filtros-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Tareas personales con casilla redonda (diseño, pedido por VeA 10-oct-2026) */
.personal-fila { flex-wrap: nowrap; }
.personal-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-mist-300); background: var(--surface-card); color: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0; }
.personal-check:hover { border-color: var(--color-teal-500); }
.personal-check.en-curso { border-color: var(--color-teal-500); }
.personal-fila.hecha .personal-check { border: none; background: var(--color-teal-500); color: #fff; }
.personal-fila .personal-nombre { min-width: 0; font-weight: 400; overflow-wrap: anywhere; }
.personal-fila .personal-fecha { margin-left: auto; }
.buscar-opciones { margin-bottom: 6px; }
/* Reuniones: modalidad y lugar (pedido por VeA, 10-oct-2026). El lugar solo se muestra si es presencial. */
.campos-reunion-lugar .campo-lugar { display: none; }
.campos-reunion-lugar:has(option[value="presencial"]:checked) .campo-lugar { display: flex; animation: mcSlideUp 0.2s ease; }
.reunion-item-donde { display: block; font-size: 12px; }
/* Borrar todas las notificaciones y modalidad en "Mis reuniones" (VeA, 10-oct-2026) */
.notif-acciones { display: flex; align-items: center; gap: 8px; }
.notif-borrar-todas { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; border: 1px solid #c0293b; background: var(--tint-red); color: var(--text-red); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.notif-borrar-todas:hover { background: #c0293b; color: #fff; }
.reunion-donde { display: block; font-size: 12px; font-weight: 400; color: var(--color-ink-soft); }
/* Sub-menú flotante con el menú contraído (tras 0,5 s sobre la sección; pedido por VeA, 10-oct-2026) */
.nav-flotante { position: fixed; z-index: 60; min-width: 200px; display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 14px; background: var(--surface-card); border: 1px solid var(--color-mist-200); box-shadow: var(--shadow-card); animation: mcSubIn 0.16s ease both; }
.nav-flotante-titulo { padding: 4px 10px 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-soft); }
.nav-flotante .nav-sub-item { animation: none; }
.nav-flotante .nav-sub3-item { padding-left: 24px; font-size: 12.5px; }
.nav-flotante .insignia { margin-left: auto; }

/* =============================================================================
   Reportes (K1) — docs/diseno/Reportes.dc.html
   ============================================================================= */
:root { --color-navy-800: #182a54; --color-indigo-500: #4b4c93; --color-teal-300: #6fcbdb; }
.rp { max-width: 1100px; display: flex; flex-direction: column; gap: 16px; position: relative; color: var(--color-ink); }
.rp button, .rp select, .rp input, .rp-capa button, .rp-capa select, .rp-capa input { font-family: var(--font-body); }
.rp-capa { color: var(--color-ink); }
.rp-cargando-inicial { color: var(--color-ink-soft); font-size: 14px; }
.rp-suave { color: var(--color-ink-soft); }
.rp-chico { font-size: 12.5px; }
.rp-negrita { font-weight: 700; }
.rp-normal { font-weight: 400; }
.rp-derecha { text-align: right; }
.rp-espacio { flex: 1; }
.rp-rotulo { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-soft); }
.rp-etiqueta { font-size: 12px; font-weight: 700; color: var(--color-ink-soft); white-space: nowrap; }
.rp-select, .rp-input { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--color-mist-300); background: var(--surface-card); font-size: 13px; color: var(--color-ink); }
.rp-velo { position: fixed; inset: 0; z-index: 39; }
.rp-velo-bajo { z-index: 38; }

/* Pestañas de tipo y selector de reporte */
.rp-cabecera { display: flex; flex-direction: column; gap: 12px; }
.rp-tipos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rp-tipo { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--color-mist-300); background: var(--surface-card); color: var(--color-ink); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s; }
.rp-tipo.activo { border-color: var(--color-navy-700); background: var(--color-navy-700); color: #fff; }
.rp-selector-marco { position: relative; }
.rp-selector { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 640px; text-align: left; background: var(--surface-card); border: 1px solid var(--color-mist-300); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; color: var(--color-ink); }
.rp-selector-texto { flex: 1; min-width: 0; }
.rp-selector-nombre { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--color-ink); }
.rp-selector-desc { font-size: 12.5px; color: var(--color-ink-soft); }
.rp-selector-flecha { flex-shrink: 0; color: var(--color-ink-soft); }
.rp-selector-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; width: min(100%, 680px); max-height: min(70vh, 520px); overflow: auto; background: var(--surface-card); border: 1px solid var(--color-mist-300); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.rp-selector-menu.entra { animation: mcFadeIn 0.18s var(--ease); }
.rp-selector-menu-titulo { padding: 8px 10px 4px; }
.rp-opcion-reporte { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--color-ink); }
.rp-opcion-reporte:hover { background: var(--color-mist-100); }
.rp-opcion-reporte.activo { background: var(--tint-navy); }
.rp-opcion-reporte.personalizado { border: 1px dashed var(--color-mist-300); margin-top: 6px; }
.rp-opcion-nombre { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.rp-opcion-desc { font-size: 12.5px; color: var(--color-ink-soft); }

/* Filtros */
.rp-filtros { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.rp-filtros-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rp-filtros-titulo, .rp-filtros-boton { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--color-ink); }
.rp-filtros-boton { display: flex; align-items: center; gap: 8px; background: transparent; border: none; padding: 0; cursor: pointer; }
.rp-contador { font-size: 12px; font-weight: 700; background: var(--tint-navy); color: var(--text-navy); border-radius: 999px; padding: 2px 9px; }
.rp-chevron { transition: transform 0.15s; }
.rp-chevron.girado { transform: rotate(180deg); }
.rp-limpiar { background: transparent; border: none; padding: 4px 0; font-size: 13px; font-weight: 700; color: var(--color-teal-500); cursor: pointer; text-decoration: underline; }
.rp-filtros-cuerpo { display: flex; flex-direction: column; gap: 14px; }
.rp-fechas.apagado { opacity: 0.5; pointer-events: none; }
.rp-fechas-fila { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.rp-campo-fecha { display: flex; align-items: center; gap: 8px; }
.rp-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-preset { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--color-mist-300); background: var(--surface-card); color: var(--color-ink); font-size: 13px; font-weight: 500; cursor: pointer; }
.rp-preset.activo { border-color: var(--color-teal-500); background: var(--tint-teal); font-weight: 700; }
.rp-rango { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rp-nota { font-size: 12px; color: var(--color-ink-soft); margin-top: 8px; }
.rp-filtros-lista { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rp-filtro { position: relative; }
.rp-filtro-boton { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--color-mist-300); background: var(--surface-card); color: var(--color-ink); font-size: 13px; cursor: pointer; }
.rp-filtro-boton.on { border-color: var(--color-teal-500); background: var(--tint-teal); }
.rp-filtro-menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 41; min-width: 240px; max-width: min(340px, 80vw); max-height: 300px; overflow: auto; background: var(--surface-card); border: 1px solid var(--color-mist-300); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.rp-filtro-menu.entra { animation: mcFadeIn 0.18s var(--ease); }
.rp-modo { display: flex; gap: 4px; padding: 4px; background: var(--color-mist-100); border-radius: 8px; margin-bottom: 4px; }
.rp-modo button { flex: 1; padding: 6px 8px; border-radius: 6px; border: none; background: transparent; font-size: 12px; font-weight: 700; color: var(--color-ink); cursor: pointer; }
.rp-modo button.activo { background: var(--surface-card); }
.rp-buscar { width: 100%; margin-bottom: 4px; }
.rp-filtro-opcion { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; border-radius: 6px; padding: 8px 10px; cursor: pointer; font-size: 13px; color: var(--color-ink); }
.rp-filtro-opcion:hover { background: var(--color-mist-100); }
.rp-caja { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--color-mist-300); background: var(--surface-card); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; }
.rp-caja.redonda { border-radius: 50%; }
.rp-caja.on { border-color: var(--color-teal-500); background: var(--color-teal-500); }
.rp-interruptor { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; padding: 6px 4px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--color-ink); }
.rp-interruptor-pista { width: 34px; height: 20px; border-radius: 999px; background: var(--color-mist-300); position: relative; display: inline-block; flex-shrink: 0; transition: background 0.12s; }
.rp-interruptor-perilla { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface-card); transition: left 0.12s; }
.rp-interruptor.on .rp-interruptor-pista { background: var(--color-teal-500); }
.rp-interruptor.on .rp-interruptor-perilla { left: 16px; }
.rp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--tint-navy); color: var(--text-navy); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 6px 4px 11px; }
.rp-chip-x { width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(30,54,110,0.14); color: var(--text-navy); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }

/* Agrupar, visualizaciones y exportar */
.rp-barra { display: flex; flex-direction: column; gap: 12px; }
.rp-barra-fila { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.rp-agrupar { display: flex; align-items: center; gap: 8px; }
.rp-agrupar.apagado { opacity: 0.45; }
.rp-select-grupo { padding: 8px 10px; min-width: 150px; }
.rp-vizs { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: 10px; }
.rp-viz { padding: 8px 14px; border-radius: 7px; border: none; background: transparent; color: var(--color-ink); font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; }
.rp-viz.activo { background: var(--color-navy-700); color: #fff; font-weight: 700; }
.rp-boton-borde { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-card); border: 1px solid var(--color-mist-300); border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 700; color: var(--color-ink); cursor: pointer; }
.rp-boton-navy { display: inline-flex; align-items: center; gap: 7px; background: var(--color-navy-700); border: 1px solid var(--color-navy-700); border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer; }
.rp-boton-csv { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; padding: 8px 6px; font-size: 12.5px; font-weight: 600; color: var(--color-ink-soft); cursor: pointer; text-decoration: underline; }
.rp-boton-borde:disabled, .rp-boton-navy:disabled, .rp-boton-csv:disabled { opacity: 0.45; cursor: default; }
.rp-boton-pildora { display: inline-flex; align-items: center; background: var(--surface-card); border: 1px solid var(--color-teal-500); color: var(--text-navy); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
.rp-boton-cuadrado { border-radius: 8px; padding: 8px 14px; }

/* Aviso de terminadas sin fecha y globos de ayuda */
.rp-aviso { position: relative; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-ink-soft); }
.rp-ayuda { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--color-ink-soft); background: var(--surface-card); color: var(--color-ink-soft); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; flex-shrink: 0; }
.rp-aviso .rp-ayuda { width: 20px; height: 20px; }
.rp-globo { margin-top: 8px; max-width: 360px; background: var(--color-navy-800); color: #fff; border-radius: 8px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; }
.rp-globo-flotante { position: absolute; left: 0; top: calc(100% + 6px); z-index: 45; max-width: 340px; margin: 0; pointer-events: none; box-shadow: var(--shadow-card); }
.rp-ayuda-texto { margin-top: 12px; }

/* Resultado */
.rp-tarjeta { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 22px; }
.rp-res-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 18px; }
.rp-res-titulos { min-width: 0; }
.rp-res-titulo { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--color-ink); }
.rp-res-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--color-ink-soft); margin-top: 3px; }
.rp-anio { display: flex; align-items: center; gap: 8px; }
.rp-anio-boton { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--color-mist-300); background: var(--surface-card); color: var(--color-ink); font-size: 16px; cursor: pointer; }
.rp-anio-boton:disabled { opacity: 0.35; cursor: default; }
.rp-anio-valor { font-family: var(--font-display); font-size: 16px; font-weight: 700; min-width: 48px; text-align: center; }
.rp-anio-grande .rp-anio-boton { width: 36px; height: 36px; }
.rp-anio-grande .rp-anio-valor { font-size: 17px; min-width: 56px; }
.rp-blanco { display: flex; flex-direction: column; gap: 14px; align-items: center; padding: 36px 12px; text-align: center; }
.rp-blanco-titulo { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.rp-blanco-texto { font-size: 13.5px; color: var(--color-ink-soft); max-width: 420px; }
.rp-blanco-vizs, .rp-estado-botones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.rp-cargando { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 10px; }
.rp-esq-fila { display: flex; align-items: center; gap: 12px; }
.rp-esq { background: var(--color-mist-200); animation: mcPulse 1.3s ease-in-out infinite; }
.rp-esq-a { width: 110px; height: 12px; border-radius: 6px; flex-shrink: 0; }
.rp-esq-b { height: 14px; border-radius: 999px; }
.rp-estado { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 12px; text-align: center; }
.rp-estado-titulo { font-size: 15px; font-weight: 700; }
.rp-estado-texto { font-size: 13px; color: var(--color-ink-soft); max-width: 380px; }
.rp-icono-error { color: #8a1f2b; }
.rp-total-unico { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--color-mist-300); font-size: 13px; font-weight: 700; }
.rp-limite { margin-top: 10px; }

/* Lista */
.rp-tabla-marco { overflow-x: auto; border: 1px solid var(--color-mist-200); border-radius: 8px; }
.rp-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.rp-tabla th { text-align: left; padding: 10px 12px; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-soft); background: var(--color-mist-100); white-space: nowrap; }
.rp-tabla td { padding: 10px 12px; border-top: 1px solid var(--color-mist-200); color: var(--color-ink); vertical-align: top; }
.rp-tabla td.rp-grupo { padding: 9px 12px; background: var(--tint-navy); color: var(--text-navy); font-size: 12.5px; font-weight: 700; }
.rp-paginas { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--color-ink-soft); }
.rp-paginas-botones { display: flex; gap: 6px; }
.rp-pagina { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--color-mist-300); background: var(--surface-card); color: var(--color-ink); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.rp-pagina:disabled { opacity: 0.45; cursor: default; }

/* Gráfico por tiempo (alturas en 20 pasos: la CSP no deja poner estilos en línea) */
.rp-tiempo { --rp-alto: 180px; display: flex; align-items: flex-end; gap: 12px; height: calc(var(--rp-alto) + 54px); }
.rp-tiempo-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.rp-tiempo-valor { font-size: 12.5px; font-weight: 700; color: var(--color-ink); }
.rp-tiempo-mes { font-size: 12px; color: var(--color-ink-soft); }
.rp-tiempo-barra { width: 100%; max-width: 44px; min-height: 3px; background: var(--color-teal-500); border-radius: 6px 6px 0 0; }
.rp-tiempo-barra.cero { height: 2px; min-height: 2px; background: var(--color-mist-200); }
.rp-tiempo-barra.alto-1 { height: calc(var(--rp-alto) * 1 / 20); } .rp-tiempo-barra.alto-2 { height: calc(var(--rp-alto) * 2 / 20); } .rp-tiempo-barra.alto-3 { height: calc(var(--rp-alto) * 3 / 20); } .rp-tiempo-barra.alto-4 { height: calc(var(--rp-alto) * 4 / 20); } .rp-tiempo-barra.alto-5 { height: calc(var(--rp-alto) * 5 / 20); } .rp-tiempo-barra.alto-6 { height: calc(var(--rp-alto) * 6 / 20); } .rp-tiempo-barra.alto-7 { height: calc(var(--rp-alto) * 7 / 20); } .rp-tiempo-barra.alto-8 { height: calc(var(--rp-alto) * 8 / 20); } .rp-tiempo-barra.alto-9 { height: calc(var(--rp-alto) * 9 / 20); } .rp-tiempo-barra.alto-10 { height: calc(var(--rp-alto) * 10 / 20); } .rp-tiempo-barra.alto-11 { height: calc(var(--rp-alto) * 11 / 20); } .rp-tiempo-barra.alto-12 { height: calc(var(--rp-alto) * 12 / 20); } .rp-tiempo-barra.alto-13 { height: calc(var(--rp-alto) * 13 / 20); } .rp-tiempo-barra.alto-14 { height: calc(var(--rp-alto) * 14 / 20); } .rp-tiempo-barra.alto-15 { height: calc(var(--rp-alto) * 15 / 20); } .rp-tiempo-barra.alto-16 { height: calc(var(--rp-alto) * 16 / 20); } .rp-tiempo-barra.alto-17 { height: calc(var(--rp-alto) * 17 / 20); } .rp-tiempo-barra.alto-18 { height: calc(var(--rp-alto) * 18 / 20); } .rp-tiempo-barra.alto-19 { height: calc(var(--rp-alto) * 19 / 20); } .rp-tiempo-barra.alto-20 { height: calc(var(--rp-alto) * 20 / 20); }

/* Torta (pintada en un lienzo; la leyenda da los colores) */
.rp-torta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.rp-torta-lienzo { width: 220px; height: 220px; flex-shrink: 0; }
.rp-torta-leyenda { flex: 1; min-width: 230px; display: flex; flex-direction: column; }
.rp-torta-fila { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 52px; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--color-mist-200); font-size: 13px; }
.rp-torta-nombre { font-weight: 600; }
.rp-torta-valor { font-weight: 700; text-align: right; }
.rp-muestra { width: 14px; height: 14px; border-radius: 4px; display: block; }
.rp-c0 { background: var(--color-teal-500); } .rp-c1 { background: var(--color-navy-700); } .rp-c2 { background: var(--color-magenta-700); }
.rp-c3 { background: var(--color-indigo-500); } .rp-c4 { background: var(--color-teal-300); } .rp-c5 { background: color-mix(in srgb, var(--color-magenta-700) 50%, #fff); }
.rp-c6 { background: color-mix(in srgb, var(--color-navy-700) 45%, #fff); } .rp-c7 { background: color-mix(in srgb, var(--color-teal-500) 55%, var(--color-navy-700)); } .rp-c8 { background: var(--color-mist-300); }

/* Barras */
.rp-barras { display: flex; flex-direction: column; }
.rp-barras-fila { display: grid; grid-template-columns: minmax(90px, 190px) minmax(0, 1fr) 56px; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--color-mist-200); }
.rp-barras-nombre { font-size: 13px; font-weight: 600; }
.rp-barras-pista { height: 14px; border-radius: 999px; background: var(--color-mist-200); overflow: hidden; }
.rp-barras-relleno { height: 100%; background: var(--color-teal-500); border-radius: 999px; }
.rp-barras-valor { text-align: right; font-family: var(--font-display); font-size: 15px; font-weight: 800; }

/* Tarjetas de indicadores */
.rp-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.rp-indicador { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-top: 4px solid var(--color-teal-500); border-radius: var(--radius-sm); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.rp-indicador-valor { font-family: var(--font-display); font-size: 34px; font-weight: 800; line-height: 1; }
.rp-indicador-nombre { font-size: 13px; font-weight: 600; color: var(--color-ink-soft); display: flex; align-items: center; gap: 6px; }

/* Mapa de calor: el número aparece al pasar el cursor, sin abrir el día */
.rp-calor { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 24px; }
.rp-calor-mes { min-width: 0; }
.rp-calor-nombre { font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.rp-calor-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.rp-calor-letra { font-size: 9px; font-weight: 700; color: var(--color-ink-soft); text-align: center; }
.rp-calor-dia { position: relative; aspect-ratio: 1 / 1; border-radius: 3px; }
.rp-calor-dia.tono-0 { background: color-mix(in srgb, var(--color-teal-500) 14%, var(--surface-card)); }
.rp-calor-dia.tono-1 { background: color-mix(in srgb, var(--color-teal-500) 32%, var(--surface-card)); }
.rp-calor-dia.tono-2 { background: color-mix(in srgb, var(--color-teal-500) 54%, var(--surface-card)); }
.rp-calor-dia.tono-3 { background: color-mix(in srgb, var(--color-teal-500) 78%, var(--surface-card)); }
.rp-calor-dia.tono-4 { background: var(--color-teal-500); }
.rp-calor-rejilla .rp-calor-dia[data-tip]:hover::after, .rp-calor-rejilla .rp-calor-dia[data-tip]:focus::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); z-index: 30; white-space: nowrap; pointer-events: none; background: var(--color-navy-800); color: #fff; border-radius: 6px; padding: 5px 9px; font-size: 12px; font-weight: 600; box-shadow: var(--shadow-card); }
.rp-calor-leyenda { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 12px; color: var(--color-ink-soft); }
.rp-calor-leyenda .rp-calor-dia { width: 18px; height: 18px; display: block; }

/* Panel Ajustar (derecha en escritorio, abajo en celular) */
.rp-aj-velo { position: fixed; inset: 0; z-index: 70; background: rgba(24,42,84,0.35); }
.rp-aj-velo.entra { animation: mcFadeIn 0.18s var(--ease); }
.rp-aj-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 100%; z-index: 71; background: var(--surface-card); box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.rp-aj-panel.entra { animation: mcSlideInRight 0.2s var(--ease); }
.rp-aj-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--color-mist-200); }
.rp-aj-titulo { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.rp-cerrar { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--color-mist-300); background: var(--surface-card); color: var(--color-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rp-aj-cuerpo { flex: 1; overflow: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 18px; }
.rp-aj-seccion { display: flex; flex-direction: column; gap: 8px; }
.rp-aj-seccion > .rp-rotulo { font-size: 12px; }
.rp-aj-col { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 1px solid var(--color-mist-200); border-radius: 8px; background: var(--surface-card); }
.rp-aj-col .rp-caja { width: 18px; height: 18px; cursor: pointer; }
.rp-aj-col-nombre { flex: 1; font-size: 13px; font-weight: 600; }
.rp-flecha { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--color-mist-300); background: var(--surface-card); color: var(--color-ink); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.rp-flecha:disabled { opacity: 0.35; cursor: default; }
.rp-aj-select { padding: 9px 10px; font-size: 13.5px; }
.rp-aj-indicador { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: 8px; padding: 9px 10px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--color-ink); }
.rp-aj-indicador .rp-caja { width: 18px; height: 18px; }
.rp-aj-pie { padding: 12px 18px; border-top: 1px solid var(--color-mist-200); font-size: 12px; color: var(--color-ink-soft); }

/* Vista previa de exportación: hoja siempre en colores claros */
.rp-exportar { position: fixed; inset: 0; z-index: 100; background: #d6d2ce; overflow: auto; padding: 24px; }
.rp-exportar.entra { animation: mcFadeIn 0.18s var(--ease); }
.rp-exportar-barra { position: sticky; top: 0; z-index: 5; max-width: 860px; margin: 0 auto 16px; display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; background: var(--color-navy-800); color: #fff; border-radius: var(--radius-sm); padding: 12px 16px; }
.rp-exportar-texto { flex: 1; min-width: 180px; font-size: 13px; font-weight: 600; }
.rp-exportar-boton { background: #fff; border: none; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 700; color: #1e366e; cursor: pointer; }
.rp-exportar-cerrar { background: transparent; border: 1px solid rgba(255,255,255,0.5); border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer; }
.rp-hoja { --color-ink: #3a3a3a; --color-ink-soft: #59595c; --color-mist-100: #f2f0ee; --color-mist-200: #e6e3e0; --color-mist-300: #d6d2ce; --surface-card: #ffffff;
  --tint-navy: #e8ebf5; --tint-teal: #e6f6f7; --text-navy: #1e366e; --text-teal: #0c7e93; --text-green: #1f8a4c; --text-magenta: #701478;
  color: #3a3a3a; width: min(100%, 860px); margin: 0 auto; background: #ffffff; padding: 36px; box-shadow: var(--shadow-card); }
.rp-hoja-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 3px solid var(--color-teal-500); margin-bottom: 18px; }
.rp-hoja-titulos { min-width: 0; }
.rp-hoja-titulo { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--text-navy); }
.rp-hoja-sub { font-size: 13px; color: var(--color-ink-soft); }
.rp-hoja-logo { width: 180px; height: auto; aspect-ratio: 960 / 251; object-fit: contain; flex-shrink: 0; }
.rp-hoja-filtros { background: var(--color-mist-100); border-radius: 8px; padding: 12px 14px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--color-ink); }
.rp-hoja-generado { margin-top: 4px; }
.rp-hoja-pie { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--color-mist-300); font-size: 11.5px; color: var(--color-ink-soft); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rp-hoja .rp-calor-dia { aspect-ratio: auto; height: 14px; }

.rp-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 120; background: var(--color-navy-800); color: #fff; border-radius: 10px; padding: 11px 18px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-card); max-width: 90vw; animation: mcFadeIn 0.18s var(--ease); }
.rp-toast[hidden] { display: none; }

@media (max-width: 899px) {
  .rp-tarjeta { padding: 16px; }
  .rp-tiempo { --rp-alto: 150px; gap: 4px; }
  .rp-tiempo-valor, .rp-tiempo-mes { font-size: 10.5px; }
  .rp-calor { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .rp-aj-panel { top: auto; left: 0; width: auto; max-height: 82vh; border-radius: 16px 16px 0 0; }
  .rp-aj-panel.entra { animation: mcSlideUp 0.2s var(--ease); }
  .rp-exportar { padding: 12px; }
  .rp-hoja { padding: 18px; }
  .rp-hoja .rp-calor { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =============================================================================
   Respaldos (A6, solo admin). Pantalla fuera del diseño: usa sus componentes.
   ============================================================================= */
.resp { display: flex; flex-direction: column; gap: 18px; max-width: 1000px; }
.resp-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.resp .alerta-bloque { margin-bottom: 0; }
.resp-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.resp-tarjeta { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-top: 4px solid var(--color-teal-500); border-radius: var(--radius-sm); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.resp-tarjeta.fallido { border-top-color: #c0293b; }
.resp-tarjeta-titulo { font-size: 13px; font-weight: 700; color: var(--color-ink-soft); }
.resp-tarjeta-fecha { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.resp-tarjeta-detalle { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.chip.resp-ok { background: var(--tint-green); color: var(--text-green); }
.chip.resp-fallido { background: var(--tint-red); color: var(--text-red); }
.resp-bloque { display: flex; flex-direction: column; gap: 10px; }
.resp-tabla-marco { overflow-x: auto; border: 1px solid var(--color-mist-200); border-radius: 8px; }
.resp-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.resp-tabla th { text-align: left; padding: 10px 12px; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-soft); background: var(--color-mist-100); white-space: nowrap; }
.resp-tabla td { padding: 10px 12px; border-top: 1px solid var(--color-mist-200); vertical-align: top; }
.resp-archivos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.resp-archivos li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--color-mist-200); font-size: 13px; }
.resp-vacio { padding-top: 4px; }
@media (max-width: 899px) {
  .resp-tarjetas { grid-template-columns: minmax(0, 1fr); }
  .resp-boton { width: 100%; }
  .resp-descargar { width: 100%; }
}

/* ===== Solicitudes externas (M1): formulario público, siempre en tema claro ===== */
.sr-solo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp-cuerpo { margin: 0; min-height: 100vh; background: var(--color-mist-100); color: var(--color-ink); font-family: var(--font-body); }
.sp-franja { height: 5px; background: linear-gradient(135deg, var(--color-teal-400) 0%, var(--color-navy-700) 55%, var(--color-magenta-700) 100%); }
.sp-marco { max-width: 680px; margin: 0 auto; padding: 48px 24px 80px; }
.sp-logo { margin-bottom: 28px; }
.sp-logo img { width: 168px; height: auto; display: block; }
.sp-intro { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.sp-intro p { margin: 0; font-size: 16.5px; line-height: 1.6; text-wrap: pretty; }
.sp-intro a { color: var(--text-navy); font-weight: 700; text-decoration: underline; overflow-wrap: anywhere; }
.sp-titulo { margin: 0 0 -2px; font-family: var(--font-display); font-size: 38px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.sp-intro .sp-gracias { font-weight: 700; }
.sp-intro .sp-nota { font-size: 14px; color: var(--color-ink-soft); }
.sp-ast { color: var(--text-magenta); font-weight: 700; }
.sp-opcional { font-weight: 400; color: var(--color-ink-soft); }
.sp-banner { display: flex; align-items: flex-start; gap: 12px; border-radius: 14px; padding: 16px 18px; margin-bottom: 20px; font-size: 15px; font-weight: 600; line-height: 1.45; }
.sp-banner svg { flex-shrink: 0; }
.sp-banner-ambar { background: var(--tint-amber); color: var(--text-amber); }
.sp-banner-rojo { background: var(--tint-red); color: var(--color-ink); }
.sp-banner-rojo svg { color: var(--text-red); }
.sp-form { display: flex; flex-direction: column; gap: 20px; }
.sp-trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.sp-tarjeta { background: var(--surface-card); border-radius: var(--radius-md); box-shadow: var(--sh-chip); padding: 36px 40px; display: flex; flex-direction: column; gap: 26px; }
.sp-h2 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-ink-soft); }
.sp-h2-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-etiqueta-opcional { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--color-mist-100); color: var(--color-ink-soft); }
.sp-campo { display: flex; flex-direction: column; gap: 8px; }
.sp-campo > label, .sp-grupo legend { font-size: 15px; font-weight: 600; line-height: 1.4; }
.sp-grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.sp-grupo legend { padding: 0; margin-bottom: 10px; }
.sp-input { width: 100%; min-height: 50px; padding: 13px 16px; border-radius: 12px; border: 1.5px solid var(--color-mist-300); background: var(--surface-card); color: var(--color-ink); font: inherit; font-size: 16px; line-height: 1.4; }
.sp-input:focus-visible, .sp-opcion input:focus-visible, .sp-boton:focus-visible, .sp-boton-enlace:focus-visible, .sp-boton-secundario:focus-visible { outline: 3px solid var(--color-teal-500); outline-offset: 2px; }
.sp-input[aria-invalid="true"] { border-color: var(--text-red); }
.sp-area { resize: vertical; line-height: 1.5; }
.sp-alto-l { min-height: 132px; } .sp-alto-m { min-height: 112px; } .sp-alto-s { min-height: 96px; }
.sp-select { position: relative; }
.sp-select select, .sp-select [role="combobox"] { appearance: none; -webkit-appearance: none; padding-right: 46px; }
.sp-chevron { position: absolute; right: 16px; top: 25px; transform: translateY(-50%); pointer-events: none; color: var(--color-ink-soft); display: flex; }
.sp-lista { position: absolute; z-index: 10; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; max-height: 264px; overflow-y: auto; background: var(--surface-card); border-radius: 14px; box-shadow: var(--shadow-card, 0 10px 30px rgba(30,54,110,0.12)); border: 1px solid var(--color-mist-200); animation: mcFadeIn 0.18s var(--ease); }
.sp-lista li[role="option"] { padding: 0 14px; min-height: 48px; font-size: 16px; font-weight: 500; cursor: pointer; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; }
.sp-lista li.resaltada { background: var(--color-mist-100); }
.sp-lista li.elegida { font-weight: 700; }
.sp-lista li.elegida::after { content: ''; width: 9px; height: 15px; margin-right: 4px; border: solid var(--text-navy); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translateY(-2px); }
.sp-lista-vacia { padding: 14px 16px; font-size: 15px; color: var(--color-ink-soft); }
.sp-ayuda { font-size: 13.5px; line-height: 1.4; color: var(--color-ink-soft); }
.sp-error { display: flex; align-items: flex-start; gap: 7px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--text-red); }
.sp-error svg { flex-shrink: 0; margin-top: 1px; }
.sp-grupo .sp-error { margin-top: 8px; }
.sp-error[hidden], .sp-alerta[hidden], .sp-material[hidden], .sp-resumen[hidden] { display: none; }
.sp-pie-campo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sp-pie-campo .sp-error { flex: 1; min-width: 0; }
.sp-contador { margin-left: auto; font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--color-ink-soft); }
.sp-contador.excedido { font-weight: 700; color: var(--text-red); }
.sp-opciones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sp-opcion { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 18px; border-radius: 14px; border: 1.5px solid var(--color-mist-300); background: var(--surface-card); font-size: 16px; font-weight: 600; color: var(--color-ink); cursor: pointer; }
.sp-opcion input { width: 22px; height: 22px; margin: 0; accent-color: #1E366E; flex-shrink: 0; }
.sp-opcion:has(input:checked) { border-color: var(--mc-deep); background: var(--tint-navy); font-weight: 700; }
.sp-invalido .sp-opcion:not(:has(input:checked)) { border-color: var(--text-red); }
.sp-alerta { display: flex; align-items: flex-start; gap: 12px; background: var(--tint-amber); color: var(--text-amber); border-radius: 12px; padding: 14px 16px; font-size: 14.5px; font-weight: 600; line-height: 1.45; animation: mcFadeIn 0.18s var(--ease); }
.sp-alerta svg { flex-shrink: 0; }
.sp-material { display: flex; flex-direction: column; gap: 16px; background: var(--tint-teal2); border-radius: 16px; padding: 20px; animation: mcFadeIn 0.18s var(--ease); }
.sp-material-texto { display: flex; align-items: flex-start; gap: 14px; }
.sp-material-texto p { margin: 0; font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.sp-material-icono { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-card); color: var(--text-teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sp-boton-enlace { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--mc-deep); background: var(--surface-card); color: var(--text-navy); font-size: 15px; font-weight: 700; text-decoration: none; align-self: flex-start; }
.sp-boton-enlace:hover { text-decoration: none; background: var(--tint-navy); }
.sp-enviar { display: flex; flex-direction: column; gap: 16px; padding: 4px 4px 0; }
.sp-resumen { display: flex; align-items: center; gap: 10px; background: var(--tint-red); color: var(--color-ink); border-radius: 12px; padding: 13px 16px; font-size: 15px; font-weight: 700; }
.sp-resumen svg { color: var(--text-red); flex-shrink: 0; }
.sp-boton { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 58px; padding: 0 28px; border-radius: 999px; border: none; background: var(--mc-deep); color: #fff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: var(--sh-btn); }
.sp-boton.enviando { cursor: progress; box-shadow: none; opacity: 0.78; }
.sp-giro { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: spSpin 0.8s linear infinite; }
.sp-boton.enviando .sp-giro { display: block; }
@keyframes spSpin { to { transform: rotate(360deg); } }
.sp-privacidad { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--color-ink-soft); text-align: center; text-wrap: pretty; }
.sp-exito { background: var(--surface-card); border-radius: var(--radius-md); box-shadow: var(--sh-chip); padding: 56px 48px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; animation: mcFadeIn 0.24s var(--ease); }
.sp-exito-icono { width: 72px; height: 72px; border-radius: 50%; background: var(--text-green); color: #fff; display: flex; align-items: center; justify-content: center; }
.sp-titulo-ok { margin: 0; font-family: var(--font-display); font-size: 36px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }
.sp-numero { font-size: 15px; font-weight: 800; color: var(--text-navy); background: var(--tint-navy); border-radius: 999px; padding: 6px 16px; }
.sp-exito-texto { margin: 0; font-size: 16.5px; line-height: 1.6; max-width: 460px; text-wrap: pretty; }
.sp-exito-texto strong { overflow-wrap: anywhere; }
.sp-alerta-exito { max-width: 460px; text-align: left; font-size: 15px; line-height: 1.5; border-radius: 14px; padding: 16px 18px; }
.sp-boton-secundario { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 1.5px solid var(--color-mist-300); background: var(--surface-card); color: var(--color-ink); font-size: 16px; font-weight: 700; text-decoration: none; }
.sp-boton-secundario:hover { text-decoration: none; background: var(--color-mist-100); color: var(--color-ink); }
@media (max-width: 639px) {
  .sp-marco { padding: 24px 16px 48px; }
  .sp-titulo, .sp-titulo-ok { font-size: 28px; }
  .sp-tarjeta { padding: 24px 20px; }
  .sp-input { min-height: 54px; }
  .sp-opcion { min-height: 58px; }
  .sp-boton-enlace, .sp-boton-secundario { align-self: stretch; width: 100%; }
  .sp-exito { padding: 40px 22px; }
}

/* ===== Solicitudes (M1): lista y ficha, solo admin ===== */
.sol, .sol-ficha { display: flex; flex-direction: column; gap: 16px; max-width: 1100px; }
.sol-filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.sol-filtros .campo:last-child { grid-column: span 2; }
.sol-rango { display: flex; align-items: center; gap: 6px; color: var(--color-ink-soft); font-size: 12px; }
.sol-rango .input { min-width: 0; }
.sol-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sol-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 999px; background: var(--tint-navy); color: var(--text-navy); font-size: 12.5px; font-weight: 700; }
.sol-chip a { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-navy); }
.sol-chip a:hover { background: rgba(30,54,110,0.12); }
.sol-estado-nueva { background: var(--color-magenta-700); color: #fff; }
.sol-estado-procesada { background: #1f8a4c; color: #fff; }
.sol-tarde { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--tint-amber); color: var(--text-amber); font-size: 11.5px; font-weight: 700; white-space: nowrap; align-self: flex-start; }
.sol-tabla { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); overflow-x: auto; animation: mcFadeIn 0.18s var(--ease); }
.sol-fila { display: grid; grid-template-columns: 56px minmax(120px, 1.3fr) minmax(90px, 1fr) 130px 150px 100px 100px; gap: 12px; align-items: center; padding: 14px 18px; font-size: 13.5px; color: var(--color-ink); text-decoration: none; min-width: 820px; border-top: 1px solid var(--color-mist-200); }
a.sol-fila:hover { background: var(--color-mist-100); text-decoration: none; color: var(--color-ink); }
.sol-cabeza { padding: 11px 18px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-soft); background: var(--color-mist-100); border-top: none; }
.sol-num { font-weight: 800; color: var(--text-navy); }
.sol-nombre { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sol-recorte { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sol-req { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.sol-req strong { font-weight: 600; }
.sol-tarjetas { display: none; flex-direction: column; gap: 10px; }
.sol-tarjeta { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; color: var(--color-ink); text-decoration: none; }
a.sol-tarjeta { padding: 16px; gap: 10px; }
a.sol-tarjeta:hover { text-decoration: none; color: var(--color-ink); border-color: var(--color-mist-300); }
.sol-tarjeta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.sol-tarjeta-nombre { display: block; font-size: 15px; font-weight: 700; }
.sol-tarjeta-sub { display: block; font-size: 13px; color: var(--color-ink-soft); }
.sol-tarjeta-fechas { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--color-ink-soft); }
.sol-tarjeta-fechas strong { color: var(--color-ink); }
.sol-vacio { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; background: var(--surface-card); border: 1px dashed var(--color-mist-300); border-radius: var(--radius-sm); text-align: center; }
.sol-vacio-titulo { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--color-ink); }
.sol-vacio-texto { font-size: 14px; color: var(--color-ink-soft); max-width: 360px; line-height: 1.5; }
.sol-volver { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 14px; font-weight: 700; color: var(--text-navy); text-decoration: none; }
.sol-volver:hover { text-decoration: none; color: var(--text-navy); }
.sol-ficha { gap: 18px; animation: mcFadeIn 0.18s var(--ease); }
.sol-ficha-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sol-ficha-titulos { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 14px; }
.sol-ficha-titulo-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sol-ficha-titulo { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-ink); }
.sol-ficha-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sol-ficha-acciones form { margin: 0; }
.sol-eliminar { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; background: transparent; padding: 10px 12px; border-radius: 8px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-red); cursor: pointer; }
.sol-eliminar:hover { background: var(--tint-red); }
.sol-alerta { display: flex; align-items: flex-start; gap: 12px; background: var(--tint-amber); color: var(--text-amber); border-radius: 14px; padding: 14px 18px; font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.sol-alerta svg { flex-shrink: 0; }
.sol-procesada { display: flex; align-items: center; gap: 10px; background: var(--tint-green); border-radius: 14px; padding: 12px 18px; font-size: 14px; font-weight: 600; color: var(--color-ink); }
.sol-procesada-icono { width: 24px; height: 24px; border-radius: 50%; background: var(--text-green); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sol-rejilla { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.sol-columna { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sol-tarjeta-titulo { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--color-ink); }
.sol-solo-lectura { font-size: 12px; font-weight: 600; color: var(--color-ink-soft); }
.sol-tarjeta-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sol-datos { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.sol-datos > div { min-width: 0; }
.sol-datos .sol-dato-ancho { grid-column: 1 / -1; }
.sol-datos dt { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-soft); margin-bottom: 4px; }
.sol-datos dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--color-ink); text-wrap: pretty; overflow-wrap: anywhere; }
.sol-texto-largo { white-space: pre-wrap; }
.sol-material { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sol-boton-carpeta { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--color-teal-500); background: var(--surface-card); color: var(--text-navy); font-size: 13px; font-weight: 700; text-decoration: none; }
.sol-boton-carpeta:hover { text-decoration: none; background: var(--tint-teal2); color: var(--text-navy); }
.sol-crear { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--color-mist-300); background: var(--surface-card); color: var(--color-ink); font-size: 13px; font-weight: 700; text-decoration: none; }
.sol-crear:hover { text-decoration: none; background: var(--color-mist-100); color: var(--color-ink); }
.sol-sin-tareas { font-size: 14px; line-height: 1.5; color: var(--color-ink-soft); padding: 18px 14px; background: var(--color-mist-100); border-radius: 12px; text-align: center; }
.sol-tareas, .sol-correos { display: flex; flex-direction: column; }
.sol-tarea { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1.5px dashed var(--color-mist-300); color: var(--color-ink); text-decoration: none; }
.sol-tarea:first-child, .sol-correo:first-child { border-top: none; }
.sol-tarea:hover { text-decoration: none; color: var(--color-ink); }
.sol-tarea:hover .sol-tarea-nombre { color: var(--text-navy); }
.sol-tarea-nombre { font-size: 14.5px; font-weight: 700; }
.sol-tarea-meta { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--color-ink-soft); }
.sol-tarea-meta strong { color: var(--color-ink); }
.sol-tarea-meta .chip { padding: 3px 10px; font-size: 11px; }
.sol-correo { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1.5px dashed var(--color-mist-300); }
.sol-correo-icono { width: 24px; height: 24px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sol-correo-icono.ok { background: var(--text-green); } .sol-correo-icono.fallo { background: var(--text-red); }
.sol-correo-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sol-correo-titulo { font-size: 14px; font-weight: 600; color: var(--color-ink); }
.sol-correo-error { font-size: 12.5px; color: var(--text-red); margin-top: 2px; line-height: 1.4; }
.sol-correo-resultado { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.sol-correo-resultado.ok { background: var(--tint-green); color: var(--text-green); }
.sol-correo-resultado.fallo { background: var(--tint-red); color: var(--text-red); }
.nav-cuenta { position: absolute; top: -7px; left: 11px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-magenta-700); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
/* Solicitud de origen en el detalle de una tarea (supuesto (cp)) */
.tarea-solicitud-chip { display: flex; align-items: center; gap: 8px; align-self: flex-start; max-width: 100%; background: var(--tint-navy); color: var(--text-navy); border-radius: 999px; padding: 8px 14px 8px 12px; font-size: 13px; font-weight: 700; }
.tarea-solicitud-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarea-origen { background: var(--tint-teal2); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.tarea-origen-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tarea-origen-titulo { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--color-ink); }
.tarea-origen-ver { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--color-teal-500); background: var(--surface-card); color: var(--text-navy); font-size: 13px; font-weight: 700; text-decoration: none; }
.tarea-origen-ver:hover { text-decoration: none; color: var(--text-navy); }
.tarea-origen-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px 16px; font-size: 14px; line-height: 1.5; color: var(--color-ink); }
.tarea-origen-datos > div { min-width: 0; overflow-wrap: anywhere; }
.tarea-origen-datos .ancho { grid-column: 1 / -1; }
.tarea-origen-etiqueta { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-soft); margin-bottom: 3px; }
@media (max-width: 899px) {
  .sol-tabla { display: none; }
  .sol-tarjetas { display: flex; }
  .sol-ficha-cabeza { flex-direction: column; align-items: stretch; }
  .sol-rejilla, .sol-datos { grid-template-columns: minmax(0, 1fr); }
  .sol-tarjeta { padding: 18px; }
  .sol-filtros .campo:last-child { grid-column: auto; }
}
/* Mis tareas - año (Todas Mis Tareas): gráfico a la izquierda y la lista al lado en escritorio */
.barra-fija { cursor: default; }
.anual-fila { display: flex; gap: 18px; align-items: flex-start; }
.anual-fila .tarjeta-resumen { flex: 0 1 520px; min-width: 0; }
.anual-fila .grafico-listas { flex: 1 1 280px; min-width: 0; }
.anual-fila .grupo-lista { margin-top: 0; max-height: 238px; overflow-y: auto; padding-right: 4px; }
.grafico-ayuda { padding: 18px; border: 1px dashed var(--color-mist-300); border-radius: 12px; text-align: center; font-size: 13px; }
.grafico-ayuda[hidden] { display: none; }
@media (max-width: 899px) {
  .anual-fila { flex-direction: column; align-items: stretch; }
  .anual-fila .tarjeta-resumen, .anual-fila .grafico-listas { flex: none; }
  .anual-fila .grupo-lista { max-height: none; }
  .grafico-ayuda { display: none; }
}

/* ===== Impresiones (I1): calendario, lista, ficha y casilla en la tarea ===== */
.chip-rol-miembro_impresiones { background: #e8ebf5; color: var(--text-navy); }
:root[data-theme="dark"] .chip-rol-miembro_impresiones { background: var(--tint-navy); }
.campo-error { font-size: 12px; font-weight: 600; color: var(--text-red); }
.imp-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.2; max-width: 100%; color: #fff; white-space: nowrap; }
.imp-chip.chico { padding: 2px 8px 2px 6px; font-size: 10.5px; white-space: normal; }
.imp-chip svg { flex-shrink: 0; }
.imp-informacion_pendiente { background: var(--color-mist-300); color: var(--color-ink); }
.imp-diseno_cotizacion { background: #0c7e93; color: #fff; }
.imp-aprobacion_administracion { background: #c9711a; color: #fff; }
.imp-en_produccion { background: var(--color-navy-700); color: #fff; }
.imp-completado { background: #1f8a4c; color: #fff; }
:root[data-theme="dark"] .imp-en_produccion { background: #3b5aa6; }
.imp-tarde { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--tint-amber); color: var(--text-amber); font-size: 11px; font-weight: 700; white-space: nowrap; }
.imp { display: flex; flex-direction: column; gap: 14px; max-width: 1100px; }
.imp-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.imp-mes-nav { display: flex; align-items: center; gap: 10px; }
.imp-mes-nav .boton-mini { border-radius: 999px; padding: 7px 14px; font-size: 13px; }
.imp-mes { font-size: 14px; font-weight: 700; color: var(--color-ink); min-width: 132px; text-align: center; }
.imp-mes-vacio { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--color-mist-100); font-size: 14px; font-weight: 600; color: var(--color-ink); }
.imp-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.imp-semana div { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-soft); text-align: center; padding: 4px 0; }
.imp-corto { display: none; }
.imp-dia { min-height: 124px; display: flex; flex-direction: column; gap: 5px; padding: 6px; border-radius: 10px; background: var(--surface-card); border: 1px solid var(--color-mist-200); min-width: 0; cursor: pointer; }
.imp-dia.fuera { background: transparent; opacity: 0.55; }
.imp-dia.hoy { border: 2px solid var(--color-teal-500); }
.imp-dia.elegido { background: var(--tint-teal2); border: 2px solid var(--color-navy-700); }
.imp-num { font-size: 12px; font-weight: 600; color: var(--color-ink-soft); text-decoration: none; align-self: flex-start; }
.imp-num:hover { text-decoration: none; color: var(--color-ink); }
.imp-dia.hoy .imp-num { color: var(--color-teal-500); font-weight: 800; }
.imp-items { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.imp-item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 8px; border-radius: 8px; background: var(--color-mist-100); border: 1px solid var(--color-mist-200); min-width: 0; color: var(--color-ink); text-decoration: none; }
.imp-item:hover { text-decoration: none; color: var(--color-ink); border-color: var(--color-mist-300); }
.imp-item.tarde { border-color: #c0293b; }
.imp-item.hecha { opacity: 0.55; }
.imp-item-nombre { font-size: 12px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.imp-item-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; }
.imp-item-cant { font-size: 11px; font-weight: 700; color: var(--color-ink-soft); }
.imp-mas { align-self: flex-start; padding: 2px 4px; font-size: 12px; font-weight: 700; color: var(--text-navy); text-decoration: underline; }
.imp-puntos { display: none; align-items: center; justify-content: center; gap: 3px; }
.imp-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--color-navy-700); }
.imp-punto.hecha { background: var(--color-mist-300); }
.imp-punto-tarde { font-size: 10px; font-weight: 800; color: #c0293b; line-height: 1; }
.imp-dia-panel { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.imp-dia-panel .cal-dia-titulo { margin: 0; }
.imp-dia-panel.sin-items { display: none; }
.imp-sin-dia { font-size: 13px; color: var(--color-ink-soft); background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 14px 16px; }
.imp-agenda { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-card); border: 1px solid var(--color-mist-200); color: var(--color-ink); text-decoration: none; animation: mcFadeIn 0.18s var(--ease); }
.imp-agenda { cursor: pointer; }
.imp-agenda:hover { text-decoration: none; color: var(--color-ink); border-color: var(--color-mist-300); }
a.imp-agenda-nombre, a.imp-agenda-nombre:hover { color: var(--color-ink); text-decoration: none; }
.imp-celda-tarea { display: flex; align-items: center; gap: 10px; min-width: 0; }
.imp-agenda.tarde { border-color: #c0293b; }
.imp-agenda.hecha { opacity: 0.6; }
.imp-agenda-texto { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.imp-agenda-nombre { font-size: 14px; font-weight: 700; }
.imp-agenda-sub { font-size: 12.5px; color: var(--color-ink-soft); }
.imp-agenda-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1179px) {
  .imp-dia { min-height: 46px; align-items: center; padding: 6px 2px; }
  .imp-num { align-self: center; }
  .imp-items { display: none; }
  .imp-puntos { display: flex; }
  .imp-dia.fuera .imp-puntos { display: none; }
  .imp-largo { display: none; }
  .imp-corto { display: inline; }
  .imp-dia-panel.sin-items { display: flex; }
}
.imp-filtro-grupo { display: flex; flex-direction: column; gap: 6px; }
.imp-filtro-etiqueta { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-soft); }
.imp-estados { display: flex; flex-wrap: wrap; gap: 8px; }
.imp-estado-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--color-mist-300); background: var(--surface-card); color: var(--color-ink); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.imp-estado-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.imp-estado-toggle:has(input:checked) { border-color: var(--color-navy-700); background: var(--color-navy-700); color: #fff; font-weight: 800; }
.imp-estado-toggle:has(input:focus-visible) { outline: 2px solid var(--color-teal-500); outline-offset: 2px; }
.imp-filtros-fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; align-items: end; }
.imp-check { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 14px; font-weight: 600; color: var(--color-ink); cursor: pointer; }
.imp-check input { width: 18px; height: 18px; accent-color: var(--color-teal-500); }
.imp-tabla { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); overflow-x: auto; animation: mcFadeIn 0.18s var(--ease); }
.imp-fila { display: grid; grid-template-columns: minmax(190px, 1.8fr) minmax(230px, 1.5fr) 90px 130px minmax(150px, 1.5fr) minmax(130px, 1.2fr); gap: 14px; padding: 14px 16px; align-items: center; border-top: 1px solid var(--color-mist-200); font-size: 14px; color: var(--color-ink); min-width: 900px; cursor: pointer; }
.imp-fila:hover { background: var(--color-mist-100); }
.imp-fila.hecha { opacity: 0.7; }
.imp-tabla-cabeza { padding: 12px 16px; background: var(--color-mist-100); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-soft); border-top: none; cursor: default; }
.imp-tabla-cabeza:hover { background: var(--color-mist-100); }
.imp-tarea-enlace { font-weight: 700; color: var(--text-navy); text-decoration: underline; overflow-wrap: anywhere; }
.imp-tarea-enlace.grande { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; }
.imp-cant { font-weight: 700; }
.imp-fecha { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.imp-fecha a { font-weight: 600; color: var(--color-ink); text-decoration: none; }
.imp-notas { color: var(--color-ink-soft); font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.imp-resp { color: var(--color-ink-soft); font-size: 13px; }
.imp-tarjetas { display: none; flex-direction: column; gap: 10px; }
.imp-tarjeta { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 16px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.imp-tarjeta.tarde { border-color: #c0293b; }
.imp-tarjeta.hecha { opacity: 0.7; }
.imp-tarjeta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; }
.imp-tarjeta-cabeza .imp-tarea-enlace { flex: 1; min-width: 0; }
.imp-paginas { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.imp-paginas-botones { display: flex; gap: 8px; }
.imp-paginas .boton-mini { border-radius: 999px; padding: 7px 14px; font-size: 13px; }
.imp-ficha-form { display: flex; flex-direction: column; gap: 18px; }
.imp-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.imp-estado-select { border: none; font-weight: 700; }
.imp-paso { display: flex; align-items: stretch; gap: 6px; }
.imp-paso .input { text-align: center; min-width: 0; }
.imp-paso-boton { width: 40px; flex-shrink: 0; border: 1px solid var(--color-mist-300); border-radius: 12px; background: var(--surface-card); color: var(--color-ink); font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; }
.imp-notas-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.imp-datos-tarea { grid-template-columns: minmax(0, 1fr); }
.imp-casilla { border: 1px solid var(--color-mist-300); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.imp-casilla.compacta { border-radius: 12px; padding: 10px 12px; gap: 10px; border-style: dashed; }
.imp-casilla-cabeza { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; cursor: pointer; }
.imp-casilla-cabeza input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--color-teal-500); flex-shrink: 0; }
.imp-casilla-cabeza input:disabled { cursor: default; }
.imp-casilla-textos { display: flex; flex-direction: column; gap: 2px; }
.imp-casilla-titulo { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--color-ink); }
.imp-casilla-ayuda { font-size: 13px; color: var(--color-ink-soft); line-height: 1.4; }
.imp-casilla-cuerpo { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px dashed var(--color-mist-300); animation: mcFadeIn 0.18s var(--ease); }
.imp-casilla-cuerpo[hidden], .js .imp-casilla-cuerpo[data-oculto] { display: none; }
/* Avance de la revisión de una tarea (VeA, 28-oct-2026) */
.rev-avance { border: 1px solid var(--color-mist-300); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.rev-avance-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rev-chip { background: var(--tint-amber); color: var(--text-amber); }
.rev-chip.completa { background: var(--tint-green); color: var(--text-green); }
.rev-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rev-lista li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--color-ink); }
.rev-marca { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--color-mist-300); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.rev-lista li.hecha .rev-marca { background: var(--text-green); border-color: var(--text-green); color: #fff; }
.rev-cuando { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--color-ink-soft); }
.rev-boton { align-self: flex-start; }
.rev-forzar { align-self: flex-start; }
.revision-hecha { color: var(--text-green); font-weight: 600; }
/* Campaña del evento (VeA, 28-oct-2026): los campos aparecen al marcar «Crear su campaña» */
.evc .evc-campos { display: none; }
.evc:has([data-crear-campana]:checked) .evc-campos { display: flex; }
.imp-casilla-subtitulo { font-size: 13px; font-weight: 700; color: var(--color-ink); }
.imp-casilla-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.imp-casilla-nota { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--color-ink); background: var(--color-mist-100); border-radius: 10px; padding: 10px 12px; }
.imp-casilla-nota.peligro { background: var(--tint-red); color: var(--text-red); }
.imp-casilla-nota[hidden] { display: none; }
.imp-casilla-info { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-navy); background: var(--tint-navy); border-radius: 10px; padding: 10px 12px; }
.nav-movil-mas { position: relative; flex: 1 1 0; min-width: 0; display: flex; }
.nav-movil-mas > .nav-movil-item { width: 100%; border: none; background: none; font: inherit; font-size: 10.5px; cursor: pointer; }
.menu-mas { position: fixed; right: 8px; bottom: 68px; z-index: 41; width: 210px; background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); padding: 6px; display: flex; flex-direction: column; gap: 2px; animation: mcSlideUp 0.18s ease; }
.menu-mas[hidden] { display: none; }
.menu-mas a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 10px; color: var(--color-ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.menu-mas a:hover, .menu-mas a.activo { background: var(--color-mist-100); text-decoration: none; color: var(--color-ink); }
.menu-mas a.activo { color: var(--text-magenta); }
@media (max-width: 899px) {
  .imp-tabla { display: none; }
  .imp-tarjetas { display: flex; }
}
/* Tarea en solo lectura (miembro-impresiones desde una impresión, I1) */
.fieldset-lectura { display: contents; border: 0; margin: 0; padding: 0; min-width: 0; }
.fieldset-lectura .subtarea-quitar { display: none; }
/* Recuperación de contraseña (A4) */
.enlace-olvido { font-size: 13px; align-self: flex-end; }
.enlace-olvido.centro { align-self: center; }
.acceso-aviso { margin-bottom: 0; line-height: 1.5; }
.boton-secundario.grande { padding: 13px; font-size: 15px; }
/* Correos (módulo 14): Equipo › Correos y Orden de Rodaje */
.correo-pantalla { display: flex; flex-direction: column; gap: 16px; }
.correo-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.correo-rejilla { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.correo-lado { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.correo-destinatarios, .correo-registro { display: flex; flex-direction: column; gap: 4px; }
.correo-destinatario { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 10px; color: var(--color-ink); text-decoration: none; border: 1px solid transparent; }
.correo-destinatario:hover { background: var(--color-mist-100); text-decoration: none; }
.correo-destinatario.activo { background: var(--color-mist-100); border-color: var(--color-mist-300); }
.correo-dest-nombre { font-size: 14px; font-weight: 700; }
.correo-dest-meta { font-size: 12px; color: var(--color-ink-soft); }
.correo-registro-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 8px 0; border-top: 1px solid var(--color-mist-200); }
.correo-registro-fila:first-child { border-top: none; }
.correo-registro-fila .sol-correo-error { flex-basis: 100%; }
.correo-vista { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); overflow: hidden; min-width: 0; }
.correo-vista-cabeza { padding: 12px 16px; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--color-mist-200); }
.correo-vista iframe { display: block; width: 100%; height: 1100px; border: 0; background: #edf3f5; }
.correo-modificada { padding: 10px 14px; border-radius: 12px; background: var(--tint-red); color: var(--text-red); font-size: 14px; font-weight: 600; }
.texto-alerta { color: var(--text-red); }
@media (max-width: 899px) {
  .correo-rejilla { grid-template-columns: 1fr; }
  .correo-vista iframe { height: 900px; }
}
.boton-primario:disabled, .boton-secundario:disabled { opacity: .5; cursor: not-allowed; }
.fila-acceso.nunca { font-style: italic; }

/* --- Recursos de campañas y eventos (pedido por VeA, 13-oct-2026) --- */
.boton-recursos { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--color-mist-300); background: var(--surface-card); color: var(--text-teal); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.boton-recursos:hover, .boton-recursos:visited { color: var(--text-teal); text-decoration: none; }
.boton-recursos:hover { background: var(--tint-teal); border-color: var(--text-teal); }
.recursos-campo { display: flex; align-items: center; gap: 10px; }
.recursos-campo .con-candado { flex: 1 1 auto; min-width: 0; }

/* --- Link Solicitudes (pedido por VeA, 13-oct-2026) --- */
.sol-encabezado { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }

/* Celular: la barra inferior muestra solo íconos (pedido por VeA, 13-oct-2026). */
.nav-movil-texto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 899px) {
  .nav-movil-item { justify-content: center; min-height: 48px; padding: 10px 2px; }
  .nav-movil-item .nav-icono svg { width: 23px; height: 23px; }
  .nav-movil-item.activo::after { content: ""; position: absolute; bottom: 2px; left: 50%; width: 18px; height: 3px; margin-left: -9px; border-radius: 999px; background: var(--text-magenta); }
}

/* --- Equipo › Facturación (pedido por VeA, 13-oct-2026) --- */
.fac { display: flex; flex-direction: column; gap: 18px; max-width: 1100px; }
.fac-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.fac-nueva { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.fac-nueva:hover { text-decoration: none; }
.fac-tabla { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); overflow: hidden; }
.fac-fila { display: grid; grid-template-columns: minmax(160px, 2fr) minmax(110px, 1.1fr) minmax(90px, 0.9fr) minmax(100px, 1fr) minmax(130px, 1.2fr) minmax(130px, 1.2fr); align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--color-mist-200); color: var(--color-ink); font-size: 14px; text-decoration: none; }
a.fac-fila:hover { background: var(--color-mist-100); color: var(--color-ink); text-decoration: none; }
.fac-encabezado { border-top: none; background: var(--color-mist-100); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-soft); padding-top: 10px; padding-bottom: 10px; }
.fac-nombre { font-weight: 700; overflow-wrap: anywhere; }
.fac-fecha, .fac-periodicidad { color: var(--color-ink-soft); }
.fac-valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fac-derecha { text-align: right; }
.chip.fac-area-creativo { background: #6b4f40; color: #fbefe8; }
.chip.fac-area-produccion { background: #7a3a63; color: #fbeaf4; }
.chip.fac-dias { font-variant-numeric: tabular-nums; }
.chip.fac-dias.rojo { background: var(--tint-red); color: var(--text-red); }
.chip.fac-dias.ambar { background: var(--tint-amber); color: var(--text-amber); }
.chip.fac-dias.verde { background: var(--tint-green); color: var(--text-green); }
@media (max-width: 899px) {
  .fac-nueva { width: 100%; justify-content: center; }
  .fac-encabezado { display: none; }
  .fac-fila { grid-template-columns: 1fr auto; grid-template-areas: "nombre valor" "fecha dias" "periodo area"; gap: 6px 12px; padding: 14px 16px; }
  .fac-fila:nth-child(2) { border-top: none; }
  .fac-nombre { grid-area: nombre; }
  .fac-valor { grid-area: valor; }
  .fac-fila > :nth-child(2) { grid-area: fecha; }
  .fac-fila > :nth-child(3) { grid-area: periodo; font-size: 13px; }
  .fac-fila > :nth-child(4) { grid-area: area; justify-self: end; }
  .fac-fila > :nth-child(5) { grid-area: dias; justify-self: end; }
}
/* Celular: secciones con más de 5 pestañas (Equipo) se deslizan de lado en vez de apretarse. */
@media (max-width: 899px) {
  .pestanas-desliza { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: 2px; }
  .pestanas-desliza::-webkit-scrollbar { display: none; }
  .pestanas-desliza .pestana { flex: 1 0 auto; white-space: nowrap; padding: 10px 10px 8px; }
}
@media (max-width: 899px) { .sol-encabezado > .boton-secundario { width: 100%; } }

/* Equipo › Bases de Datos: la base arriba y los respaldos debajo (VeA, 13-oct-2026). */
.bd-pantalla { display: flex; flex-direction: column; gap: 28px; }
.bd-pantalla .resp { max-width: none; }
.resp-tarjetas.resp-una { grid-template-columns: minmax(0, 1fr); }
/* Vista del equipo: el calendario del equipo va al final. */
#calendario { scroll-margin-top: 16px; }

/* Campañas / Eventos y Mis Campañas y Eventos: únicos lugares para crear campañas y eventos (VeA, 13-oct-2026). */
.ce-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 899px) { .ce-acciones > .boton-secundario { flex: 1 1 0; } }

/* --- Plantillas de tareas (B5, módulo 10) --- */
.pla { display: flex; flex-direction: column; gap: 18px; max-width: 1100px; }
.pla-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.pla-botones { display: flex; gap: 10px; flex-wrap: wrap; }
.pla-nueva { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.pla-nueva:hover { text-decoration: none; }
.pla-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pla-tarjeta { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pla-tarjeta.inactiva { opacity: 0.7; }
.pla-nombre { font-size: 15px; font-weight: 700; color: var(--color-ink); text-decoration: none; overflow-wrap: anywhere; }
.pla-nombre:hover, .pla-nombre:visited { color: var(--color-ink); }
.pla-descripcion { font-size: 13px; color: var(--color-ink-soft); white-space: pre-line; overflow-wrap: anywhere; }
.pla-datos, .pla-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.pla-form { display: flex; flex-direction: column; gap: 14px; }
.pla-bloque { display: flex; flex-direction: column; gap: 12px; }
.pla-activa { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-ink); cursor: pointer; }
.pla-activa input { accent-color: var(--color-teal-500); width: 16px; height: 16px; margin: 0; }
.pla-filas { display: flex; flex-direction: column; gap: 12px; }
.pla-fila { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-left: 4px solid var(--color-teal-500); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pla-fila-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.pla-fila-titulo { font-size: 14px; font-weight: 700; color: var(--color-ink); overflow-wrap: anywhere; }
.pla-fila-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pla-fila-rejilla { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) minmax(0, 1fr); }
.pla-aplicar-rejilla { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: start; }
.pla-dias { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-ink-soft); }
.pla-dias .input { min-width: 0; }
.pla-agregar { align-self: flex-start; }
.pla-subtareas { font-size: 13px; color: var(--color-ink-soft); }
.pla-subtareas ul { margin: 4px 0 0; padding-left: 18px; }
.pla-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pla-pie-simple { display: flex; justify-content: flex-end; }
@media (max-width: 899px) {
  .pla-fila-rejilla, .pla-aplicar-rejilla { grid-template-columns: minmax(0, 1fr); }
  .pla-agregar { align-self: stretch; }
  .pla-pie .panel-pie-derecha, .pla-pie-simple { width: 100%; }
  .pla-pie .panel-pie-derecha > *, .pla-pie-simple > * { flex: 1 1 0; }
  .pla-botones { width: 100%; }
  .pla-botones > * { flex: 1 1 0; justify-content: center; }
}

/* Tareas repetitivas (VeA, 14-oct-2026). */
.chip.chip-repetitiva { background: var(--tint-navy); color: var(--text-navy); display: inline-flex; align-items: center; gap: 4px; }
.pla-seccion { margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--color-mist-200); scroll-margin-top: 16px; }
.texto-rojo { color: var(--text-red); }
.chip.chip-mini { font-size: 10.5px; padding: 1px 7px; vertical-align: middle; }
.nota-repetitiva { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--color-ink-soft); }
/* Formulario de tarea repetitiva: 3 columnas para que los espacios largos no se corten; Sprint Points con su guía. */
.rp-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.rp-rejilla .rp-puntos { grid-column: span 2; }
.pla-fila-rejilla { align-items: start; }
@media (max-width: 899px) {
  .rp-rejilla { grid-template-columns: minmax(0, 1fr); }
  .rp-rejilla .rp-puntos { grid-column: auto; }
}

/* Reuniones: alerta de cruce de horario (VeA, 14-oct-2026). */
.alerta-choque { background: var(--tint-amber); color: var(--text-amber); }
.alerta-choque ul { margin: 6px 0; padding-left: 18px; }

/* Revisiones de Mi Espacio (VeA, 14-oct-2026): recordatorio, sin abrir la tarea; borde del color de "En revisión" cuando está lista. */
.revision-fila { cursor: pointer; }

.tarea-fila.revision-fila.lista-revisar { border-color: #c9711a; border-width: 2px; }
.revision-aviso { color: #c9711a; font-weight: 700; }
:root[data-theme="dark"] .revision-aviso { color: #e9a35c; }
.js .imp-casilla-cuerpo[data-oculto] { display: none; }
#revisiones { scroll-margin-top: 16px; }
/* Reuniones con cruce de horario vigente: borde rojo suave hasta que se resuelva (VeA, 14-oct-2026). */
.reunion-item.con-cruce, .reunion-fila.con-cruce { border: 1px solid #e08a95; box-shadow: inset 0 0 0 1px rgba(192, 41, 59, 0.18); }
:root[data-theme="dark"] .reunion-item.con-cruce, :root[data-theme="dark"] .reunion-fila.con-cruce { border-color: #b34a58; }
.reunion-fila.con-cruce { border-radius: 10px; padding-left: 10px; padding-right: 10px; }
.cruce-etiqueta { display: inline-flex; align-self: flex-start; margin: 2px 0; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--tint-red); color: var(--text-red); vertical-align: middle; }

/* =============================================================================
   Página de campaña o evento (VeA, 14-oct-2026): datos, Gantt, lista y publicaciones
   ============================================================================= */
.cev { display: flex; flex-direction: column; gap: 20px; max-width: 1200px; min-width: 0; animation: mcFadeIn 0.18s ease; }
.cev-volver { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--color-ink-soft); text-decoration: none; }
.cev-volver:hover { color: var(--color-ink); text-decoration: none; }
.cev-datos, .cev-tareas, .cev-pubs { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cev-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cev-titulo-zona { min-width: 0; }
.cev-tipo { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-soft); }
.cev-titulo { margin: 4px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--color-ink); overflow-wrap: anywhere; }
.cev-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cev-fechas { grid-column: span 2; }
.cev-fechas-lista { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--color-ink); }
.cev-textos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.cev-parrafo { white-space: pre-line; overflow-wrap: anywhere; }
.cev-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.cev-rejilla .chip { padding: 4px 12px; font-size: 12px; }
.cev-tareas-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cev-subtitulo { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--color-ink); }
.cev-mas { align-self: center; }
.vista-selector { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--color-mist-100); gap: 2px; }
.vista-opcion { border: none; background: transparent; padding: 8px 14px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--color-ink-soft); cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.vista-opcion:hover { color: var(--color-ink); }
.vista-opcion.activa { background: var(--surface-card); color: var(--color-ink); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.vista-opcion:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 1px; }

/* Diagrama Gantt */
.gantt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gantt-herramientas { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.gantt-controles { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gantt-zoom { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--color-ink-soft); }
.gantt-zoom input { width: 180px; accent-color: var(--color-teal-500); }
.gantt-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--color-ink-soft); }
.gantt-leyenda-item { display: inline-flex; align-items: center; gap: 6px; }
.gantt-punto { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.gantt-scroll { overflow-x: auto; border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); max-height: 70vh; overflow-y: auto; }
.gantt-tabla { position: relative; min-width: 100%; }
.gantt-tabla.con-evento::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--evento-izq); width: var(--evento-ancho); background: var(--tint-teal); opacity: 0.45; pointer-events: none; }
.gantt-cabecera, .gantt-fila { display: flex; position: relative; }
.gantt-cabecera { position: sticky; top: 0; z-index: 5; background: var(--surface-card); border-bottom: 1px solid var(--color-mist-200); height: 46px; }
.gantt-fila { border-bottom: 1px solid var(--color-mist-200); height: 44px; }
.gantt-fila:last-of-type { border-bottom: none; }
.gantt-nombre { position: sticky; left: 0; z-index: 4; flex: 0 0 240px; width: 240px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 0 12px; background: var(--surface-card); border-right: 1px solid var(--color-mist-200); min-width: 0; }
.gantt-esquina { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-soft); z-index: 6; }
.gantt-nombre-texto { font-size: 13px; font-weight: 600; color: var(--color-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.gantt-nombre-texto:hover { color: var(--color-ink); text-decoration: underline; }
.gantt-nombre-meta { font-size: 11px; color: var(--color-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-nombre-meta.vencida { color: var(--text-red); font-weight: 700; }
.gantt-escala { position: relative; flex: 0 0 auto; }
.gantt-meses, .gantt-dias { position: relative; height: 22px; }
.gantt-mes { position: absolute; top: 4px; padding-left: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink); white-space: nowrap; border-left: 1px solid var(--color-mist-300); }
.gantt-dia { position: absolute; top: 2px; text-align: center; font-size: 11px; color: var(--color-ink-soft); }
.gantt-dia.finde { opacity: 0.55; }
.gantt-pista { position: relative; flex: 0 0 auto; background-image: linear-gradient(to right, var(--color-mist-200) 1px, transparent 1px); }
.gantt-bloque { position: absolute; top: 12px; height: 20px; border-radius: 5px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.15); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.gantt-bloque:hover, .gantt-bloque:focus-visible { transform: scale(1.12); box-shadow: 0 2px 8px rgba(0,0,0,0.25); outline: none; z-index: 1; }
.gantt-bloque.atrasada { box-shadow: 0 0 0 2px #c0293b; }
.gantt-bloque.destino { box-shadow: 0 0 0 3px var(--color-teal-500); transform: scale(1.15); }
.gantt-etiqueta { position: absolute; top: 14px; font-size: 11.5px; color: var(--color-ink-soft); white-space: nowrap; pointer-events: none; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.gantt-conector { position: absolute; right: -7px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--surface-card); border: 2px solid #c9711a; opacity: 0; transition: opacity 0.15s, transform 0.15s; cursor: crosshair; }
.gantt.editable .gantt-bloque:hover .gantt-conector, .gantt.arrastrando .gantt-conector { opacity: 1; }
.gantt-conector:hover { transform: scale(1.3); }
.gantt-flechas { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; z-index: 2; }
.gantt-flecha { fill: none; stroke: #c9711a; stroke-width: 2; pointer-events: stroke; cursor: pointer; transition: stroke-width 0.15s; }
.gantt.editable .gantt-flecha:hover { stroke-width: 3.5; }
.gantt:not(.editable) .gantt-flecha { pointer-events: none; cursor: default; }
.gantt-flecha-nueva { stroke-dasharray: 5 4; pointer-events: none; }
.gantt-punta { fill: #c9711a; }
.gantt-hoy { position: absolute; top: 46px; bottom: 0; width: 2px; margin-left: -1px; background: #e0465a; z-index: 3; pointer-events: none; }
.gantt-hoy span { position: absolute; top: 2px; left: 4px; padding: 1px 6px; border-radius: 6px; background: #e0465a; color: #fff; font-size: 10.5px; font-weight: 700; }
.gantt-ayuda { margin-top: -4px; }
.gantt.arrastrando, .gantt.arrastrando * { cursor: crosshair; user-select: none; }

@media (max-width: 899px) {
  .cev-datos, .cev-tareas, .cev-pubs { padding: 16px; }
  .cev-titulo { font-size: 19px; }
  .cev-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cev-textos { grid-template-columns: 1fr; }
  .gantt-nombre { flex-basis: 140px; width: 140px; padding: 0 8px; }
  .gantt-zoom input { width: 120px; }
  .gantt-ayuda { display: none; }
  .vista-opcion { padding: 8px 10px; }
}

/* ===== Opciones con color de Notion (Discipulado y Mejoramiento, migración 022) ===== */
.tono-25 { --h: 25; } .tono-35 { --h: 35; } .tono-50 { --h: 50; } .tono-60 { --h: 60; } .tono-70 { --h: 70; } .tono-80 { --h: 80; } .tono-85 { --h: 85; } .tono-125 { --h: 125; } .tono-145 { --h: 145; } .tono-150 { --h: 150; } .tono-170 { --h: 170; } .tono-190 { --h: 190; } .tono-225 { --h: 225; } .tono-235 { --h: 235; } .tono-245 { --h: 245; } .tono-250 { --h: 250; } .tono-260 { --h: 260; } .tono-300 { --h: 300; } .tono-320 { --h: 320; } .tono-345 { --h: 345; } .tono-350 { --h: 350; }
.chip-opcion.tono-gris { background: var(--color-mist-200); color: var(--color-ink-soft); }
.chip-opcion.tono-gris .chip-opcion-punto { background: oklch(0.62 0 0); }
:root[data-theme="dark"] .chip-opcion.tono-gris { background: oklch(0.34 0 0); color: oklch(0.88 0 0); }
.opciones-tono { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion-tono { position: relative; display: inline-flex; cursor: pointer; }
.opcion-tono input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.opcion-tono .chip-opcion { padding: 5px 12px; border: 2px solid transparent; transition: box-shadow .12s ease, border-color .12s ease; }
.opcion-tono:hover .chip-opcion { box-shadow: 0 0 0 1px var(--color-mist-300); }
.opcion-tono input:checked + .chip-opcion { border-color: var(--color-navy-700); }
.opcion-tono input:checked + .chip-opcion::after { content: "✓"; font-weight: 800; }
.opcion-tono input:focus-visible + .chip-opcion, .opcion-tono input:focus-visible + .opcion-tono-vacia { outline: 2px solid var(--color-teal-500); outline-offset: 2px; }
:root[data-theme="dark"] .opcion-tono input:checked + .chip-opcion { border-color: oklch(0.85 0.05 var(--h, 0)); }
.opcion-tono-vacia { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; border: 2px dashed var(--color-mist-300); font-size: 13px; color: var(--color-ink-soft); }
.opcion-tono input:checked + .opcion-tono-vacia { border-style: solid; border-color: var(--color-navy-700); color: var(--color-ink); }
.desplegable-tono { position: relative; }
.desplegable-tono > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; min-height: 42px; }
.desplegable-tono > summary::-webkit-details-marker { display: none; }
.desplegable-tono > summary svg { flex-shrink: 0; color: var(--color-ink-soft); transition: transform .15s ease; }
.desplegable-tono[open] > summary svg { transform: rotate(180deg); }
.desplegable-tono-actual { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.desplegable-tono.varios > summary { height: auto; }
.sp-grupo .desplegable-tono { margin-top: 8px; }
.sp-grupo .desplegable-tono-lista .opcion-tono .chip-opcion { font-size: 14px; padding: 6px 12px; }
.sp-invalido .desplegable-tono > summary { border-color: var(--text-red); }
.desplegable-tono-lista { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px; background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); animation: mcFadeIn .12s ease; }
.desplegable-tono-lista .opcion-tono { width: 100%; padding: 2px 4px; border-radius: 8px; }
.desplegable-tono-lista .opcion-tono:hover { background: var(--color-mist-100); }
.desplegable-tono-lista .opcion-tono:hover .chip-opcion { box-shadow: none; }
.segmentos { display: inline-flex; gap: 4px; padding: 4px; background: var(--color-mist-100); border-radius: 999px; align-self: flex-start; }
.segmento { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--color-ink-soft); text-decoration: none; }
.segmento:hover { color: var(--color-ink); text-decoration: none; }
.segmento.activo { background: var(--surface-card); color: var(--color-ink); box-shadow: var(--sh-chip); }
.segmento-num { font-weight: 600; color: var(--color-ink-soft); font-variant-numeric: tabular-nums; }
.disc { max-width: none; }
.disc .fac-tabla { overflow-x: auto; }
.disc-fila.fac-encabezado > span { min-width: 0; overflow-wrap: anywhere; }
.disc-fila { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(180px, 1.6fr) minmax(130px, 1fr) repeat(3, minmax(120px, .7fr)) minmax(160px, 1fr); min-width: 1080px; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--color-mist-200); color: var(--color-ink); font-size: 14px; text-decoration: none; }
a.disc-fila:hover { background: var(--color-mist-100); color: var(--color-ink); text-decoration: none; }
.disc-fila.inactiva { color: var(--color-ink-soft); }
.disc-fila.inactiva .chip-opcion { opacity: .6; }
.chip.disc-inactiva { background: var(--color-mist-200); color: var(--color-ink-soft); font-size: 11px; }
.disc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.disc-formacion { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--color-ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.disc-barra { display: inline-flex; gap: 2px; }
.disc-barra span { width: 7px; height: 14px; border-radius: 2px; background: var(--color-mist-200); }
.disc-barra span.hecho { background: var(--color-teal-500); }
.mej { max-width: 1100px; }
.mej-enlace { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 14px 16px; }
.mej-enlace-url { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.mej-filtro { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mej-filtro .bd-control { width: auto; min-width: 220px; }
.mej-resumen { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.mej-lista { display: flex; flex-direction: column; gap: 10px; }
.mej-item { display: flex; flex-direction: column; gap: 6px; background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 14px 16px; color: var(--color-ink); text-decoration: none; }
.mej-item:hover { border-color: var(--color-teal-500); color: var(--color-ink); text-decoration: none; }
.mej-item-cabeza { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mej-item-fecha { font-weight: 700; margin-right: 4px; }
.mej-item-texto { font-size: 13.5px; color: var(--color-ink-soft); }
.mej-item-texto strong { color: var(--color-ink); }
.mej-texto { white-space: normal; overflow-wrap: anywhere; }
.bd-acciones-controles [hidden] { display: none; }
.bd-acciones-controles [data-bd-vinculo] { max-width: 280px; }
.sp-grupo .opciones-tono { margin-top: 8px; }
.sp-grupo .opcion-tono .chip-opcion { font-size: 14px; padding: 7px 14px; }
@media (max-width: 899px) {
  .disc-fila.fac-encabezado { display: none; }
  .disc-fila { grid-template-columns: 1fr 1fr 1fr; gap: 8px 10px; padding: 14px 16px; min-width: 0; }
  .disc-fila .fac-nombre { grid-area: auto; }
  .disc-fila > :nth-child(1), .disc-fila > :nth-child(2), .disc-fila > :nth-child(7) { grid-column: 1 / -1; }
  .disc-fila > [data-etiqueta]::before { content: attr(data-etiqueta); display: block; font-size: 11px; font-weight: 700; color: var(--color-ink-soft); margin-bottom: 3px; }
  .bd-acciones-controles { flex-wrap: wrap; width: 100%; }
  .bd-acciones-controles [data-bd-vinculo] { max-width: none; flex: 1 1 100%; }
  .mej-filtro .bd-control { flex: 1; min-width: 0; }
  .mej-resumen { margin-left: 0; width: 100%; }
}

/* ===== Equipo › Playbook (P3, 20-oct-2026) ===== */
.pb-marco { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 18px; align-items: start; }
.pb-lateral { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 8px; padding: 8px 4px; border-radius: 999px; background: var(--surface-card); border: 1px solid var(--color-mist-200); }
.pb-lateral-item { position: relative; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--color-ink-soft); background: transparent; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.pb-lateral-item:hover { background: var(--tint-teal); color: var(--text-teal); text-decoration: none; }
.pb-lateral-item.activo { background: var(--color-teal-500); color: #fff; }
.pb-lateral-item::after { content: attr(data-nombre); position: absolute; right: calc(100% + 10px); top: 50%; transform: translate(4px, -50%); white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: var(--color-navy-700); color: #fff; font-size: 12.5px; font-weight: 600; box-shadow: var(--sh-chip); opacity: 0; pointer-events: none; transition: opacity 0.15s var(--ease), transform 0.15s var(--ease); }
:root[data-theme="dark"] .pb-lateral-item::after { background: var(--tint-navy); color: var(--text-navy); }
.pb-lateral-item:hover::after, .pb-lateral-item:focus-visible::after { opacity: 1; transform: translate(0, -50%); transition-delay: 0.25s; }
.pb { display: flex; flex-direction: column; gap: 22px; width: 100%; min-width: 0; color: var(--color-ink); }
.pb p { margin: 0; font-size: 15px; line-height: 1.65; }
.pb-portada { background: var(--color-navy-700); color: #fff; border-radius: var(--radius-md); padding: 30px 32px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.pb-portada::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: var(--mc-soft); opacity: 0.25; }
:root[data-theme="dark"] .pb-portada { background: var(--tint-navy); }
.pb-portada-etiqueta { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #bfe4ea; position: relative; }
.pb-portada-titulo { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1.15; position: relative; }
.pb .pb-portada-texto { font-size: 15.5px; color: #e4ebf7; position: relative; }
.pb-indice { display: flex; gap: 8px; flex-wrap: wrap; }
.pb-indice-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--surface-card); border: 1px solid var(--color-mist-200); color: var(--color-ink); font-size: 13.5px; font-weight: 600; }
.pb-indice-item:hover { border-color: var(--color-teal-500); text-decoration: none; color: var(--color-ink); }
.pb-indice-item span { width: 22px; height: 22px; border-radius: 50%; background: var(--tint-teal); color: var(--text-teal); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.pb-seccion { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 20px; }
.pb-seccion-num { width: 30px; height: 30px; border-radius: 50%; background: var(--color-teal-500); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.pb-seccion-titulo { margin: 0; font-family: var(--font-display); font-size: 21px; line-height: 1.25; color: var(--color-ink); }
.pb-carta { display: flex; flex-direction: column; gap: 12px; }
.pb .pb-destacado { font-size: 17px; line-height: 1.55; padding-left: 14px; border-left: 3px solid var(--mc-soft); }
.pb-contrastes { margin: 0; padding: 14px 18px; list-style: none; background: var(--tint-teal2); border-radius: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.pb .pb-lema { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text-teal); }
.pb-subtitulo { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-ink-soft); }
.pb-disciplinas { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.pb-disciplinas li { background: var(--tint-navy); color: var(--text-navy); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; }
.pb-creemos { background: var(--tint-amber); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.pb-creemos ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 15.5px; }
.pb-mision { margin: 4px 0 0; padding: 20px 22px; border-radius: 16px; background: var(--color-navy-700); color: #fff; font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.45; }
:root[data-theme="dark"] .pb-mision { background: var(--tint-navy); }
.pb-mision-etiqueta { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #bfe4ea; margin-bottom: 6px; }
.pb-arbol { border: 1px solid var(--color-mist-200); border-radius: 14px; padding: 14px 16px; background: var(--color-mist-100); }
.pb-arbol-raiz { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--text-navy); flex-wrap: wrap; }
.pb-arbol-nota { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--tint-teal); color: var(--text-teal); }
.pb-arbol ul { list-style: none; margin: 8px 0 0 9px; padding: 0 0 0 18px; border-left: 2px solid var(--color-mist-300); display: flex; flex-direction: column; gap: 4px; }
.pb-arbol li { position: relative; }
.pb-arbol li::before { content: ""; position: absolute; left: -18px; top: 50%; width: 14px; border-top: 2px solid var(--color-mist-300); }
.pb-arbol a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; color: var(--color-ink); font-size: 14.5px; font-weight: 600; }
.pb-arbol a svg:first-child { color: var(--color-teal-500); flex: none; }
.pb-arbol a svg:last-child { color: var(--color-ink-soft); margin-left: auto; flex: none; }
.pb-arbol a:hover { background: var(--surface-card); text-decoration: none; color: var(--text-teal); }
.pb .pb-nota { font-size: 12.5px; color: var(--color-ink-soft); }
.pb-practicas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pb-practica { border: 1px solid var(--color-mist-200); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.pb-practica p { font-size: 14px; }
.pb-practica-titulo { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--text-navy); }
.pb-nombre { display: flex; align-items: flex-start; gap: 2px; margin-top: 4px; font-family: var(--font-display); }
.pb-nombre-parte { display: flex; flex-direction: column; align-items: center; background: var(--tint-teal); border-radius: 8px; padding: 4px 8px 3px; }
.pb-nombre-parte b { font-size: 18px; color: var(--text-teal); letter-spacing: 0.02em; }
.pb-nombre-parte small { font-size: 10px; color: var(--color-ink-soft); text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-body); }
.pb-nombre-texto { font-size: 18px; font-weight: 700; padding: 4px 0 0 8px; }
@media (min-width: 1700px) { .pb-practicas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Playbook › Protocolo de Revisiones y Flujo de Trabajo (VeA, 23-oct-2026) */
.pb-encargados { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.pb-encargados li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; border: 1px solid var(--color-mist-200); border-radius: 12px; padding: 12px 14px; font-size: 15px; }
.pb-cargo { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--tint-navy); color: var(--text-navy); }
.pb-cargo-creativo { background: var(--tint-teal); color: var(--text-teal); }
.pb-cargo-comunicaciones { background: var(--tint-red); color: var(--text-magenta); }
.pb-cargo-diseno { background: var(--tint-green); color: var(--text-green); }
.pb-cargo-pastor { background: var(--tint-amber); color: var(--text-amber); }
.pb-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: none; }
.pb-paso { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: start; border: 1px solid var(--color-mist-200); border-radius: 14px; padding: 14px 16px; position: relative; }
.pb-paso:not(:last-child)::after { content: ""; position: absolute; left: 58px; bottom: -11px; height: 10px; border-left: 2px solid var(--color-mist-300); }
.pb-paso-num { display: inline-flex; flex-direction: column; align-items: flex-start; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text-teal); }
.pb-paso-num small { font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--color-ink-soft); }
.pb-paso-cuerpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pb-paso-quien { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.pb-paso-o { font-size: 12px; color: var(--color-ink-soft); }
.pb .pb-paso p { font-size: 14.5px; }
.pb-area-titulo { display: flex; align-items: center; gap: 8px; }
.pb-area-titulo .vg-area-punto { margin-top: 0; }
.pb-lista { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.5; }
.pb-enlaces { display: flex; gap: 10px; flex-wrap: wrap; }
/* Flujo de Trabajo: mapa de áreas (SVG) y «Del área a la tarea» (VeA, 23-oct-2026) */
.fl-mapa { margin: 6px 0 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fl-mapa svg { width: 100%; max-width: 560px; height: auto; display: block; }
.fl-mapa figcaption { font-size: 13px; color: var(--color-ink-soft); text-align: center; }
.fl-iglesia { fill: var(--color-mist-100); stroke: var(--color-mist-200); stroke-width: 30; }
.fl-disc { fill: none; stroke: var(--text-magenta); stroke-opacity: 0.16; stroke-width: 34; }
.fl-interior { fill: var(--surface-card); }
.fl-anillo-texto { font-family: var(--font-body); font-size: 12.5px; font-weight: 700; letter-spacing: 2px; }
.fl-iglesia-texto { fill: var(--color-ink-soft); }
.fl-disc-texto { fill: var(--text-magenta); }
.fl-enlace { stroke: var(--color-mist-300); stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; }
.fl-nodo-texto { fill: #ffffff; font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.fl-nodo-largo { font-size: 14px; }
/* Color de cada espacio en el mapa, sin animación (la clase de las barras de Vista General las hace crecer). */
.fl-nodo-identidad_vea { fill: #3b6296; }
.fl-nodo-eventos_congregacionales { fill: #8a6a1f; }
.fl-nodo-medios_comunicaciones { fill: #3a6b4d; }
.fl-nodo-solicitudes_ministeriales { fill: #6b4f40; }
.fl-centro { fill: var(--color-navy-700); }
.fl-centro-texto { fill: #ffffff; font-family: var(--font-display); font-size: 17px; font-weight: 800; }
.fl-recorrido { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--color-ink-soft); }
.fl-recorrido-paso { padding: 7px 14px; border-radius: 999px; background: var(--tint-teal); color: var(--text-teal); font-weight: 700; font-size: 13.5px; }
.fl-tareas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fl-tareas-area { border: 1px solid var(--color-mist-200); border-radius: 14px; padding: 0 0 14px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.fl-tareas-area > .pb-subtitulo { padding: 0 16px; }
.fl-tareas-cabeza { padding: 10px 16px; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.fl-tareas-lista { list-style: none; margin: 0; padding: 0 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.fl-tareas-lista li { background: var(--color-mist-100); border: 1px solid var(--color-mist-200); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
@media (max-width: 900px) {
  .pb-marco { grid-template-columns: minmax(0, 1fr); }
  .pb-lateral { display: none; }
  .pb-portada { padding: 24px 20px; }
  .pb-portada-titulo { font-size: 23px; }
  .pb-seccion { padding: 20px 18px; }
  .pb-disciplinas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-practicas { grid-template-columns: 1fr; }
  .pb-paso { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .pb-paso:not(:last-child)::after { left: 26px; }
  .fl-tareas { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Equipo › Vista General (20-oct-2026) ===== */
.vg { display: flex; flex-direction: column; gap: 22px; width: 100%; min-width: 0; color: var(--color-ink); }
.vg-titulo { margin: 0; font-family: var(--font-display); font-size: 26px; color: var(--color-ink); }
.vg-versiculo { margin: 0; background: var(--color-navy-700); color: #fff; border-radius: var(--radius-md); padding: 22px 26px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-card); }
:root[data-theme="dark"] .vg-versiculo { background: var(--tint-navy); }
.vg-versiculo-cita { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #bfe4ea; }
.vg-versiculo blockquote { margin: 0 0 0 32px; padding-left: 16px; border-left: 3px solid var(--mc-soft); font-size: 16.5px; line-height: 1.6; color: #eef3fb; }
.vg-bloque { display: flex; flex-direction: column; gap: 14px; }
.vg-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.vg-subtitulo { margin: 0; font-family: var(--font-display); font-size: 18px; color: var(--color-ink); }
.vg-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.vg-area { background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 16px 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; animation: mcFadeIn 0.3s var(--ease) both; }
.vg-area-top { border-color: var(--color-teal-500); box-shadow: var(--sh-chip); }
.vg-area-cabeza { display: flex; align-items: flex-start; gap: 8px; }
.vg-area-punto { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 4px; }
.vg-area-nombre { flex: 1; min-width: 0; font-weight: 700; font-size: 13.5px; line-height: 1.35; }
.vg-area-chip { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--tint-teal); color: var(--text-teal); flex: none; }
.vg-area-numero { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1; }
.vg-area-numero small { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: var(--color-ink-soft); }
.vg-area-barra { width: 100%; height: 6px; display: block; }
.vg-area-fondo { fill: var(--color-mist-200); }
.vg-area-relleno { transform-origin: left; animation: vgBarra 0.7s var(--ease) both; }
.vg-area-relleno.espacio-eventos_congregacionales { fill: #8a6a1f; }
.vg-area-relleno.espacio-solicitudes_ministeriales { fill: #6b4f40; }
.vg-area-relleno.espacio-medios_comunicaciones { fill: #3a6b4d; }
.vg-area-relleno.espacio-identidad_vea { fill: #3b6296; }
.vg-area-relleno.espacio-discipulado_creativo { fill: #6a4c80; }
@keyframes vgBarra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vg-area-detalle { font-size: 12px; color: var(--color-ink-soft); }
.vg-eventos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.vg-evento { display: flex; gap: 14px; align-items: flex-start; background: var(--surface-card); border: 1px solid var(--color-mist-200); border-radius: var(--radius-sm); padding: 14px 16px; color: var(--color-ink); }
.vg-evento:hover { border-color: var(--color-teal-500); text-decoration: none; color: var(--color-ink); }
.vg-evento-fecha { flex: none; width: 52px; padding: 6px 0; border-radius: 12px; background: var(--tint-navy); color: var(--text-navy); display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.vg-evento-fecha b { font-family: var(--font-display); font-size: 22px; }
.vg-evento-fecha small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.vg-evento-datos { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.vg-evento-nombre { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.vg-evento-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--color-ink-soft); }
.vg-evento-meta .ce-categoria { margin: 0; }
.vg-evento-avance { font-size: 12px; color: var(--color-ink-soft); }
@media (prefers-reduced-motion: reduce) { .vg-area, .vg-area-relleno { animation: none; } }
@media (max-width: 900px) {
  .vg-titulo { font-size: 22px; }
  .vg-versiculo { padding: 18px 18px; }
  .vg-versiculo blockquote { margin-left: 0; font-size: 15.5px; }
  .vg-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vg-eventos { grid-template-columns: 1fr; }
}

/* ===== Mi cuenta › Instalar la app (Kreo, 20-oct-2026) ===== */
.instalar { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.instalar-logo { width: 132px; height: 132px; align-self: center; }
.instalar-estado { margin: 0; font-weight: 700; color: var(--text-green); }
.instalar-pasos { font-size: 13.5px; line-height: 1.7; color: var(--color-ink); background: var(--color-mist-100); border-radius: 12px; padding: 12px 14px; }
.instalar [hidden] { display: none; }
.pcal-filtro { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pcal-filtro .bd-control { width: auto; min-width: 200px; max-width: 280px; }
@media (max-width: 900px) { .pcal-filtro { margin-left: 0; width: 100%; } .pcal-filtro .bd-control { flex: 1; max-width: none; min-width: 0; } }
.vg-enlaces { display: flex; gap: 10px; flex-wrap: wrap; margin-top: -8px; }
.vg-enlace svg { color: var(--color-teal-500); }
.vg-enlace:hover { text-decoration: none; }

/* ===== Administración › Correos › Mensajes (N64, 28-oct-2026) ===== */
.msj-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.msj-form { gap: 18px; }
.msj-destino { border: 0; padding: 0; margin: 0; gap: 10px; min-width: 0; }
.msj-legend { padding: 0; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--color-ink); }
.msj-personas { display: none; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; padding: 12px 14px; border: 1px dashed var(--color-mist-300); border-radius: 12px; animation: mcFadeIn 0.18s var(--ease); }
.msj-destino:has(input[value="elegir"]:checked) .msj-personas { display: flex; }
.msj-texto-campo { resize: vertical; min-height: 220px; line-height: 1.5; }
.msj-boton { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; }
.msj-acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding-top: 14px; border-top: 1px solid var(--color-mist-200); }
.msj-rejilla .correo-vista iframe { height: 900px; }
.msj-historial { display: flex; flex-direction: column; }
.msj-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 10px; border-top: 1px solid var(--color-mist-200); border-radius: 10px; color: var(--color-ink); }
.msj-fila:first-child { border-top: none; }
.msj-fila:hover { background: var(--color-mist-100); text-decoration: none; color: var(--color-ink); }
.msj-fila-asunto { flex-basis: 100%; font-weight: 700; font-size: 14.5px; overflow-wrap: anywhere; }
.msj-fila-meta { font-size: 12.5px; color: var(--color-ink-soft); }
.msj-de { font-size: 13px; color: var(--color-ink-soft); }
.msj-cuerpo { font-size: 15px; line-height: 1.6; color: var(--color-ink); overflow-wrap: anywhere; }
.msj-cuerpo p { margin: 0 0 12px; }
.msj-cuerpo p:last-child { margin-bottom: 0; }
.msj-cuerpo a { text-decoration: underline; }
.panel-cuerpo .boton-primario:hover { color: #fff; text-decoration: none; }
@media (max-width: 900px) {
  .msj-rejilla { grid-template-columns: 1fr; }
  .msj-boton { grid-template-columns: 1fr; }
  .msj-acciones { justify-content: stretch; }
  .msj-acciones button { flex: 1 1 100%; }
  .msj-rejilla .correo-vista iframe { height: 640px; }
}
/* Check «Marcar como aprobada» en Revisiones (VeA, 29-oct-2026), como el de las tareas personales. */
.revision-check-form { display: flex; margin: 0; flex-shrink: 0; }
.revision-check { width: 26px; height: 26px; border-color: #c9711a; }
.revision-check:hover { border-color: #c9711a; background: rgba(201, 113, 26, 0.12); color: #c9711a; }
.revision-check.hecha { border: none; background: var(--text-green); color: #fff; cursor: default; }
.revision-check-vacio { width: 26px; flex-shrink: 0; }
/* Duplicar publicación (VeA, 29-oct-2026) */
.pub-duplicada { padding: 12px 14px; border-radius: 12px; background: var(--tint-navy); color: var(--text-navy); font-size: 13.5px; line-height: 1.5; }
/* Ficha de publicación en celular: título y X arriba, botones (Editar, Duplicar, Guardar) en la fila de abajo. */
@media (max-width: 900px) {
  .pub-ficha-cabecera { flex-wrap: wrap; row-gap: 10px; }
  .pub-ficha-cabecera .panel-titulo { flex: 1 1 calc(100% - 52px); min-width: 0; order: 1; }
  .pub-ficha-cabecera .panel-cabecera-acciones { display: contents; }
  .pub-ficha-cabecera .panel-cerrar { order: 2; }
  .pub-ficha-cabecera .boton-cabecera { order: 3; flex: 1 1 0; }
}
/* Grabaciones en "Mis reuniones" (VeA, 29-oct-2026): con el ícono de grabación del calendario. */
.reunion-grab-nombre { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; }
.reunion-grab-nombre .cal-punto.grab { flex: none; }
.reunion-grab-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Vista del equipo › Entregas de la semana (VeA, 31-oct-2026) ===== */
.semcal { margin-top: 16px; }
.semcal-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.semcal-dia { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border-radius: 14px; border: 1.5px solid var(--color-mist-200); background: var(--surface-card); color: var(--color-ink); font: inherit; cursor: pointer; min-width: 0; transition: border-color 0.15s, background 0.15s, transform 0.15s var(--ease); }
.semcal-dia:hover { border-color: var(--color-teal-500); }
.semcal-dia.hoy { background: var(--tint-teal2); }
.semcal-dia.con-atraso { border-color: #d0263a; border-width: 2px; }
.semcal-dia[aria-expanded="true"] { border-color: var(--color-teal-500); box-shadow: 0 0 0 2px var(--color-teal-500) inset; }
.semcal-dia.con-atraso[aria-expanded="true"] { border-color: #d0263a; box-shadow: 0 0 0 2px #d0263a inset; }
.semcal-dia-nombre { font-size: 12.5px; font-weight: 700; text-transform: capitalize; white-space: nowrap; }
.semcal-dia-num { font-family: var(--font-display); font-size: 24px; font-weight: 800; line-height: 1.1; }
.semcal-dia.vacio .semcal-dia-num { color: var(--color-ink-soft); }
.semcal-dia-unidad { font-size: 11px; color: var(--color-ink-soft); }
.semcal-lista { display: flex; flex-direction: column; gap: 10px; animation: mcSlideUp 0.2s ease; }
.semcal-lista[hidden] { display: none; }
.semcal-lista-titulo { font-size: 13.5px; font-weight: 700; color: var(--color-ink); }
@media (max-width: 900px) {
  .semcal-dias { gap: 4px; }
  .semcal-dia { padding: 9px 2px; border-radius: 10px; }
  .semcal-dia-nombre { font-size: 11px; }
  .semcal-dia-num { font-size: 18px; }
  .semcal-dia-unidad { display: none; }
}
@media (prefers-reduced-motion: reduce) { .semcal-lista { animation: none; } }
/* Carga por semana › Total del equipo (VeA, 1-nov-2026) */
.calor-total th, .calor-total td { padding-top: 12px; border-top: 1px solid var(--color-mist-200); }
.calor-total .calor-celda { height: 44px; font-size: 15px; }
.calor-total-pct { margin-top: 3px; text-align: center; font-size: 11px; font-weight: 700; color: var(--color-ink-soft); }