/* ═══════════════════════════════════════════════
   GOSEN · Voluntarios — Sistema de diseño
   Brandbook consolidado oct-2026: "la interfaz tiene que respirar".
   Sistema amarillo + blanco · Plus Jakarta Sans (títulos) + Inter (texto)
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@700;800&display=swap');

/* ─── Colores de marca ─── */
:root {
    --g-amarillo:  #FFE9B6;   /* fondos de marca, menú lateral, tarjeta activa */
    --g-crema:     #FFF8EB;   /* fondo general */
    --g-blanco:    #FFFFFF;   /* tarjetas */
    --g-carbon:    #29232B;   /* texto */
    --g-naranja:   #F5A800;   /* botón principal */
    --g-rojo:      #E83854;   /* acento, alertas */
    --g-purpura:   #9754D9;   /* acento */
    --g-azul:      #3482E9;   /* acento puntual */
    --g-gris:      #6E6672;   /* texto secundario */
    --g-borde:     #F1E4C6;   /* líneas suaves */
    --g-amarillo-suave: #FFF3D6;
    --g-titulos:   'Plus Jakarta Sans', 'Inter', sans-serif;

    /* Nombres antiguos (Parches) apuntando a la paleta GOSEN */
    --ngc-primary:    var(--g-carbon);
    --ngc-dark:       var(--g-carbon);
    --ngc-accent:     var(--g-naranja);
    --ngc-light:      var(--g-borde);
    --ngc-mid:        #b9adb9;
    --ngc-slate:      var(--g-gris);
    --ngc-white:      #ffffff;
    --ngc-bg:         var(--g-crema);
    --ngc-text:       var(--g-carbon);
    --ngc-text-light: var(--g-gris);
    --ngc-radius:     16px;
    --ngc-radius-lg:  22px;
    --ngc-shadow:     0 1px 3px rgba(41, 35, 43, 0.06), 0 6px 20px rgba(41, 35, 43, 0.05);
    --ngc-shadow-md:  0 2px 6px rgba(41, 35, 43, 0.08), 0 12px 32px rgba(41, 35, 43, 0.08);
}

/* ─── Base ─── */
body, input, select, textarea, button, .btn, .form-control, .form-select, table {
    font-family: 'Inter', system-ui, sans-serif;
}

body {
    background-color: var(--g-crema);
    color: var(--g-carbon);
    font-size: 15px;
    line-height: 1.6;
}

a { color: var(--g-carbon); text-decoration-color: rgba(41,35,43,.3); }
a:hover { color: var(--g-purpura); }
::selection { background: var(--g-amarillo); }

/* ─── Navbar ─── */
.navbar {
    background: white !important;
    box-shadow: 0 2px 12px rgba(41, 35, 43, 0.08);
    padding: 0.75rem 0;
    border-bottom: 3px solid var(--ngc-primary);
}

.navbar-brand {
    font-weight: 800;
    font-size: 1.2rem;
    letter-spacing: -0.5px;
    color: var(--ngc-white) !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar-brand img {
    height: 38px;
    width: auto;
}

.navbar-brand .brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.navbar-brand .brand-name {
    font-size: 1rem;
    font-weight: 800;
    color: white;
}

.navbar-brand .brand-sub {
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--ngc-mid);
    letter-spacing: 0.5px;
}

.nav-link {
    color: #29232B !important;
    font-weight: 500;
    font-size: 0.85rem;
}

.badge-rol {
    background: white;
    color: var(--ngc-dark);
    font-weight: 700;
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1.5px solid var(--ngc-dark);
}

.btn-logout {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.3);
    color: white !important;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 8px;
    transition: all 0.2s;
}

.btn-logout:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.6);
}

/* ─── Cards ─── */
.card {
    border: none !important;
    border-radius: var(--ngc-radius) !important;
    box-shadow: var(--ngc-shadow) !important;
    transition: box-shadow 0.2s, transform 0.2s;
    background: var(--ngc-white);
}

.card:hover {
    box-shadow: var(--ngc-shadow-md) !important;
    transform: translateY(-2px);
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--ngc-light) !important;
    font-weight: 600;
    color: var(--ngc-text);
}

/* ─── Botones ─── */
.btn {
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 10px !important;
    padding: 8px 20px;
    transition: all 0.2s;
    letter-spacing: 0.2px;
}

.btn-primary, .btn-accent {
    background: var(--g-naranja) !important;
    border-color: var(--g-naranja) !important;
    color: var(--g-carbon) !important;
    font-weight: 700;
}

.btn-primary:hover, .btn-accent:hover {
    background: #E39C00 !important;
    border-color: #E39C00 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(245, 168, 0, 0.28);
}

.btn-outline-primary {
    color: var(--g-carbon) !important;
    border-color: var(--g-carbon) !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background: var(--g-carbon) !important;
    color: #fff !important;
}

.btn-success { background: #1e8a4c !important; border-color: #1e8a4c !important; }
.btn-danger, .btn-outline-danger:hover { background: var(--g-rojo) !important; border-color: var(--g-rojo) !important; color: #fff !important; }
.btn-outline-danger { color: var(--g-rojo) !important; border-color: var(--g-rojo) !important; }
.btn-warning { background: var(--g-amarillo) !important; border-color: var(--g-amarillo) !important; color: var(--g-carbon) !important; }

.btn-outline-secondary {
    color: var(--g-carbon) !important;
    border-color: #E3D3AE !important;
    background: #fff !important;
}

.btn-outline-secondary:hover {
    background: var(--ngc-light) !important;
    color: var(--ngc-dark) !important;
    border-color: var(--ngc-light) !important;
}

/* ─── Formularios ─── */
.form-control, .form-select {
    border: 1.5px solid var(--ngc-light) !important;
    border-radius: 10px !important;
    font-size: 0.9rem;
    padding: 10px 14px;
    color: var(--ngc-text);
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus, .form-select:focus {
    border-color: var(--g-naranja) !important;
    box-shadow: 0 0 0 3px rgba(245, 168, 0, 0.18) !important;
    outline: none;
}
.form-check-input:checked { background-color: var(--g-carbon); border-color: var(--g-carbon); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(245, 168, 0, 0.2); border-color: var(--g-naranja); }

.form-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ngc-slate);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

/* ─── Alertas / mensajes ─── */
.alert {
    border: none !important;
    border-radius: var(--ngc-radius) !important;
    font-weight: 500;
    font-size: 0.88rem;
    padding: 12px 18px;
}

.alert-success {
    background: #e6f5ec !important;
    color: #1d5e37 !important;
    border-left: 4px solid #1e8a4c !important;
}

.alert-info {
    background: #f3ecfb !important;
    color: #4f2a7a !important;
    border-left: 4px solid var(--g-purpura) !important;
}

.alert-warning {
    background: var(--g-amarillo-suave) !important;
    color: #6b4a00 !important;
    border-left: 4px solid var(--g-naranja) !important;
}

.alert-danger {
    background: #fdebee !important;
    color: #9c1f35 !important;
    border-left: 4px solid var(--g-rojo) !important;
}

/* ─── Badges ─── */
.badge {
    font-weight: 600;
    font-size: 0.72rem;
    border-radius: 8px;
    padding: 4px 10px;
    letter-spacing: 0.3px;
}

.badge.bg-success { background: #e6f5ec !important; color: #1d5e37 !important; }
.badge.bg-info    { background: #f3ecfb !important; color: #4f2a7a !important; }
.badge.bg-warning { background: var(--g-amarillo) !important; color: #6b4a00 !important; }
.badge.bg-danger  { background: #fdebee !important; color: #9c1f35 !important; }
.badge.bg-primary { background: var(--g-carbon) !important; color: #fff !important; }
.badge.bg-secondary { background: #efe9f0 !important; color: var(--g-gris) !important; }

/* ─── Títulos ─── */
h1, h2, h3, h4, h5 {
    font-family: var(--g-titulos);
    font-weight: 800;
    color: var(--g-carbon);
    letter-spacing: -0.025em;
}
h1, .display-titulo { letter-spacing: -0.035em; }

.text-primary { color: var(--g-carbon) !important; }
.text-muted   { color: var(--ngc-text-light) !important; }

/* ─── Tarjetas de parche ─── */
.parche-card {
    border-radius: var(--ngc-radius-lg) !important;
    overflow: hidden;
}

.parche-card .mentor-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ngc-light);
}

.parche-card .mentor-avatar-placeholder {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ngc-light), var(--ngc-mid));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.cupos-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
}

.cupos-ok      { background: #e6f5ec; color: #1d5e37; }
.cupos-warning { background: var(--g-amarillo); color: #6b4a00; }
.cupos-full    { background: #fdebee; color: #9c1f35; }

/* ─── Tabla ─── */
.table {
    font-size: 0.88rem;
}

.table thead th {
    font-weight: 700;
    color: var(--ngc-slate);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--ngc-light);
    background: var(--ngc-bg);
    padding: 12px 16px;
}

.table tbody td {
    padding: 12px 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--ngc-light);
    color: var(--ngc-text);
}

.table tbody tr:hover {
    background: #fffaf0;
}
.table > :not(caption) > * > * { background-color: transparent; }

/* ─── Progress bar ─── */
.progress { background: #f4ecda; }
.progress-bar {
    border-radius: 10px;
    background: var(--g-naranja) !important;
}

/* ─── Página de login ─── */
.login-wrapper {
    min-height: 100vh;
    background: var(--g-crema);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    background: white;
    border-radius: var(--ngc-radius-lg) !important;
    box-shadow: var(--ngc-shadow-md) !important;
    padding: 48px 40px;
    width: 100%;
    max-width: 420px;
}

.login-logo {
    width: 100%;
    max-width: 280px;
    height: auto;
    margin-bottom: 8px;
}

/* ─── Footer ─── */
footer.pie-gosen {
    background: transparent;
    color: var(--g-gris);
    font-size: 0.78rem;
    font-weight: 500;
    border-top: 1px solid var(--g-borde);
    padding: 18px 0;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .login-card { padding: 32px 24px; }
    h2 { font-size: 1.4rem; }
}


/* ═════════ Menú lateral y estructura ═════════ */
:root { --sidebar-w: 264px; }

.sidebar {
    position: fixed;
    top: 12px; left: 12px; bottom: 12px;
    width: var(--sidebar-w);
    background: var(--g-amarillo);
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform 0.3s ease;
    overflow-y: auto;
}
.sidebar-brand {
    display: block;
    padding: 22px 22px 14px 22px;
    text-decoration: none;
}
.sidebar-brand img { width: 100%; max-width: 190px; height: auto; display: block; }
.sidebar-brand .sub {
    display: block; color: var(--g-gris);
    font-size: 0.7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    margin-top: 6px;
}

/* Selector de evento */
.selector-evento { padding: 0 16px 6px 16px; }
.selector-evento label { font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g-gris); }
.selector-evento .form-select { background-color: #fff; border-color: transparent !important; font-weight: 600; font-size: .85rem; padding: 8px 12px; }
.selector-evento .evento-unico { background: #fff; border-radius: 12px; padding: 8px 12px; font-weight: 700; font-size: .85rem; line-height: 1.25; }

.sidebar-nav {
    flex: 1; list-style: none; padding: 8px 10px; margin: 0;
}
.sidebar-section {
    color: rgba(41,35,43,0.5);
    font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 14px 12px 4px 12px;
}
.sidebar-nav a,
.sidebar-nav .nav-disabled {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px;
    color: var(--g-carbon);
    text-decoration: none;
    font-size: 0.9rem; font-weight: 500;
    border-radius: 12px;
    transition: background 0.15s, color 0.15s;
}
.sidebar-nav a:hover { background: rgba(255,255,255,0.55); color: var(--g-carbon); }
.sidebar-nav a.active { background: #fff; color: var(--g-carbon); font-weight: 700; box-shadow: 0 1px 3px rgba(41,35,43,.06); }
.sidebar-nav .nav-disabled { opacity: 0.45; cursor: not-allowed; }
.grupo-items a { padding-left: 40px !important; font-size: .85rem !important; }
.grupo-flecha { font-size: .75rem !important; width:auto !important; transition: transform .2s; }
.grupo-toggle[aria-expanded="true"] .grupo-flecha { transform: rotate(180deg); }
.sidebar-nav i { font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; }
.badge-pronto {
    margin-left: auto;
    background: rgba(255,255,255,0.6); color: var(--g-gris);
    font-size: 0.6rem; font-weight: 600;
    padding: 2px 6px; border-radius: 20px; white-space: nowrap;
}
.badge-conteo { margin-left: auto; background: var(--g-rojo); color: #fff; font-size: .68rem; font-weight: 700;
                border-radius: 20px; padding: 2px 8px; }
.badge-conteo.suave { background: var(--g-naranja); color: var(--g-carbon); }
.sidebar-footer {
    border-top: 1px solid rgba(41,35,43,0.08);
    padding: 14px 16px;
}
.sidebar-user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sidebar-user-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0; overflow: hidden;
}
.sidebar-user-avatar img { width: 38px; height: 38px; object-fit: cover; }
.sidebar-user-name { color: var(--g-carbon); font-weight: 700; font-size: 0.82rem; line-height: 1.2; }
.sidebar-user-role { color: var(--g-gris); font-size: 0.7rem; }
.sidebar-footer-links { display: flex; gap: 8px; align-items: center; }
.sidebar-footer-links a {
    color: var(--g-gris); font-size: 0.76rem;
    text-decoration: none; display: flex; align-items: center; gap: 4px;
}
.sidebar-footer-links a:hover { color: var(--g-carbon); }
.btn-sidebar-salir {
    background: rgba(255,255,255,0.7); border: none;
    color: var(--g-carbon); font-size: 0.76rem; font-weight: 600;
    padding: 5px 12px; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; gap: 5px; transition: background 0.15s;
}
.btn-sidebar-salir:hover { background: var(--g-rojo); color: #fff; }

/* ───── Estructura con menú lateral ───── */
body.has-sidebar { background: var(--g-crema); }
.main-wrapper { min-height: 100vh; display: flex; flex-direction: column; }
body.has-sidebar .main-wrapper { margin-left: calc(var(--sidebar-w) + 24px); }

.main-topbar {
    background: rgba(255,248,235,0.92);
    backdrop-filter: blur(6px);
    padding: 14px 28px 6px 28px;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 100;
}
.main-topbar-title { font-family: var(--g-titulos); font-size: 1.05rem; font-weight: 800; color: var(--g-carbon); letter-spacing: -0.025em; }

/* Sin menú lateral (ingreso): contenido centrado */
body:not(.has-sidebar) .main-wrapper {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; background: var(--g-crema);
}
body:not(.has-sidebar) .main-content { width: 100%; }

.main-content { flex: 1; padding: 20px 28px 28px 28px; }

/* Eslogan con los tres gestos de color */
.eslogan { font-family: var(--g-titulos); font-weight: 800; letter-spacing: -0.025em; color: var(--g-carbon); }
.eslogan .vivir { color: var(--g-naranja); }
.gestos { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 6px; }
.gestos i { display: block; width: 6px; height: 14px; border-radius: 6px; }
.gestos i:nth-child(1) { background: var(--g-rojo); transform: rotate(-25deg); }
.gestos i:nth-child(2) { background: var(--g-naranja); }
.gestos i:nth-child(3) { background: var(--g-purpura); transform: rotate(25deg); }

/* Tarjeta de evento con fecha grande (VIE 06 NOV) */
.tarjeta-evento { background: #fff; border-radius: 22px; box-shadow: var(--ngc-shadow); overflow: hidden; }
.tarjeta-evento .portada { background: var(--g-amarillo); aspect-ratio: 2 / 1; object-fit: cover; width: 100%; display: block; }
.fecha-grande { display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
                background: var(--g-amarillo); border-radius: 16px; padding: 8px 14px; min-width: 70px; line-height: 1.05; }
.fecha-grande .dia-sem { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g-gris); }
.fecha-grande .dia { font-family: var(--g-titulos); font-size: 1.8rem; font-weight: 800; letter-spacing: -0.035em; }
.fecha-grande .mes { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Filtros en píldoras */
.pildoras { display: flex; flex-wrap: wrap; gap: 6px; }
.pildora { display: inline-block; padding: 6px 14px; border-radius: 30px; background: #fff; color: var(--g-carbon);
           font-size: .82rem; font-weight: 600; text-decoration: none; border: 1px solid var(--g-borde); }
.pildora:hover { background: var(--g-amarillo-suave); color: var(--g-carbon); }
.pildora.activa { background: var(--g-carbon); color: #fff; border-color: var(--g-carbon); }

/* ───── Celular ───── */
.sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(41,35,43,0.45); z-index: 1039;
}
.mobile-toggle {
    display: none; background: #fff; border: none; border-radius: 10px;
    font-size: 1.4rem; color: var(--g-carbon); padding: 2px 8px; cursor: pointer;
}
@media (max-width: 767px) {
    .sidebar { transform: translateX(calc(-100% - 24px)); }
    .sidebar.sidebar-open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(41,35,43,0.25);
    }
    .sidebar-overlay.show { display: block; }
    .mobile-toggle { display: block; }
    body.has-sidebar .main-wrapper { margin-left: 0; }
    .main-content { padding: 12px 16px 20px 16px; }
    .main-topbar { padding: 10px 16px 4px 16px; }
}


/* ═════════ Encuestas: semáforo y barras ═════════ */
.sem { display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.sem-verde { background:#e3f1e7; color:#1e6b3a; } .sem-amarillo { background:#fff4e5; color:#8a5300; }
.sem-rojo { background:#FDEBEE; color:#C2203E; } .sem-gris { background:#F4ECDA; color:#6E6672; }
.barra-p { height:8px; border-radius:6px; background:#F4ECDA; overflow:hidden; min-width:60px; }
.barra-p > div { height:100%; border-radius:6px; background:#29232B; }
.num-p { font-weight:800; color:#29232B; }


/* ═════════ Encuestas: tarjetas de informe y evaluación ═════════ */
.inf-card { background:#fff; border-radius:16px; box-shadow:0 1px 4px rgba(41,35,43,.06); padding:20px; margin-bottom:16px; }
.inf-preg { padding:12px 0; border-top:1px solid #F4ECDA; } .inf-preg:first-of-type { border-top:0; }
.op-fila { display:flex; align-items:center; gap:8px; font-size:.8rem; margin:3px 0; }
.op-fila .lbl { width:150px; flex-shrink:0; } .op-fila .barra-p { flex-grow:1; } .op-fila .n { width:58px; text-align:right; color:#6E6672; }
.cita { background:#FFF8EB; border-left:3px solid #29232B; border-radius:8px; padding:8px 12px; margin:6px 0; font-size:.85rem; }
.kpi { text-align:center; } .kpi .v { font-size:1.6rem; font-weight:800; color:#29232B; } .kpi .l { font-size:.72rem; color:#6E6672; }


/* ═════════ Banner de novedades ═════════ */
.novedad { border-radius:16px; padding:14px 18px; display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.novedad-info { background:#FFF3D6; color:#29232B; }
.novedad-importante { background:#29232B; color:#fff; }
.novedad-info { background:#FFE9B6; }
.novedad-alerta { background:#FDEBEE; color:#842029; }
.novedad .emoji { font-size:1.8rem; line-height:1; flex-shrink:0; }
.novedad .tit { font-weight:800; }
.novedad .msg { font-size:.9rem; opacity:.9; white-space:pre-line; }
.novedad .btn-nov { flex-shrink:0; border-radius:10px; font-weight:700; font-size:.85rem; padding:6px 14px; text-decoration:none; }
.novedad-info .btn-nov, .novedad-alerta .btn-nov { background:#fff; color:inherit; }
.novedad-importante .btn-nov { background:#fff; color:#29232B; }
.novedad-img { margin-bottom:12px; border-radius:16px; overflow:hidden; box-shadow:0 2px 16px rgba(41,35,43,.08); }
.novedad-img img { display:block; width:100%; max-height:300px; object-fit:cover; }
.novedad-img a:hover img { opacity:.95; }
@media (max-width:575px) { .novedad { flex-wrap:wrap; } .novedad .btn-nov { width:100%; text-align:center; } }


/* ═════════ Encuestas: preguntas con emojis ═════════ */
.enc-seccion { font-size:.75rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#6E6672; margin:22px 0 8px; }
.enc-pregunta { background:#fff; border-radius:14px; padding:16px; margin-bottom:12px; box-shadow:0 1px 8px rgba(41,35,43,.05); }
.enc-pregunta.falta { box-shadow:0 0 0 2px #f5c2c7; }
.enc-opciones { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.enc-opcion input { position:absolute; opacity:0; pointer-events:none; }
.enc-opcion span { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:76px; padding:8px 10px;
                   border:1.5px solid #F1E4C6; border-radius:12px; cursor:pointer; font-size:.78rem; color:#6E6672; background:#fff;
                   transition: all .15s; text-align:center; }
.enc-opcion span b { font-size:1.5rem; line-height:1.1; font-weight:600; color:#29232B; }
.enc-opcion input:checked + span { background:#29232B; border-color:#29232B; color:#fff; }
.enc-opcion input:checked + span b { color:#fff; }
.enc-opcion input:focus-visible + span { outline:2px solid #9754D9; }
@media (max-width:575px) { .enc-opcion span { min-width:62px; padding:6px; } }


/* ═════════ Utilidades de la marca ═════════
   Reemplazan estilos sueltos (style="...") en las plantillas.
   Llevan !important para comportarse igual que un estilo escrito en la etiqueta. */
.t-navy { color: #29232B !important; }
.t-azul { color: #29232B !important; }
.t-rojo { color: #C2203E !important; }
.t-ambar { color: #8a5300 !important; }
.t-gris { color: #6E6672 !important; }
.t-verde { color: #1e6b3a !important; }
.t-lima { color: #F5A800 !important; }
.t-purpura { color: #9754D9 !important; }
.t-naranja { color: #B57C00 !important; }
.r-16 { border-radius: 16px !important; }
.r-14 { border-radius: 14px !important; }
.r-12 { border-radius: 12px !important; }
.r-10 { border-radius: 10px !important; }
.pre-line { white-space: pre-line !important; }
.cursor-pointer { cursor: pointer !important; }
.mw-900 { max-width: 900px !important; }
.mw-960 { max-width: 960px !important; }
.mw-260 { max-width: 260px !important; }
.obj-cover { object-fit: cover !important; }
.fs-emoji { font-size: 1.4rem !important; }
.bg-suave { background: #FFF3D6 !important; }
.bg-gris-claro { background: #FFF8EB !important; }
.bg-ambar-claro { background: #fff4e5 !important; }
.bg-azul-claro { background: #FFF3D6 !important; }

/* ═════════ Lista de espera ═════════ */
.cupo-apartado { background:#e3f1e7; border:1px solid #b9dcc4; }
.lista-espera-chip { display:inline-block; font-size:.72rem; font-weight:600; color:#8a5300; background:#fff4e5; border-radius:20px; padding:2px 9px; }

/* ═════════ Panel ═════════ */
.tarjeta-alerta { box-shadow: inset 4px 0 0 #E83854, var(--ngc-shadow) !important; }
.avatar-amarillo { background: #FFE9B6 !important; color: #29232B !important; }