/* ==========================================================================
   SORTEOWEB ADMIN · Estilos del panel administrativo
   Requiere assets/css/style.css (variables, botones, modal) antes.
   Las páginas con formularios cargan también assets/css/tickets.css
   (reutiliza .field/.input/.segmented/.choice ya construidos para el público).
   [1] Acceso (login)          [2] Estructura del panel (sidebar + shell)
   [3] Topbar                  [4] Tarjetas del Dashboard
   [5] Tablas y badges         [6] Responsive
   [7] Editor de sorteo (pestañas, formularios, premios)
   ========================================================================== */

/* [1] ACCESO (admin/view/login.php) ======================================= */
body.admin-login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: radial-gradient(120% 90% at 50% 0%, #0c2c7a 0%, var(--bg) 62%);
    padding: 1.5rem;
}
.login-page { width: 100%; display: grid; place-items: center; }
.login-card {
    width: min(400px, 100%);
    padding: 2.4rem 2rem;
    text-align: center;
    background: linear-gradient(170deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(12, 87, 211, .15);
    animation: tk-up .5s cubic-bezier(.2, .8, .2, 1) both;
}
.login-card__logo { border-radius: 12px; filter: drop-shadow(0 0 14px rgba(12, 87, 211, .6)); margin-bottom: 1rem; }
.login-card h1 { font-size: 1.5rem; font-weight: 800; }
.login-card__sub { color: var(--muted); margin: .5rem 0 1.6rem; font-size: .92rem; }
.login-card form { display: grid; gap: 1.1rem; text-align: left; }
.login-card__submit { width: 100%; margin-top: .3rem; }
.login-card__back { margin-top: 1.6rem; font-size: .88rem; }
.login-card__back a { color: var(--sky); }
.login-card__back a:hover { color: var(--white); }
@keyframes tk-up { from { opacity: 0; transform: translateY(24px); } }

/* [2] ESTRUCTURA DEL PANEL (sidebar + shell) =============================== */
body.admin-panel { background: var(--bg); }
.admin-shell { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; align-items: start; }

.admin-sidebar {
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #071433, #030b24);
    border-right: 1px solid var(--border);
    padding: 1.4rem 1rem;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-sidebar__brand { display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem 1.4rem; }
.admin-sidebar__brand img { border-radius: 9px; }
.admin-sidebar__brand span { font-family: var(--font-num); font-weight: 800; letter-spacing: .1em; }
.admin-sidebar__brand em { font-style: normal; color: var(--sky); font-weight: 600; letter-spacing: .04em; }

.admin-nav { display: grid; gap: .3rem; flex: 1; }
.admin-nav a {
    display: flex; align-items: center; gap: .8rem;
    padding: .75rem .9rem;
    border-radius: 12px;
    color: var(--muted);
    font-weight: 600;
    font-size: .93rem;
    transition: background .2s ease, color .2s ease;
}
.admin-nav a svg { width: 19px; height: 19px; flex: none; }
.admin-nav a:hover { background: var(--glass); color: #fff; }
.admin-nav a.is-active { background: var(--grad-btn); color: #fff; box-shadow: 0 0 18px rgba(47, 139, 255, .4); }

.admin-sidebar__foot { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; display: grid; gap: .7rem; }
.admin-sidebar__admin { display: flex; align-items: center; gap: .7rem; padding: 0 .4rem; }
.admin-avatar {
    width: 34px; height: 34px; flex: none; display: grid; place-items: center;
    border-radius: 50%; background: var(--grad-btn); font-weight: 800; font-family: var(--font-num);
}
.admin-sidebar__admin span:last-child { font-size: .88rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-logout { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-radius: 12px; color: var(--muted); font-size: .88rem; font-weight: 600; transition: background .2s ease, color .2s ease; }
.admin-logout:hover { background: rgba(255, 77, 109, .12); color: #ff8fa3; }

.admin-main { min-width: 0; }

/* [3] TOPBAR ================================================================ */
.admin-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.8rem;
    border-bottom: 1px solid var(--border);
    background: rgba(3, 11, 36, .55);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    position: sticky; top: 0; z-index: 20;
}
.admin-topbar__left { display: flex; align-items: center; gap: .8rem; }
.admin-topbar h1 { font-size: 1.25rem; font-weight: 800; }
.admin-topbar__actions { display: flex; align-items: center; gap: .8rem; }
.admin-topbar__actions .btn { padding: .6rem 1.1rem; font-size: .88rem; }
#sidebarToggle { display: none; }

.admin-content { padding: 1.8rem; max-width: 1280px; }

/* [4] TARJETAS DEL DASHBOARD ================================================ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; margin-bottom: 2rem; }
.stat-card {
    padding: 1.4rem 1.5rem;
    background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.stat-card__label { color: var(--muted); font-size: .85rem; font-weight: 600; }
.stat-card__value { font-family: var(--font-num); font-size: 1.9rem; font-weight: 800; margin-top: .5rem; color: #fff; text-shadow: 0 0 16px rgba(143, 211, 255, .5); }
.stat-card__hint { color: var(--sky); font-size: .8rem; margin-top: .4rem; }

.admin-panel-card {
    padding: 1.5rem 1.6rem;
    background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.admin-panel-card h2 { font-size: 1.05rem; font-weight: 800; margin-bottom: 1rem; }

/* [5] TABLAS Y BADGES ======================================================= */
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th { text-align: left; color: var(--muted); font-weight: 600; padding: .6rem .8rem; border-bottom: 1px solid var(--border); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.admin-table td { padding: .7rem .8rem; border-bottom: 1px solid rgba(255, 255, 255, .06); vertical-align: middle; white-space: nowrap; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table__empty { color: var(--muted); padding: 1.2rem .8rem; text-align: center; }

.badge { display: inline-block; padding: .22rem .65rem; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; }
.badge--pendiente, .badge--activo  { color: #ffe08a; background: rgba(255, 200, 87, .15); border: 1px solid rgba(255, 200, 87, .5); }
.badge--pagado                     { color: #8bf6bd; background: rgba(58, 222, 140, .15); border: 1px solid rgba(58, 222, 140, .5); }
.badge--anulado, .badge--cerrado   { color: #ffb4c0; background: rgba(255, 77, 109, .16); border: 1px solid rgba(255, 77, 109, .5); }
.badge--retirado, .badge--inactivo { color: #cbd5f0; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); }

.btn--sm { padding: .5rem 1rem; font-size: .82rem; }
.btn--danger { color: #ff8fa3; }
.btn--danger:hover { background: rgba(255, 77, 109, .14); }
.row-actions { display: flex; align-items: center; gap: .5rem; }

.select-mini {
    padding: .4rem .7rem;
    font: inherit; font-size: .84rem; font-weight: 600; color: var(--text);
    background: rgba(3, 11, 36, .6);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
}
.select-mini:hover { border-color: rgba(143, 211, 255, .45); }
.select-mini:focus { outline: none; border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(47, 139, 255, .2); }

/* [7] EDITOR DE SORTEO (admin/view/sorteo_editar.php) ======================= */
.tabs__nav {
    display: flex; flex-wrap: wrap; gap: .4rem;
    padding: .35rem; margin-bottom: 1.2rem;
    background: rgba(3, 11, 36, .5);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow-x: auto;
}
.tab-btn {
    flex: 1 1 auto; white-space: nowrap;
    padding: .65rem 1.1rem;
    font: inherit; font-weight: 700; font-size: .88rem; color: var(--muted);
    background: transparent; border: 0; border-radius: 12px; cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.tab-btn:hover:not(:disabled) { color: #fff; background: var(--glass); }
.tab-btn.is-active { color: #fff; background: var(--grad-btn); box-shadow: 0 0 18px rgba(47, 139, 255, .4); }
.tab-btn:disabled { color: rgba(157, 180, 220, .35); cursor: not-allowed; }

.tab-panel { animation: tk-up .4s cubic-bezier(.2, .8, .2, 1) both; }
.tab-hint { color: var(--sky); font-size: .88rem; margin: -.4rem 0 1.2rem; }
.tab-subhead { font-size: 1rem; font-weight: 800; margin: 1.6rem 0 .3rem; }

.mt-submit { display: flex; justify-content: flex-end; margin-top: 1.3rem; }

.field--inline { display: flex; align-items: center; margin-top: 1.1rem; }
.field--row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; align-items: start; margin-top: 1.1rem; }
.field--row > div { display: grid; gap: .4rem; }
.field--row__actions { display: flex; align-items: end; }

.check { display: flex; align-items: center; gap: .65rem; cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--text); }
.check input { width: 18px; height: 18px; accent-color: var(--blue-bright); cursor: pointer; }

.promo-row { padding: .9rem 1rem 1rem; margin-top: .8rem; background: rgba(255, 255, 255, .03); border: 1px solid var(--border); border-left: 3px solid var(--blue-bright); border-radius: 14px; }
.promo-row:first-child { margin-top: 1rem; }
.promo-row__premio { margin-top: 0; }
.promo-row .field--row { margin-top: .8rem; }
.promo-row__calc { display: block; margin-top: .7rem; }
.promo-row.is-invalida { border-left-color: #ffb347; }
.promo-row.is-invalida .promo-row__calc { color: #ffcf8a; }
#promosVacio { margin: 1rem 0; }
#promosVacio[hidden] { display: none; }

.premios-admin { display: grid; gap: .8rem; margin: 1rem 0 1.6rem; }
.premio-card {
    display: flex; align-items: center; gap: 1rem;
    padding: .9rem 1.1rem;
    background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    border: 1px solid var(--border);
    border-radius: 14px;
}
.premio-card__icono { width: 40px; height: 40px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 10px; }
.premio-card__icono svg { width: 30px; height: 30px; }
.premio-card__icono img { width: 100%; height: 100%; object-fit: cover; }
.premio-card__info { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.premio-card__info strong { font-size: .95rem; }
.premio-card__info span { color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.premio-card.is-inactivo { opacity: .55; }

.economia-premios { display: grid; gap: 1rem; margin: 1rem 0 1.6rem; }
.economia-premio-card {
    padding: 1rem 1.1rem;
    background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    border: 1px solid var(--border);
    border-radius: 14px;
}
.economia-premio-card__header { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; flex-wrap: wrap; }
.economia-premio-card__header strong { font-size: .95rem; }
.economia-premio-card__etiqueta { color: var(--muted); font-size: .82rem; }

.plantilla-swatch { display: block; width: 100%; height: 40px; border-radius: 10px; margin-bottom: .7rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }

.dropzone {
    display: grid; place-items: center; gap: .5rem;
    padding: 1.8rem 1.2rem;
    text-align: center;
    background: rgba(3, 11, 36, .45);
    border: 1.5px dashed var(--border);
    border-radius: 16px;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.dropzone:hover, .dropzone:focus-visible { border-color: rgba(143, 211, 255, .55); background: rgba(3, 11, 36, .6); outline: none; }
.dropzone.is-dragover { border-color: var(--blue-bright); background: rgba(47, 139, 255, .12); box-shadow: 0 0 0 3px rgba(47, 139, 255, .2); }
.dropzone__vacio { display: grid; place-items: center; gap: .3rem; color: var(--muted); }
.dropzone__vacio svg { color: var(--sky); margin-bottom: .2rem; }
.dropzone__vacio p { color: var(--text); font-weight: 600; font-size: .92rem; }
.dropzone__vacio small { font-size: .78rem; }
.dropzone__preview { display: grid; place-items: center; gap: .8rem; }
.dropzone__preview img, .dropzone__preview video { max-width: 100%; max-height: 220px; border-radius: 12px; object-fit: contain; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }

@media (max-width: 560px) {
    .field--row { grid-template-columns: 1fr; }
    .premio-card { flex-wrap: wrap; }
}

/* [6] RESPONSIVE ============================================================ */
@media (max-width: 980px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-sidebar {
        position: fixed; inset: 0 auto 0 0; width: 264px; z-index: 60;
        transform: translateX(-100%); transition: transform .25s ease;
        box-shadow: 20px 0 50px rgba(0, 0, 0, .5);
    }
    .admin-sidebar.is-open { transform: none; }
    #sidebarToggle {
        display: grid; place-items: center; width: 42px; height: 42px;
        background: var(--glass); border: 1px solid var(--border); border-radius: 12px;
    }
    .admin-content { padding: 1.2rem; }
    .admin-topbar { padding: 1rem 1.2rem; }
}
/* (Antes, en ≤480px se ocultaba el texto de los botones del encabezado y quedaban barras vacías.
    Ahora los botones nunca se esconden: pasan a una nueva fila, ver [RESPONSIVE GENERAL] al final.) */

/* [7] VISTA PREVIA DE PLANTILLA (pestaña Plantilla del editor de sorteos) ===
   Reutiliza el hero real de assets/css/vista.css (mismas clases .hero/.slide/
   .prize-orb que ve el público), pero contenido en una tarjeta compacta de
   una sola columna en vez del hero a pantalla completa. */
.plantilla-preview {
    margin: 1rem 0 1.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius, 20px);
    overflow: hidden;
}
.plantilla-preview .hero { min-height: 0; padding: clamp(1.6rem, 4vw, 2.6rem) 1.5rem; }
.plantilla-preview .hero__inner { width: 100%; }
.plantilla-preview .slide {
    grid-template-columns: 1fr;
    text-align: center;
    min-height: 0;
    gap: 1.3rem;
    opacity: 1;
    visibility: visible;
    transform: none;
}
.plantilla-preview .slide__art { order: -1; }
.plantilla-preview .slide__text { justify-items: center; }
.plantilla-preview .slide__cta { justify-content: center; }
.plantilla-preview .slide__title { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.plantilla-preview .prize-orb { width: min(180px, 46vw); }
.plantilla-preview .btn { pointer-events: none; }

/* [8] CONSTRUCTOR DE PLANTILLAS PERSONALIZADAS (admin/view/plantilla_editar.php) ===
   Color nativo del navegador (sin librería de color-picker en el proyecto) y un
   diagrama chico dibujado en CSS puro para cada variante de PlantillaLayouts. */
.input[type="color"] { padding: .25rem; height: 46px; cursor: pointer; }

/* .field ya trae "display: grid" (assets/css/tickets.css): esa regla de autor tiene
   la misma especificidad que el "display: none" del atributo [hidden] del navegador
   y gana por venir después en la cascada, así que un .field oculto con .hidden = true
   por JS (campoFondoColor/campoFondoArchivo/campoFondoAudio) se quedaba visible. */
.field[hidden] { display: none; }

.layout-diagram { display: flex; gap: 5px; width: 100%; height: 44px; margin-bottom: .6rem; }
.layout-diagram__text, .layout-diagram__img { border-radius: 6px; background: rgba(255, 255, 255, .14); }
.layout-diagram__text { flex: 1.3; }
.layout-diagram__img { flex: 1; background: rgba(143, 211, 255, .4); }
.layout-diagram--imagen_izquierda { flex-direction: row-reverse; }
.layout-diagram--texto_arriba, .layout-diagram--imagen_arriba { flex-direction: column; height: 60px; }
.layout-diagram--imagen_arriba { flex-direction: column-reverse; }

/* Atajo "+ Crear nueva plantilla" al final de la grilla de selección (pestaña
   Plantilla del editor de sorteos): mismo tamaño que las demás tarjetas .choice,
   pero sin radio (es un enlace) y con borde punteado para distinguirla. */
.choice--nueva .choice__body {
    display: grid; place-items: center; gap: .3rem; text-align: center; min-height: 100%;
    border-style: dashed;
}
.choice--nueva:hover .choice__body { border-color: var(--blue-bright); }

/* ==========================================================================
   IDENTIDAD DEL SITIO (admin/view/sitio.php): formulario + vista previa en vivo
   ========================================================================== */
.sitio-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.2rem; align-items: start; }
.sitio-layout > * { min-width: 0; }
.sitio-preview-card { position: sticky; top: 1rem; }

.sitio-archivo { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sitio-archivo__thumb {
    flex: none; width: 72px; height: 72px; display: grid; place-items: center; padding: .5rem;
    background: repeating-conic-gradient(rgba(255, 255, 255, .06) 0 25%, transparent 0 50%) 0 0 / 14px 14px, rgba(3, 11, 36, .6);
    border: 1.5px dashed var(--border); border-radius: 14px; transition: border-color .2s ease, box-shadow .2s ease;
}
.sitio-archivo__thumb--logo { width: 120px; }
.sitio-archivo__thumb.is-dragover { border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(47, 139, 255, .2); }
.sitio-archivo__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sitio-archivo__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sitio-archivo__acciones .field__hint { flex-basis: 100%; }
.sitio-archivo__acciones [hidden] { display: none; }

.sitio-submit { align-items: center; gap: .8rem; flex-wrap: wrap; }
.sitio-pendiente { margin-right: auto; font-size: .85rem; font-weight: 700; color: #ffcf8a; }
.sitio-pendiente::before { content: "● "; }
.sitio-submit [hidden] { display: none; }

/* --- Mini navegador --- */
.sp-browser { margin-top: 1rem; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 18px 50px rgba(0, 0, 0, .4); background: #0b1430; }
.sp-browser__bar { display: flex; align-items: flex-end; gap: .7rem; padding: .55rem .7rem 0; background: #172345; }
.sp-dots { display: flex; gap: .3rem; padding-bottom: .55rem; }
.sp-dots i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.sp-dots i:nth-child(2) { background: #febc2e; }
.sp-dots i:nth-child(3) { background: #28c840; }
.sp-tab {
    display: flex; align-items: center; gap: .45rem; min-width: 0; max-width: 78%;
    padding: .45rem .7rem; font-size: .76rem; color: #dfe7ff;
    background: #0b1430; border-radius: 10px 10px 0 0;
}
.sp-tab img { flex: none; width: 16px; height: 16px; object-fit: contain; border-radius: 3px; }
.sp-tab span:not(.sp-tab__x) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-tab__x { margin-left: .3rem; color: var(--muted); }
.sp-browser__url { margin: .45rem .7rem; padding: .3rem .7rem; font-size: .72rem; color: var(--muted); background: rgba(255, 255, 255, .06); border-radius: 999px; }

/* --- Mini sitio: el encabezado reutiliza .brand/.brand__logo/.brand__name reales --- */
.sp-site { background: radial-gradient(120% 80% at 50% 0%, #0c2c7a 0%, var(--bg) 65%); }
.sp-header { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem 1rem; background: rgba(3, 11, 36, .7); border-bottom: 1px solid var(--border); }
.sp-header .brand { gap: .5rem; min-width: 0; flex: 1 1 auto; }
.sp-header .brand__logo { height: 30px; max-width: 120px; object-fit: contain; }
/* A escala de la mini pantalla (~70% del real) */
.sp-header .brand__name { font-size: .95rem; letter-spacing: .12em; }
.sp-header .brand__name--largo { font-size: .72rem; letter-spacing: .07em; }
.sp-nav { display: flex; gap: .55rem; flex: none; }
.sp-nav i { font-style: normal; font-size: .68rem; font-weight: 600; color: var(--muted); }
.sp-hero { display: grid; justify-items: center; gap: .35rem; padding: 2.2rem 1rem 2rem; text-align: center; }
.sp-hero__tag { padding: .2rem .7rem; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; }
.sp-hero strong { font-size: 1.25rem; line-height: 1.2; }
.sp-hero, .sp-footer { overflow-wrap: anywhere; }
.sp-hero__txt { color: var(--muted); font-size: .85rem; }
.sp-hero__txt b { color: var(--text); }
.sp-hero__btn { margin-top: .5rem; padding: .45rem 1rem; font-size: .76rem; font-weight: 700; border-radius: 999px; background: var(--grad-btn); }
.sp-footer { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; padding: .6rem 1rem; font-size: .66rem; color: var(--muted); border-top: 1px solid var(--border); }
.sp-footer b { font-family: var(--font-num); letter-spacing: .12em; color: var(--text); }

.admin-sidebar__brand span { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
    .sitio-layout { grid-template-columns: minmax(0, 1fr); }
    .sitio-preview-card { position: static; order: -1; }
}
@media (max-width: 560px) {
    .sp-nav { display: none; }
}

/* ==========================================================================
   EDITOR VISUAL DE PLANTILLAS (admin/view/plantilla_editar.php)
   Izquierda: panel de configuración con scroll propio. Derecha: vista previa
   siempre visible (la página pública real en un iframe, escalada al tamaño elegido).
   ========================================================================== */
.pe-content { max-width: none; padding: 1rem 1.2rem; }
.pe-layout {
    display: grid; grid-template-columns: minmax(340px, 430px) minmax(0, 1fr); gap: 1.2rem;
    height: calc(100vh - 78px - 2rem); min-height: 560px;
}
.pe-estado { font-size: .85rem; font-weight: 700; color: #ffcf8a; white-space: nowrap; }
.pe-estado[hidden] { display: none; }

/* --- Panel izquierdo --- */
.pe-panel {
    display: flex; flex-direction: column; min-height: 0;
    background: var(--glass); border: 1px solid var(--border); border-radius: var(--radius);
}
.pe-panel__scroll { flex: 1; overflow-y: auto; padding: .6rem .8rem; overscroll-behavior: contain; }
.pe-panel__foot {
    display: flex; align-items: center; justify-content: flex-end; gap: .6rem; flex-wrap: wrap;
    padding: .8rem; border-top: 1px solid var(--border); background: rgba(3, 11, 36, .55); border-radius: 0 0 var(--radius) var(--radius);
}
.pe-panel__foot [hidden] { display: none; }
.pe-panel__foot .btn--lg { flex: 1; }

.pe-sec { border-bottom: 1px solid var(--border); }
.pe-sec:last-child { border-bottom: 0; }
.pe-sec > summary {
    list-style: none; cursor: pointer; padding: .9rem .4rem; font-weight: 700; font-size: 1rem;
    display: flex; align-items: center; justify-content: space-between;
}
.pe-sec > summary::-webkit-details-marker { display: none; }
.pe-sec > summary::after { content: "▾"; color: var(--sky); transition: transform .2s ease; }
.pe-sec[open] > summary::after { transform: rotate(180deg); }
.pe-sec[open] > summary { color: var(--sky); }
.pe-sec > *:not(summary) { margin-left: .3rem; margin-right: .3rem; }
.pe-sec[open] { padding-bottom: 1rem; }
.pe-sub { margin: 1.1rem .3rem .3rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sky); }

.pe-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .8rem; }
.pe-field, .pe-range, .pe-color { display: grid; gap: .3rem; margin-top: .75rem; min-width: 0; }
.pe-field .field__label, .pe-range .field__label, .pe-color .field__label { font-size: .8rem; }
.pe-range output { font-weight: 700; color: var(--sky); }
.pe-range input[type="range"] { width: 100%; accent-color: var(--blue-bright); }
.pe-check { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .88rem; }
.pe-sec .input { padding: .55rem .7rem; font-size: .88rem; border-radius: 10px; }
.pe-sec textarea.input { resize: vertical; min-height: 58px; }
[data-fondo][hidden], [data-solo-texto][hidden], [data-solo-estilo][hidden], .pe-sec [hidden].field__hint { display: none !important; }

.pe-color__row { display: flex; align-items: center; gap: .4rem; }
.pe-color__picker { flex: none; width: 40px; height: 36px; padding: 2px; border: 1px solid var(--border); border-radius: 9px; background: transparent; cursor: pointer; }
.pe-color__picker:disabled { opacity: .35; cursor: not-allowed; }
.pe-color__hex { flex: 1; min-width: 0; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.pe-color__hex[aria-invalid="true"] { border-color: #ff4d6d; }
.pe-color__auto { flex: none; display: flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--muted); cursor: pointer; }

.pe-seg-5 { gap: .25rem; }
.pe-seg-5 span { padding: .5rem .55rem; font-size: .8rem; }
.pe-layouts { grid-template-columns: 1fr 1fr; gap: .6rem; }
.pe-layouts .choice__body { padding: .7rem; font-size: .8rem; }
.pe-el { margin-top: .4rem; padding: .2rem .7rem .9rem; border: 1px dashed var(--border); border-radius: 12px; }
#peElReset { margin-top: .9rem; }
.pe-sec [data-accion="ver-animacion"] { margin-top: .9rem; }

/* --- Vista previa --- */
.pe-preview { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pe-preview__bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.pe-devices { display: inline-flex; padding: .25rem; gap: .25rem; background: rgba(3, 11, 36, .6); border: 1px solid var(--border); border-radius: 12px; }
.pe-devices button { padding: .45rem .8rem; font-size: .82rem; font-weight: 600; color: var(--muted); background: transparent; border: 0; border-radius: 9px; }
.pe-devices button.is-active { color: #fff; background: var(--grad-btn); }
.pe-aviso {
    margin: .7rem 0; padding: .55rem .8rem; font-size: .82rem; border-radius: 10px;
    display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline;
    color: #bfe3ff; background: rgba(47, 139, 255, .12); border: 1px solid rgba(47, 139, 255, .35);
}
.pe-aviso.is-sucio { color: #ffe3b0; background: rgba(255, 179, 71, .12); border-color: rgba(255, 179, 71, .45); }
.pe-aviso__nombre { margin-left: auto; color: var(--muted); }
.pe-stage {
    flex: 1; min-height: 0; overflow: auto; display: flex; justify-content: center; align-items: flex-start;
    padding: .6rem; border-radius: 14px;
    background: repeating-conic-gradient(rgba(255, 255, 255, .03) 0 25%, transparent 0 50%) 0 0 / 22px 22px, rgba(3, 11, 36, .45);
    border: 1px solid var(--border);
}
.pe-frame { position: relative; flex: none; overflow: hidden; border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); background: #030b24; transition: width .25s ease, height .25s ease; }
.pe-frame[data-device="tablet"], .pe-frame[data-device="movil"] { border-radius: 22px; outline: 8px solid #0d1733; }
.pe-frame iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #030b24; }
.pe-tip { margin-top: .5rem; text-align: center; }

@media (max-width: 1100px) {
    .pe-layout { grid-template-columns: minmax(0, 1fr); height: auto; }
    .pe-preview { order: -1; position: sticky; top: 0; z-index: 5; max-height: 62vh; background: var(--bg); padding-bottom: .4rem; }
    .pe-stage { min-height: 260px; }
    .pe-panel__scroll { max-height: none; overflow: visible; }
    .pe-tip { display: none; }
}
@media (max-width: 560px) {
    .pe-grid2 { grid-template-columns: 1fr; }
    .pe-aviso__nombre { margin-left: 0; }
}

/* ==========================================================================
   CUENTAS BANCARIAS / MEDIOS DE PAGO (admin/view/pagos.php)
   La "vista del participante" reutiliza las clases reales de la compra (.mp-*, .pay)
   de assets/css/tickets.css.
   ========================================================================== */
.mp-editor { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1.2rem; align-items: start; margin-top: 1.2rem; scroll-margin-top: 1rem; }
.mp-editor[hidden] { display: none; }
.mp-editor > * { min-width: 0; }
.mp-editor [data-tipos][hidden] { display: none; }
.mp-editor__preview { position: sticky; top: 1rem; }
.mp-vista-opcion { margin-bottom: .2rem; cursor: default; }
.mp-vista-opcion .choice__body { border-color: var(--blue-bright); }
.mp-vista-aviso { margin-top: .8rem; color: #ffcf8a; }
#dropzoneQr .dropzone__preview img { max-width: 180px; max-height: 180px; background: #fff; padding: .4rem; border-radius: 10px; }
.mp-lista-nombre { display: inline-flex; align-items: center; gap: .6rem; }
.mp-lista-nombre .pay__icon { width: 36px; height: 36px; border-radius: 10px; }
.mp-lista-nombre .pay__icon svg { width: 22px; height: 22px; }
.mp-lista-datos { white-space: normal !important; max-width: 340px; color: var(--muted); font-size: .84rem; }
.mp-lista-qr { width: 34px; height: 34px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px; vertical-align: middle; margin-right: .5rem; }
.mp-falta { color: #ffcf8a; }
@media (max-width: 1000px) {
    .mp-editor { grid-template-columns: 1fr; }
    .mp-editor__preview { position: static; }
}
.dropzone__vacio[hidden], .dropzone__preview[hidden] { display: none; }

/* ==========================================================================
   COMPROBANTES (admin/view/comprobantes.php): lista, detalle lateral y visor
   ========================================================================== */
.admin-nav a { position: relative; }
.admin-nav__badge {
    margin-left: auto; min-width: 22px; padding: .05rem .45rem; text-align: center;
    font-size: .72rem; font-weight: 800; color: #1a1200; background: #ffcf5a; border-radius: 999px;
}
.admin-nav__badge[hidden] { display: none; }
.badge--aprobado, .badge--aprobada { color: #8bf6bd; background: rgba(58, 222, 140, .15); border: 1px solid rgba(58, 222, 140, .5); }
.badge--anulada { color: #ffb4c0; background: rgba(255, 77, 109, .16); border: 1px solid rgba(255, 77, 109, .5); }

.cp-filtros { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cp-tabs { display: inline-flex; flex-wrap: wrap; gap: .3rem; padding: .3rem; background: rgba(3, 11, 36, .6); border: 1px solid var(--border); border-radius: 14px; }
.cp-tabs button { padding: .5rem .9rem; font-size: .85rem; font-weight: 600; color: var(--muted); background: transparent; border: 0; border-radius: 10px; }
.cp-tabs button b { margin-left: .3rem; padding: 0 .4rem; font-size: .75rem; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.cp-tabs button.is-active { color: #fff; background: var(--grad-btn); }
.cp-busqueda { display: flex; gap: .6rem; flex: 1 1 380px; max-width: 620px; }
.cp-busqueda .input { padding: .6rem .8rem; font-size: .88rem; }
.cp-busqueda input { flex: 2; }
.cp-busqueda select { flex: 1; }
.cp-tabla tbody tr { cursor: pointer; }
.cp-tabla tbody tr:hover td { background: rgba(255, 255, 255, .04); }
.cp-fila--pendiente td:first-child { box-shadow: inset 3px 0 0 #ffcf5a; }
.cp-sin { color: #ffcf8a; }

/* Columnas de la tabla de compras: los textos largos hacen SALTO DE LÍNEA dentro de su celda
   (sin "..."), así un premio o sorteo con nombre largo no estira la tabla hacia la derecha. */
.cp-tabla td, .cp-tabla th { vertical-align: top; padding-left: .4rem; padding-right: .4rem; }
.cp-tabla { font-size: .84rem; }
.cp-tabla th { font-size: .68rem; letter-spacing: .03em; }
.cp-tabla .cp-col-premio { width: 170px; min-width: 118px; max-width: 170px; white-space: normal; overflow-wrap: anywhere; word-break: normal; line-height: 1.35; }
.cp-tabla .cp-col-texto  { min-width: 85px; max-width: 170px; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.cp-tabla .badge { padding: .2rem .5rem; font-size: .68rem; }
.cp-tabla [data-ver] { padding: .35rem .75rem; }
.cp-tabla td small.cp-linea { display: block; color: var(--muted); font-size: .76rem; }   /* 2.ª línea: tipo de doc. / hora */
.cp-tabla th.cp-col-premio, .cp-tabla th.cp-col-texto { white-space: nowrap; }

/* Columna "Tickets": códigos de los tickets de la compra (máx. 3 + "+N tickets") */
.cp-codigos { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.cp-codigos { margin-top: .2rem; }
.cp-codigos code { font-family: inherit; font-size: .76rem; font-weight: 600; letter-spacing: .02em; color: #cfe6ff; }
.cp-cant { display: block; white-space: nowrap; }
.cp-col-compra strong { white-space: nowrap; }
.cp-tabla td.cp-col-compra { white-space: normal; min-width: 80px; }
.cp-col-compra .cp-sin { display: block; margin-top: .25rem; font-size: .74rem; line-height: 1.2; }
.cp-mas { display: block; margin-top: .25rem; font-size: .76rem; }
.cp-mas { color: var(--muted); }
.cp-tabla td.cp-col-tickets { white-space: normal; min-width: 80px; }
.cp-codigos li { white-space: nowrap; }

/* Decisión actual / cambiar decisión (pie del detalle) */
.cp-decision { flex: 1 1 100%; margin: 0; font-size: .85rem; color: var(--muted); }
.cp-decision strong { color: var(--text); }
.cp-btn-cambiar { border-color: rgba(143, 211, 255, .5); }

/* Panel lateral de detalle */
.cp-drawer { position: fixed; inset: 0; z-index: 90; }
.cp-drawer[hidden] { display: none; }
.cp-drawer__fondo { position: absolute; inset: 0; background: rgba(1, 6, 20, .65); backdrop-filter: blur(3px); }
.cp-drawer__panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); overflow-y: auto;
    display: flex; flex-direction: column;
    background: linear-gradient(170deg, #0d1c4d, #061238); border-left: 1px solid var(--border);
    box-shadow: -20px 0 60px rgba(0, 0, 0, .5); animation: cp-entrar .25s ease;
}
@keyframes cp-entrar { from { transform: translateX(40px); opacity: 0; } }
.cp-drawer__head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.3rem; background: #0b1a47; border-bottom: 1px solid var(--border); }
.cp-drawer__head h2 { font-size: 1.2rem; margin-bottom: .3rem; }
.cp-drawer__x { width: 38px; height: 38px; font-size: 1.5rem; line-height: 1; color: var(--text); background: var(--glass); border: 1px solid var(--border); border-radius: 50%; }
.cp-drawer__body { flex: 1; padding: 1rem 1.3rem; }
.cp-drawer__foot, .cp-anular { position: sticky; bottom: 0; padding: 1rem 1.3rem; background: #0b1a47; border-top: 1px solid var(--border); }
.cp-drawer__foot { display: flex; gap: .7rem; flex-wrap: wrap; }
.cp-drawer__foot[hidden], .cp-anular[hidden], .cp-drawer__foot [hidden] { display: none; }
.cp-drawer__foot .btn { flex: 1; }
.cp-btn-aprobar { background: linear-gradient(120deg, #0e9f5a, #19c37d, #0e9f5a); }
.cp-btn-anular { background: linear-gradient(120deg, #c81e45, #ff4d6d, #c81e45); }
.cp-btn-anular:disabled { opacity: .45; cursor: not-allowed; animation: none; }
.cp-anular { display: grid; gap: .5rem; }
.cp-anular__acciones { display: flex; justify-content: flex-end; gap: .6rem; }

.cp-sec { margin-bottom: 1.3rem; }
.cp-sec h3 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sky); margin-bottom: .6rem; }
.cp-sub { margin: .9rem 0 .5rem; font-size: .85rem; }
.cp-datos { display: grid; gap: .45rem; margin: 0; }
.cp-datos > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.cp-datos dt { color: var(--muted); }
.cp-datos dd { margin: 0; font-weight: 600; text-align: right; white-space: pre-line; }
.cp-total { padding-top: .5rem; border-top: 1px dashed var(--border); font-size: 1.05rem !important; }
.cp-total dd { font-family: var(--font-num); }
.cp-tickets { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .4rem; }
.cp-tickets li { display: flex; justify-content: space-between; align-items: center; gap: .4rem; padding: .35rem .55rem; background: rgba(255, 255, 255, .05); border: 1px solid var(--border); border-radius: 10px; font-size: .8rem; }
.cp-tickets .badge { font-size: .62rem; margin-left: auto; }
.cp-ticket-x { flex: none; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; font-size: .8rem; line-height: 1;
    border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer; opacity: .7; transition: background .15s, border-color .15s, opacity .15s; }
.cp-ticket-x:hover, .cp-ticket-x:focus-visible { opacity: 1; background: rgba(255, 77, 109, .16); border-color: rgba(255, 77, 109, .5); outline: none; }
.cp-ticket-x:disabled { opacity: .3; cursor: wait; }
.cp-herramientas { display: flex; align-items: center; justify-content: flex-end; gap: .8rem; flex-wrap: wrap; margin: -.3rem 0 .9rem; }
.cp-herramientas__nota { color: var(--muted); font-size: .8rem; }
.cp-herramientas__grupo { display: inline-flex; align-items: center; gap: .8rem; flex-wrap: wrap; justify-content: flex-end; }
.cp-btn-vaciar { flex: none; white-space: nowrap; padding: .55rem .9rem; font-size: .85rem; }
.cp-btn-vaciar:disabled { opacity: .45; cursor: not-allowed; }
.cp-comprobante { position: relative; display: block; width: 100%; padding: 0; background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; cursor: zoom-in; }
.cp-comprobante img { display: block; width: 100%; max-height: 420px; object-fit: contain; }
.cp-comprobante span { position: absolute; right: .6rem; bottom: .6rem; padding: .3rem .7rem; font-size: .78rem; font-weight: 700; color: #fff; background: rgba(3, 11, 36, .8); border-radius: 999px; }
.cp-sin-comp { padding: 1rem; text-align: center; color: #ffcf8a; border: 1px dashed rgba(255, 207, 90, .5); border-radius: 12px; }
.cp-motivo { margin-bottom: 1rem; padding: .8rem 1rem; border-radius: 12px; background: rgba(255, 77, 109, .12); border: 1px solid rgba(255, 77, 109, .45); }
.cp-motivo p { margin-top: .3rem; white-space: pre-line; }

/* Visor a pantalla completa */
.cp-visor { position: fixed; inset: 0; z-index: 120; background: rgba(1, 4, 14, .94); display: flex; flex-direction: column; }
.cp-visor[hidden] { display: none; }
.cp-visor__x { position: absolute; top: .8rem; right: 1rem; z-index: 2; width: 44px; height: 44px; font-size: 1.8rem; color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid var(--border); border-radius: 50%; }
.cp-visor__barra { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .8rem; }
.cp-visor__barra span { min-width: 56px; text-align: center; font-weight: 700; }
.cp-visor__lienzo { flex: 1; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 1rem; }
.cp-visor__lienzo img { width: 100%; max-width: none; min-width: 0; height: auto; background: #fff; border-radius: 8px; cursor: zoom-in; }

@media (max-width: 700px) {
    .cp-busqueda { flex-direction: column; max-width: none; }
}

/* Comprobantes · formulario "Cambiar decisión" (APROBADO / ANULADO) */
.cp-cambiar { display: grid; gap: .6rem; }
.cp-cambiar [hidden] { display: none; }
.cp-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cp-opcion { position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem .6rem;
    border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; font-weight: 800; letter-spacing: .04em; transition: border-color .15s, background .15s; }
.cp-opcion input { accent-color: currentColor; }
.cp-opcion--aprobada { color: #8bf6bd; }
.cp-opcion--anulada { color: #ffb4c0; }
.cp-opcion:has(input:checked).cp-opcion--aprobada { border-color: #19c37d; background: rgba(25, 195, 125, .14); }
.cp-opcion:has(input:checked).cp-opcion--anulada { border-color: #ff4d6d; background: rgba(255, 77, 109, .14); }
.cp-opcion.is-actual::after { content: "actual"; position: absolute; top: -.55rem; right: .6rem; padding: 0 .4rem; font-size: .62rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: #0b1a47; border-radius: 6px; }
.cp-cambiar__nota { margin: 0; font-size: .82rem; color: var(--muted); }
#btnCambiarGuardar:disabled { opacity: .45; cursor: not-allowed; animation: none; }

/* ==========================================================================
   [PARTICIPANTES] Participantes, ruleta, configuración de ganadores, ganadores e historial
   (admin/view/participantes.php · assets/js/admin-participantes.js)
   ========================================================================== */
.pt-panel[hidden], .pt-sorteo[hidden] { display: none; }
.pt-h2 { font-size: 1rem; font-weight: 800; margin-bottom: .8rem; }
.pt-h3 { font-size: .9rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sky); margin: 1.2rem 0 .7rem; }
.pt-sub { font-size: .8rem; font-weight: 500; color: var(--muted); }
.admin-topbar__actions .btn.is-active { background: var(--grad-btn); color: #fff; border-color: transparent; }

/* Barra del sorteo elegido */
.pt-sorteo { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem .8rem; margin-bottom: 1rem; }
.pt-sorteo select { flex: 0 1 460px; min-width: 220px; padding: .6rem .8rem; font-size: .9rem; }
.pt-sorteo__info { color: var(--muted); font-size: .84rem; }
.pt-tabs { margin-bottom: 1.1rem; }

/* Resumen y filtros de participantes */
.pt-resumen { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.pt-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; font-size: .82rem; color: var(--muted); background: rgba(255, 255, 255, .06); border: 1px solid var(--border); border-radius: 999px; }
.pt-chip b { color: #fff; font-family: var(--font-num); font-size: .85rem; }
.pt-chip--aviso { color: #ffe08a; border-color: rgba(255, 200, 87, .5); background: rgba(255, 200, 87, .1); }
.pt-chip--aviso b { color: #ffe08a; }
.pt-filtros { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(220px, 2fr) minmax(150px, 1fr); gap: .6rem; margin-bottom: .9rem; }
.pt-filtros .input { padding: .6rem .8rem; font-size: .88rem; }
.pt-tabla td { vertical-align: top; }
.pt-tabla .pt-col-nombre { white-space: normal; min-width: 140px; max-width: 220px; overflow-wrap: anywhere; }
.pt-tabla .cp-col-premio { width: 200px; min-width: 130px; max-width: 200px; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.pt-tabla .cp-col-texto { min-width: 110px; max-width: 190px; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.pt-tabla td small.cp-linea { display: block; color: var(--muted); font-size: .76rem; font-weight: 500; }
.pt-codigo { font-family: var(--font-num); font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: #cfe6ff; white-space: nowrap; }
.badge--participando { color: #cfe6ff; background: rgba(143, 211, 255, .12); border: 1px solid rgba(143, 211, 255, .45); }
.badge--ganador { color: #ffe08a; background: rgba(255, 201, 60, .16); border: 1px solid rgba(255, 201, 60, .6); text-transform: none; }

/* ---------- Ruleta ---------- */
.rl { display: grid; grid-template-columns: 260px minmax(0, 1fr) 260px; gap: 1.2rem; align-items: start; }
.rl-premios, .rl-lado { padding: 1.1rem; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid var(--border); border-radius: 18px; }
.rl-premios__lista { display: grid; gap: .5rem; }
.rl-premio { position: relative; display: grid; gap: .15rem; padding: .7rem .8rem .7rem 2.2rem; border: 1.5px solid var(--border); border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.rl-premio input { position: absolute; left: .8rem; top: .95rem; accent-color: var(--blue-bright); }
.rl-premio:hover { border-color: rgba(143, 211, 255, .5); }
.rl-premio:has(input:checked) { border-color: var(--blue-bright); background: rgba(47, 139, 255, .14); box-shadow: 0 0 18px rgba(47, 139, 255, .25); }
.rl-premio__titulo { font-weight: 700; font-size: .9rem; line-height: 1.3; overflow-wrap: anywhere; }
.rl-premio__meta { font-size: .76rem; color: var(--muted); }
.rl-premio__estado { font-size: .74rem; font-weight: 700; color: var(--sky); }
.rl-premio.is-lleno .rl-premio__estado { color: #8bf6bd; }

.rl-centro { display: grid; justify-items: center; gap: 1rem; }
.rl-rueda { position: relative; width: min(100%, 460px); aspect-ratio: 1; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .5)) drop-shadow(0 0 30px rgba(47, 139, 255, .3)); }
.rl-rueda canvas { width: 100%; height: 100%; display: block; }
.rl-puntero { position: absolute; left: 50%; top: -6px; z-index: 2; width: 0; height: 0; transform: translateX(-50%);
    border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 34px solid #ffc93c; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.rl-eje { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); display: grid; place-items: center; font-size: 1.6rem;
    background: radial-gradient(circle at 35% 30%, #3f8cff, #0a3d99); border: 4px solid #ffc93c; border-radius: 50%; box-shadow: 0 0 20px rgba(255, 201, 60, .5); }
.rl-ticker { width: min(100%, 460px); min-height: 92px; display: grid; place-items: center; align-content: center; gap: .2rem; padding: .8rem 1rem; text-align: center;
    background: rgba(3, 11, 36, .7); border: 1.5px solid rgba(143, 211, 255, .35); border-radius: 18px; }
.rl-ticker__nombre { font-size: 1.25rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.rl-ticker__codigo { font-family: var(--font-num); font-size: 1.05rem; font-weight: 800; letter-spacing: .06em; color: var(--sky); }
.rl-ticker.is-tick { animation: rl-tick .12s ease-out; }
.rl-ticker.is-ganador { border-color: #ffc93c; box-shadow: 0 0 30px rgba(255, 201, 60, .45); }
.rl-ticker.is-ganador .rl-ticker__codigo { color: #ffc93c; }
@keyframes rl-tick { from { transform: scale(1.035); } }
.rl-girar { min-width: 240px; }
.rl-girar:disabled { opacity: .5; cursor: not-allowed; animation: none; transform: none; }
.rl-nota { max-width: 460px; margin: 0; text-align: center; font-size: .82rem; color: var(--muted); }
.rl-cupo { font-size: .85rem; color: var(--muted); margin-bottom: .7rem; }
.rl-cupo b { color: #fff; }
.rl-ganadores { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.rl-ganadores li { display: flex; gap: .6rem; align-items: center; padding: .55rem .7rem; background: rgba(255, 201, 60, .08); border: 1px solid rgba(255, 201, 60, .35); border-radius: 12px; }
.rl-ganadores li span:last-child { display: grid; min-width: 0; }
.rl-ganadores b { font-size: .88rem; overflow-wrap: anywhere; }
.rl-ganadores small { color: var(--muted); font-size: .74rem; }
.rl-g__medalla { font-size: 1.4rem; }
.rl-ganadores li.rl-g--vacio { display: block; color: var(--muted); font-size: .82rem; background: none; border-style: dashed; border-color: var(--border); }
body.rl-girando .pt-tabs, body.rl-girando .admin-topbar__actions, body.rl-girando #ptSorteo, body.rl-girando .rl-premios { pointer-events: none; opacity: .6; }

/* Resultado de la ruleta */
.rl-resultado { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 1rem; background: rgba(2, 8, 26, .78); backdrop-filter: blur(6px); animation: rl-aparece .3s ease both; }
.rl-resultado[hidden] { display: none; }
.rl-confeti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rl-resultado__card { position: relative; width: min(460px, 100%); padding: 2rem 1.6rem 1.5rem; text-align: center; background: linear-gradient(165deg, #10317f, #081a4b);
    border: 2px solid #ffc93c; border-radius: 24px; box-shadow: 0 0 60px rgba(255, 201, 60, .35); animation: rl-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.rl-resultado__puesto { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #ffc93c; font-size: .9rem; }
.rl-resultado__nombre { margin-top: .6rem; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.rl-resultado__codigo { margin-top: .5rem; font-family: var(--font-num); font-size: 1.4rem; font-weight: 800; letter-spacing: .08em; color: var(--sky); }
.rl-resultado__premio { margin-top: .8rem; font-weight: 600; overflow-wrap: anywhere; }
.rl-resultado__nota { margin-top: .4rem; font-size: .8rem; color: var(--muted); }
.rl-resultado__acciones { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.3rem; }
@keyframes rl-aparece { from { opacity: 0; } }
@keyframes rl-pop { from { opacity: 0; transform: scale(.7); } }

/* ---------- Configuración de ganadores ---------- */
.pt-config__fila { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.4fr); gap: 1.2rem; }
.pt-opciones { display: grid; gap: .5rem; }
.pt-opcion { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .8rem; border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; }
.pt-opcion input { margin-top: .25rem; accent-color: var(--blue-bright); }
.pt-opcion span { display: grid; gap: .1rem; }
.pt-opcion b { font-size: .88rem; }
.pt-opcion small { color: var(--muted); font-size: .78rem; }
.pt-opcion:has(input:checked) { border-color: var(--blue-bright); background: rgba(47, 139, 255, .12); }
.pt-config__premios { display: grid; gap: .6rem; }
.pt-cfg-premio { display: grid; grid-template-columns: minmax(0, 1fr) auto 130px; gap: .6rem 1rem; align-items: center; padding: .8rem 1rem; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); border-radius: 14px; }
.pt-cfg-premio__info { display: grid; min-width: 0; }
.pt-cfg-premio__info b { overflow-wrap: anywhere; }
.pt-cfg-premio__info small { color: var(--muted); font-size: .78rem; }
.pt-cfg-premio .segmented span { padding: .45rem .8rem; font-size: .82rem; }
.pt-cfg-cant { display: grid; gap: .2rem; font-size: .74rem; color: var(--muted); }
.pt-cfg-cant .input { padding: .5rem .7rem; }
.pt-cfg-cant .input:disabled { opacity: .5; }
.pt-cfg-premio .field__error { grid-column: 1 / -1; }
.pt-cfg-premio .field__error:empty { display: none; }
.pt-config__suma { margin: .9rem 0 0; font-size: .85rem; color: var(--muted); }
.pt-config__suma b { color: #fff; }
.pt-config__suma.is-error { color: #ffb4c0; }
.pt-config__acciones { display: flex; justify-content: flex-end; margin-top: 1rem; }
.pt-finalizar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pt-finalizar[hidden] { display: none; }
.pt-finalizar h2 { margin-bottom: .2rem; }

/* ---------- Ganadores: ranking 🥇🥈🥉🏅 ---------- */
.gn-ranking { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; }
.gn-puesto { display: grid; justify-items: center; gap: .2rem; padding: 1.1rem .8rem; text-align: center; border-radius: 18px; border: 1.5px solid var(--border); background: rgba(255, 255, 255, .04); }
.gn-puesto__medalla { font-size: 2.3rem; line-height: 1; }
.gn-puesto__lugar { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gn-puesto__nombre { font-weight: 800; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.gn-puesto__codigo { font-family: var(--font-num); font-size: .82rem; font-weight: 700; color: var(--sky); }
.gn-puesto__premio { font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.gn-puesto--1 { border-color: rgba(255, 201, 60, .75); background: linear-gradient(170deg, rgba(255, 201, 60, .18), rgba(255, 201, 60, .03)); box-shadow: 0 0 26px rgba(255, 201, 60, .18); }
.gn-puesto--2 { border-color: rgba(214, 226, 240, .6); background: linear-gradient(170deg, rgba(214, 226, 240, .14), rgba(214, 226, 240, .02)); }
.gn-puesto--3 { border-color: rgba(222, 150, 90, .65); background: linear-gradient(170deg, rgba(222, 150, 90, .16), rgba(222, 150, 90, .02)); }
.gn-puesto.is-vacio { opacity: .55; border-style: dashed; box-shadow: none; }
.gn-puesto.is-vacio .gn-puesto__nombre { font-weight: 600; color: var(--muted); font-size: .88rem; }
.gn-fila--anulada td { opacity: .55; }
.gn-fila--anulada td:nth-last-child(2) { opacity: 1; }
.gn-motivo { white-space: normal; max-width: 220px; }
.gn-anular { display: grid; gap: .5rem; margin-top: 1rem; padding: 1rem; border: 1px solid rgba(255, 77, 109, .45); border-radius: 14px; background: rgba(255, 77, 109, .06); }
.gn-anular[hidden] { display: none; }

/* ---------- Historial de sorteos ---------- */
.hs { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.hs-meses { position: sticky; top: 1rem; padding: 1.1rem; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: 1px solid var(--border); border-radius: 18px; }
.hs-meses__lista { display: grid; gap: .4rem; }
.hs-mes { display: grid; gap: .1rem; padding: .65rem .85rem; text-align: left; color: var(--text); background: rgba(255, 255, 255, .04); border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; font: inherit; }
.hs-mes small { color: var(--muted); font-size: .75rem; }
.hs-mes:hover { border-color: rgba(143, 211, 255, .5); }
.hs-mes.is-active { border-color: var(--blue-bright); background: rgba(47, 139, 255, .16); }
.hs-contenido { display: grid; gap: 1rem; min-width: 0; }
.hs-sorteo__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .6rem; }
.hs-sorteo__head h2 { margin-bottom: .2rem; }
.hs-premios { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.hs-premios li { display: grid; gap: .3rem; padding: .7rem .9rem; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); border-radius: 12px; }
.hs-premio__titulo { font-weight: 700; overflow-wrap: anywhere; }
.hs-premio__titulo small { font-weight: 500; color: var(--muted); }
.hs-ganador { font-size: .85rem; overflow-wrap: anywhere; }
.hs-ganador--vacio { color: var(--muted); }
.hs-participantes { margin-top: .8rem; }
.hs-participantes summary { cursor: pointer; font-weight: 700; color: var(--sky); padding: .4rem 0; }
.hs-codigos { white-space: normal; }
.hs-codigos .pt-codigo { display: inline-block; margin: 0 .35rem .25rem 0; }

@media (max-width: 1180px) {
    .rl { grid-template-columns: 1fr; }
    .rl-premios__lista { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}
@media (max-width: 860px) {
    .pt-filtros, .pt-config__fila, .hs { grid-template-columns: 1fr; }
    .hs-meses { position: static; }
    .hs-meses__lista { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
    .pt-cfg-premio { grid-template-columns: 1fr; }
    .admin-topbar__actions .btn { padding: .5rem .7rem; font-size: .8rem; }
}
@media (max-width: 560px) {
    .admin-topbar { flex-wrap: wrap; gap: .6rem; height: auto; padding-top: .7rem; padding-bottom: .7rem; }
    .admin-topbar__actions { width: 100%; gap: .5rem; }
    .admin-topbar__actions .btn { flex: 1; white-space: nowrap; justify-content: center; }
}
/* Participantes: estado editable de un ganador (Ganador -> Participando) y acciones en Ganadores */
.pt-estado-sel { width: auto; min-width: 160px; padding: .35rem .6rem; font-size: .8rem; font-weight: 700; color: #ffe08a; border-color: rgba(255, 201, 60, .6); background-color: rgba(255, 201, 60, .1); }
.gn-acciones { display: flex; gap: .4rem; flex-wrap: wrap; }
.gn-fila--anulada td.gn-acciones { opacity: 1; }

/* ==========================================================================
   [PERMISOS] Elementos sin permiso (data-permiso, ver assets/js/admin.js [7]),
   página "Acceso denegado" y rol en el pie del menú
   ========================================================================== */
.sin-permiso { display: none !important; }
.acceso-denegado { text-align: center; }
.acceso-denegado__icono { font-size: 3rem; margin-bottom: .6rem; }
.acceso-denegado h1 { margin-bottom: .2rem; }
.admin-sidebar__rol { display: block; font-size: .72rem; font-weight: 500; color: var(--muted); }

/* ==========================================================================
   [ADMINISTRADORES] Usuarios, permisos y auditoría (admin/view/administradores.php)
   ========================================================================== */
.ad-aviso { margin: 0 0 1rem; padding: .7rem 1rem; font-size: .88rem; color: #ffe08a; background: rgba(255, 201, 60, .1); border: 1px solid rgba(255, 201, 60, .45); border-radius: 12px; }
.ad-rol { text-transform: none; }
.ad-rol--superadmin { color: #ffe08a; background: rgba(255, 201, 60, .16); border: 1px solid rgba(255, 201, 60, .6); }
.ad-rol--admin { color: #cfe6ff; background: rgba(143, 211, 255, .12); border: 1px solid rgba(143, 211, 255, .45); }
.ad-rol--operador { color: #d9c8ff; background: rgba(160, 120, 255, .14); border: 1px solid rgba(160, 120, 255, .5); }
.ad-estado { font-size: .82rem; font-weight: 700; white-space: nowrap; }
.ad-estado--on { color: #8bf6bd; }
.ad-estado--off { color: #ffb4c0; }
.ad-fila--inactiva td:not(:last-child) { opacity: .6; }
.ad-tabla td.ad-col-modulos { white-space: normal; min-width: 150px; max-width: 240px; }
.ad-tabla td .gn-acciones { min-width: 160px; max-width: 220px; }
.ad-tabla td .gn-acciones .btn { padding: .35rem .7rem; font-size: .78rem; }
.ad-chip { display: inline-block; margin: 0 .25rem .25rem 0; padding: .12rem .5rem; font-size: .72rem; font-weight: 600; color: #cfe6ff; background: rgba(255, 255, 255, .06); border: 1px solid var(--border); border-radius: 999px; }
.ad-chip--total { color: #ffe08a; border-color: rgba(255, 201, 60, .6); }
.ad-chip--vacio { color: var(--muted); border-style: dashed; }
.ad-chip--mas { color: var(--sky); }
.ad-tabla td.cp-col-texto { max-width: 170px; }
.ad-tabla td.ad-col-rol { white-space: normal; max-width: 130px; }
.ad-tabla td.ad-col-rol .badge { white-space: normal; line-height: 1.3; }

.ad-drawer .cp-drawer__panel { width: min(760px, 100%); }
.ad-drawer--chico .cp-drawer__panel { width: min(460px, 100%); }
.ad-form { display: block; }
.ad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1rem; }
.ad-grid .field[hidden] { display: none; }
.ad-pass { display: flex; gap: .4rem; align-items: center; }
.ad-pass .input { flex: 1; min-width: 0; }
.ad-switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 700; padding: .55rem 0; }
.ad-switch input { width: 18px; height: 18px; accent-color: #19c37d; }

.ad-permisos__head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.ad-permisos__head .pt-h3 { margin-bottom: .4rem; }
.ad-permisos__botones { display: flex; gap: .4rem; flex-wrap: wrap; }
.ad-permisos__botones[hidden] { display: none; }
#adPermisosZona[hidden], .ad-total[hidden] { display: none; }
.ad-modulos { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .6rem; }
.ad-modulo { margin: 0; min-width: 0; padding: .4rem .9rem .8rem; border: 1.5px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, .03); transition: border-color .15s, background .15s; }
.ad-modulo.is-on { border-color: rgba(47, 139, 255, .65); background: rgba(47, 139, 255, .08); }
.ad-modulo legend { padding: 0 .3rem; }
.ad-modulo__acceso { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; cursor: pointer; }
.ad-modulo__acceso input, .ad-accion input { width: 16px; height: 16px; accent-color: var(--blue-bright); flex: none; }
.ad-acciones { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .3rem; }
.ad-accion { display: flex; align-items: flex-start; gap: .5rem; font-size: .82rem; cursor: pointer; line-height: 1.35; }
.ad-accion input { margin-top: .1rem; }
.ad-accion:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.ad-accion--ver { opacity: .85 !important; font-weight: 600; }
.ad-nota { font-size: .74rem; color: var(--muted); padding-left: 1.5rem; }
.ad-resumen { margin: .8rem 0 0; font-size: .85rem; color: var(--sky); }
.ad-total { margin-top: 1rem; padding: .9rem 1rem; border-radius: 14px; color: #ffe08a; background: rgba(255, 201, 60, .1); border: 1px solid rgba(255, 201, 60, .5); font-size: .88rem; }

.ad-filtros { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(150px, 1fr) minmax(200px, 2fr) 150px 150px; gap: .6rem; margin-bottom: .9rem; }
.ad-filtros .input { padding: .55rem .7rem; font-size: .86rem; }
.ad-accion-log { font-weight: 700; font-size: .82rem; white-space: nowrap; }
.pt-tabla td.ad-col-detalle { white-space: normal; min-width: 240px; max-width: 460px; overflow-wrap: anywhere; font-size: .84rem; }
@media (max-width: 900px) {
    .ad-grid, .ad-modulos, .ad-filtros { grid-template-columns: 1fr; }
}

/* Login: aviso de sesión cerrada por inactividad · Mi cuenta en el pie del menú */
.login-aviso { margin: -.6rem 0 1.2rem; padding: .6rem .8rem; font-size: .85rem; color: #ffe08a; background: rgba(255, 201, 60, .1); border: 1px solid rgba(255, 201, 60, .45); border-radius: 12px; }
a.admin-sidebar__admin { border-radius: 12px; padding: .45rem .4rem; transition: background .2s ease; }
a.admin-sidebar__admin:hover, a.admin-sidebar__admin.is-active { background: var(--glass); }
.ad-bloqueado { color: #ffb4c0 !important; font-weight: 700; }

/* ==========================================================================
   [CONFIGURACIÓN] admin/view/configuracion.php (.cfg-*)
   ========================================================================== */
.cfg { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.3rem; align-items: start; }
.cfg-nav { position: sticky; top: 90px; display: grid; gap: .3rem; padding: .6rem; background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid var(--border); border-radius: var(--radius); }
.cfg-nav__item { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; width: 100%; padding: .65rem .8rem; text-align: left; font: inherit; font-weight: 600; font-size: .9rem; color: var(--muted); background: none; border: 0; border-radius: 12px; cursor: pointer; transition: background .2s, color .2s; }
.cfg-nav__item:hover { background: var(--glass); color: #fff; }
.cfg-nav__item.is-active { color: #fff; background: var(--grad-btn); }
.cfg-nav__item > span:nth-child(2) { flex: 1 1 0; min-width: 0; }   /* el nombre ocupa el resto (no baja de línea bajo el icono) */
.cfg .segmented { flex-wrap: nowrap; gap: .3rem; }   /* Bordes: las 3 opciones en una fila */
.cfg .segmented label { flex: 1 1 auto; }
.cfg .segmented span { padding: .6rem .5rem; font-size: .84rem; }
.cfg-nav__estado { margin-left: auto; font-size: .62rem; letter-spacing: .06em; }
.cfg-nav__estado.is-on { padding: .1rem .45rem; color: #1a1300; background: #ffc93c; border-radius: 999px; }
.cfg-nav__ro { width: 100%; padding-left: 1.7rem; font-size: .7rem; font-weight: 500; opacity: .8; }
.cfg-secciones { min-width: 0; }
.cfg-sec[hidden] { display: none; }
.cfg-sec h2 { font-size: 1.15rem; }
.cfg-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.cfg-pie { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.cfg-pie__estado { color: #8bf6bd; font-weight: 700; font-size: .88rem; }
.cfg-link { margin: -.4rem 0 1rem; font-size: .82rem; }
.cfg-link a, .cfg-sec .tk-note a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; }
.cfg-checks { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; padding: .4rem 0; }
.cfg-restablecer { margin-top: .8rem; }

/* Interruptor (on/off) */
.cfg-switch { display: flex; align-items: flex-start; gap: .8rem; cursor: pointer; padding: .4rem 0; }
.cfg-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cfg-switch__pista { position: relative; flex: none; width: 46px; height: 26px; margin-top: .1rem; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid var(--border); transition: background .2s; }
.cfg-switch__pista::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: transform .2s; }
.cfg-switch input:checked + .cfg-switch__pista { background: #19c37d; border-color: #19c37d; }
.cfg-switch input:checked + .cfg-switch__pista::after { transform: translateX(20px); }
.cfg-switch input:focus-visible + .cfg-switch__pista { outline: 2px solid var(--sky); outline-offset: 2px; }
.cfg-switch input:disabled + .cfg-switch__pista { opacity: .5; }
.cfg-switch__texto { display: grid; gap: .15rem; }
.cfg-switch__texto small { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.cfg-opcion { padding: 1rem 1.1rem; margin-bottom: .8rem; border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, .03); }
.cfg-opcion:has(.cfg-switch input:checked) { border-color: rgba(25, 195, 125, .55); background: rgba(25, 195, 125, .06); }
.cfg-opcion__params { margin: .6rem 0 0 3.6rem; }
.cfg-opcion:not(:has(.cfg-switch input:checked)) .cfg-opcion__params { opacity: .5; }
.cfg-mant { padding: 1rem 1.1rem; margin-bottom: 1rem; border-radius: 14px; border: 1px solid var(--border); }
.cfg-mant:has(input:checked) { border-color: rgba(255, 201, 60, .7); background: rgba(255, 201, 60, .08); }

/* Apariencia: temas, colores y muestra */
.cfg-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; margin: .5rem 0 1.2rem; }
.cfg-tema { position: relative; display: grid; gap: .45rem; padding: .55rem; border: 1.5px solid var(--border); border-radius: 14px; cursor: pointer; transition: border-color .2s, transform .2s; }
.cfg-tema input { position: absolute; opacity: 0; }
.cfg-tema:hover { transform: translateY(-2px); }
.cfg-tema:has(input:checked) { border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(var(--blue-bright-rgb), .3); }
.cfg-tema__muestra { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 5px; height: 54px; padding: 7px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1); }
.cfg-tema__muestra i { border-radius: 6px; }
.cfg-tema__nombre { font-size: .82rem; font-weight: 700; text-align: center; }
.cfg-personalizado { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1.2rem; }
.cfg-personalizado[hidden] { display: none; }
.cfg-color { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.cfg-color input { width: 44px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.cfg-color span { display: grid; font-size: .82rem; }
.cfg-color small { color: var(--muted); font-family: monospace; }
.cfg-muestra { display: grid; grid-template-columns: 170px 1fr; gap: 0; margin-top: .4rem; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.cfg-muestra__menu { display: grid; align-content: start; gap: .3rem; padding: .8rem; background: linear-gradient(180deg, var(--pa-sup-2, #071433), var(--bg)); font-size: .78rem; color: var(--muted); }
.cfg-muestra__menu span { padding: .45rem .6rem; border-radius: 10px; }
.cfg-muestra__menu .is-on { color: #fff; background: var(--grad-btn); }
.cfg-muestra__cuerpo { display: grid; gap: .8rem; padding: .9rem; }
.cfg-muestra__botones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* Respaldo */
.cfg-respaldo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.2rem; align-items: start; }
.cfg-respaldo__tabla .admin-table td, .cfg-respaldo__tabla .admin-table th { padding: .35rem .6rem; font-size: .8rem; }

/* Botón Compartir: mensajes (izquierda) + vista previa de la ventana (derecha, fija al hacer scroll) */
.cfg-compartir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 1.2rem; align-items: start; }
.cfg-compartir__msjs { min-width: 0; }
.cfg-msj .field__label { display: block; }
.cfg-msj__ayuda { display: block; margin: -.2rem 0 .5rem; }
.cfg-msj__datos { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.cfg-dato { padding: .25rem .6rem; font: 600 .76rem/1.3 monospace; color: var(--sky); background: rgba(var(--sky-rgb), .1); border: 1px solid rgba(var(--sky-rgb), .35); border-radius: 999px; cursor: pointer; }
.cfg-dato:hover, .cfg-dato:focus-visible { background: rgba(var(--sky-rgb), .22); }
.cfg-msj__area { width: 100%; min-height: 180px; resize: vertical; line-height: 1.5; }
.cfg-msj__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .5rem; }
.cfg-msj__cuenta { color: var(--muted); font-size: .8rem; }
.cfg-msj__cuenta.is-error { color: #ff8a8a; }
.cfg-compartir__prev { position: sticky; top: 1rem; display: grid; gap: .6rem; min-width: 0; }
.cfg-compartir__tabs { margin: 0; }
.cfg-compartir__panel { width: 100%; max-height: none; padding: 1.3rem 1.1rem 1.1rem; animation: none; }
.cfg-compartir__panel .share__titulo { padding-right: 0; font-size: 1.1rem; }
.cfg-compartir__panel .share__redes { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.cfg-compartir__panel .share__red { pointer-events: none; font-size: .84rem; min-height: 42px; }
.cfg-compartir__vacio { padding: .7rem; color: #ffcf7a; font-size: .84rem; text-align: center; border: 1px dashed rgba(255, 201, 60, .5); border-radius: 12px; }
.cfg-compartir__boton { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; font-weight: 700; color: #fff; background: var(--grad-btn); border-radius: 999px; }
#sec-compartir.is-off .cfg-compartir__panel { opacity: .45; filter: grayscale(.6); }
@media (max-width: 1200px) {
    .cfg-compartir { grid-template-columns: minmax(0, 1fr); }
    .cfg-compartir__prev { position: static; }
}

@media (max-width: 960px) {
    .cfg, .cfg-respaldo { grid-template-columns: 1fr; }
    .cfg-nav { position: static; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
@media (max-width: 640px) {
    .cfg-fila, .cfg-personalizado, .cfg-muestra { grid-template-columns: 1fr; }
    .cfg-opcion__params { margin-left: 0; }
}
.cuenta { display: grid; gap: 1.2rem; max-width: 860px; }

/* ==========================================================================
   [PROGRAMACIÓN DE SORTEOS] Editor (pestaña General) y listado de Sorteos
   Estados calculados: Programado / Activo / Finalizado / Retirado (config/Programacion.php)
   ========================================================================== */
.fase { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .65rem; font-size: .74rem; font-weight: 700; letter-spacing: .02em; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.fase::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fase--activo { color: #4ade80; background: rgba(74, 222, 128, .12); border-color: rgba(74, 222, 128, .4); }
.fase--activo::before { box-shadow: 0 0 0 0 rgba(74, 222, 128, .7); animation: fase-pulso 1.8s infinite; }
.fase--programado { color: #7cc4ff; background: rgba(124, 196, 255, .12); border-color: rgba(124, 196, 255, .4); }
.fase--finalizado { color: #ffcf5c; background: rgba(255, 207, 92, .12); border-color: rgba(255, 207, 92, .4); }
.fase--retirado { color: #9aa4b8; background: rgba(154, 164, 184, .12); border-color: rgba(154, 164, 184, .35); }
@keyframes fase-pulso { 70% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
@media (prefers-reduced-motion: reduce) { .fase--activo::before { animation: none; } }

.prog { margin: 0 0 1.2rem; padding: 1rem 1.1rem .4rem; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255, 255, 255, .03); }
.prog__titulo { padding: 0 .4rem; font-weight: 700; font-size: .98rem; }
.prog__ayuda { margin: 0 0 .9rem; }
.prog__fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.prog__estado { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: 0 0 .7rem; font-size: .86rem; color: var(--muted); }
.prog__estado--error { color: #ff8a9d; font-weight: 600; }
@media (max-width: 640px) { .prog__fechas { grid-template-columns: 1fr; } }

.fase-filtros { margin-bottom: 1rem; }
.admin-table .periodo { display: grid; gap: .15rem; font-size: .82rem; white-space: nowrap; }
.admin-table .periodo small { display: inline-block; min-width: 2.6rem; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.admin-table .estado-celda { display: grid; gap: .35rem; justify-items: start; }
.admin-table .estado-celda .select-mini { max-width: 140px; }
.badge--mini { margin-top: .3rem; padding: .1rem .5rem; font-size: .68rem; }
#tablaSorteos .row-actions { flex-direction: column; align-items: stretch; gap: .35rem; }   /* Editar / Eliminar uno sobre otro: la tabla entra sin desplazarse */


/* ==========================================================================
   [RESPONSIVE GENERAL DEL PANEL] — reglas para TODOS los módulos
   Regla fundamental: si una función existe, se puede ver y usar en cualquier pantalla.
   Nada se esconde para ganar espacio: los elementos se reacomodan (pasan a otra fila,
   ocupan todo el ancho o la tabla se desplaza DENTRO de su recuadro, nunca la página).
   Puntos de corte: ≤980 menú móvil (hamburguesa) · ≤640 celular · ≤380 celular chico.
   ========================================================================== */

/* [R1] Ningún contenedor se estira más que la pantalla por culpa de su contenido
   (una tabla ancha, un campo de fecha, un texto largo). Por defecto los elementos de
   grid/flex y los <fieldset> no se encogen por debajo de su contenido; aquí sí pueden. */
.admin-main, .admin-content :is(div, section, article, aside, form, fieldset, header, footer, ul, ol, li, details, label) { min-width: 0; }
fieldset { min-inline-size: 0; }
.admin-content :is(.input, input, select, textarea) { max-width: 100%; min-width: 0; }
.admin-content :is(img, video, canvas, iframe) { max-width: 100%; }
.admin-content :is(h1, h2, h3, p, strong, span, small, code) { overflow-wrap: anywhere; }
.admin-content .btn, .admin-topbar .btn { overflow-wrap: normal; }

/* [R2] Encabezado de cada módulo: título + botones. Si no entran en una fila, los
   botones bajan a la siguiente; en celular ocupan el ancho y se reparten en filas. */
.admin-topbar { flex-wrap: wrap; row-gap: .7rem; }
.admin-topbar__left { flex: 1 1 auto; min-width: 0; }
.admin-topbar h1 { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.admin-topbar__actions { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; min-width: 0; }
.admin-topbar__actions > * { flex: 0 0 auto; }
@media (max-width: 640px) {
    .admin-topbar { padding: .8rem 1rem; }
    .admin-topbar h1 { font-size: 1.1rem; }
    .admin-topbar__actions { flex: 1 1 100%; justify-content: stretch; }
    .admin-topbar__actions > .btn, .admin-topbar__actions > a, .admin-topbar__actions > button { flex: 1 1 auto; justify-content: center; text-align: center; white-space: normal; }
}

/* [R3] Filas de botones y acciones: siempre pueden pasar a otra fila. */
.row-actions, .mt-submit, .cfg-pie, .ad-acciones, .pt-acciones, .gn-acciones, .cp-acciones, .pe-acciones, .segmented { flex-wrap: wrap; }
.premio-card { flex-wrap: wrap; }
.premio-card .row-actions { margin-left: auto; }
@media (max-width: 640px) {
    .row-actions { width: 100%; }
    .row-actions > .btn { flex: 1 1 auto; justify-content: center; }
    .mt-submit .btn, .cfg-pie .btn, .cp-drawer__foot .btn { width: 100%; justify-content: center; }
    .admin-content .admin-panel-card { padding: 1.1rem; }
}

/* [R4] Tablas: si tienen muchas columnas se desplazan DENTRO de su recuadro (nunca la
   página). Si la tabla NO CABE en su espacio (celular, tablet o laptop chica, sin importar el
   modelo), cada fila se muestra como TARJETA con el nombre de cada dato: assets/js/admin.js
   pone data-label a cada celda y la clase .modo-tarjeta cuando hace falta. */
.tabla-scroll { overflow-x: auto; }
.admin-content div[style*="overflow-x"], .tabla-scroll { max-width: 100%; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
/* (sin @media: depende de si la tabla cabe, no del modelo del dispositivo) */
.admin-table.tabla-tarjetas.modo-tarjeta { min-width: 0 !important; width: 100%; }
.admin-table.tabla-tarjetas.modo-tarjeta thead { display: none; }
.admin-table.tabla-tarjetas.modo-tarjeta, .admin-table.tabla-tarjetas.modo-tarjeta tbody { display: block; }
.admin-table.tabla-tarjetas.modo-tarjeta tr { display: grid; gap: .45rem; padding: .85rem .95rem; margin-bottom: .7rem; border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, .03); }
/* Cada celda: el título de la columna a la izquierda (fijo) y su contenido a la derecha,
   que fluye normal aunque tenga varias partes (ej. "DNI" + número, código + estado). */
.admin-table.tabla-tarjetas.modo-tarjeta td { display: block; position: relative; min-height: 1.4rem; padding: 0 0 0 calc(36% + .6rem); border: 0; white-space: normal; max-width: none; width: auto; text-align: left; overflow-wrap: anywhere; }
.admin-table.tabla-tarjetas.modo-tarjeta td::before { content: attr(data-label); position: absolute; left: 0; top: .1rem; width: 36%; font-size: .68rem; font-weight: 700; letter-spacing: .05em; line-height: 1.35; text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere; }
.admin-table.tabla-tarjetas.modo-tarjeta td:not([data-label])::before, .admin-table.tabla-tarjetas.modo-tarjeta td[data-label=""]::before { display: none; }
.admin-table.tabla-tarjetas.modo-tarjeta td:not([data-label]), .admin-table.tabla-tarjetas.modo-tarjeta td[data-label=""], .admin-table.tabla-tarjetas.modo-tarjeta td[colspan] { padding-left: 0; }
.admin-table.tabla-tarjetas.modo-tarjeta td :is(.periodo, .estado-celda) { white-space: normal; min-width: 0; }
.admin-table.tabla-tarjetas.modo-tarjeta td :is(select, .select-mini, .input) { max-width: 100%; width: 100%; }
.admin-table.tabla-tarjetas.modo-tarjeta td .row-actions > .btn { flex: 1 1 auto; }
.admin-table.tabla-tarjetas.modo-tarjeta td .row-actions { width: 100%; }
.admin-table.tabla-tarjetas.modo-tarjeta td.estado-celda, .admin-table.tabla-tarjetas.modo-tarjeta td .estado-celda { justify-items: start; }
.admin-table.tabla-tarjetas.modo-tarjeta tr:hover td { background: none; }
/* En pantallas anchas las tarjetas se ordenan en 2 columnas para aprovechar el espacio */
@media (min-width: 900px) {
    .admin-table.tabla-tarjetas.modo-tarjeta tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: .8rem; }
    .admin-table.tabla-tarjetas.modo-tarjeta tr { margin-bottom: 0; }
}

/* [R5] Menú lateral: en escritorio y tablet se puede COLAPSAR a solo íconos (botón « del
   menú); en ≤980 es un menú móvil (botón ☰). Usuario, Mi cuenta y Cerrar sesión siempre
   quedan al pie del menú, que tiene su propio desplazamiento si la pantalla es baja. */
.admin-sidebar { overscroll-behavior: contain; }
.admin-sidebar__brand { position: relative; padding-right: 2.6rem; }
.admin-sidebar__colapsar {
    position: absolute; right: 0; top: .2rem; width: 32px; height: 32px; display: grid; place-items: center;
    color: var(--muted); background: var(--glass); border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
}
.admin-sidebar__colapsar:hover { color: #fff; }
.admin-sidebar__colapsar svg { transition: transform .2s ease; }
.admin-sidebar__foot { flex: none; }
.admin-sidebar__admin > span:last-child { min-width: 0; display: grid; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.admin-sidebar__rol { display: block; font-size: .72rem; font-weight: 500; color: var(--muted); white-space: normal; line-height: 1.3; }
@media (min-width: 981px) {
    body.sidebar-colapsado .admin-shell { grid-template-columns: 78px minmax(0, 1fr); }
    body.sidebar-colapsado .admin-sidebar { padding-left: .7rem; padding-right: .7rem; }
    body.sidebar-colapsado .admin-sidebar__brand { flex-direction: column; padding: .2rem 0 1rem; gap: .8rem; }
    body.sidebar-colapsado .admin-sidebar__brand > span,
    body.sidebar-colapsado .admin-nav a > span,
    body.sidebar-colapsado .admin-sidebar__admin > span:last-child,
    body.sidebar-colapsado .admin-logout > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    body.sidebar-colapsado .admin-sidebar__colapsar { position: static; }
    body.sidebar-colapsado .admin-sidebar__colapsar svg { transform: rotate(180deg); }
    body.sidebar-colapsado .admin-nav a, body.sidebar-colapsado .admin-logout, body.sidebar-colapsado .admin-sidebar__admin { justify-content: center; padding-left: 0; padding-right: 0; position: relative; }
    body.sidebar-colapsado .admin-nav__badge { position: absolute; top: 2px; right: 4px; }
}
@media (max-width: 980px) {
    .admin-sidebar { width: min(300px, 86vw); padding-bottom: max(1.4rem, env(safe-area-inset-bottom)); }
    .admin-sidebar__colapsar { display: none; }
    .admin-sidebar.is-open + .admin-main::before { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(1, 6, 20, .55); }
}
@media (max-height: 760px) and (min-width: 981px) {
    .admin-nav a { padding-top: .55rem; padding-bottom: .55rem; }
    .admin-sidebar__brand { padding-bottom: .9rem; }
}

/* [R6] Paneles laterales (detalle de comprobante, usuario...) y vistas de dos columnas. */
@media (max-width: 640px) {
    .cp-drawer__panel { width: 100%; }
    .cp-drawer__head, .cp-drawer__body, .cp-drawer__foot, .cp-anular { padding-left: 1rem; padding-right: 1rem; }
}

/* [R7] Tablas algo más compactas en laptop, y contenido centrado en monitores grandes */
@media (max-width: 1440px) {
    .admin-table th { padding: .55rem .6rem; }
    .admin-table td { padding: .65rem .6rem; }
}
.admin-content { margin-inline: auto; max-width: 1480px; }