/* =====================================================================
 *  Programación ICCF · Estilos
 * ===================================================================== */
:root {
  --p: #5b3df5;
  --p2: #9333ea;
  --acento: #f59e0b;
  --tinta: #17153b;
  --suave: #6b6a86;
  --fondo: #f3f2fb;
  --card: #ffffff;
  --borde: #e8e6f5;
  --radio: 18px;
  --sombra: 0 1px 2px rgba(23, 21, 59, .04), 0 8px 24px -8px rgba(23, 21, 59, .12);
  --sombra-hover: 0 4px 8px rgba(23, 21, 59, .06), 0 22px 44px -14px rgba(91, 61, 245, .35);
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
  --suavizado: cubic-bezier(.22, 1, .36, 1);
  --bs-primary: var(--p);
  --bs-primary-rgb: 91, 61, 245;
  --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-color: var(--tinta);
  --bs-link-color: var(--p);
  --bs-link-color-rgb: 91, 61, 245;
}

body { font-family: var(--bs-body-font-family); background: var(--fondo); color: var(--tinta); -webkit-font-smoothing: antialiased; }
.min-w-0 { min-width: 0; }
.letra-ancha { letter-spacing: .14em; }
::selection { background: rgba(91, 61, 245, .2); }

/* ---------- Botones ---------- */
.btn { position: relative; overflow: hidden; font-weight: 600; transition: transform .2s var(--rebote), box-shadow .25s, background-color .2s; }
.btn:active:not(:disabled) { transform: scale(.96); }
.btn-primary { --bs-btn-bg: var(--p); --bs-btn-border-color: var(--p); --bs-btn-hover-bg: #4a2ee0; --bs-btn-hover-border-color: #4a2ee0; --bs-btn-active-bg: #3f25cc; --bs-btn-disabled-bg: var(--p); --bs-btn-disabled-border-color: var(--p);
  box-shadow: 0 6px 16px -6px rgba(91, 61, 245, .6); }
.btn-primary:hover { box-shadow: 0 10px 24px -8px rgba(91, 61, 245, .7); transform: translateY(-1px); }
.btn-gradiente { color: #fff; border: 0; background: linear-gradient(120deg, var(--p), var(--p2), #db2777); background-size: 200% 100%; box-shadow: 0 8px 20px -8px rgba(147, 51, 234, .7); animation: degradado 6s ease infinite; }
.btn-gradiente:hover { color: #fff; transform: translateY(-1px); }
.btn-soft { background: rgba(91, 61, 245, .1); color: var(--p); border: 0; }
.btn-soft:hover { background: rgba(91, 61, 245, .18); color: var(--p); }
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--borde); --bs-btn-hover-bg: #f6f5ff; --bs-btn-hover-border-color: #d9d4ff; }
.btn-brillo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); animation: brillo 3.5s ease-in-out infinite 1s; pointer-events: none; }
.ripple { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: currentColor; opacity: .25; transform: scale(0); animation: ripple .6s ease-out forwards; pointer-events: none; }
.btn-icon { border: 0; background: transparent; }
.btn-icono { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 10px; border: 0; background: transparent; color: var(--suave); transition: all .2s var(--rebote); }
.btn-icono:hover { background: rgba(91, 61, 245, .1); color: var(--p); transform: scale(1.1); }
.btn-icono.peligro:hover { background: rgba(220, 38, 38, .1); color: #dc2626; }
.btn-icono.claro { color: rgba(255, 255, 255, .85); }
.btn-icono.claro:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.btn-x { border: 0; background: transparent; color: #a3a1b9; width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center; font-size: .75rem; transition: .2s; }
.btn-x:hover { background: #fee2e2; color: #dc2626; transform: rotate(90deg); }
.btn-chip { --mc: var(--p); display: inline-flex; align-items: center; gap: .4rem; border: 1.5px solid var(--borde); background: #fff; border-radius: 999px; padding: .45rem .9rem; font-weight: 600; font-size: .875rem; color: var(--tinta); transition: all .25s var(--rebote); }
.btn-chip i { color: var(--mc); opacity: .35; transition: .25s; }
.btn-chip:hover { border-color: var(--mc); transform: translateY(-1px); }
.btn-check:checked + .btn-chip { background: color-mix(in srgb, var(--mc) 12%, #fff); border-color: var(--mc); color: var(--tinta); box-shadow: 0 6px 14px -8px var(--mc); }
.btn-check:checked + .btn-chip i { opacity: 1; animation: pop .4s var(--rebote); }
.pop { animation: pop .45s var(--rebote); }

/* ---------- Fondo animado ---------- */
.fondo-animado { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fondo-animado span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .35; animation: flotar 22s ease-in-out infinite; }
.fondo-animado span:nth-child(1) { width: 480px; height: 480px; background: #c4b5fd; top: -160px; right: -120px; }
.fondo-animado span:nth-child(2) { width: 380px; height: 380px; background: #a5f3fc; bottom: -140px; left: 20%; animation-delay: -7s; }
.fondo-animado span:nth-child(3) { width: 300px; height: 300px; background: #fbcfe8; top: 40%; right: 25%; animation-delay: -14s; opacity: .25; }

/* ---------- Layout ---------- */
.sidebar { --bs-offcanvas-width: 264px; width: 264px; background: linear-gradient(180deg, #1e1b4b 0%, #2e1065 100%); color: #e9e7ff; display: flex; flex-direction: column; }
@media (min-width: 992px) { .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1030; visibility: visible !important; transform: none !important; } .main { margin-left: 264px; } }
.sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: 1.4rem 1.25rem; }
.logo-mark { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; color: #fff; background: linear-gradient(135deg, #8b5cf6, #ec4899); box-shadow: 0 10px 24px -8px rgba(236, 72, 153, .7); flex-shrink: 0; }
.logo-xl { width: 72px; height: 72px; font-size: 2.2rem; border-radius: 22px; }
.brand-title { font-weight: 800; line-height: 1.1; }
.brand-sub { font-size: .75rem; opacity: .6; }
.sidebar-nav { padding: .5rem .75rem; display: grid; gap: .25rem; flex-grow: 1; align-content: start; }
.nav-item-link { position: relative; display: flex; align-items: center; gap: .85rem; padding: .75rem 1rem; border-radius: 14px; color: rgba(233, 231, 255, .72); text-decoration: none; font-weight: 600; transition: all .25s var(--suavizado); }
.nav-item-link i { font-size: 1.1rem; transition: transform .3s var(--rebote); }
.nav-item-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.nav-item-link:hover i { transform: scale(1.18) rotate(-6deg); }
.nav-item-link.active { color: #fff; background: linear-gradient(90deg, rgba(139, 92, 246, .45), rgba(139, 92, 246, .08)); box-shadow: inset 3px 0 0 #c4b5fd; }
.sidebar-foot { display: flex; align-items: center; gap: .75rem; margin: .75rem; padding: .85rem; border-radius: 16px; background: rgba(255, 255, 255, .07); font-size: .9rem; }
.topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .75rem; padding: .85rem clamp(1rem, 3vw, 2rem); background: rgba(243, 242, 251, .78); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid rgba(232, 230, 245, .8); }
.topbar-title { font-size: 1.15rem; font-weight: 800; margin: 0; }
.btn-user { display: flex; align-items: center; gap: .5rem; border-radius: 999px; padding: .3rem .8rem .3rem .3rem; background: #fff; border: 1px solid var(--borde); }
.contenido { padding: clamp(1rem, 3vw, 2rem); max-width: 1500px; }
.volver { display: inline-flex; align-items: center; gap: .35rem; color: var(--suave); text-decoration: none; font-weight: 600; font-size: .9rem; margin-bottom: .75rem; transition: .2s; }
.volver:hover { color: var(--p); gap: .6rem; }

/* ---------- Avatares ---------- */
.avatar-sm, .avatar-xs { display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; background: linear-gradient(135deg, var(--p), var(--p2)); flex-shrink: 0; }
.avatar-sm { width: 36px; height: 36px; font-size: .8rem; }
.avatar-xs { width: 28px; height: 28px; font-size: .68rem; }

/* ---------- Tarjetas ---------- */
.card-glass { background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .7); border-radius: var(--radio); box-shadow: var(--sombra); }
.hero-saludo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 1.5rem; color: #fff; border-radius: 24px;
  background: radial-gradient(circle at 85% 20%, rgba(236, 72, 153, .55), transparent 45%), linear-gradient(120deg, #4c1d95, var(--p) 55%, #7c3aed); background-size: 160% 160%; animation: degradado 12s ease infinite; box-shadow: 0 24px 48px -24px rgba(91, 61, 245, .8); }
.stat-card { --c: var(--p); display: flex; align-items: center; gap: 1rem; padding: 1.15rem; background: var(--card); border-radius: var(--radio); box-shadow: var(--sombra); transition: transform .35s var(--rebote), box-shadow .3s; height: 100%; }
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }
.stat-icon { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font-size: 1.35rem; color: var(--c); background: color-mix(in srgb, var(--c) 13%, #fff); flex-shrink: 0; }
.stat-num { font-size: 1.75rem; font-weight: 800; line-height: 1; }
.stat-lbl { font-size: .82rem; color: var(--suave); font-weight: 500; }
.vacio { text-align: center; padding: 3rem 1rem; color: var(--suave); background: rgba(255, 255, 255, .6); border: 2px dashed var(--borde); border-radius: var(--radio); }
.vacio > i { font-size: 2.6rem; display: block; margin-bottom: .5rem; color: #c4b5fd; animation: flotarIcono 3s ease-in-out infinite; }

/* ---------- Eventos ---------- */
.fecha-tile { width: 60px; flex-shrink: 0; text-align: center; border-radius: 14px; padding: .4rem 0; background: linear-gradient(160deg, var(--p), var(--p2)); color: #fff; line-height: 1.05; }
.fecha-tile span { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; font-weight: 700; }
.fecha-tile strong { display: block; font-size: 1.5rem; font-weight: 800; }
.fecha-tile-light { background: rgba(255, 255, 255, .2); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .35); }
.evento-row { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; background: var(--card); border-radius: var(--radio); box-shadow: var(--sombra); text-decoration: none; color: inherit; transition: all .3s var(--rebote); }
.evento-row:hover { transform: translateX(6px); box-shadow: var(--sombra-hover); color: inherit; }
.progreso-mini { width: 150px; }
.progress { height: 8px; border-radius: 99px; background: #edeaf9; }
.progress-fino { height: 5px; }
.barra-animada { width: var(--w); background: linear-gradient(90deg, var(--p), var(--p2)); border-radius: 99px; animation: llenar 1.2s var(--suavizado) both .3s; }
.evento-card { --c: var(--p); display: block; height: 100%; text-decoration: none; color: inherit; background: var(--card); border-radius: 20px; overflow: hidden; box-shadow: var(--sombra); transition: transform .4s var(--rebote), box-shadow .3s; }
.evento-card:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: var(--sombra-hover); color: inherit; }
.evento-card-top { display: flex; gap: .9rem; align-items: center; padding: 1.1rem; color: #fff; background: linear-gradient(130deg, var(--c), color-mix(in srgb, var(--c) 55%, #ec4899)); position: relative; overflow: hidden; }
.evento-card-top::after { content: ''; position: absolute; width: 140px; height: 140px; right: -40px; top: -60px; border-radius: 50%; background: rgba(255, 255, 255, .14); transition: transform .6s var(--rebote); }
.evento-card:hover .evento-card-top::after { transform: scale(1.5); }
.mes-titulo { font-size: .95rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); margin: .5rem 0 1rem; display: flex; align-items: center; gap: .5rem; }
.mes-titulo span { background: #fff; border-radius: 99px; padding: 0 .55rem; font-size: .75rem; box-shadow: var(--sombra); }
.chip-min { --mc: var(--p); display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 99px; background: color-mix(in srgb, var(--mc) 13%, #fff); color: color-mix(in srgb, var(--mc) 80%, #000); }
.chip-min i { font-size: .45rem; color: var(--mc); }
.chip-unificada { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 99px; background: linear-gradient(90deg, #fde68a, #fbcfe8); color: #7c2d12; }
.chip-borrador { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 99px; background: #e5e7eb; color: #374151; }
.segmentado { display: inline-flex; background: #fff; padding: 4px; border-radius: 999px; box-shadow: var(--sombra); }
.segmentado a, .segmentado button { border: 0; background: transparent; padding: .45rem 1rem; border-radius: 999px; font-weight: 600; font-size: .875rem; color: var(--suave); text-decoration: none; transition: all .3s var(--rebote); white-space: nowrap; }
.segmentado .active { background: var(--p); color: #fff; box-shadow: 0 6px 14px -6px rgba(91, 61, 245, .7); }
.segmentado-sm a, .segmentado-sm button { padding: .35rem .8rem; font-size: .8rem; }
.buscador { position: relative; }
.buscador i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--suave); }
.buscador .form-control { padding-left: 2.6rem; border-radius: 999px; border-color: var(--borde); }

/* ---------- Detalle de evento ---------- */
.evento-hero { --c: var(--p); display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; color: #fff; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 24px; margin-bottom: 1rem; position: relative; overflow: hidden;
  background: radial-gradient(circle at 90% 10%, rgba(255, 255, 255, .22), transparent 40%), linear-gradient(125deg, color-mix(in srgb, var(--c) 70%, #1e1b4b), var(--c) 50%, color-mix(in srgb, var(--c) 60%, #ec4899)); box-shadow: 0 24px 48px -24px var(--c); }
.evento-hero .chip-min { background: rgba(255, 255, 255, .2); color: #fff; }
.evento-hero .chip-min i { color: #fff; }
.anillo { --pct: 0; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#fff calc(var(--pct) * 1%), rgba(255, 255, 255, .22) 0); animation: girarEntrada 1.2s var(--suavizado); }
.anillo > div { width: 82px; height: 82px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: color-mix(in srgb, var(--c) 75%, #1e1b4b); line-height: 1; }
.anillo strong { font-size: 1.6rem; }
.anillo span { font-size: .7rem; opacity: .8; }
.acciones-evento { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.link-publico { display: flex; align-items: center; gap: .4rem; background: #fff; border-radius: 999px; padding: .3rem .35rem .3rem 1rem; box-shadow: var(--sombra); flex: 1 1 380px; max-width: 640px; }
.link-publico i.bi-globe2 { color: var(--p); }
.link-publico input { border: 0; background: transparent; box-shadow: none !important; font-size: .82rem; color: var(--suave); min-width: 0; }
.nav-tabs-pro { display: flex; gap: .4rem; border: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.nav-tabs-pro .nav-link { border: 0; border-radius: 999px; padding: .6rem 1.1rem; font-weight: 700; color: var(--suave); background: rgba(255, 255, 255, .7); white-space: nowrap; display: flex; align-items: center; gap: .45rem; transition: all .3s var(--rebote); }
.nav-tabs-pro .nav-link:hover { color: var(--p); transform: translateY(-1px); }
.nav-tabs-pro .nav-link.active { background: var(--tinta); color: #fff; box-shadow: 0 10px 20px -10px rgba(23, 21, 59, .7); }
.contador { font-size: .7rem; background: rgba(91, 61, 245, .14); color: var(--p); border-radius: 99px; padding: .05rem .5rem; }
.nav-link.active .contador { background: rgba(255, 255, 255, .2); color: #fff; }
.tab-pane.fade { transition: opacity .3s, transform .35s var(--suavizado); transform: translateY(8px); }
.tab-pane.fade.show { transform: none; }

/* ---------- Timeline de momentos ---------- */
.timeline { position: relative; display: grid; gap: .9rem; }
.timeline::before { content: ''; position: absolute; left: 104px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--p), var(--p2), #ec4899); opacity: .25; border-radius: 2px; }
.momento { display: grid; grid-template-columns: 92px 1fr; gap: 24px; position: relative; }
.momento::before { content: ''; position: absolute; left: 98px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--p); z-index: 1; transition: .3s; }
.momento-previo::before { border-color: #a3a1b9; }
.momento-previo .momento-card { background: rgba(255, 255, 255, .65); border-style: dashed; }
.momento-hora { text-align: right; padding-top: 14px; line-height: 1.2; position: relative; }
.momento-hora strong { display: block; font-size: 1rem; font-weight: 800; }
.momento-hora span { display: block; font-size: .78rem; color: var(--suave); }
.momento-hora em { display: inline-block; margin-top: .3rem; font-style: normal; font-size: .7rem; font-weight: 700; color: var(--p); background: rgba(91, 61, 245, .1); border-radius: 99px; padding: .05rem .5rem; }
.asa { position: absolute; left: -6px; top: 14px; cursor: grab; color: #c0bdd8; font-size: 1.2rem; padding: 2px; border-radius: 6px; }
.asa:hover { color: var(--p); background: rgba(91, 61, 245, .1); }
.momento-card { background: var(--card); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.1rem 1.25rem; box-shadow: var(--sombra); transition: box-shadow .3s, transform .3s var(--suavizado), border-color .3s; }
.momento-card:hover { box-shadow: var(--sombra-hover); border-color: #d9d4ff; }
.momento-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.momento-head h4 { font-size: 1.05rem; font-weight: 800; margin: 0; }
.chip-resp { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; background: #fef3c7; color: #92400e; border-radius: 99px; padding: .15rem .6rem; }
.en-vivo { display: none; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 800; color: #fff; background: #dc2626; border-radius: 99px; padding: .15rem .6rem; animation: latido 1.4s ease-in-out infinite; }
.momento.en-curso .en-vivo { display: inline-flex; }
.momento.en-curso .momento-card { border-color: #fca5a5; box-shadow: 0 0 0 4px rgba(220, 38, 38, .12), var(--sombra-hover); }
.momento.en-curso::before { border-color: #dc2626; box-shadow: 0 0 0 6px rgba(220, 38, 38, .2); animation: latido 1.4s infinite; }
.momento.pasado { opacity: .55; }
.etiqueta { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; color: var(--suave); margin-bottom: .35rem; }
.contenido-txt { font-size: .9rem; line-height: 1.55; }
.momento-fantasma { opacity: .35; }
.momento-elegido .momento-card { transform: rotate(-1deg) scale(1.02); box-shadow: 0 30px 60px -20px rgba(91, 61, 245, .5); }

/* ---------- Comentarios ---------- */
.comentarios { margin-top: .85rem; }
.comentarios-lista { display: grid; gap: .5rem; margin-bottom: .5rem; }
.comentario { display: flex; gap: .55rem; padding: .6rem .7rem; border-radius: 14px; background: linear-gradient(135deg, #fff7ed, #fef3c7); border-left: 3px solid var(--acento); }
.comentario .avatar-xs { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.comentario-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; font-size: .78rem; }
.comentario-meta .rol { color: #9a3412; background: rgba(234, 88, 12, .1); padding: 0 .4rem; border-radius: 99px; font-size: .68rem; font-weight: 600; }
.comentario-meta .cuando { color: var(--suave); }
.comentario-meta .btn-x { margin-left: auto; }
.comentario-texto { font-size: .86rem; margin-top: .1rem; overflow-wrap: anywhere; }
.form-comentario { display: flex; gap: .4rem; align-items: flex-end; background: #f7f6fd; border: 1px solid var(--borde); border-radius: 16px; padding: .3rem .3rem .3rem .75rem; transition: .25s; }
.form-comentario:focus-within { background: #fff; border-color: var(--p); box-shadow: 0 0 0 4px rgba(91, 61, 245, .12); }
.form-comentario textarea { border: 0; background: transparent; resize: none; box-shadow: none !important; font-size: .86rem; padding: .35rem 0; min-height: 34px; }
.form-comentario .btn { width: 34px; height: 34px; padding: 0; flex-shrink: 0; }

/* ---------- Áreas y servidores ---------- */
.area-card { --c: var(--p); height: 100%; background: var(--card); border-radius: var(--radio); padding: 1.1rem; box-shadow: var(--sombra); border-top: 4px solid var(--c); transition: transform .35s var(--rebote), box-shadow .3s; }
.area-card:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -18px color-mix(in srgb, var(--c) 70%, transparent); }
.area-card.solo-lectura { opacity: .8; }
.area-head { display: flex; align-items: center; gap: .75rem; }
.area-icon { --c: var(--ac, var(--p)); width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.15rem; flex-shrink: 0; color: var(--c); background: color-mix(in srgb, var(--c) 13%, #fff); }
.area-card .area-icon, .area-fila .area-icon { color: var(--c, var(--ac)); }
.cantidad-ctrl { display: flex; align-items: center; background: #f4f3fb; border-radius: 99px; padding: 2px; }
.cantidad-ctrl button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: #fff; font-weight: 800; color: var(--c); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); transition: .2s var(--rebote); }
.cantidad-ctrl button:hover { transform: scale(1.15); }
.cantidad-ctrl input { width: 38px; border: 0; background: transparent; text-align: center; font-weight: 800; -moz-appearance: textfield; appearance: textfield; }
.cantidad-ctrl input::-webkit-inner-spin-button { -webkit-appearance: none; }
.lista-asignados { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.lista-asignados li { display: flex; align-items: center; gap: .55rem; padding: .35rem .45rem; border-radius: 12px; font-size: .88rem; font-weight: 500; transition: background .2s; animation: aparecer .5s var(--suavizado) both; }
.lista-asignados li:hover { background: #f6f5fd; }
.cupo-vacio { color: #a3a1b9; border: 1.5px dashed #e3e0f3; font-style: italic; }
.cupo-vacio .avatar-xs { background: #f1effa !important; color: #b8b5d1; }
.tipo-badge { font-size: .66rem; font-weight: 700; padding: .15rem .5rem; border-radius: 99px; white-space: nowrap; }
.tipo-badge.voluntario { background: #fce7f3; color: #be185d; }
.tipo-badge.empleado { background: #ffedd5; color: #c2410c; }
.uso-mes { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .8rem; }
.uso-mes .punto { width: 10px; height: 10px; border-radius: 50%; background: #e7e5f4; transition: .3s; }
.uso-mes.medio .punto.on { background: #f59e0b; }
.uso-mes.lleno .punto.on { background: #dc2626; }
.uso-mes.infinito { color: #ea580c; }
.candidato { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: 14px; border: 1.5px solid var(--borde); cursor: pointer; transition: all .25s var(--rebote); animation: aparecer .45s var(--suavizado) both; animation-delay: var(--d, 0ms); }
.candidato:hover { border-color: #c4b5fd; transform: translateX(3px); }
.candidato:has(input:checked) { border-color: var(--p); background: rgba(91, 61, 245, .05); box-shadow: 0 6px 16px -10px rgba(91, 61, 245, .7); }
.candidato.bloqueado { opacity: .55; cursor: not-allowed; background: #fafafa; }
.candidato .form-check-input { width: 1.25rem; height: 1.25rem; margin: 0; flex-shrink: 0; }
.esqueleto { height: 58px; border-radius: 14px; background: linear-gradient(90deg, #f1effa 25%, #e8e5f7 50%, #f1effa 75%); background-size: 200% 100%; animation: esqueleto 1.2s infinite; }
.cupo-card { --c: var(--p); display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; background: #fff; border-radius: 16px; box-shadow: var(--sombra); text-decoration: none; color: inherit; border-left: 4px solid var(--c); transition: .3s var(--rebote); }
.cupo-card:hover { transform: translateY(-3px); color: inherit; box-shadow: var(--sombra-hover); }
.cupo-icon { color: var(--c); font-size: 1.3rem; }
.equipo-item { background: #fff; border-radius: 14px; padding: .75rem .9rem; box-shadow: var(--sombra); height: 100%; transition: .3s var(--rebote); }
.equipo-item:hover { transform: translateY(-2px); }
.equipo-item span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); font-weight: 700; }
.equipo-item strong { font-size: .95rem; }
.fila-equipo .cargo { max-width: 45%; background: #f7f6fd; }

/* ---------- Áreas admin / usuarios ---------- */
.ministerio-card { --c: var(--p); background: #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--sombra); }
.ministerio-head { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.25rem; color: #fff; background: linear-gradient(120deg, var(--c), color-mix(in srgb, var(--c) 55%, #ec4899)); }
.area-fila { display: flex; align-items: center; gap: .75rem; padding: .6rem .7rem; border-radius: 14px; transition: background .2s; }
.area-fila:hover { background: #f7f6fd; }
.selector-iconos { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: .4rem; }
.selector-iconos label { height: 42px; display: grid; place-items: center; border-radius: 12px; border: 1.5px solid var(--borde); cursor: pointer; font-size: 1.1rem; transition: .2s var(--rebote); }
.selector-iconos label:hover { transform: scale(1.1); }
.selector-iconos .btn-check:checked + label { background: var(--p); border-color: var(--p); color: #fff; transform: scale(1.08); }
.rol-card { --c: var(--p); background: #fff; border-radius: 16px; padding: 1rem 1.1rem; box-shadow: var(--sombra); border-left: 4px solid var(--c); height: 100%; }
.rol-card i { color: var(--c); }
.grid-areas { display: flex; flex-wrap: wrap; gap: .4rem; }
.grid-areas-titulo { width: 100%; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--suave); margin-top: .4rem; }
.lista-plantilla { list-style: none; margin: 0; padding: .5rem 1rem 1rem; display: grid; gap: .15rem; counter-reset: n; }
.lista-plantilla li { display: flex; align-items: center; gap: .75rem; padding: .4rem .5rem; border-radius: 10px; font-size: .88rem; }
.lista-plantilla li:hover { background: #f7f6fd; }
.lista-plantilla .off { min-width: 74px; font-size: .72rem; font-weight: 700; color: var(--p); background: rgba(91, 61, 245, .08); border-radius: 99px; padding: .1rem .5rem; text-align: center; }

/* ---------- Tablas ---------- */
.tabla-card { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.tabla-pro { --bs-table-hover-bg: #f8f7fe; }
.tabla-pro thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); font-weight: 800; background: #faf9ff; border-bottom: 1px solid var(--borde); padding: .85rem 1rem; white-space: nowrap; }
.tabla-pro td { padding: .75rem 1rem; border-color: #f1effa; }
.tabla-pro tbody tr { transition: background .2s; animation: aparecer .45s var(--suavizado) both; }
tr.inactivo { opacity: .55; }

/* ---------- Formularios ---------- */
.form-control, .form-select { border-radius: 12px; border-color: var(--borde); transition: border-color .2s, box-shadow .2s; }
.form-control:focus, .form-select:focus { border-color: var(--p); box-shadow: 0 0 0 4px rgba(91, 61, 245, .14); }
.form-floating > label { color: var(--suave); }
.form-check-input:checked { background-color: var(--p); border-color: var(--p); }
.form-switch .form-check-input { width: 2.6em; height: 1.35em; cursor: pointer; }

/* ---------- MODALES ANIMADOS ---------- */
.modal-backdrop.show { opacity: .5; }
.modal-backdrop { background: #17153b; backdrop-filter: blur(4px); }
.modal.fade .modal-dialog { transform: translateY(40px) scale(.9) rotateX(8deg); opacity: 0; transition: transform .5s var(--rebote), opacity .3s ease; perspective: 1000px; }
.modal.show .modal-dialog { transform: none; opacity: 1; }
.modal.fade:not(.show) .modal-dialog { transition-duration: .25s; }
.modal-content { border: 0; border-radius: 24px; box-shadow: 0 40px 80px -20px rgba(23, 21, 59, .45); overflow: hidden; }
.modal-header { border-bottom: 1px solid #f1effa; padding: 1.1rem 1.4rem; }
.modal-title { font-weight: 800; }
.modal-header-color { color: #fff; border: 0; background: linear-gradient(120deg, #4c1d95, var(--p), #db2777); background-size: 200% 100%; animation: degradado 8s ease infinite; }
.modal-body { padding: 1.4rem; }
.modal-footer { border-top: 1px solid #f1effa; padding: .9rem 1.4rem; }
.modal.show .modal-body .row > *, .modal.show .modal-body > .form-floating, .modal.show .modal-body > p, .modal.show .modal-body > .buscador { animation: subir .5s var(--suavizado) both; }
.modal.show .modal-body .row > *:nth-child(2) { animation-delay: .04s; } .modal.show .modal-body .row > *:nth-child(3) { animation-delay: .08s; }
.modal.show .modal-body .row > *:nth-child(4) { animation-delay: .12s; } .modal.show .modal-body .row > *:nth-child(5) { animation-delay: .16s; }
.modal.show .modal-body .row > *:nth-child(6) { animation-delay: .2s; } .modal.show .modal-body .row > *:nth-child(n+7) { animation-delay: .24s; }
.modal-confirm .confirm-icon { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 2.2rem; color: #dc2626; background: #fee2e2; box-shadow: 0 0 0 10px #fef2f2; }
.modal-confirm.show .confirm-icon { animation: rebotar .7s var(--rebote) .1s both, latido 1.6s ease-in-out 1s infinite; }
.modal-confirm.confirm-suave .confirm-icon { color: var(--p); background: #ede9fe; box-shadow: 0 0 0 10px #f5f3ff; }
.dropdown-menu { border-radius: 16px; padding: .4rem; }
.dropdown-item { border-radius: 10px; padding: .5rem .8rem; font-weight: 500; transition: .2s; }
.dropdown-item:hover { background: #f4f2ff; transform: translateX(3px); }
.dropdown-animado.show { animation: desplegar .3s var(--rebote); transform-origin: top right; }

/* ---------- Toasts ---------- */
.toast-pro { border: 0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 20px 40px -12px rgba(23, 21, 59, .35); font-size: .9rem; font-weight: 500; }
.toast-pro.showing, .toast-pro.show { animation: entrarToast .5s var(--rebote); }
.toast-success i:first-child { color: #16a34a; } .toast-danger i:first-child { color: #dc2626; }
.toast-warning i:first-child { color: #f59e0b; } .toast-info i:first-child { color: var(--p); }
.toast-barra { height: 3px; background: currentColor; opacity: .25; animation: vaciar 3.5s linear forwards; }
.toast-success .toast-barra { color: #16a34a; } .toast-danger .toast-barra { color: #dc2626; animation-duration: 7s; }
.toast-warning .toast-barra { color: #f59e0b; } .toast-info .toast-barra { color: var(--p); }

/* ---------- Login ---------- */
.login-body { min-height: 100vh; background: #120f33; overflow-x: hidden; }
.login-orbs span { position: fixed; border-radius: 50%; filter: blur(80px); opacity: .55; animation: flotar 18s ease-in-out infinite; }
.login-orbs span:nth-child(1) { width: 520px; height: 520px; background: #7c3aed; top: -180px; left: -120px; }
.login-orbs span:nth-child(2) { width: 420px; height: 420px; background: #db2777; bottom: -160px; left: 30%; animation-delay: -6s; }
.login-orbs span:nth-child(3) { width: 360px; height: 360px; background: #0891b2; top: 20%; right: -100px; animation-delay: -12s; }
.login-orbs span:nth-child(4) { width: 200px; height: 200px; background: #f59e0b; top: 55%; left: 15%; animation-delay: -3s; opacity: .3; }
.login-wrap { position: relative; z-index: 1; min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 992px) { .login-wrap { grid-template-columns: 1.1fr 1fr; } }
.login-hero { color: #fff; align-items: center; padding: 4rem clamp(2rem, 6vw, 6rem); }
.hero-features div { display: flex; gap: .75rem; align-items: center; font-weight: 500; opacity: .9; }
.hero-features i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); font-size: 1.1rem; }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.login-card { width: 100%; max-width: 430px; background: rgba(255, 255, 255, .96); border-radius: 28px; padding: clamp(1.75rem, 4vw, 2.75rem); box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .6); }
.btn-ver-clave { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--suave); z-index: 5; }

/* ---------- Visor público ---------- */
.publico { background: var(--fondo); }
.pub-hero { --c: var(--p); --c2: #db2777; color: #fff; padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem); position: relative; overflow: hidden;
  background: radial-gradient(circle at 15% 120%, color-mix(in srgb, var(--c2) 70%, transparent), transparent 50%), radial-gradient(circle at 90% -10%, rgba(255, 255, 255, .25), transparent 40%), linear-gradient(120deg, color-mix(in srgb, var(--c) 60%, #120f33), var(--c)); background-size: 140% 140%; animation: degradado 14s ease infinite; }
.pub-hero .chip-min { background: rgba(255, 255, 255, .2); color: #fff; } .pub-hero .chip-min i { color: #fff; }
.pub-hero h1, .pub-hero .pub-dato, .pub-hero p { animation: subir .7s var(--suavizado) both; }
.pub-hero h1 { animation-delay: .1s; } .pub-hero .pub-dato { animation-delay: .2s; }
.pub-dato { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 99px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); font-weight: 600; font-size: .9rem; }
.pub-nav { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .85); backdrop-filter: blur(14px); border-bottom: 1px solid var(--borde); padding: .5rem 0; }
.pub-nav a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 99px; color: var(--suave); font-weight: 700; text-decoration: none; font-size: .88rem; transition: .2s; }
.pub-nav a:hover { background: #f1effa; color: var(--p); }
.pub-estado { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; color: #16a34a; }
.pub-estado .pulso { width: 9px; height: 9px; border-radius: 50%; background: currentColor; animation: latido 1.6s infinite; }
.pub-estado.error { color: #dc2626; }
.pub-seccion { font-size: 1.2rem; font-weight: 800; margin-bottom: 1.2rem; display: flex; align-items: center; gap: .5rem; scroll-margin-top: 70px; }
.pub-seccion i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--p), var(--p2)); color: #fff; font-size: 1rem; }
section[id] { scroll-margin-top: 70px; }
.timeline-publico .momento { animation: aparecer .6s var(--suavizado) both; }
.comentarios-publicos .comentario { animation: none; }
.destello { animation: destello 1.2s ease; }
@media (max-width: 575.98px) {
  .pub-nav a span { display: none; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 767.98px) {
  .timeline::before { left: 7px; }
  .momento { grid-template-columns: 1fr; gap: .4rem; padding-left: 26px; }
  .momento::before { left: 1px; top: 6px; }
  .momento-hora { text-align: left; padding-top: 0; display: flex; align-items: baseline; gap: .5rem; }
  .momento-hora strong { display: inline; }
  .momento-hora span { display: inline; }
  .momento-hora span::before { content: '→ '; }
  .momento-hora em { margin-top: 0; }
  .asa { position: static; order: 5; margin-left: auto; }
  .momento-card { padding: .95rem; }
  .evento-hero-side { margin-left: auto; }
  .anillo { width: 84px; height: 84px; } .anillo > div { width: 66px; height: 66px; } .anillo strong { font-size: 1.25rem; }
  .link-publico { flex-basis: 100%; }
  .stat-num { font-size: 1.4rem; }
  .stat-card { padding: .9rem; gap: .7rem; } .stat-icon { width: 42px; height: 42px; font-size: 1.1rem; }
  .modal-dialog { margin: .75rem; }
}

/* ---------- Animaciones ---------- */
.aparecer { animation: aparecer .6s var(--suavizado) both; animation-delay: var(--d, 0ms); }
.entrando { animation: entrar .5s var(--rebote) both; }
.saliendo { animation: salir .35s ease forwards; }
.sacudir { animation: sacudir .45s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes entrar { from { opacity: 0; transform: scale(.85) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes salir { to { opacity: 0; transform: translateX(30px) scale(.95); height: 0; margin: 0; padding: 0; } }
@keyframes sacudir { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes rebotar { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.15) rotate(8deg); } 100% { transform: scale(1); } }
@keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes degradado { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes brillo { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes ripple { to { transform: scale(40); opacity: 0; } }
@keyframes flotar { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.08); } 66% { transform: translate(-30px, 25px) scale(.94); } }
@keyframes flotarIcono { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes llenar { from { width: 0; } }
@keyframes girarEntrada { from { transform: rotate(-90deg) scale(.6); opacity: 0; } }
@keyframes esqueleto { to { background-position: -200% 0; } }
@keyframes desplegar { from { opacity: 0; transform: scale(.9) translateY(-6px); } }
@keyframes entrarToast { from { opacity: 0; transform: translateX(40px) scale(.9); } }
@keyframes vaciar { from { width: 100%; } to { width: 0; } }
@keyframes destello { 0% { box-shadow: 0 0 0 0 rgba(91, 61, 245, .5); } 100% { box-shadow: 0 0 0 30px rgba(91, 61, 245, 0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ---------- Impresión ---------- */
@media print {
  .sidebar, .topbar, .acciones-evento, .nav-tabs-pro, .volver, .form-comentario, .btn-icono, .btn-x, .asa, .pub-nav, .fondo-animado, .toast-container, .cantidad-ctrl { display: none !important; }
  .main { margin: 0 !important; }
  .tab-pane { display: block !important; opacity: 1 !important; transform: none !important; }
  .momento-card, .area-card, .equipo-item { box-shadow: none !important; border: 1px solid #ccc; break-inside: avoid; }
  .evento-hero, .pub-hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  * { animation: none !important; }
}