/* ── Reset & Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:        #0d1117;
    --surface:   #161b22;
    --surface2:  #1e242d;
    --border:    #30363d;
    --text:      #e6edf3;
    --text-muted:#8b949e;
    --accent:    #ff0055;
    --accent2:   #ff6600;
    --radius:    10px;
    --search-h:  56px;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
}

/* ── Layout principal: dos columnas (como el YGO viejo) ───────────────── */
.app {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: row;
    padding: 20px;
    gap: 20px;
}

/* Columna izquierda: el video (tarjeta 16/9) arriba y, en modo web, los
   controles de reproducción justo debajo. */
.player-col {
    position: relative;
    z-index: 200;
    flex: 0 0 60%;
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    transition: flex 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Controles de reproducción (sobre el video, abajo al centro) ───────── */
.pc-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 2px 0 2px;
}
.pc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    opacity: .78;
    transition: opacity .15s, transform .1s, background .15s;
}
.pc-btn { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.pc-btn:hover  { opacity: 1; background: rgba(255,255,255,.14); }
.pc-btn:active { transform: scale(.9); }
.pc-btn svg    { width: 26px; height: 26px; }
/* Play/pausa al centro, más grande */
.pc-play       { width: 58px; height: 58px; opacity: 1; }
.pc-play svg   { width: 38px; height: 38px; }

/* Contenedor del video = tarjeta 16/9 con esquinas redondeadas y sombra
   (equivale a .video-container del YGO viejo). */
.player-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Dos capas wrapper superpuestas para el crossfade. El iframe de YouTube
   vive DENTRO de cada wrapper; así las clases CSS nunca se pierden cuando
   YT.Player reemplaza el div interno por un iframe. */
/* La capa inactiva va con display:none (igual que #live-video-b del YGO viejo).
   Dos iframes de YouTube visibles a la vez hacen que el navegador bloquee el
   autoplay. Durante el crossfade el JS la muestra temporalmente. */
.yt-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 0;
    display: none;
    /* transition se inyecta por JS solo durante crossfade */
}
.yt-layer.active,
.yt-layer.fading {
    display: block;
}
.yt-layer.active {
    opacity: 1;
    z-index: 1;
}
/* El preview se monta ENCIMA del video actual, que queda pausado debajo. */
.yt-layer.preview.active { z-index: 3; }

/* ── Interfaz propia del reproductor ───────────────────────────────────── */
/* El video queda LIMPIO: encima solo el escudo (que tapa la interfaz de
   YouTube y recoge el toque) y el tirador que abre los controles. */
.pv-shield {
    position: absolute;
    inset: 0;
    z-index: 5;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* En pausa se ve el fotograma real. Lo único que hay que cubrir es el botón de
   play que YouTube pinta en el centro; el nuestro va encima, opaco. El mínimo en
   píxeles no es decorativo: en un player pequeño un 16% no alcanza a taparlo. */
.pv-pausebtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    width: clamp(88px, 16%, 170px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(0, 0, 0, .62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;   /* el toque lo recoge el escudo */
}
.pv-pausebtn {
    border: none;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;          /* es el único punto que pausa */
    opacity: .34;                  /* discreto mientras el video corre */
    transition: opacity .2s, transform .1s;
}
.pv-pausebtn.paused { opacity: 1; }
.pv-pausebtn:active { transform: translate(-50%, -50%) scale(.94); }
.pv-pausebtn[hidden] { display: none; }

/* Volumen, subtítulos y ajustes, arriba a la derecha del video. */
.pv-quick {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
    display: flex;
    gap: 6px;
}
.pv-qbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(13, 17, 23, .62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    cursor: pointer;
}
.pv-qbtn svg { width: 18px; height: 18px; fill: currentColor; }
.pv-qbtn:active { transform: scale(.92); }
.pv-pausebtn::before {
    content: '';
    width: 32%;
    height: 38%;
    margin-left: 8%;
    background: #fff;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Panel de detalles del video (Modo Web: ocupa el 100% del contenedor del feed) */
.pv-panel {
    position: absolute;
    inset: 0;
    z-index: 50;
    width: 100%;
    padding: 16px 18px 20px;
    border-radius: 0 0 20px 20px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    animation: pvPanelIn .18s ease-out;
}
.pv-panel[hidden] { display: none !important; }
.sidebar-col:has(#pvPanel:not([hidden])) .search-bar {
    transition: none !important;
    transform: none !important;
    margin-top: 0 !important;
    opacity: 1 !important;
}

/* La ficha ocupa el feed entero: 70 % de información (con scroll propio) y
   30 % de controles anclados abajo. overflow:hidden en el panel es obligatorio
   para que el flex distribuya el espacio en vez de dejar que el panel crezca. */
#pvPaneNow {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
#pvPaneNow .pvp-info {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}
.pvp-controls {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.pvpc-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 6px;
}
.pvpc-row-sec .pc-btn { width: 36px; height: 36px; opacity: .72; }
.pvpc-row-sec .pc-btn svg { width: 20px; height: 20px; }
@keyframes pvPanelIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ── Barra de controles (debajo del video) ────────────────────────────── */
.player-bar {
    width: 100%;
    margin-top: 10px;
    padding: 8px 14px 6px;
    background: rgba(18, 22, 28, .85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
}

@media (min-width: 769px) {
    /* La cola se abre desde el menú; en web sobra en la fila de controles. */
    #pcQueue { display: none; }
    /* El mute abre la fila por la izquierda (la fila es flex: basta con order). */
    #pcMute { order: -1; }
    .pvp-controls { display: none; }
    .pc-btn.pc-seek { width: 36px; height: 36px; opacity: .72; }
}

/* Fila de saltos rápidos de tiempo (10s y 5s) */
.pc-jumps-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
    box-sizing: border-box;
}

.pc-jump-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    min-height: 32px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    transition: background .15s, transform .1s, border-color .15s, color .15s;
}
.pc-jump-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.3);
}
.pc-jump-btn:active {
    background: rgba(255, 0, 85, 0.25);
    border-color: var(--accent);
    transform: scale(0.95);
}
.pc-jump-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: currentColor;
}
.pc-jump-btn.pc-jump-details {
    display: none; /* En escritorio ya existe el botón de detalles en pcMainRow */
}

/* Barra de reproducción (toque o arrastre para saltar) */
.pvp-seek {
    position: relative;
    height: 26px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;   /* el arrastre mueve el tiempo, no la página */
}
.pv-bar {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,.22);
    overflow: hidden;
}
.pv-bar-fill { height: 100%; width: 0; background: var(--accent); border-radius: 2px; }
.pv-dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: 11px;
    height: 11px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--accent);
    transform: translateY(-50%);
}
.pv-times {
    display: flex;
    justify-content: space-between;
    margin: 2px 0 6px;
    color: var(--text-muted);
    font-size: 11px;
}

/* Ficha del video */
.pvp-info {
    border-top: none;
    margin-top: 0;
    padding-top: 2px;
}
.pvp-title {
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}
.pvp-channel {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s;
    display: inline-block;
}
.pvp-channel:hover {
    color: var(--accent);
    text-decoration: underline;
}
.pvp-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 12px;
}
.pvp-desc {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pvp-desc.open { -webkit-line-clamp: unset; display: block; }
.pvp-more {
    margin-top: 6px;
    padding: 0;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.pvp-more[hidden] { display: none; }

.pvp-pane[hidden] { display: none; }
.pvp-pane { min-height: 34px; }
/* En la pestaña del video la ficha va primero y los controles debajo. */
#pvPaneNow .pvp-info { border-top: none; margin-top: 0; padding-top: 0; }
#pvPaneNow .pvp-seek { margin-top: 12px; }

/* ── Pestañas del reproductor (Actual / Preview 1 / Preview 2) ─────────── */
.player-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;   /* el salto a la pestaña activa, sin tirón */
}
.player-tabs[hidden] { display: none; }
.player-tabs::-webkit-scrollbar { display: none; }
/* flex:0 0 auto es lo que hace que la tira tenga scroll: sin esto el flex
   comprime las pestañas en pantalla estrecha, no desborda nada y el nombre del
   canal se queda en dos letras en vez de poder desplazarse. */
.ptab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.ptab.active { color: var(--accent); border-color: var(--accent); }
/* Hay canales con nombres larguisimos: la pestana se corta en vez de empujar a
   las demas fuera de la vista. El nombre completo queda en el title. */
.ptab-name {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Parpadeo de la pestaña: tres veces al abrir el preview; sin parar cuando le
   quedan menos de 20 segundos. */
@keyframes ptabBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .22; }
}
.ptab.blink-thrice,
.ptab.blink-forever { color: var(--accent); border-color: var(--accent); }
.ptab.blink-thrice  { animation: ptabBlink .55s ease-in-out 3; }
.ptab.blink-forever { animation: ptabBlink .7s ease-in-out infinite; }
.ptab-x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: inherit;
    opacity: .7;
}
.ptab-x svg { width: 12px; height: 12px; }
.ptab-x:hover { opacity: 1; color: var(--accent); }
/* El iframe se hace tres veces más alto y se centra: YouTube ajusta el video
   16/9 al ancho, así que ocupa justo el tercio central —lo que se ve— mientras
   su título, su logo y sus controles, pegados a los bordes del iframe, quedan
   fuera del recorte. Es la única forma de que el video quede LIMPIO: el embed
   no tiene parámetro para ocultarlos. */
.yt-layer { overflow: hidden; }
.yt-layer > div,
.yt-layer iframe {
    position: absolute;
    inset: 0;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
    border: none;
    pointer-events: none;   /* ningún toque llega al iframe en modo limpio */
}

/* Cuando los controles de YouTube están encendidos, el iframe recibe toques directamente */
.player-wrap.native-controls .yt-layer iframe {
    pointer-events: auto !important;
}
.player-wrap.native-controls .pv-shield {
    pointer-events: none !important;
    display: none !important;
}
.player-wrap.native-controls .pv-pausebtn {
    display: none !important;
}

/* Caja de doblaje y pistas de audio en pestaña Idioma */

.player-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 15px;
    pointer-events: none;
    z-index: 1;
}

/* Ocultar placeholder cuando hay video */
.player-empty.hidden { display: none; }

/* Ocultar reproductor visualmente cuando no está en "Video siempre visible" y se navega a otras apps.
   IMPORTANTE: NO usar display:none porque destruye el layout box (0x0) de los iframes de YouTube
   y bloquea loadVideoById / auto-advance al finalizar un video. Se mantiene dentro del viewport
   con dimensiones 16:9 reales (240x135) detrás de la interfaz y con opacidad 0.001. */
body.hide-player-col .player-col {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 240px !important;
    height: 135px !important;
    flex: 0 0 0px !important;
    opacity: 0.001 !important;
    pointer-events: none !important;
    z-index: -1 !important;
    overflow: hidden !important;
}
body.hide-player-col .player-col .player-bar,
body.hide-player-col .player-col .player-tabs {
    display: none !important;
}
body.hide-player-col .sidebar-col {
    width: 100% !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    height: 100% !important;
}

/* Columna derecha: sidebar */
.sidebar-col {
    position: relative;   /* ancla del + flotante de playlists */
    flex: 1 1 40%;
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    transition: flex 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Barra de búsqueda ────────────────────────────────── */
.search-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    height: var(--search-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 20;   /* el dropdown de sugerencias queda sobre el panel */
}
/* Al bajar por el panel la barra se retira hacia arriba y el contenido ocupa
   su sitio; al subir, vuelve. Curva de iOS (arranca rápido y frena suave).
   Sin will-change ni transform fijo: crearían un contenedor de posicionamiento
   y el desplegable de recientes (position:fixed en teléfono) se descolocaría. */
.search-bar {
    transition: transform .24s cubic-bezier(.2, .8, .2, 1),
                margin-top .24s cubic-bezier(.2, .8, .2, 1),
                opacity .18s ease;
}
.search-bar.tucked {
    transform: translateY(-100%);
    margin-top: calc(var(--search-h) * -1);
    opacity: 0;
    pointer-events: none;
}

/* BLINDAJE ANTI-PARPADEO (Tarea 184): En Calendario, Cuenta y Setting General la barra y subtabs nunca parpadean ni se ocultan */
.app:has(#panelSettingsGeneral.active) .search-bar,
.app:has(#panelSettingsGeneral.active) .search-bar.tucked,
.app:has(#panelSettingsGeneral.active) .search-chips-bar,
.app:has(#panelSettingsGeneral.active) .search-chips-bar.tucked,
#panelSettingsGeneral .subtabs,
#panelSettingsGeneral .subtabs.tucked {
    transform: none !important;
    margin-top: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

/* ── Opción 3: Fila de Chips Rápidos de 1 Toque (Estilo YouTube / Google Maps) ── */
.search-chips-bar {
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    z-index: 15;
    transition: transform .24s cubic-bezier(.2, .8, .2, 1),
                margin-top .24s cubic-bezier(.2, .8, .2, 1),
                opacity .18s ease;
}
.search-chips-bar::-webkit-scrollbar {
    display: none;
}
.search-chips-bar.tucked {
    transform: translateY(-100%);
    margin-top: -48px;
    opacity: 0;
    pointer-events: none;
}

.search-chip {
    position: relative;
    flex: 1 1 0;
    min-width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background .15s, color .15s, border-color .15s, transform .1s, padding .15s, flex .15s;
}
.search-chip:hover {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.2);
}
.search-chip:active {
    transform: scale(0.96);
}
.search-chip.active {
    flex: 0 0 auto;
    padding: 0 14px;
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 0, 85, 0.35);
}
.search-chip svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.search-chip .chip-ico {
    font-size: 13.5px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Regla de Oro: Solo el subtab activo muestra icono + nombre; los demás solo icono */
.search-chip:not(.active) > span.chip-text {
    display: none !important;
}
.search-chip.active > span.chip-text {
    display: inline !important;
}

/* Escribiendo en teléfono: el teclado se come media pantalla y los iconos no
   caben. La barra se queda con el < y el campo, que ocupa el ancho entero. */
/* El media query va aquí y no solo en el JS: al girar a horizontal la clase
   sigue puesta hasta que el campo pierda el foco, y la barra no puede quedarse
   sin iconos en una pantalla donde sí caben. */
#btnSearchBack { display: none; }
@media (max-width: 768px) {
    .search-bar.buscando #btnSearchBack { display: flex; }
    .search-bar.buscando > .btn-app,
    .search-bar.buscando > .btn-folders:not(#btnSearchBack),
    .search-bar.buscando > .btn-settings { display: none; }
    /* T96: los iconos del menú junto al buscador (T94) también se van: el campo se despliega. */
    html.menu-tabs-web .search-bar.buscando #searchChipsBar { display: none !important; }
}

.queue-list { display: flex; flex-direction: column; gap: 4px; }

.search-input-wrap {
    margin: 0;   /* es un <form>: algunos navegadores le dan margen propio */
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrap input {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 64px 8px 38px;
    color: var(--text);
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
}

.search-input-wrap input::placeholder { color: var(--text-muted); }
.search-input-wrap input:focus,
.search-input-wrap input.active       { border-color: var(--accent); }

/* Lupa DENTRO del input, sin color de acento */
.search-icon-btn {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color .15s, background .15s;
}
.search-icon-btn:hover { color: var(--text); background: var(--border); }

.btn-clear {
    position: absolute;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
}
.btn-clear:hover { color: var(--text); }

.search-filter-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color .15s;
}
.search-filter-btn:hover { color: var(--text); }
.search-filter-btn.active { color: var(--accent); }

/* Cuántas búsquedas NUEVAS le quedan hoy a esta sesión. Repetir una que ya se
   hizo no gasta, por eso el número se queda quieto casi siempre. Va fuera del
   campo: dentro se montaba encima de la ✕ de limpiar. */
.quota-pill {
    flex-shrink: 0;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--surface2);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}
.quota-pill.lleno { background: var(--accent); color: #fff; }

/* Botones de la barra (apps / carpetas / settings) */
.btn-app,
.btn-folders,
.btn-settings {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
    background: var(--surface2);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.btn-app:hover,
.btn-folders:hover,
.btn-settings:hover {
    color: var(--text);
    border-color: var(--text-muted);
}
.btn-app.active,
.btn-folders.active,
.btn-settings.active {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(255, 0, 85, 0.12);
    box-shadow: 0 0 8px rgba(255, 0, 85, 0.25);
}

.app-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--text-muted);
}
.app-empty-state p {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}
.app-empty-state small {
    font-size: 13px;
    color: var(--text-muted);
}

/* ── Paneles ──────────────────────────────────────────── */
.panel {
    display: none !important;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    position: relative;
}

.panel.active {
    display: flex !important;
}

/* Paneles con subtabs: el panel contenedor NO scrollea para que la barra de
   subtabs quede fija arriba y cada subtab tenga su scroll propio e independiente. */
.panel.has-subtabs,
.panel:has(.subtabs) {
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}

/* ── Info resultados + spinner ────────────────────────── */
.results-info {
    flex-shrink: 0;
    padding: 8px 12px 4px;
    color: var(--text-muted);
    font-size: 12px;
}
/* Sin aviso que dar no ocupa sitio: el conteo de resultados ya no se pinta. */
.results-info:empty { display: none; }
/* Botón para forzar una búsqueda nueva cuando se muestran resultados guardados */
.refresh-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}
.refresh-btn:hover { filter: brightness(1.15); }
.refreshing { opacity: .75; font-style: italic; }

.loading {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Grid de videos ───────────────────────────────────── */
/* Columnas configurables desde Settings (JS fija --cols según el dispositivo). */
.video-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
    align-content: start;
    grid-auto-rows: max-content;
    /* El anuncio ocupa dos columnas: sin 'dense' deja el hueco de la fila
       anterior vacio. Con dense lo rellena la siguiente tarjeta que quepa. */
    grid-auto-flow: dense;
    gap: 8px;
    padding: 8px 12px 12px;
}

.video-card {
    background: var(--surface2);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    border: 1px solid transparent;
    transition: border-color .15s, transform .1s;
    min-height: 180px;
}

.video-card:hover         { border-color: var(--border); transform: translateY(-1px); }
.video-card.playing       { border-color: var(--accent); }
.video-card.preview-p1    { border-color: rgba(59, 130, 246, .6); }
.video-card.preview-p2    { border-color: rgba(168, 85, 247, .6); }
.video-card.preview-p1.playing-preview { border-color: #3b82f6; }
.video-card.preview-p2.playing-preview { border-color: #a855f7; }
.video-card.unavailable   { opacity: .4; }
.video-card.unavailable::after { content: '⚠ No disponible'; display: block; font-size: 10px; color: var(--accent); padding: 2px 8px 6px; }

.thumb-wrap { position: relative; }

/* ── Barra de progreso y avance en miniatura de tarjeta (T106) ────────── */
.card-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    max-height: 3px;
    background: rgba(255, 255, 255, 0.25);
    z-index: 5;
    pointer-events: none;
    overflow: visible;
}

.card-prog-fill {
    position: relative;
    height: 100%;
    width: 0%;
    background: var(--accent);
    border-radius: 0 1.5px 1.5px 0;
    transition: width .2s linear;
}

.card-prog-dot {
    position: absolute;
    right: -3.5px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
}

.qi-thumbwrap .card-progress {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.video-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    background: #000;
}

/* ── Iconos de esquina sobre la miniatura (feed de búsqueda) ──────────── */
/* Fila de acciones, entre la miniatura y el título. */
.card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 7px 8px 0;
}

.vicon {
    position: static;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(13, 17, 23, .78);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.vicon:hover   { background: var(--accent); transform: scale(1.08); }
.vicon:active  { transform: scale(.94); }
.vicon svg     { width: 14px; height: 14px; }

/* Las clases de esquina solo identifican el botón: ya no lo colocan. */

/* Feedback breve al poner en cola / guardar */
.vicon.flash { background: #2ea043; }

/* ── Botón eliminar (tabs Recientes / Guardados) ──────────────────────── */
.vicon-delete {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(13, 17, 23, .78);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.vicon-delete:hover { background: var(--accent); transform: scale(1.08); }
.vicon-delete svg   { width: 14px; height: 14px; }

.video-info   { padding: 6px 8px 8px; }

.video-title {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 3px;
}

.video-channel {
    display: flex;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: color .15s;
}
.video-channel:hover {
    color: var(--accent);
}
/* Se recorta el canal, nunca la antigüedad. */
.video-channel > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.video-channel > span:first-child:hover { text-decoration: underline; }
.video-channel .vc-ago { flex-shrink: 0; white-space: pre; }

.live-badge {
    display: inline-block;
    background: red;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    margin-bottom: 3px;
    letter-spacing: .5px;
}

/* ── Placeholders de paneles ──────────────────────────── */
.panel-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 14px;
    padding: 40px;
    text-align: center;
}

/* ── Settings: lista de opciones ──────────────────────── */
.settings-list {
    padding: 16px;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
}
.settings-row[hidden],
.settings-divider[hidden] {
    display: none !important;
}

.settings-row-text { flex: 1; min-width: 0; }

.settings-row-title {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 2px;
}

.settings-row-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.settings-divider {
    display: none !important;
}

/* Toggle switch */
.switch {
    position: relative;
    flex-shrink: 0;
    width: 42px;
    height: 24px;
    display: inline-block;
}

.switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    z-index: 2;
}

.switch-slider {
    position: absolute;
    inset: 0;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 24px;
    pointer-events: none;
    transition: background .2s, border-color .2s;
}

.switch-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: transform .2s, background .2s;
}

.switch input:checked + .switch-slider {
    background: var(--accent);
    border-color: var(--accent);
}

.switch input:checked + .switch-slider::before {
    transform: translateX(18px);
    background: #fff;
}

/* Selector de columnas del feed */
.cols-options {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 60%;
}

.cols-btn {
    width: 32px;
    height: 32px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.cols-btn:hover  { color: var(--text); border-color: var(--text-muted); }
.cols-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.cols-btn-pill {
    min-width: 80px;
    width: auto;
    padding: 0 10px;
    height: 30px;
    font-size: 11px;
    font-weight: 600;
}

/* ── Botón Google Sign-In (solo visual, sin lógica aún) ── */
.google-signin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    flex-shrink: 0;
    margin: 0;
    padding: 8px 16px;
    background: #fff;
    color: #3c4043;
    border: 1px solid #dadce0;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: box-shadow .15s, background .15s;
}
.google-signin-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.google-signin-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.google-action-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.sp-pill-locked {
    background: rgba(255, 0, 85, 0.15);
    color: #ff0055;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid rgba(255, 0, 85, 0.3);
    white-space: nowrap;
}

/* ── Sub-tabs (panel Mis Videos: Recientes / Guardados) ───────────────── */
/* Los tabs viajan con la barra de búsqueda: se quedan pegados arriba del panel
   y se retiran y vuelven con ella. Antes bajaban con el contenido, así que tras
   un rato de scroll la barra volvía sola y los tabs se quedaban muy arriba. */
.settings-ver {
    margin: 14px 0 0;
    text-align: center;
    font-size: 11.5px;
    color: var(--text-dim);
    user-select: none;              /* cinco toques, no una seleccion de texto */
    -webkit-user-select: none;
}
.settings-ver span { cursor: default; }

.subtabs {
    display: none !important;
    flex-shrink: 0;
    gap: 8px;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px 8px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
    transition: transform .24s cubic-bezier(.2, .8, .2, 1),
                margin-top .24s cubic-bezier(.2, .8, .2, 1),
                opacity .18s ease;
}
.subtabs::-webkit-scrollbar { display: none; }

.subtabs.tucked {
    transform: translateY(-100%);
    margin-top: calc(var(--subtabs-h, 48px) * -1);
    opacity: 0;
    pointer-events: none;
}

.subtab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 8px 10px;
    border-radius: var(--radius);
    font-size: 12.5px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.subtab:hover  { color: var(--text); }
.subtab.active { flex: 0 0 auto; background: var(--accent); color: #fff; border-color: var(--accent); }
.subtab svg { width: 17px; height: 17px; flex-shrink: 0; }
/* Solo el encendido dice su nombre: así los subtabs caben casi siempre sin deslizar. */
.subtab:not(.active) > span:not(.now-badge) { display: none !important; }
.subtab.active > span:not(.now-badge) { display: inline !important; }

.subtab-content { display: none; }
.subtab-content.active {
    display: grid;
    align-content: start;
    grid-auto-rows: max-content;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
/* El panel de Playlists no es un grid de videos: apila lista + crear, o la
   vista de una playlist (header + grid interno de videos). */
.subtab-content.pl-panel.active {
    display: block;
    padding: 8px 12px 12px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.subtab-content.yt-feed-pane.active {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

/* ── Iconos de borrar en tarjetas (reusa .vicon, hover rojo) ──────────── */
.vicon.danger:hover { background: var(--accent); border-color: var(--accent); }

/* ── Panel de Playlists: lista ────────────────────────────────────────── */
/* Dos playlists por fila, en telefono y en web. */
.pl-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.pl-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    padding: 8px;
    background: var(--surface2);
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s;
}
.pl-row:hover { border-color: var(--border); }
.pl-row-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    flex-shrink: 0;
}
.pl-row-thumb { position: relative; }
.pl-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Play sobre la miniatura: reproduce la playlist entera sin abrirla. */
.pl-row-play {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.pl-row-play svg { width: 18px; height: 18px; margin-left: 1px; }
.pl-row-play:active { transform: scale(.92); }
.pl-row-info { min-width: 0; }
.pl-row-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-row-count { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Crear playlist: + flotante sobre el panel (no scrollea con la lista). */
.pl-fab {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}
.pl-fab[hidden] { display: none; }
.pl-fab svg { width: 26px; height: 26px; }
.pl-fab:active { transform: scale(.94); }

/* Acciones de la playlist abierta: reproducir todo / aleatorio / a la cola. */
.pl-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.pl-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 9px 6px;
    border-radius: var(--radius);
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.pl-action svg { width: 16px; height: 16px; flex-shrink: 0; }
.pl-action.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.pl-action:active { transform: scale(.97); }

/* Vista de una playlist: cabecera con volver + nombre + eliminar */
.pl-view-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.pl-view-name { flex: 1; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-back, .pl-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
}
.pl-back svg { width: 20px; height: 20px; }
.pl-delete svg { width: 16px; height: 16px; }
.pl-delete:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Crear nueva playlist (input inline) — en el panel y en el modal de guardar */
.sp-create { display: flex; gap: 8px; }
.sp-create input {
    flex: 1;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 9px 12px;
    color: var(--text);
    font-size: 14px;
    outline: none;
}
.sp-create input:focus { border-color: var(--accent); }
.sp-create-btn {
    padding: 9px 16px;
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Modal: Guardar en playlist ──────────────────────── */
.sp-hint { color: var(--text-muted); font-size: 13px; margin-bottom: 12px; }
.sp-list { display: flex; flex-direction: column; gap: 2px; }
/* Las dos opciones del modal de guardar: una caja cada una, con su título. */
.sp-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 6px;
    background: rgba(255, 255, 255, .018);
}
.sp-card + .sp-card { margin-top: 12px; }
.sp-card-h {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 7px 10px 8px;
}
/* Cada fila es una acción: sin fondo propio, que ya lo pone la caja. */
.sp-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    background: none;
    border: none;
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background .15s;
}
.sp-row:hover { background: var(--surface2); }
.sp-row:active { background: var(--surface2); }
.sp-row .sp-name { flex: 1; min-width: 0; }
.sp-ico { display: flex; color: var(--text-muted); flex-shrink: 0; }
.sp-ico svg { width: 18px; height: 18px; }
.sp-meta svg, .sp-go svg { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }
/* El canal, con su inicial en el círculo y el botón al borde derecho. */
.sp-chan .ch-avatar { width: 34px; height: 34px; font-size: 15px; flex-shrink: 0; }
.sp-go {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
}
.sp-chan.done { cursor: default; }
.sp-chan.done:hover { background: none; }
.sp-chan.done .sp-name { color: var(--text-muted); }
.sp-chan.done .sp-go { background: none; color: var(--text-muted); font-weight: 400; padding: 6px 2px; }
/* La lista de playlists y el crear, separados por una línea dentro de la caja. */
.sp-card .sp-create { padding: 6px; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; }
.sp-card .sp-hint { padding: 0 10px 10px; margin: 0; }

/* ── Tab Canales ─────────────────────────────────────────────────────────── */
.ch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 14px 10px;
    padding: 12px;
}
.ch-circle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    color: var(--text);
    cursor: pointer;
}
.ch-circle .now-badge {
    top: -2px;
    right: 6px;
    width: 20px;
    height: 20px;
    z-index: 5;
}
.ch-circle .now-badge svg {
    width: 12px;
    height: 12px;
}
.ch-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-muted);
    transition: transform .15s;
}
.ch-circle:hover .ch-avatar { transform: scale(1.06); }
.ch-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ch-name {
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    /* Dos lineas como mucho: los nombres largos no deben descuadrar la rejilla. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* El de actualizar comparte sitio y tamaño con los de volver y eliminar. */
.ch-name-input {
    min-width: 0;
    background: var(--surface2);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 4px 8px;
    outline: none;
}
/* El lapiz y el de actualizar comparten sitio y tamano con volver y eliminar. */
.ch-edit,
.ch-refresh {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s;
}
.ch-edit:hover,
.ch-refresh:hover { color: var(--text); }
.ch-edit svg,
.ch-refresh svg { width: 17px; height: 17px; }

.ch-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: var(--accent);
    color: #fff;
    border: none;
    transition: background .15s, opacity .15s;
    flex-shrink: 0;
}
.ch-save-btn:hover {
    opacity: .9;
}
.ch-save-btn.saved {
    background: var(--surface2);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.ch-save-btn.saved:hover {
    color: var(--text);
    border-color: var(--text-muted);
}
.ch-save-btn svg {
    width: 14px;
    height: 14px;
}
.sp-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-meta { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }

.empty-msg {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 40px 16px;
}

/* ── Modal: Cola de reproducción ───────────────────────────────────────── */
.modal-overlay {
    display: none;
    position: fixed;
    /* Sobre el feed y nada mas: ni el video ni la barra de busqueda quedan
       debajo. Las medidas las publica placeModals() al abrir y al redimensionar. */
    top: var(--modal-top, calc(100vw * 9 / 16 + 8px));
    bottom: var(--modal-bottom, 0);
    left: var(--modal-left, 0);
    right: var(--modal-right, 0);
    inset: var(--modal-top, calc(100vw * 9 / 16 + 8px)) var(--modal-right, 0) var(--modal-bottom, 0) var(--modal-left, 0);
    width: auto;
    height: auto;
    box-sizing: border-box;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2100;
    align-items: center;
    justify-content: center;
}
.modal-overlay.active { display: flex; }

/* Todos del mismo tamaño: el del hueco, exactamente el que ocupa la ficha
   (.pv-panel). Asi ninguno se sale ni baila de un modal a otro, y el contenido
   corto simplemente deja aire debajo. */
.modal-box {
    background: var(--surface);
    border: none;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.modal-header h3 { font-size: 15px; font-weight: 600; }

.modal-header-actions { display: flex; align-items: center; gap: 10px; }

.modal-clear-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
}
.modal-clear-btn:hover { color: var(--accent); }

.modal-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    padding: 4px;
}
.modal-close-btn:hover { color: var(--text); }

.modal-body {
    overflow-y: auto;
    padding: 8px;
}

.queue-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 40px 16px;
}

/* ── Aviso "Activar sonido" (bajo el buscador, nunca sobre el video) ──── */
.sound-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    width: calc(100% - 20px);
    margin: 0 10px 10px;
    padding: 14px 16px;
    border: none;
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
    animation: ctaPulse 2.2s ease-in-out infinite;
}
.sound-cta[hidden] { display: none; }
.sound-cta:active { transform: scale(.985); }
.sound-cta-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    flex-shrink: 0;
}
.sound-cta-ico svg { width: 24px; height: 24px; }
.sound-cta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sound-cta-text strong { font-size: 18px; font-weight: 700; line-height: 1.2; }
.sound-cta-text small  { font-size: 12.5px; opacity: .9; line-height: 1.35; }
@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, .35); }
    50%      { box-shadow: 0 4px 22px rgba(255, 0, 85, .55); }
}

/* ── Migración de datos ────────────────────────────────── */
.danger-btn {
    padding: 9px 16px;
    border-radius: var(--radius);
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}
.danger-btn:hover { background: var(--accent); color: #fff; }

.mig-intro { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0 0 12px; }
.mig-intro b { color: var(--text); }
.mig-groups { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mig-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}
.mig-check input { accent-color: var(--accent); cursor: pointer; }
.mig-check:has(input:checked) { border-color: var(--accent); }
.mig-main { width: 100%; }
.mig-sep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
    color: var(--text-muted);
    font-size: 12px;
}
.mig-sep::before, .mig-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.mig-msg { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; min-height: 18px; }
.mig-msg.err { color: var(--accent); }
.mig-msg.ok  { color: #3fb950; }
.mig-token {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: center;
    color: var(--text);
    background: var(--surface2);
    border: 1px dashed var(--accent);
    border-radius: var(--radius);
    padding: 16px 10px;
    margin-bottom: 12px;
    user-select: all;
    overflow-x: auto;
    white-space: nowrap;
}
.mig-count { text-align: center; font-size: 12.5px; color: var(--text-muted); margin-top: 10px; }
.mig-count.err { color: var(--accent); }
.mig-foot { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; margin: 14px 0 0; text-align: center; }

/* ── Modal de confirmación ─────────────────────────────── */
.confirm-box { width: min(360px, 90vw); padding: 22px; }

/* ── Anuncios del feed ─────────────────────────────────────────────────── */
/* Dos tarjetas de ancho siempre, en cualquier pantalla, y 16:9 como las
   miniaturas. Cada anuncio es un cartel: marca y lema arriba, un titular corto,
   tres iconos, la llamada abajo y un dibujo a la derecha. Todo CSS: ni una
   imagen. Las medidas van en cqh (la altura del propio anuncio), asi el cartel
   se ve igual de proporcionado en el telefono que en una pantalla grande; lo
   que no cabe en pequeno se esconde con @container. */
.feed-ad {
    grid-column: span 2;
    position: relative;
    isolation: isolate;          /* deja que el fondo difuso viva en z-index -1 */
    container-type: size;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto auto;
    column-gap: 3%;
    aspect-ratio: 16/9;
    padding: 5% 5.5%;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
    transition: transform .12s ease;
}
.feed-ad:active { transform: scale(.985); }

/* La mancha de color desenfocada y el aro: lo que le da profundidad al cartel
   sin una sola imagen. Cada anuncio solo cambia los colores. */
.feed-ad::before {
    content: '';
    position: absolute;
    z-index: -1;
    right: -8%; bottom: -24%;
    width: 58%; height: 74%;
    background: var(--ad-blob);
    filter: blur(45px);
    opacity: .55;
    transform: rotate(-18deg);
}
.feed-ad::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: 9%; top: -35%;
    width: 30%; height: 120%;
    border: 1px solid var(--ad-ring);
    border-radius: 50%;
    transform: rotate(30deg);
}
/* Tres capas mas, las que separan un cartel de un recuadro de color: luz que
   entra por arriba, una segunda mancha de otro tono y una reticula finisima. */
.feed-ad .ad-fx {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(58% 46% at 16% -10%, rgba(255,255,255,.14), transparent 72%);
}
.feed-ad .ad-fx::before {
    content: '';
    position: absolute;
    left: -14%; top: -32%;
    width: 48%; height: 88%;
    background: var(--ad-blob2, var(--ad-blob));
    filter: blur(55px);
    opacity: .32;
    transform: rotate(24deg);
}
.feed-ad .ad-fx::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(72% 72% at 28% 52%, #000 8%, transparent 76%);
            mask-image: radial-gradient(72% 72% at 28% 52%, #000 8%, transparent 76%);
}

.feed-ad .ad-brand {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    gap: .55em;
    font-size: clamp(10px, 6.6cqh, 17px);
    font-weight: 800;
    letter-spacing: -.02em;
}
.feed-ad .ad-brand b { display: flex; flex-direction: column; gap: .3em; font-weight: 800; }
.feed-ad .ad-brand i {
    font-size: .5em;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    opacity: .55;
}
.feed-ad .ad-logo {
    display: grid;
    place-items: center;
    width: 2em; height: 2em;
    border-radius: 30%;
    background: var(--ad-logo-bg);
    font-size: .9em;
    font-weight: 900;
    box-shadow: 0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.4);
}
.feed-ad .ad-logo svg { width: 64%; height: 64%; }
.feed-ad .ad-h {
    grid-area: 2 / 1;
    align-self: center;
    margin: 0;
    font-size: clamp(17px, 13.5cqh, 42px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.045em;
    text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.feed-ad .ad-h span {
    color: var(--ad-accent);
    text-shadow: 0 0 26px color-mix(in srgb, var(--ad-accent) 55%, transparent);
}
/* La fila de iconos: lo que hace que el cartel parezca de agencia y no un
   titular suelto. Si el anuncio es bajito se queda en iconos, y mas abajo
   desaparece: antes que apretar, mejor quitar. */
.feed-ad .ad-feats {
    grid-area: 3 / 1;
    display: flex;
    align-items: center;
    gap: 5%;
    margin-bottom: 4%;
}
.feed-ad .ad-feats b {
    display: flex;
    align-items: center;
    gap: .5em;
    font-size: clamp(8px, 4.4cqh, 12px);
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
    opacity: .9;
}
.feed-ad .ad-feats i {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.9em; height: 1.9em;
    border-radius: 32%;
    background: rgba(255,255,255,.1);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.feed-ad .ad-feats svg { width: 62%; height: 62%; }
.feed-ad .ad-cta {
    grid-area: 4 / 1;
    justify-self: start;
    align-self: end;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .62em 1.25em;
    border-radius: 999px;
    font-size: clamp(11px, 6.2cqh, 17px);
    font-weight: 800;
    letter-spacing: -.02em;
    white-space: nowrap;
}
.feed-ad .ad-cta::after { content: '\2192'; font-weight: 900; }
.feed-ad .ad-tag {
    position: absolute;
    top: 6%; right: 3.5%;
    padding: .25em .6em;
    border-radius: 999px;
    background: rgba(0,0,0,.32);
    font-size: clamp(7.5px, 4.2cqh, 11px);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .6;
}
.feed-ad .ad-art {
    grid-area: 1 / 2 / 5 / 3;
    position: relative;
    display: grid;
    place-items: center;
    height: 100%;
}
/* El halo detras del dibujo, con un latido lento: el ojo se va solo. */
.feed-ad .ad-art::before {
    content: '';
    position: absolute;
    width: 118%; aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ad-ring), transparent 66%);
    animation: adLatido 6s ease-in-out infinite;
}
@keyframes adLatido { 0%,100% { opacity: .45; transform: scale(.94); } 50% { opacity: .85; transform: scale(1.04); } }
@container (max-height: 150px) { .feed-ad .ad-feats span { display: none; } }
@container (max-height: 112px) {
    .feed-ad .ad-feats,
    .feed-ad .ad-brand i { display: none; }
}
@media (prefers-reduced-motion: reduce) { .feed-ad .ad-art::before { animation: none; } }

/* Brave: fuego. El escudo sobre su resplandor. */
.feed-ad-brave {
    --ad-blob: linear-gradient(130deg, #ffa83d, #fb542b 55%, #ff2e63);
    --ad-blob2: linear-gradient(130deg, #ff2e63, #7b1fa2);
    --ad-ring: rgba(255,138,76,.45);
    --ad-accent: #ffb074;
    --ad-logo-bg: linear-gradient(140deg, #ff8a45, #e0390f);
    background:
        radial-gradient(ellipse at 76% 45%, #6b2008 0%, transparent 36%),
        linear-gradient(115deg, #1b0a05, #2f1007 60%, #170704);
}
.feed-ad-brave .art-shield { position: relative; display: grid; place-items: center; }
.feed-ad-brave .art-shield::before,
.feed-ad-brave .art-shield::after {
    content: '';
    position: absolute;
    border: 1px solid rgba(255,170,110,.35);
    border-radius: 50%;
    width: 128%; aspect-ratio: 1;
}
.feed-ad-brave .art-shield::after { width: 164%; border-color: rgba(255,170,110,.18); }
.feed-ad-brave .art-shield svg {
    position: relative;
    width: clamp(52px, 46cqh, 124px);
    height: auto;
    color: #fff;
    filter: drop-shadow(0 10px 26px rgba(0,0,0,.5));
}
.feed-ad-brave .ad-cta { background: #fff; color: #c93a12; box-shadow: 0 8px 20px rgba(0,0,0,.35); }

/* WebApp: neon de noche. Dos telefonos, uno detras del otro. */
.feed-ad-webapp {
    --ad-blob: linear-gradient(130deg, #00a7ff, #7b3dff 55%, #ff0055);
    --ad-blob2: linear-gradient(130deg, #00e5ff, #0066ff);
    --ad-ring: rgba(91,140,255,.4);
    --ad-accent: #4fc4ff;
    --ad-logo-bg: linear-gradient(135deg, #078cff, #7b3dff);
    background:
        radial-gradient(ellipse at 78% 45%, #123d87 0%, transparent 34%),
        linear-gradient(115deg, #050b18, #07152d 60%, #08122a);
}
.feed-ad-webapp .art-phones { position: relative; display: grid; place-items: center; }
.feed-ad-webapp .ph-ghost {
    position: absolute;
    right: -14%;
    width: clamp(40px, 34cqh, 88px);
    aspect-ratio: 9/17;
    border: 2px solid rgba(255,255,255,.18);
    border-radius: 16%/8%;
    background: linear-gradient(160deg, #0e1c36, #050a14);
    transform: rotate(10deg);
}
.feed-ad-webapp .art-phone {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6%;
    width: clamp(48px, 40cqh, 104px);
    aspect-ratio: 9/17;
    padding: 8%;
    border: 2px solid rgba(255,255,255,.42);
    border-radius: 16%/8%;
    background: linear-gradient(160deg, #182a4d, #060c19 80%);
    box-shadow: 0 16px 32px rgba(0,0,0,.5), 0 0 26px rgba(123,61,255,.35);
    transform: rotate(-6deg);
}
.feed-ad-webapp .ph-notch { width: 34%; height: 3px; margin: 0 auto 4%; border-radius: 3px; background: rgba(255,255,255,.35); }
.feed-ad-webapp .ph-thumb {
    position: relative;
    height: 28%;
    border-radius: 10%/16%;
    background: linear-gradient(135deg, var(--accent), #7b3dff);
    box-shadow: 0 0 16px rgba(255,0,85,.5);
}
.feed-ad-webapp .ph-thumb::after {   /* el triangulo de play, que lo delata */
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0; height: 0;
    border: .32em solid transparent;
    border-left: .5em solid rgba(255,255,255,.9);
    border-right: 0;
}
.feed-ad-webapp .ph-l { height: 5%; border-radius: 3px; background: rgba(255,255,255,.22); }
.feed-ad-webapp .ph-l.short { width: 58%; }
.feed-ad-webapp .ad-cta {
    background: linear-gradient(135deg, #ff4d85, #ff0055);
    color: #fff;
    box-shadow: 0 10px 24px rgba(255,0,85,.45);
}

/* Hueco en venta: moneda de oro en su orbita. */
.feed-ad-slot {
    --ad-blob: linear-gradient(130deg, #ffd84d, #f5a623 50%, #ff5e8a);
    --ad-blob2: linear-gradient(130deg, #9b5cff, #ff5e8a);
    --ad-ring: rgba(255,208,106,.4);
    --ad-accent: #ffd04d;
    --ad-logo-bg: linear-gradient(135deg, #ffd84d, #f5a623);
    background:
        radial-gradient(ellipse at 76% 45%, #3b2470 0%, transparent 36%),
        linear-gradient(115deg, #10101f, #1a1133 60%, #0b0b16);
}
.feed-ad-slot .ad-logo { color: #3a2400; }
.feed-ad-slot .art-coin {
    position: relative;
    display: grid;
    place-content: center;
    justify-items: center;
    width: clamp(56px, 44cqh, 120px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffe879, #f5a623 60%, #d98a05);
    color: #3a2400;
    box-shadow: 0 14px 32px rgba(245,166,35,.45), inset 0 0 0 3px rgba(255,255,255,.4);
    transform: rotate(-9deg);
}
.feed-ad-slot .art-coin::before {
    content: '';
    position: absolute;
    inset: -22%;
    border: 1px dashed rgba(255,216,130,.5);
    border-radius: 50%;
}
.feed-ad-slot .art-coin::after {   /* el brillo que recorre la moneda */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
}
.feed-ad-slot .art-coin b { font-size: clamp(19px, 16cqh, 44px); font-weight: 900; line-height: 1; }
.feed-ad-slot .art-coin i { font-size: clamp(7px, 4.6cqh, 13px); font-style: normal; font-weight: 800; letter-spacing: .08em; }
.feed-ad-slot .ad-cta { background: #fff; color: #15152a; box-shadow: 0 8px 20px rgba(0,0,0,.35); }

/* El modal que sale al tocarlos. */
.ad-modal {
    position: relative;
    width: min(380px, 90vw);
    height: auto;
    padding: 26px 24px 22px;
    text-align: center;
}
.ad-modal h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.ad-modal p {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-muted);
    margin-bottom: 18px;
}
.ad-modal p b { color: var(--text); }
.ad-modal .ad-go { width: 100%; padding: 12px; }
.adm-head {
    display: grid;
    place-items: center;
    width: 62px; height: 62px;
    margin: 0 auto 14px;
    border-radius: 18px;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
}
.adm-brave  { background: linear-gradient(150deg, #ff7a45, #fb542b 45%, #d33a12); }
.adm-webapp { background: linear-gradient(150deg, #ff4f8b, var(--accent)); }
.adm-slot   { background: var(--surface2); color: var(--text); box-shadow: inset 0 0 0 2px var(--border); }
.adm-ok     { background: #1f9d55; }

/* El formulario por pasos para anunciarse. */
.ad-modal.ad-wiz {
    display: flex;
    flex-direction: column;
    width: min(520px, 94vw);
    max-height: 100%;          /* el alto del overlay, no el de la pantalla */
    padding: 22px 20px 18px;
    text-align: left;
    overflow: hidden;
}
.wiz-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 30px 8px 0;        /* el hueco de la ✕ */
}
.wiz-top b    { font-size: 17px; font-weight: 700; }
.wiz-top span { font-size: 12px; color: var(--text-muted); }
.wiz-bar {
    height: 3px;
    margin-bottom: 14px;
    border-radius: 3px;
    background: var(--surface2);
    overflow: hidden;
}
.wiz-bar i { display: block; height: 100%; background: var(--accent); transition: width .25s; }
.wiz-body  { flex: 1; min-height: 0; overflow-y: auto; }
.wiz-ayuda { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin: 0 0 12px; }
.wiz-lab   { font-size: 12px; font-weight: 700; margin: 12px 0 6px; }
.wiz-err   { font-size: 12.5px; color: #e0245e; margin: 8px 0 0; }
.wiz-ok    { font-size: 12.5px; color: #1f9d55; margin: 8px 0 0; }
.wiz-tot   { font-size: 13px; color: var(--text-muted); margin: 10px 0 0; }
.wiz-tot b { font-size: 15px; color: var(--text); }
.wiz-drop {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface2);
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    overflow: hidden;
}
.wiz-drop.lleno { border-style: solid; }
.wiz-drop img   { width: 100%; height: 100%; object-fit: cover; }
.wiz-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wiz-chip {
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--surface2);
    box-shadow: inset 0 0 0 1px var(--border);
    font-size: 12.5px;
    cursor: pointer;
    user-select: none;
}
.wiz-chip i  { font-style: normal; font-size: 11.5px; opacity: .7; }
.wiz-chip.on { background: var(--accent); color: #fff; box-shadow: none; }
.wiz-opts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
}
.wiz-opt {
    display: grid;
    gap: 2px;
    padding: 10px;
    border-radius: var(--radius);
    background: var(--surface2);
    box-shadow: inset 0 0 0 1px var(--border);
    text-align: center;
    cursor: pointer;
}
.wiz-opt b      { font-size: 13px; }
.wiz-opt i      { font-size: 12px; font-style: normal; color: var(--text-muted); }
.wiz-opt.on     { box-shadow: inset 0 0 0 2px var(--accent); }
.wiz-opt.on i   { color: var(--accent); }
.wiz-in {
    width: 100%;
    padding: 11px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface2);
    color: var(--text);
    font-size: 14px;
}
.wiz-in:focus { outline: none; border-color: var(--accent); }
.wiz-prev {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
}
.wiz-prev img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wiz-prev-bar {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .75));
    color: #fff;
}
.wiz-prev-bar b    { font-size: 13px; }
.wiz-prev-bar span {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--accent);
    font-size: 11.5px;
    font-weight: 700;
}
.wiz-res    { list-style: none; margin: 12px 0 0; padding: 0; }
.wiz-res li {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.wiz-res li span { color: var(--text-muted); }
.wiz-foot { display: flex; gap: 8px; padding-top: 14px; }
.wiz-foot button           { flex: 1; padding: 12px; }
.wiz-foot button:disabled  { opacity: .5; cursor: default; }

/* ── Tus anuncios (Gestión y soporte de anunciantes) ────────────────────── */
.my-ads-list { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.my-ad-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--surface2);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.my-ad-card:hover { border-color: var(--accent); background: var(--surface); }
.my-ad-thumb {
    width: 84px;
    height: 48px;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 6px;
    background: #000;
    flex-shrink: 0;
}
.my-ad-info { flex: 1; min-width: 0; }
.my-ad-info-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 4px; }
.my-ad-title { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.my-ad-meta { font-size: 12px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.my-ad-badge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    white-space: nowrap;
    text-transform: capitalize;
}
.my-ad-badge.revision  { background: #8a6d00; color: #fff; }
.my-ad-badge.cambios   { background: #1f4f8a; color: #fff; animation: pulseBadge 2s infinite; }
.my-ad-badge.aprobado  { background: #1b7f3b; color: #fff; }
.my-ad-badge.rechazado { background: #8a1f1f; color: #fff; }

@keyframes pulseBadge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.my-ad-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.my-ad-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.my-ad-back:hover { text-decoration: underline; }

.my-ad-banner {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.45;
    margin: 8px 0 14px;
}
.my-ad-banner.aprobado { background: rgba(27, 127, 59, 0.15); border: 1px solid rgba(27, 127, 59, 0.4); color: #4ade80; }
.my-ad-banner.cambios { background: rgba(31, 79, 138, 0.2); border: 1px solid rgba(31, 79, 138, 0.5); color: #60a5fa; }
.my-ad-banner.revision { background: rgba(138, 109, 0, 0.15); border: 1px solid rgba(138, 109, 0, 0.4); color: #fbbf24; }

.my-ad-mockup {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    max-height: 240px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    margin: 10px 0 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.my-ad-mockup img { width: 100%; height: 100%; object-fit: cover; display: block; }
.my-ad-mockup .ad-tag { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.75); color: #ff007f; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; text-transform: uppercase; }
.my-ad-mockbar { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.85)); padding: 20px 12px 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.my-ad-mocktitle { color: #fff; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-ad-mockbtn { background: #ff007f; color: #fff; text-decoration: none; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 99px; white-space: nowrap; }

.my-chat-list { display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; margin: 8px 0 14px; padding-right: 4px; }
.my-chat-bubble { padding: 9px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.4; max-width: 90%; }
.my-chat-adm { background: rgba(0, 112, 243, 0.15); border: 1px solid rgba(0, 112, 243, 0.35); align-self: flex-start; }
.my-chat-user { background: var(--surface2); border: 1px solid var(--border); align-self: flex-end; }
.my-chat-head { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; margin-bottom: 4px; color: var(--text-muted); }
.my-chat-body { word-break: break-word; white-space: pre-wrap; }
.my-chat-cambios { margin-top: 4px; font-size: 10px; color: #ff007f; font-weight: 600; }

.my-edit-toggle { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--accent); cursor: pointer; border-top: 1px solid var(--border); }

/* ── Apodo ─────────────────────────────────────────────────────────────── */
.nick-box {
    position: relative;
    width: min(380px, 90vw);
    height: auto;
    padding: 26px 24px 22px;
    text-align: center;
}
.nick-close[hidden] { display: none; }   /* si no, el display:flex pisa al hidden */
.nick-close {
    position: absolute;
    top: 10px; right: 10px;        /* la X siempre a la derecha */
    display: flex;
    padding: 6px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}
.nick-close:hover { color: var(--text); background: var(--surface2); }
.nick-box h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.nick-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
}
#nickInput {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface2);
    color: var(--text);
    font-family: inherit;
    font-size: 16px;               /* menos de 16 y el telefono hace zoom al escribir */
    font-weight: 600;
    text-align: center;
    outline: none;
}
#nickInput:focus { border-color: var(--accent); }
.nick-err {
    min-height: 18px;
    margin: 8px 0 4px;
    font-size: 12.5px;
    color: #ff6b6b;
}
.nick-save { width: 100%; padding: 12px; }
.nick-save:disabled { opacity: .6; cursor: default; }

.nick-migrate-wrap {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.nick-migrate-wrap[hidden] {
    display: none !important;
}
.nick-migrate-divider {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}
.nick-migrate-divider::before,
.nick-migrate-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border);
}
.nick-migrate-divider span {
    padding: 0 10px;
    text-transform: lowercase;
}
.nick-migrate-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 6px 10px;
    border-radius: var(--radius);
    transition: background 0.15s ease, color 0.15s ease;
}
.nick-migrate-btn:hover {
    color: #ff3388;
    background: rgba(255, 0, 127, 0.08);
}

/* Quien lo vio y cuándo, debajo del canal (solo en Global). */
.video-seen {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-muted);
}
/* El apodo manda: se recorta la hora, nunca el nombre (salvo que sea enorme). */
.video-seen b {
    flex-shrink: 0;
    max-width: 65%;
    color: var(--accent);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.video-seen span {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Los dos contadores del final de Ajustes, en la misma fila. */
.settings-stats {
    display: flex;
    gap: 10px;
    padding: 14px 0 4px;
}
.settings-stats .stat {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px;
    border-radius: var(--radius);
    background: var(--surface2);
    color: var(--text-muted);
    font-size: 13px;
}
.settings-stats .stat b { color: var(--text); font-size: 14px; font-weight: 700; }
/* Las dos píldoras abren su gráfico: son botones, no adornos. */
.settings-stats .stat { border: none; font-family: inherit; cursor: pointer; transition: background .15s; }
.settings-stats .stat:hover { background: var(--border); }
.settings-stats .stat:active { transform: scale(.985); }
/* Descargas no abre gráfico: solo es la cifra. */
.settings-stats .stat-fijo, .settings-stats .stat-fijo:hover { cursor: default; background: var(--surface2); }
.settings-stats .stat-fijo:active { transform: none; }
/* En el móvil las tres no caben en fila con su texto: se reparten en dos. */
@media (max-width: 480px) {
    .settings-stats { flex-wrap: wrap; }
    .settings-stats .stat { flex: 1 1 calc(50% - 5px); }
}

/* El gráfico: se desliza a lo ancho, como los de bolsa. */
/* position: relative o la ✕, que va absoluta, se va a la esquina del overlay
   —encima del video— en vez de quedarse en la del modal. */
.stats-modal { position: relative; height: auto; padding: 22px 0 14px; }
.stats-modal h3 { padding: 0 20px; font-size: 17px; font-weight: 700; }
.stats-note { padding: 7px 20px 12px; font-size: 13px; color: var(--text-muted); min-height: 20px; }
.stats-note b { color: var(--text); font-size: 15px; font-weight: 700; }
/* Rango del gráfico: horas, días, semanas o meses. Reusa el chip .cols-btn. */
/* Lista de dispositivos vinculados (dentro del modal de Migrar). */
.dev-list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 4px; }
.dev-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
            padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; }
.dev-item i { color: var(--text-muted); font-style: normal; font-size: 12px; }
.dev-item .q-ctl { flex: none; }
.dev-item .dev-ok {
    display: grid;
    place-items: center;
    flex: none;
    width: 21px; height: 21px;
    border-radius: 50%;
    background: #22c55e;
    color: #07240f;
    font-size: 12px;
    font-weight: 900;
    font-style: normal;
}
.dev-item .dev-wait { color: var(--text-muted); font-size: 11.5px; text-align: right; }
.dev-item .dev-live { color: #22c55e; font-size: 11.5px; font-weight: 600; }
.dev-item:has(.dev-chk:not(:disabled)) { cursor: pointer; }
.dev-item:has(.dev-chk:disabled) { opacity: .6; }
.dev-chk { flex: none; width: 17px; height: 17px; accent-color: var(--accent); cursor: inherit; }
.dev-item .dev-name { flex: 1; min-width: 0; }
.sync-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.mig-alt { width: 100%; background: transparent; border: 1px solid var(--border); color: var(--text); }
.dev-spin {
    flex: none;
    width: 21px; height: 21px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

.stats-range { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 10px 20px 0; }
.stats-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
}
.stats-scroll canvas { display: block; }
.stats-legend { padding: 10px 20px 0; font-size: 11px; color: var(--text-muted); }
.confirm-msg { font-size: 15px; color: var(--text); line-height: 1.5; margin-bottom: 18px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }
.confirm-cancel, .confirm-ok {
    padding: 9px 18px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
}
.confirm-cancel { background: var(--surface2); color: var(--text); }
.confirm-cancel:hover { border-color: var(--text-muted); }
.confirm-ok { background: var(--accent); color: #fff; border-color: var(--accent); }
.confirm-ok:hover { filter: brightness(1.08); }

/* Cada fila en dos bloques: arriba miniatura grande + título y canal; abajo,
   los iconos repartidos a lo ancho (así caben seis o siete sin apretarse). */
.queue-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border-radius: 10px;
    transition: background .15s;
}
.queue-item:hover { background: var(--surface2); }

.qi-top { display: flex; align-items: flex-start; gap: 10px; }
.qi-thumbwrap { width: 124px; }
.qi-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    background: #000;
}
.qi-meta { flex: 1; min-width: 0; }
.qi-title {
    font-size: 13.5px;
    line-height: 1.3;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Duración: chapa abajo a la derecha de la miniatura. */
.v-dur {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    pointer-events: none;
}
.v-dur:empty { display: none; }

/* La miniatura de las filas necesita su propio marco para la chapa. */
.qi-thumbwrap { position: relative; flex-shrink: 0; line-height: 0; }
.qi-thumbwrap .v-dur { right: 4px; bottom: 4px; font-size: 10px; }

.qi-channel {
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color .15s;
}
.qi-channel:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* Controles por item (reproducir, preview, orden, mover, quitar) */
.queue-ctls { display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.q-ctl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s, background .15s;
}
.q-ctl svg { width: 18px; height: 18px; }
.q-ctl:hover { color: var(--text); background: rgba(255,255,255,.08); }
.q-ctl.q-remove:hover { color: var(--accent); }
.q-ctl:disabled { opacity: .2; cursor: default; pointer-events: none; }

/* ── Modal: Detalle de video ──────────────────────────── */
.detail-modal {
    position: relative;
    width: min(420px, 92vw);
    max-height: 90vh;
    padding: 0;
}
.detail-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgba(13,17,23,.7);
    border-radius: 50%;
    width: 32px;
    height: 32px;
}
.detail-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    border-radius: 12px 12px 0 0;
    background: #000;
}
.detail-body {
    padding: 14px 16px 8px;
}
.detail-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
    margin-bottom: 4px;
}
.detail-channel {
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s;
    display: inline-block;
}
.detail-channel:hover {
    color: var(--accent);
    text-decoration: underline;
}
.detail-actions {
    display: flex;
    gap: 6px;
    padding: 8px 16px 16px;
}
.detail-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 4px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.detail-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-btn svg { width: 20px; height: 20px; }
.detail-btn:hover { color: var(--text); border-color: var(--text-muted); }
.detail-btn:active { transform: scale(.95); }
.detail-btn.accent { color: #fff; background: var(--accent); border-color: var(--accent); }

/* ── Nota animada: dónde está sonando el video ─────────────────────────── */
.btn-folders, .btn-settings, .btn-app, .subtab, .search-chip { position: relative; }
.now-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 0 2px var(--surface);
    animation: nowPulse 1.15s ease-in-out infinite;
    pointer-events: none;
    z-index: 15;
}
.subtab .now-badge,
.search-chip .now-badge {
    top: -2px;
    right: -2px;
    display: flex !important;
}
.subtab .now-badge svg,
.search-chip .now-badge svg,
.now-badge svg {
    width: 10px !important;
    height: 10px !important;
    pointer-events: none;
}

/* En la tarjeta de una playlist la nota va dentro, sobre la miniatura. */
.pl-row { position: relative; }
.pl-row .now-badge {
    top: 14px;
    left: 14px;
    right: auto;
    width: 22px;
    height: 22px;
}
.pl-row .now-badge svg { width: 13px; height: 13px; }
@keyframes nowPulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.22); opacity: .78; }
}

/* ── EQ indicator (card en reproducción) — grande y al centro ──────────── */
.eq-bars {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 6px;
    align-items: center;
    height: 50%;
    z-index: 2;
    pointer-events: none;
    padding: 12px 14px;
    background: rgba(13, 17, 23, .45);
    border-radius: 14px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.queue-item.playing .eq-bars,
.queue-item.playing-preview .eq-bars,
.video-card.playing .eq-bars,
.video-card.playing-preview .eq-bars { display: flex; }
.video-card.preview-p1.playing-preview .eq-bars span,
.queue-item.preview-p1.playing-preview .eq-bars span {
    background: #3b82f6;
}
.video-card.preview-p2.playing-preview .eq-bars span,
.queue-item.preview-p2.playing-preview .eq-bars span {
    background: #a855f7;
}
.eq-bars span {
    display: block;
    width: 7px;
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transform-origin: center;
}
/* scaleY en vez de animar height: corre en GPU y no fuerza reflow. */
.eq-bars span:nth-child(1) { animation: eq .55s ease-in-out infinite alternate; }
.eq-bars span:nth-child(2) { animation: eq .55s ease-in-out .18s infinite alternate; }
.eq-bars span:nth-child(3) { animation: eq .55s ease-in-out .36s infinite alternate; }
.eq-bars span:nth-child(4) { animation: eq .55s ease-in-out .12s infinite alternate; }
@keyframes eq {
    0%   { transform: scaleY(.25); }
    100% { transform: scaleY(1); }
}

/* ── Scrollbar ────────────────────────────────────────── */
/* Ninguna barra de scroll, en ningun sitio: se sigue pudiendo arrastrar y rodar,
   pero no se dibuja nada. Va en * porque cada panel nuevo traia la suya. */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ── Responsive móvil ─────────────────────────────────── */
@media (max-width: 768px) {
    .app { flex-direction: column; padding: 4px; gap: 4px; }

    /* Player arriba; la tarjeta 16/9 va en .player-wrap (no se encoge). */
    .player-col {
        position: relative;
        z-index: 200;
        flex: 0 0 auto;
        width: 100%;
        height: auto;
    }
    .player-wrap { border-radius: 12px; }

    /* Barra de controles en móvil: compacta y con márgenes reducidos */
    .player-bar {
        margin-top: 6px;
        padding: 4px 8px 2px;
        border-radius: 12px;
    }

    /* Sidebar ocupa el resto. min-height:0 es CLAVE: sin eso un hijo flex no
       puede ser más chico que su contenido y el panel nunca llega a scrollear
       (el .app es position:fixed y el body tiene overflow:hidden). */
    .sidebar-col {
        position: relative;
        z-index: 10;
        flex: 1 1 auto;
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: hidden;
        border-radius: 12px;
    }

    /* Modales y avisos jamás tapan el reproductor */
    .modal-overlay {
        top: var(--modal-top, calc(100vw * 9 / 16 + 8px));
        inset: var(--modal-top, calc(100vw * 9 / 16 + 8px)) var(--modal-right, 0) var(--modal-bottom, 0) var(--modal-left, 0);
    }

    /* El panel es el que scrollea (igual que en escritorio). */
    .panel {
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .panel.has-subtabs,
    .panel:has(.subtabs) {
        overflow-y: hidden !important;
    }

    /* En móvil/teléfono: se ocultan los controles personalizados redundantes
       porque la API nativa de YouTube ya gestiona play/pause, barra de seek, volumen y pantalla completa. */
    .player-bar #pvSeek,
    .player-bar .pv-times,
    .player-bar .pc-row {
        display: none !important;
    }
    /* Sin nada dentro, la barra sería solo una franja vacía bajo el video. */
    .player-bar { display: none !important; }

    /* Se activa la fila de opciones de avance/retroceso rápido de 10s y 5s */
    .pc-jumps-row {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
        width: 100%;
        box-sizing: border-box;
    }

    .pc-jump-btn {
        flex: 1 1 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 7px 4px;
        min-height: 38px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 10px;
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        touch-action: manipulation;
        user-select: none;
        transition: background .15s, transform .1s, border-color .15s;
    }
    .pc-jump-btn:active {
        background: rgba(255, 0, 85, 0.25);
        border-color: var(--accent);
        transform: scale(0.95);
    }
    .pc-jump-btn svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        fill: currentColor;
    }
    .pc-jump-btn.pc-jump-details {
        flex: 0 0 auto;
        padding: 7px 12px;
        background: rgba(255, 255, 255, 0.05);
    }
    .pc-jump-btn.pc-jump-details.active {
        background: rgba(255, 0, 85, 0.2);
        border-color: var(--accent);
        color: var(--accent);
    }

    /* En móvil, los controles nativos de la API de YouTube quedan 100% interactivos */
    .player-wrap .yt-layer iframe {
        pointer-events: auto !important;
    }
    .player-wrap .pv-shield {
        pointer-events: none !important;
        display: none !important;
    }
    .player-wrap .pv-pausebtn {
        display: none !important;
    }
    .pv-panel { padding: 10px 12px 12px; border-radius: 0 0 12px 12px; }
    .panel { padding-bottom: 12px; }
    .pl-fab { right: 12px; bottom: 16px; }

    /* Las búsquedas recientes se muestran sobre el video (JS las coloca ahí). */

    /* En teléfono la miniatura manda un poco menos para que el título respire. */
    .qi-thumbwrap { width: 104px; }
}


/* Atajo «Ver más de <canal>»: primer elemento de la rejilla, fila completa. */


/* La nota en botones y tabs se posiciona arriba a la derecha de forma estándar. */

/* ── Línea de resultados: texto a la izquierda, filtros a la derecha ──────── */
/* Tira de busquedas recientes. Scroll horizontal y nada mas: no hay flechas ni
   paginado porque son 20 como mucho y el dedo (o la rueda) ya sirve. */
.search-tabs {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 10px 12px 2px;
}
.search-tabs[hidden] { display: none; }
.stab {
    flex: 0 0 auto;
    max-width: 160px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--surface2);
    color: var(--text-muted);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.stab {
    display: flex;
    align-items: center;
    gap: 2px;
}
.stab:hover { color: var(--text); }
.stab.active { color: var(--text); border-color: var(--accent); }
.stab-text { overflow: hidden; text-overflow: ellipsis; }
/* La ✕ esta siempre, no solo al pasar el raton: en telefono no hay raton. */
.stab-x {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0 0 0 2px;
    margin-right: -2px;
    color: inherit;
    opacity: .5;
    cursor: pointer;
}
.stab-x:hover { opacity: 1; }
.stab-x svg { width: 13px; height: 13px; }

/* ── Filtros de búsqueda ────────────────────────────────────────────────────── */
.filters-body {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 26px;
}
.filters-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 128px;
}
.filters-title {
    margin-bottom: 2px;
    padding-bottom: 6px;
    width: 100%;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.filter-chip {
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--text-muted);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: color .15s, background .15s;
}
.filter-chip:hover { color: var(--text); background: var(--surface2); }
.filter-chip.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

/* ── Centinela del scroll infinito ───────────────────────────────────────── */
.feed-sentinel {
    display: flex;
    justify-content: center;
    padding: 14px 0 22px;
}
.feed-sentinel[hidden] { display: none !important; }

@media (max-width: 768px) {
    /* En teléfono las columnas no caben: cada grupo ocupa el ancho y sus
       opciones se envuelven en fila, para no acabar con una lista de 15 líneas. */
    .filters-body { gap: 14px; }
    .filters-group {
        min-width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }
    .filter-chip { border: 1px solid var(--border); }
}

/* ── Aviso de version nueva ───────────────────────────────── */
/* Flotante y breve: no es un modal (no bloquea nada ni difumina el fondo), solo
   avisa. Centrado abajo y por encima de todo, con hueco para el notch. */
.update-pill {
    position: fixed;
    /* Por encima de los modales (ficha, chat, tienda…): con uno abierto el aviso
       quedaba debajo y parecía que el deploy no avisaba. */
    z-index: 10050;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(300px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 12px 14px 11px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface2);
    background: color-mix(in srgb, var(--surface2) 90%, transparent);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
    opacity: 0;
    animation: updatePillIn .25s ease forwards;
}

.update-pill .up-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Un punto que late dice «hay algo nuevo» */
.update-pill i {
    position: relative;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}
.update-pill i::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: var(--accent);
    animation: updateDot 1.8s ease-out infinite;
}
@keyframes updateDot {
    from { transform: scale(.55); opacity: .5; }
    to   { transform: scale(1.6);  opacity: 0;  }
}

.update-pill b {
    white-space: nowrap;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.update-pill .up-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.update-pill button {
    flex: 1 1 0;
    min-width: 0;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, filter .15s;
}
.update-pill .up-si {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 0, 85, 0.3);
}
.update-pill .up-si:hover {
    background: var(--accent);
    color: #fff;
    filter: brightness(1.12);
}
.update-pill .up-no {
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.update-pill .up-no:hover {
    color: var(--text);
    background: var(--surface2);
    border-color: rgba(255, 255, 255, 0.2);
}
.update-pill.out  {
    animation: updatePillOut .6s ease forwards;
}

@keyframes updatePillIn  {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes updatePillOut {
    to   { opacity: 0; transform: translate(-50%, 12px); }
}

/* Elegir qué hacer cuando el destino ya tiene datos */
.mig-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.mig-opt {
    display: flex; flex-direction: column; gap: 4px;
    text-align: left; width: 100%; padding: 12px 14px;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text); cursor: pointer;
    font: inherit; transition: border-color .15s, background .15s;
}
.mig-opt:hover { border-color: var(--accent); background: var(--surface); }
.mig-opt b    { font-size: 13.5px; }
.mig-opt span { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
/* Acción secundaria dentro del pie: texto, no botón */
.mig-link {
    background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
    font-size: 11.5px; color: var(--accent); text-decoration: underline;
}
.mig-expired { text-align: center; color: var(--text); }

/* Icono de sincronizar: solo visible si hay dispositivos vinculados */
.settings-row-actions { display: flex; align-items: center; gap: 10px; }
.sync-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 auto;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 50%; color: var(--text); cursor: pointer;
}
.sync-btn:hover { border-color: var(--accent); color: var(--accent); }
.sync-btn.syncing svg { animation: spin .7s linear infinite; }
.sync-btn[hidden] { display: none; }

/* 2 Opciones en Migrar / Sincronizar */
.mig-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.mig-card {
    display: flex; flex-direction: column; gap: 6px;
    padding: 13px 15px; background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text); cursor: pointer; text-align: left;
    transition: border-color .15s, background .15s;
}
.mig-card:hover { border-color: var(--accent); background: var(--surface); }
.mig-card-title { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; color: var(--text); }
.mig-card-desc { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
.mig-back-btn {
    background: none; border: 0; color: var(--text-muted); font-size: 12px;
    cursor: pointer; padding: 0; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 4px;
}
.mig-back-btn:hover { color: var(--text); }
/* .btn-settings es flex: sin esto el atributo hidden no lo esconde. */
.btn-settings[hidden] { display: none; }

/* La ✕ del panel flota arriba a la derecha. Le dejaba sitio la fila de tabs,
   que ya no está: ahora lo deja lo primero que se ve de la ficha. */
.pvp-title, .pvp-vacio { padding-right: 34px; }
#pvFiltersBox .modal-clear-btn { margin-bottom: 10px; }

/* La fila de "Ir al video que suena", dentro de Setting de YouTube */
.settings-list .settings-row.pvp-guia { margin-top: 0; }
.pvp-guia .settings-row-text {
    flex: 1;
    min-width: 0;
    cursor: default;
    user-select: none;
}
.pvp-guia .settings-row-title {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 2px;
}
.pvp-guia .settings-row-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* La ✕ de la ficha: a la derecha, flotando sobre el contenido que hace scroll. */
.pvp-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 25;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--surface2);
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s, background .15s;
}
.pvp-close:hover { color: var(--text); background: var(--border); }

/* Sin video: el aviso ocupa el sitio de los datos. */
.pvp-vacio {
    padding: 24px 0;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}
.pvp-vacio[hidden],
.pvp-controls[hidden],
#pvFiltersBox[hidden],
#pvVideoBox[hidden] { display: none !important; }
/* Hay filtros puestos: el aviso de «filtrado» que vivía en la fila de resultados. */
#btnPanelInfo.filtrado::after,
#btnFilters.filtrado::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

/* ── Módulo Estadísticas ─────────────────────────────────────────────────── */
.stats-dashboard {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 10px 4px 20px;
}
.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.stats-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
}
.stats-subtitle {
    font-size: 11px;
    color: var(--text-muted);
}
.stats-period-filters {
    display: flex;
    gap: 4px;
    background: var(--surface2);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.stats-period-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
}
.stats-period-btn.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.stats-kpi-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color .15s;
}
.stats-kpi-card:hover {
    border-color: var(--text-muted);
}
.stats-kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
.stats-kpi-val {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
}
.stats-kpi-sub {
    font-size: 11px;
    color: #4ade80;
    display: flex;
    align-items: center;
    gap: 4px;
}
.stats-section-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 6px;
}
.stats-categories-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.stats-cat-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.stats-cat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.stats-cat-name {
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.stats-cat-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
    font-weight: 600;
}
.stats-cat-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    text-align: center;
    background: rgba(0,0,0,0.22);
    padding: 8px 4px;
    border-radius: 8px;
}
.stats-metric-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.stats-metric-lbl {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.stats-metric-num {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
}

/* ── Módulo Calendario (Wallet Offertalo) ─────────────────────────────────── */
.wallet-calendar-wrap {
    padding: 10px 4px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wl-calnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.wl-calnav__t {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: capitalize;
    color: var(--text);
}
.wl-calnav__r {
    display: flex;
    align-items: center;
    gap: 6px;
}
.wl-navbtn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: all .15s;
}
.wl-navbtn:hover {
    border-color: var(--text-muted);
    color: #fff;
}
.wl-navbtn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.wl-navbtn--today {
    width: auto;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 700;
}
.wl-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
}
.wl-dow span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding-bottom: 4px;
}
.wl-cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.wl-cell {
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 2px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: border-color .15s, transform .1s, background .15s;
    position: relative;
}
.wl-cell:not(.wl-cell--off):not(.wl-cell--empty):hover {
    border-color: var(--text-muted);
}
.wl-cell:not(.wl-cell--off):not(.wl-cell--empty):active {
    transform: scale(0.96);
}
.wl-cell.is-selected {
    border-color: var(--accent);
    background: rgba(255, 0, 85, 0.15);
}
.wl-cell--today {
    border-color: var(--accent);
}
.wl-cell--today .wl-cell__n {
    color: var(--accent);
}
.wl-cell--off {
    border-color: transparent;
    background: none;
    cursor: default;
    opacity: 0.2;
}
.wl-cell--empty {
    cursor: default;
}
.wl-cell__n {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
.wl-cell__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}
.cal-day-box {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}
.cal-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}
.cal-day-date {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    text-transform: capitalize;
}
.cal-day-badge {
    font-size: 11px;
    background: rgba(255, 0, 85, 0.15);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
}
.cal-day-events {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cal-empty-msg {
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    padding: 10px 0;
}
.cal-event-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.22);
    padding: 8px 10px;
    border-radius: 8px;
    border-left: 3px solid var(--accent);
}
.cal-event-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cal-event-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}
.cal-event-cat {
    font-size: 10px;
    color: var(--text-muted);
}
.cal-event-time {
    font-size: 11px;
    font-weight: 800;
    color: var(--accent);
}

.settings-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(255, 0, 85, 0.12);
    border: 1px solid rgba(255, 0, 85, 0.28);
}

.uid-badge {
    cursor: pointer;
    font-family: monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    user-select: all;
    transition: background .2s, border-color .2s;
}
.uid-badge:hover {
    background: rgba(255, 0, 85, 0.22);
}

.settings-subver {
    opacity: 0.55;
    font-size: 11px;
}

/* ── Tarjetas y Grilla de Marketplace y Travel (Formato Limpio Offertalo a 2 Items Por Fila) ── */
.item-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 10px 10px 24px !important;
    align-items: start !important;
}
@media (max-width: 600px) {
    .item-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 8px 8px 20px !important;
        align-items: start !important;
    }
}
.item-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    grid-column: span 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.item-card:not(.item-card-paid):not(.item-banner-square) {
    grid-column: span 1 !important;
    width: 100% !important;
    max-width: 100% !important;
}
.item-card.item-card-pro {
    grid-column: span 1 !important;
}
.item-card.item-card-pro:hover {
}

.item-card.item-card-paid,
.item-card.item-card-vip,
.item-card.item-card-premium {
}
.item-card.item-card-paid:hover,
.item-card.item-card-vip:hover,
.item-card.item-card-premium:hover {
}
.item-card:hover {
    border-color: var(--accent);
    background: var(--surface);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.item-card:active {
    transform: scale(0.98);
}
.item-card .card-img {
    width: 100%;
    aspect-ratio: 1;
    background: #151922;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item-card .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}
.item-card:hover .card-img img {
    transform: scale(1.05);
}
.item-card .card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 0, 85, .12), rgba(0, 200, 255, .12));
}
.item-card .card-placeholder-ico {
    font-size: 36px;
    line-height: 1;
}
.item-card .card-body {
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}
.item-card .card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.item-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(255, 45, 85, 0.12);
    color: var(--accent);
}
.item-price {
    font-size: 14px;
    font-weight: 800;
    color: #4ade80;
}
.item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.item-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.item-meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
    padding-top: 6px;
    border-top: 1px solid var(--border);
}
.search-scope-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}
.search-scope-header b {
    color: var(--text);
}
.btn-scope-reset {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}
.btn-scope-reset:hover {
    text-decoration: underline;
}

/* Botón de acción en settings (Cuenta -> Actualizar) */
.btn-setting-action {
    background: var(--accent, #e50914);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease, transform 0.1s ease, filter 0.15s ease;
    white-space: nowrap;
}
.btn-setting-action:hover {
    filter: brightness(1.12);
}
.btn-setting-action:active {
    transform: scale(0.96);
}
.btn-setting-action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================
   Tarea 187 & 193: Modal de Detalle y Contacto de Cada Publicación
   - Modo Móvil (<= 600px): Pantalla completa
   - Modo Tablet (601px a 1024px): 40% del ancho, centrado al medio
   - Modo Web / Laptops (>= 1025px): 30% del ancho, centrado al medio
   ============================================================ */
#itemDetailOverlay,
.modal-overlay#itemDetailOverlay {
    position: fixed !important;
    inset: var(--modal-top, calc(100vw * 9 / 16 + 8px)) var(--modal-right, 0) var(--modal-bottom, 0) var(--modal-left, 0) !important;
    top: var(--modal-top, calc(100vw * 9 / 16 + 8px)) !important;
    left: var(--modal-left, 0) !important;
    right: var(--modal-right, 0) !important;
    bottom: var(--modal-bottom, 0) !important;
    width: auto !important;
    height: auto !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    padding: 24px !important;
    margin: 0 !important;
    z-index: 10010 !important;
    background: rgba(0, 0, 0, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

#itemDetailOverlay:not(.active) {
    display: none !important;
}

#itemDetailOverlay .modal-box,
#itemDetailOverlay .item-detail-modal {
    width: 30vw !important;
    max-width: 30vw !important;
    min-width: 380px !important;
    height: auto !important;
    max-height: 90vh !important;
    border-radius: 20px !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7) !important;
    margin: auto !important;
    padding: 0 !important;
    background: var(--bg, #0d0e12) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* En Móvil (<= 600px): Pantalla completa sin tapar el video */
@media (max-width: 600px) {
    #itemDetailOverlay,
    .modal-overlay#itemDetailOverlay {
        top: var(--modal-top, calc(100vw * 9 / 16 + 8px)) !important;
        inset: var(--modal-top, calc(100vw * 9 / 16 + 8px)) 0 0 0 !important;
        background: var(--bg, #0d0e12) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0 !important;
    }

    #itemDetailOverlay .modal-box,
    #itemDetailOverlay .item-detail-modal {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
    }
}

/* En Tablets (601px a 1024px): 40% del ancho, centrado al medio (Tarea 193) */
@media (min-width: 601px) and (max-width: 1024px) {
    #itemDetailOverlay,
    .modal-overlay#itemDetailOverlay {
        padding: 20px !important;
    }

    #itemDetailOverlay .modal-box,
    #itemDetailOverlay .item-detail-modal {
        width: 40vw !important;
        max-width: 40vw !important;
        min-width: 360px !important;
        height: auto !important;
        max-height: 90vh !important;
        border-radius: 20px !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
        margin: auto !important;
    }
}

/* En Laptops / PCs / Modo Web (>= 1025px): 30% del ancho, centrado al medio (Tarea 193) */
@media (min-width: 1025px) {
    #itemDetailOverlay,
    .modal-overlay#itemDetailOverlay {
        padding: 24px !important;
    }

    #itemDetailOverlay .modal-box,
    #itemDetailOverlay .item-detail-modal {
        width: 30vw !important;
        max-width: 30vw !important;
        min-width: 380px !important;
        height: auto !important;
        max-height: 90vh !important;
        border-radius: 20px !important;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7) !important;
        margin: auto !important;
    }
}

#itemDetailOverlay .modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    background: var(--surface, #14151a) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 14px 20px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

#itemDetailOverlay .item-detail-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 24px 20px 80px !important;
    max-width: 820px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
.item-detail-price {
    font-size: 22px;
    font-weight: 700;
    color: #00e676;
    letter-spacing: -0.3px;
}
.item-detail-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text, #fff);
    line-height: 1.35;
    margin: 0;
}
.item-detail-desc {
    font-size: 14px;
    color: var(--text-sec, #a0a0a8);
    line-height: 1.5;
    margin: 0;
}
.item-detail-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-dim, #71717a);
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.item-detail-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
.btn-primary-action {
    flex: 1;
    background: var(--accent, #e50914);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, filter 0.15s ease;
}
.btn-primary-action:hover {
    filter: brightness(1.1);
}
.btn-primary-action:active {
    transform: scale(0.98);
}
.btn-secondary-action {
    flex: 1;
    background: rgba(255,255,255,0.08);
    color: var(--text, #fff);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-secondary-action:active {
    background: rgba(255,255,255,0.14);
}

/* Botones de acción en cabecera del modal de detalle (Guardar, Compartir) */
.modal-action-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}
.modal-action-btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
}
.modal-action-btn:active {
    transform: scale(0.92);
}
.modal-action-btn.is-saved {
    color: #ff0055 !important;
}
.modal-action-btn.is-saved svg {
    fill: #ff0055 !important;
    stroke: #ff0055 !important;
}

/* Imagen y CTA de Contactar estilo Facebook Marketplace en Detalle */
/* Tarea 188: En modo móvil las imágenes deben ocupar entre el 20 y 30% de la pantalla */
.item-detail-image-wrap {
    width: 100%;
    height: 25vh !important;
    min-height: 20vh !important;
    max-height: 30vh !important;
    border-radius: 16px;
    overflow: hidden;
    background: #141720;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    flex-shrink: 0;
}
@media (min-width: 601px) {
    .item-detail-image-wrap {
        height: 230px !important;
        max-height: 32vh !important;
        min-height: 190px !important;
    }
}
.item-detail-gallery {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item-detail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 16px;
    transition: transform 0.25s ease;
}
.item-detail-image-wrap:hover .item-detail-img {
    transform: scale(1.02);
}
.img-zoom-chip {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Identidad del Vendedor / Tienda (Tarea 188) */
.item-seller-identity {
    margin: 4px 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.item-seller-identity.store-type {
    background: rgba(0, 200, 255, 0.06);
    border: 1px solid rgba(0, 200, 255, 0.25);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.store-identity-left {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}
.store-identity-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(0, 200, 255, 0.15);
    color: #00c8ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.store-identity-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.store-identity-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}
.store-identity-name:hover {
    color: #00c8ff;
    text-decoration: underline;
}
.store-identity-badge {
    font-size: 11px;
    color: #00c8ff;
    font-weight: 600;
}
.store-identity-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.btn-open-store-modal {
    background: rgba(0, 200, 255, 0.15);
    border: 1px solid rgba(0, 200, 255, 0.4);
    color: #00c8ff;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 4px;
}
.btn-open-store-modal:hover {
    background: rgba(0, 200, 255, 0.25);
}
.btn-open-store-tab {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-muted);
    border-radius: 8px;
    padding: 6px 8px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-open-store-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.item-seller-identity.user-type {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.user-identity-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 0, 85, 0.12);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.user-identity-texts {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.user-identity-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 600;
}
.user-identity-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
}
.user-verified-badge {
    font-size: 11px;
    color: #00e676;
    font-weight: 600;
    margin-left: auto;
}
.item-detail-placeholder {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 0, 85, .15), rgba(0, 200, 255, .15));
    border-radius: 14px;
}
.item-detail-contact-section {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.fb-contact-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fb-contact-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.fb-contact-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.fb-contact-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 13px;
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
}
.fb-contact-input:focus {
    border-color: var(--accent);
}
.fb-contact-send-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    white-space: nowrap;
}
.fb-contact-send-btn:hover {
    opacity: .92;
}
.fb-contact-send-btn:active {
    transform: scale(.97);
}

/* Botón Retomar Conversación (Si ya existe chat) */
.btn-resume-conversation {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(0, 200, 255, .1);
    border: 1px solid rgba(0, 200, 255, .3);
    border-radius: 14px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background .15s, border-color .15s, transform .1s;
}
.btn-resume-conversation:hover {
    background: rgba(0, 200, 255, .18);
    border-color: rgba(0, 200, 255, .6);
    transform: translateY(-1px);
}
.resume-ico {
    font-size: 24px;
    line-height: 1;
}
.resume-texts {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.resume-title {
    font-size: 14px;
    font-weight: 700;
    color: #29b6f6;
}
.resume-sub {
    font-size: 11.5px;
    color: var(--text-muted);
}
.resume-arrow {
    font-size: 18px;
    color: #29b6f6;
    font-weight: 700;
}

/* ── Cola integrada dentro de Playlist (Tarea 173) ── */
.pl-queue-section {
    margin-bottom: 20px;
    padding-bottom: 6px;
}
.pl-queue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 10px;
}
.pl-queue-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text, #fff);
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.2px;
}
.pl-queue-title svg {
    color: var(--accent, #e50914);
}
.pl-queue-clear-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--text-muted, #aaa);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pl-queue-clear-btn:hover {
    color: #ff4d6d;
    border-color: #ff4d6d;
    background: rgba(255, 77, 109, 0.1);
}
.pl-queue-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 16px 14px 14px;
}

/* ── Flujos de Venta (FAB + Modal de Creación Multiescalón) ─────────────────── */
.mkt-fab, .trv-fab {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 40;
}
.mkt-fab[hidden], .trv-fab[hidden] {
    display: none !important;
}

/* ============================================================
   Tarea 187: Modal de Publicación de Productos y Servicios
   PANTALLA COMPLETA ESTRICTA (100vw x 100vh)
   ============================================================ */
#createListingOverlay,
.modal-overlay#createListingOverlay {
    position: fixed !important;
    inset: var(--modal-top, calc(100vw * 9 / 16 + 8px)) 0 0 0 !important;
    top: var(--modal-top, calc(100vw * 9 / 16 + 8px)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - var(--modal-top, calc(100vw * 9 / 16 + 8px))) !important;
    max-width: 100vw !important;
    max-height: calc(100vh - var(--modal-top, calc(100vw * 9 / 16 + 8px))) !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10015 !important;
    background: var(--bg, #0d0e12) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

#createListingOverlay:not(.active) {
    display: none !important;
}

#createListingOverlay .modal-box,
#createListingOverlay .create-listing-modal {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--bg, #0d0e12) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#createListingOverlay .modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: var(--surface, #14151a) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 14px 20px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

#createListingOverlay .create-listing-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 24px 20px 80px !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.modal-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.modal-back-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    padding: 4px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background .15s, color .15s;
}
.modal-back-btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, .08);
}
.modal-back-btn[hidden] { display: none !important; }

/* Selector de Modalidad (Cards) */
.listing-modes-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 4px;
}
.listing-mode-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--surface2);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color .18s, background .18s, transform .12s;
    text-align: left;
    color: var(--text);
}
.listing-mode-card:hover {
    border-color: var(--accent);
    background: rgba(255, 0, 85, .05);
}
.listing-mode-card:active {
    transform: scale(.98);
}
.listing-mode-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, .06);
}
.listing-mode-icon.rapida { background: rgba(255, 170, 0, .15); color: #ffa726; }
.listing-mode-icon.tienda { background: rgba(0, 200, 255, .15); color: #29b6f6; }
.listing-mode-icon.negocio { background: rgba(255, 0, 85, .15); color: var(--accent); }

.listing-mode-info { flex: 1; }
.listing-mode-title { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.listing-mode-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); font-weight: 700; margin-bottom: 4px; }
.listing-mode-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.38; }

/* Formularios de Publicación */
.listing-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 4px;
}
.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
}
.form-label small {
    color: var(--text-muted);
    font-weight: 400;
}
.form-input, .form-textarea, .form-select {
    width: 100%;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    color: var(--text);
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
    border-color: var(--accent);
}
.form-textarea {
    resize: vertical;
    min-height: 72px;
    font-family: inherit;
}
.form-row-dual {
    display: flex;
    gap: 10px;
}
.form-row-dual .form-field { flex: 1; }

/* Caja de Opciones Modulares (Tienda) */
.modular-options-box {
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 12px;
    background: rgba(255, 255, 255, .02);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.modular-box-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 2px;
}
.modular-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}
.modular-toggle-row input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.modular-field-input {
    margin-top: 4px;
}

/* Botón de Publicar / Guardar */
.btn-submit-listing {
    width: 100%;
    padding: 12px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
    box-shadow: 0 4px 14px rgba(255, 0, 85, .3);
    transition: transform .12s, opacity .15s;
}
.btn-submit-listing:active { transform: scale(.98); }

/* Badges de tipo de vendedor en tarjetas */
.item-tags-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.item-seller-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: .4px;
    line-height: 1.2;
}
.item-seller-badge.rapida { background: rgba(255, 170, 0, .2); color: #ffa726; border: 1px solid rgba(255, 170, 0, .4); }
.item-seller-badge.tienda { background: rgba(0, 200, 255, .2); color: #29b6f6; border: 1px solid rgba(0, 200, 255, .4); }
.item-seller-badge.negocio { background: rgba(255, 0, 85, .2); color: var(--accent); border: 1px solid rgba(255, 0, 85, .4); }
.item-seller-badge.user-owned { background: rgba(76, 175, 80, .2); color: #66bb6a; border: 1px solid rgba(76, 175, 80, .4); }

/* Extra info en modal de detalle */
.item-detail-extra {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}
.item-detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.item-detail-chip {
    font-size: 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--text);
}
.item-detail-del-btn {
    background: none;
    border: 1px solid rgba(255, 77, 109, .4);
    color: #ff4d6d;
    padding: 8px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-start;
    margin-top: 4px;
    transition: background .15s;
}
.item-detail-del-btn:hover {
    background: rgba(255, 77, 109, .15);
}

/* Selector Geográfico de Publicación (Fase 1.B) */
.geo-picker-box {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    background: rgba(255, 255, 255, .02);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.geo-picker-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.geo-preview-tag {
    font-size: 12.5px;
    color: var(--accent);
    background: rgba(255, 0, 85, .08);
    border: 1px dashed rgba(255, 0, 85, .3);
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.geo-hint {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.35;
}

/* ── Chat Contextual 1 a 1 de Producto/Servicio (Tarea 193: 30% Web, 40% Tablet Centrado) ── */
.product-chat-overlay {
    position: fixed !important;
    inset: var(--modal-top, calc(100vw * 9 / 16 + 8px)) 0 0 0 !important;
    top: var(--modal-top, calc(100vw * 9 / 16 + 8px)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - var(--modal-top, calc(100vw * 9 / 16 + 8px))) !important;
    max-width: 100vw !important;
    max-height: calc(100vh - var(--modal-top, calc(100vw * 9 / 16 + 8px))) !important;
    z-index: 10025 !important;
    background: rgba(0, 0, 0, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.product-chat-overlay[hidden] {
    display: none !important;
}
.product-chat-container {
    width: 30vw !important;
    max-width: 30vw !important;
    min-width: 380px !important;
    height: auto !important;
    max-height: 90vh !important;
    border-radius: 20px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg, #0d0e12) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7) !important;
    margin: auto !important;
}
@media (max-width: 600px) {
    .product-chat-overlay {
        background: var(--bg, #0d0e12) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0 !important;
    }
    .product-chat-container {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
    }
}
@media (min-width: 601px) and (max-width: 1024px) {
    .product-chat-overlay {
        padding: 20px !important;
    }
    .product-chat-container {
        width: 40vw !important;
        max-width: 40vw !important;
        min-width: 360px !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
    }
}

/* ── Notificación Flotante In-App (Push Banner Superior) ── */
.in-app-toast {
    position: fixed;
    top: calc(var(--modal-top, calc(100vw * 9 / 16 + 8px)) + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999 !important;
    width: calc(100% - 24px);
    max-width: 440px;
    background: var(--surface2);
    border: 1px solid var(--accent);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    gap: 12px;
    cursor: pointer;
    animation: toastSlideDown .25s ease-out;
    backdrop-filter: blur(10px);
}
@media (min-width: 769px) {
    .in-app-toast {
        top: 14px;
        left: calc(var(--modal-left, 60%) + (100vw - var(--modal-left, 60%)) / 2);
    }
}
.in-app-toast[hidden] {
    display: none !important;
}
@keyframes toastSlideDown {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}
.toast-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.toast-icon {
    font-size: 24px;
    line-height: 1;
}
.toast-texts {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.toast-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.toast-body {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.toast-close:hover {
    color: var(--text);
}
.product-chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.chat-product-summary {
    flex: 1;
    min-width: 0;
}
.chat-prod-title {
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}
.chat-prod-meta {
    font-size: 11.5px;
    color: var(--text-muted);
    display: flex;
    gap: 8px;
    margin-top: 2px;
}
.chat-prod-price {
    font-weight: 700;
    color: var(--accent);
}
.chat-role-badge-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}
.chat-role-indicator {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: .4px;
}
.chat-role-indicator.seller { background: rgba(255, 0, 85, .15); color: var(--accent); border: 1px solid rgba(255, 0, 85, .3); }
.chat-role-indicator.buyer  { background: rgba(0, 200, 255, .15); color: #29b6f6; border: 1px solid rgba(0, 200, 255, .3); }
.chat-role-switch-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 10.5px;
    cursor: pointer;
    padding: 2px 4px;
    text-decoration: underline;
}
.chat-role-switch-btn:hover { color: var(--text); }

.product-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.chat-bubble {
    max-width: 82%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.4;
    word-break: break-word;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.chat-bubble.mine {
    align-self: flex-end;
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 3px;
}
.chat-bubble.other {
    align-self: flex-start;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    border-bottom-left-radius: 3px;
}
.chat-bubble-time {
    font-size: 10px;
    opacity: .75;
    align-self: flex-end;
}

/* Tarjeta de Propuesta / Acuerdo en Chat */
.chat-deal-card {
    align-self: center;
    width: 94%;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 12px 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(255, 0, 85, .1);
}
.deal-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.deal-card-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent);
    letter-spacing: .5px;
}
.deal-card-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}
.deal-card-status.confirmed { background: rgba(76, 175, 80, .2); color: #66bb6a; border: 1px solid rgba(76, 175, 80, .4); }
.deal-card-status.pending   { background: rgba(255, 170, 0, .2); color: #ffa726; border: 1px solid rgba(255, 170, 0, .4); }
.deal-card-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12.5px;
    color: var(--text);
}
.deal-detail-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.deal-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.btn-deal-action {
    flex: 1;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: opacity .15s;
}
.btn-deal-action.confirm { background: #4caf50; color: #fff; }
.btn-deal-action.view-cal { background: var(--accent); color: #fff; }
.btn-deal-action.modify   { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }

/* Barra de Herramientas del Vendedor */
.seller-chat-toolbar {
    background: var(--surface2);
    border-top: 1px solid var(--border);
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.seller-toolbar-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: .4px;
}
.seller-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.seller-tool-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 11.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: border-color .15s, background .15s;
}
.seller-tool-btn:hover { border-color: var(--accent); }
.seller-tool-btn.primary {
    background: rgba(255, 0, 85, .15);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

/* Panel Desplegable de Edición de Propuesta */
.seller-proposal-panel {
    background: var(--surface);
    border: 1px dashed var(--accent);
    border-radius: var(--radius);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
}
.seller-proposal-panel label {
    font-weight: 600;
    margin-bottom: 2px;
    display: block;
}
.prop-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.prop-row-dual {
    display: flex;
    gap: 8px;
}
.prop-row-dual > div { flex: 1; }
.prop-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.btn-cancel-prop {
    flex: 1;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 8px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}
.btn-confirm-prop {
    flex: 2;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* Input Form */
.product-chat-input-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.chat-input {
    flex: 1;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 13.5px;
    outline: none;
}
.chat-input:focus { border-color: var(--accent); }
.chat-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .12s;
}
.chat-send-btn:active { transform: scale(.95); }

/* ── Calendario Dual: Segmented Filter y Cards (Tarea 184) ── */
.cal-role-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 2px 10px 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.cal-role-filter::-webkit-scrollbar { display: none; }

.cal-role-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 11px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s, color .18s, border-color .18s, padding .18s;
}
.cal-role-chip svg {
    flex-shrink: 0;
    display: block;
}
/* REGLA TAREA 184: solo mostrar icono + titulo del tab activo, los demas tabs solo icono */
.cal-role-chip > span {
    display: none !important;
}
.cal-role-chip:hover {
    color: var(--text);
    border-color: rgba(255, 255, 255, .2);
}
.cal-role-chip.active {
    background: rgba(255, 0, 85, .15);
    border-color: var(--accent);
    color: var(--accent);
    padding: 0 14px;
}
.cal-role-chip.active > span {
    display: inline !important;
}

/* ── Tarjetas de Calendario Minimalistas (Tarea 184) ── */
.cal-event-card.minimal {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
    transition: border-color .15s, background .15s;
}
.cal-event-card.minimal:hover {
    border-color: rgba(255, 255, 255, 0.22);
}
.cal-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.cal-card-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-card-subinfo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    flex-wrap: wrap;
}
.cal-card-party b {
    color: var(--text);
    font-weight: 700;
}
.cal-card-sep {
    opacity: 0.45;
}
.cal-card-motive {
    color: #29b6f6;
    font-weight: 600;
}
.cal-card-time {
    color: var(--text);
    font-weight: 700;
}

/* Badges condicionales estrictos: SOLO para mensaje sin responder o cuando es la hora */
.cal-mini-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1;
}
.cal-mini-badge.unread {
    background: rgba(255, 0, 85, .15);
    border: 1px solid var(--accent);
    color: var(--accent);
}
.cal-mini-badge.unread .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
}
.cal-mini-badge.urgent {
    background: rgba(255, 170, 0, .15);
    border: 1px solid #ff9800;
    color: #ffb74d;
    animation: urgentPulse 1.5s infinite;
}
@keyframes urgentPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* Fila de recordatorio "Avisarme 5/10/30/60 min antes" */
.cal-card-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.cal-reminder-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cal-reminder-lbl {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}
.cal-reminder-chips {
    display: flex;
    align-items: center;
    gap: 4px;
}
.btn-remind-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s;
}
.btn-remind-chip:hover {
    color: var(--text);
    border-color: rgba(255, 255, 255, .3);
}
.btn-remind-chip.active {
    background: rgba(0, 230, 118, 0.15);
    border-color: #00e676;
    color: #00e676;
    font-weight: 700;
}
.cal-btn-chat-mini {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}
.cal-btn-chat-mini:hover {
    background: rgba(255, 0, 85, .15);
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Modal de Alarma Sonora y Recordatorio Anticipado (Tarea 184) ── */
.alarm-overlay {
    position: fixed;
    inset: var(--modal-top, calc(100vw * 9 / 16 + 8px)) 0 0 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn .2s ease;
}
.alarm-overlay[hidden] {
    display: none !important;
}
.alarm-modal {
    background: #181a20;
    border: 2px solid var(--accent);
    box-shadow: 0 0 35px rgba(255, 0, 85, 0.4), 0 16px 40px rgba(0, 0, 0, 0.7);
    border-radius: 20px;
    padding: 24px 20px;
    width: 100%;
    max-width: 360px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.alarm-icon-pulse {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 0, 85, 0.2);
    border: 2px solid var(--accent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: alarmPulse 1s infinite alternate;
}
@keyframes alarmPulse {
    0% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 0, 85, 0.4); }
    100% { transform: scale(1.12); box-shadow: 0 0 30px rgba(255, 0, 85, 0.8); }
}
.alarm-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--accent);
    text-transform: uppercase;
}
.alarm-title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
}
.alarm-time-info {
    font-size: 14px;
    font-weight: 700;
    color: #00e676;
}
.alarm-party-info {
    font-size: 13px;
    color: var(--text-muted);
}
.alarm-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}
.btn-alarm-stop {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    background: #ff0055;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    transition: transform .1s, background .15s;
}
.btn-alarm-stop:active {
    transform: scale(.97);
}
.btn-alarm-chat {
    width: 100%;
    padding: 11px;
    border-radius: 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.cal-action-btn {
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s;
}
.cal-action-btn:hover { border-color: var(--accent); }
.cal-action-btn.checkin {
    background: rgba(255, 170, 0, .15);
    border-color: #ffa726;
    color: #ffa726;
}

/* Modal Verificación Check-in / Entrega */
.checkin-modal-overlay {
    position: fixed;
    inset: var(--modal-top, calc(100vw * 9 / 16 + 8px)) 0 0 0;
    z-index: 10001;
    background: rgba(0, 0, 0, .85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    box-sizing: border-box;
}
.checkin-modal-overlay[hidden] { display: none !important; }
.checkin-modal-box {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .6);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.checkin-modal-title { font-size: 16px; font-weight: 700; color: var(--text); }
.checkin-modal-desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.4; }
.checkin-modal-details {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.checkin-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}
.btn-checkin-no {
    flex: 1;
    padding: 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.btn-checkin-yes {
    flex: 1.5;
    padding: 10px;
    background: #4caf50;
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* ── Tarjeta de Ubicación en Filtros (Estilo Facebook Marketplace) ── */
.filter-location-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-top: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.filter-location-card:hover {
    border-color: var(--accent);
    background: rgba(255, 0, 85, .04);
}
.loc-card-icon {
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 0, 85, .12);
    flex-shrink: 0;
}
.loc-card-info {
    flex: 1;
    min-width: 0;
}
.loc-card-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: .4px;
    margin-bottom: 2px;
}
.loc-card-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.loc-card-sub {
    font-size: 11.5px;
    color: var(--accent);
    font-weight: 600;
    margin-top: 1px;
}
.loc-card-action {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity .15s;
}
.loc-card-action:hover { opacity: .9; }
.btn-reset-loc-filter {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 11.5px;
    cursor: pointer;
    padding: 4px 0;
    text-decoration: underline;
    display: inline-block;
}
.btn-reset-loc-filter:hover { color: var(--text); }

/* ── Modal Selector de Ubicación con Mapa Interactivo (Leaflet + OpenStreetMap) ── */
.location-map-modal-overlay {
    position: fixed;
    inset: var(--modal-top, calc(100vw * 9 / 16 + 8px)) 0 0 0;
    z-index: 10002;
    background: rgba(0, 0, 0, .85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}
.location-map-modal-overlay[hidden] { display: none !important; }
.location-map-modal-box {
    width: 100%;
    max-width: 520px;
    height: 92vh;
    max-height: 820px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.loc-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}
.loc-map-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.loc-map-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.loc-map-subtitle {
    font-size: 11.5px;
    color: var(--text-muted);
}
.loc-map-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
}
.loc-map-close-btn:hover { color: var(--text); background: rgba(255, 255, 255, .08); }

/* Buscador en el mapa */
.loc-map-search-bar {
    position: relative;
    padding: 10px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    z-index: 1005;
}
.loc-map-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.loc-search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    pointer-events: none;
}
.loc-map-input {
    width: 100%;
    padding: 9px 34px 9px 38px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
.loc-map-input:focus { border-color: var(--accent); }
.loc-clear-btn {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 4px;
}
.loc-suggestions-list {
    position: absolute;
    top: calc(100% - 2px);
    left: 14px;
    right: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
    max-height: 220px;
    overflow-y: auto;
    z-index: 1010;
}
.loc-suggestion-item {
    padding: 9px 12px;
    font-size: 12.5px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.loc-suggestion-item:last-child { border-bottom: none; }
.loc-suggestion-item:hover { background: rgba(255, 0, 85, .1); color: var(--accent); }

/* Presets rápidos */
.loc-quick-presets {
    display: flex;
    gap: 6px;
    padding: 8px 14px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}
.loc-quick-presets::-webkit-scrollbar { display: none; }
.loc-preset-chip {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, background .15s;
}
.loc-preset-chip:hover { border-color: var(--accent); color: var(--accent); }

/* Contenedor Canvas del Mapa */
.loc-map-canvas-wrap {
    position: relative;
    flex: 1;
    min-height: 280px;
    overflow: hidden;
    background: #1a1a24;
}
.loc-map-element {
    width: 100%;
    height: 100%;
    background: #1a1a24;
}
.loc-center-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    pointer-events: none;
    z-index: 1000;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
    animation: locPinBounce .3s ease-out;
}
@keyframes locPinBounce {
    0% { transform: translate(-50%, -120%); }
    100% { transform: translate(-50%, -100%); }
}
.loc-map-gps-btn {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 1000;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
    transition: border-color .15s;
}
.loc-map-gps-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Barra resumen de selección */
.loc-map-selected-bar {
    padding: 10px 14px;
    background: var(--surface2);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.loc-selected-info {
    flex: 1;
    min-width: 0;
}
.loc-selected-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.loc-selected-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}
.loc-map-reset-btn {
    padding: 6px 10px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s;
}
.loc-map-reset-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Footer de acciones */
.loc-map-footer {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}
.btn-loc-cancel {
    flex: 1;
    padding: 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.btn-loc-apply {
    flex: 2;
    padding: 10px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 0, 85, .25);
    transition: opacity .15s;
}
.btn-loc-apply:hover { opacity: .9; }

/* ── Badges de Prioridad y Tier en Tarjetas ───────────────────────────────── */
.card-tier-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    z-index: 2;
    pointer-events: none;
}
.card-tier-badge.pro {
    background: #0284c7;
    color: #fff;
    box-shadow: 0 2px 6px rgba(2, 132, 199, .4);
}
.card-tier-badge.vip {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #0b0e14;
    box-shadow: 0 2px 6px rgba(245, 158, 11, .5);
}

/* ── Sección de Fotos al Crear Publicación (Primero que todo) ─────────────── */
.listing-images-section {
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 14px;
}
.listing-images-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.img-tier-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(255, 0, 85, .1);
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 0, 85, .25);
}
.dash-upload-area {
    border: 2px dashed rgba(255, 255, 255, .16);
    border-radius: 12px;
    padding: 18px 12px;
    text-align: center;
    cursor: pointer;
    background: rgba(0, 0, 0, .2);
    transition: border-color .15s, background .15s;
}
.dash-upload-area:hover, .dash-upload-area.dragging {
    border-color: var(--accent);
    background: rgba(255, 0, 85, .04);
}
.dash-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
}
.dash-upload-placeholder svg {
    color: var(--text-muted);
    transition: transform .15s ease;
}
.dash-upload-area:hover .dash-upload-placeholder svg {
    transform: scale(1.1);
    color: var(--accent);
}
.dash-upload-placeholder p {
    margin: 0;
    font-size: 13px;
    color: var(--text);
}
.dash-upload-placeholder small {
    font-size: 11.5px;
    color: var(--text-muted);
}
.listing-images-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.dash-image-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: #111;
    border: 1px solid var(--border);
}
.dash-image-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dash-image-order {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0, 0, 0, .75);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
}
.dash-image-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, .75);
    color: #ff4d4d;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    line-height: 1;
    transition: background .15s;
}
.dash-image-remove:hover {
    background: #ff4d4d;
    color: #fff;
}
.dash-image-size-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .7);
    color: #94a3b8;
    font-size: 9px;
    text-align: center;
    padding: 1px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.listing-tier-callout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: rgba(2, 132, 199, .08);
    border: 1px solid rgba(2, 132, 199, .2);
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 10px;
    font-size: 11.5px;
}
.tier-callout-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--text);
}
.tier-callout-text b { color: #38bdf8; }
.btn-tier-callout-upgrade {
    padding: 6px 12px;
    background: #0284c7;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.btn-tier-callout-upgrade:hover { background: #0369a1; }

/* ── Galería de Fotos en Modal de Detalle de Publicación ──────────────────── */
.item-detail-gallery {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.item-detail-thumb-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.gallery-thumb {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity .15s, border-color .15s;
}
.gallery-thumb.active, .gallery-thumb:hover {
    opacity: 1;
    border-color: var(--accent);
}
.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Modal de Suscripciones (Free, Pro $5, VIP $20) ───────────────────────── */
.subscription-modal {
    max-width: 680px !important;
    width: 94vw !important;
}
.subscription-modal-body {
    padding: 16px 18px 24px !important;
}
.subscription-hero {
    text-align: center;
    margin-bottom: 20px;
}
.subscription-hero h4 {
    margin: 0 0 6px;
    font-size: 17px;
    color: var(--text);
    font-weight: 800;
}
.subscription-hero p {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted);
}
.subscription-tiers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 650px) {
    .subscription-tiers-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}
.tier-card {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .15s, border-color .15s;
}
.tier-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, .25);
}
.tier-card.tier-pro {
    border-color: rgba(2, 132, 199, .5);
    background: linear-gradient(180deg, rgba(2, 132, 199, .08), var(--surface2));
}
.tier-card.tier-vip {
    border-color: rgba(245, 158, 11, .5);
    background: linear-gradient(180deg, rgba(245, 158, 11, .09), var(--surface2));
}
.tier-popular-tag {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #0284c7;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 999px;
    letter-spacing: .5px;
}
.tier-header {
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
}
.tier-badge {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
}
.tier-badge.pro { color: #38bdf8; }
.tier-badge.vip { color: #fbbf24; }
.tier-name {
    margin: 4px 0 8px;
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
}
.tier-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.price-val {
    font-size: 24px;
    font-weight: 900;
    color: var(--text);
}
.tier-card.tier-pro .price-val { color: #38bdf8; }
.tier-card.tier-vip .price-val { color: #fbbf24; }
.price-period {
    font-size: 11px;
    color: var(--text-muted);
}
.tier-features {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.tier-features li {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--text);
    position: relative;
    padding-left: 16px;
}
.tier-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #22c55e;
    font-weight: 800;
}
.btn-tier-select {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    transition: background .15s, opacity .15s;
}
.btn-tier-select:hover { background: rgba(255, 255, 255, .1); }
.btn-tier-select.primary {
    background: #0284c7;
    color: #fff;
    border: none;
}
.btn-tier-select.primary:hover { background: #0369a1; }
.btn-tier-select.vip {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #0b0e14;
    border: none;
    font-weight: 800;
}
.btn-tier-select.vip:hover { opacity: .9; }
.btn-tier-select.current {
    background: rgba(34, 197, 94, .15);
    border-color: rgba(34, 197, 94, .4);
    color: #4ade80;
    cursor: default;
}

/* ── Segmented Control personalizado (Cero dropdowns nativos del navegador) ── */
.custom-seg-picker {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    height: 38px;
    box-sizing: border-box;
    align-items: center;
}
.custom-seg-picker .seg-btn {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s ease;
    padding: 6px 8px;
    white-space: nowrap;
    text-align: center;
}
.custom-seg-picker .seg-btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, .05);
}
.custom-seg-picker .seg-btn.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 6px rgba(255, 46, 99, .3);
}

/* ── Banner Cuadrado de Publicación en Feeds (Marketplace y Travel - Tarea 180) ── */
.item-banner-square {
    grid-column: 1 / -1 !important;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 320px;
    max-height: 480px;
    margin: 8px 0;
    border-radius: 16px;
    background: radial-gradient(circle at 85% 15%, rgba(229, 9, 20, 0.22), transparent 55%),
                radial-gradient(circle at 15% 85%, rgba(255, 120, 0, 0.12), transparent 50%),
                linear-gradient(150deg, #18191e 0%, #101114 100%);
    border: 1.5px solid rgba(229, 9, 20, 0.38);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.item-banner-square:hover {
    transform: translateY(-2px);
    border-color: var(--accent, #e50914);
    box-shadow: 0 16px 36px rgba(229, 9, 20, 0.28), 0 4px 12px rgba(0, 0, 0, 0.6);
}
.item-banner-square:active {
    transform: scale(0.99);
}

.banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(229, 9, 20, 0.15);
    border: 1px solid rgba(229, 9, 20, 0.45);
    color: #ff4b55;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.banner-badge svg {
    flex-shrink: 0;
}

.banner-icon-bubble {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(229, 9, 20, 0.25), rgba(255, 80, 0, 0.15));
    border: 1.5px solid rgba(229, 9, 20, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent, #e50914);
    margin-bottom: 12px;
    box-shadow: 0 6px 20px rgba(229, 9, 20, 0.25);
    transition: transform .25s ease;
}
.item-banner-square:hover .banner-icon-bubble {
    transform: scale(1.08) rotate(4deg);
}

.banner-title {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin: 0 0 8px;
    max-width: 320px;
}

.banner-desc {
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 16px;
    max-width: 300px;
}

.btn-banner-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #e50914 0%, #ff2a3a 100%);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 11px 22px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(229, 9, 20, 0.45);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-banner-action:hover {
    filter: brightness(1.1);
    box-shadow: 0 8px 24px rgba(229, 9, 20, 0.6);
}
.btn-banner-action:active {
    transform: scale(0.97);
}

.banner-trust-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 14px;
}
.banner-trust-note svg {
    color: #4ade80;
    flex-shrink: 0;
}

/* ── Control de Radio Tipo Facebook Marketplace (Tarea 181) ── */
/* ── Tarjeta de Zona Sin Publicaciones y Sugerencia de Ampliación ── */
.loc-empty-zone-card {
    grid-column: 1 / -1;
    background: linear-gradient(150deg, #18191e 0%, #121316 100%);
    border: 1px solid rgba(229, 9, 20, 0.35);
    border-radius: 16px;
    padding: 24px 20px;
    margin: 12px 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.loc-empty-zone-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(229, 9, 20, 0.12);
    border: 1px solid rgba(229, 9, 20, 0.35);
    color: var(--accent, #e50914);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.loc-empty-zone-title {
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 8px;
}
.loc-empty-zone-desc {
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 16px;
    max-width: 380px;
}
.loc-expand-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
}
.btn-expand-radius, .btn-expand-national, .btn-expand-global {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s ease;
}
.btn-expand-radius {
    background: var(--accent, #e50914);
    border: 1px solid var(--accent, #e50914);
    color: #fff;
    box-shadow: 0 2px 8px rgba(229, 9, 20, 0.35);
}
.btn-expand-radius:hover {
    filter: brightness(1.1);
}
.btn-expand-national {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}
.btn-expand-national:hover {
    background: rgba(255, 255, 255, 0.14);
}
.btn-expand-global {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    color: var(--text-muted, #94a3b8);
}
.btn-expand-global:hover {
    border-color: #fff;
    color: #fff;
}

.loc-first-publisher-box {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.first-pub-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #f59e0b;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.first-pub-title {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 6px;
}
.first-pub-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.4;
    margin-bottom: 12px;
    max-width: 340px;
}
.btn-first-publish {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #0b0e14;
    border: none;
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
    transition: transform .15s ease, filter .15s ease;
}
.btn-first-publish:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.btn-first-publish:active {
    transform: scale(0.98);
}

/* ==========================================================================
   Tarea 182: Personalización por Categoría (Comprador y Vendedor)
   ========================================================================== */

/* Cajas de Interacción Adaptativa en Detalle de Publicación */
.hotel-reservation-box,
.job-apply-box,
.job-create-cv-box,
.transport-booking-box,
.food-order-box,
.service-request-box,
.product-purchase-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    box-sizing: border-box;
}

.cat-contact-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.cat-contact-header svg {
    color: var(--accent);
    flex-shrink: 0;
}

.cat-form-row {
    display: flex;
    gap: 10px;
}
.cat-form-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cat-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cat-form-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}
.cat-form-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    padding: 8px 10px;
    font-size: 12.5px;
    outline: none;
    transition: border-color .15s;
    font-family: inherit;
}
.cat-form-input:focus {
    border-color: var(--accent);
}

.cat-accessibility-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(240, 45, 101, .06);
    border: 1px dashed rgba(240, 45, 101, .25);
    border-radius: 8px;
    font-size: 11.5px;
    color: var(--text);
}
.cat-accessibility-row .custom-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
    width: 100%;
}

.cat-res-summary {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--surface2);
    padding: 7px 10px;
    border-radius: 6px;
    text-align: center;
}

.btn-cat-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
}
.btn-cat-action:hover {
    opacity: .93;
}
.btn-cat-action:active {
    transform: scale(.98);
}

/* Tarjeta Mini de Candidato / Postulante */
.candidate-mini-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
}
.cand-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(240, 45, 101, .15);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cand-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.cand-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
}
.cand-title {
    font-size: 11px;
    color: var(--text-muted);
}
.btn-cand-edit {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
}
.btn-cand-edit:hover {
    color: var(--text);
    border-color: var(--accent);
}

/* Variantes de Tarjetas de Acuerdo en Chat */
.chat-deal-card.hotel-card {
    border-color: #3b82f6;
    box-shadow: 0 4px 14px rgba(59, 130, 246, .12);
}
.chat-deal-card.hotel-card .deal-card-badge {
    color: #60a5fa;
}
.chat-deal-card.job-card {
    border-color: #06b6d4;
    box-shadow: 0 4px 14px rgba(6, 182, 212, .12);
}
.chat-deal-card.job-card .deal-card-badge {
    color: #22d3ee;
}
.chat-deal-card.transport-card {
    border-color: #f59e0b;
    box-shadow: 0 4px 14px rgba(245, 158, 11, .12);
}
.chat-deal-card.transport-card .deal-card-badge {
    color: #fbbf24;
}
.chat-deal-card.food-card {
    border-color: #10b981;
    box-shadow: 0 4px 14px rgba(16, 185, 129, .12);
}
.chat-deal-card.food-card .deal-card-badge {
    color: #34d399;
}
.chat-deal-card.service-card {
    border-color: #8b5cf6;
    box-shadow: 0 4px 14px rgba(139, 92, 246, .12);
}
.chat-deal-card.service-card .deal-card-badge {
    color: #a78bfa;
}

/* ── Tarea 185/189: Anuncios Grandes de Usuarios de Pago (16:9 y Cuadrado) ── */
.item-card.item-card-paid {
    grid-column: 1 / -1 !important;
    width: 100%;
    margin: 4px 0 8px;
    border-radius: 14px;
    background: var(--surface2, #18191e);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.item-card.item-card-paid:hover {
    transform: translateY(-2px);
}
.item-card.item-card-paid:active {
    transform: scale(0.99);
}

.paid-card-media {
    position: relative;
    width: 100%;
    background: #0d0e12;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.paid-card-media.format-16-9 {
    aspect-ratio: 16 / 9 !important;
    max-height: 480px;
}
.paid-card-media.format-square {
    aspect-ratio: 1 / 1 !important;
    max-height: 480px;
}
.paid-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.item-card.item-card-paid:hover .paid-card-media img {
    transform: scale(1.03);
}
.paid-card-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(16, 17, 21, 0.9) 0%, rgba(16, 17, 21, 0.2) 45%, transparent 100%);
    pointer-events: none;
}
/* Tarea 189: Badges de tier ocultos tanto en tarjetas como en modales */
.paid-card-badges,
.paid-badge,
.paid-format-chip,
.card-tier-badge {
    display: none !important;
}

.paid-card-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--surface2, #18191e);
}
.paid-card-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.paid-card-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text, #ffffff);
    line-height: 1.3;
    flex: 1;
}
.paid-card-price {
    font-size: 16px;
    font-weight: 800;
    color: #00d26a;
    white-space: nowrap;
}
.paid-card-desc {
    font-size: 13px;
    color: var(--text-dim, #a0a0a8);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.paid-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.paid-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-dim, #8e8e93);
}
.paid-meta-loc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.paid-meta-sep {
    opacity: 0.5;
}
.paid-meta-date {
    font-weight: 500;
}
.btn-paid-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f02d65, #ff3b6f);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
}
.btn-paid-cta:hover {
    filter: brightness(1.1);
    transform: translateX(2px);
}

/* ============================================================
   Tarea 188: Visor de Imágenes en Pantalla Completa (Lightbox Carrusel Infinito)
   ============================================================ */
.image-lightbox-overlay {
    position: fixed !important;
    inset: var(--modal-top, calc(100vw * 9 / 16 + 8px)) 0 0 0 !important;
    top: var(--modal-top, calc(100vw * 9 / 16 + 8px)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - var(--modal-top, calc(100vw * 9 / 16 + 8px))) !important;
    max-width: 100vw !important;
    max-height: calc(100vh - var(--modal-top, calc(100vw * 9 / 16 + 8px))) !important;
    z-index: 10035 !important;
    background: rgba(5, 6, 8, 0.98) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
.image-lightbox-overlay[hidden] {
    display: none !important;
}
.lightbox-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, transparent 100%);
    z-index: 10;
}
.lightbox-counter {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: 0.5px;
}
.lightbox-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lightbox-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.1s;
}
.lightbox-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}
.lightbox-btn:active {
    transform: scale(0.92);
}
.lightbox-btn.close {
    background: rgba(255, 0, 85, 0.2);
    color: #ff3b6f;
}
.lightbox-btn.close:hover {
    background: rgba(255, 0, 85, 0.35);
    color: #fff;
}
.lightbox-stage {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 10px 14px;
}
.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(20, 22, 28, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: background 0.15s, transform 0.15s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.lightbox-nav-btn:hover {
    background: rgba(255, 0, 85, 0.85);
    border-color: transparent;
}
.lightbox-nav-btn:active {
    transform: translateY(-50%) scale(0.92);
}
.lightbox-nav-btn.prev { left: 14px; }
.lightbox-nav-btn.next { right: 14px; }
.lightbox-img-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    touch-action: pan-y;
}
.lightbox-img {
    max-width: 95vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.8);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.lightbox-bottom-bar {
    padding: 14px 20px 24px;
    display: flex;
    justify-content: center;
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, transparent 100%);
    z-index: 10;
}
.lightbox-thumb-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px;
    max-width: 90vw;
    scrollbar-width: thin;
}
.lightbox-thumb-strip .thumb {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    object-fit: cover;
    opacity: 0.55;
    transition: opacity 0.15s, border-color 0.15s;
}
.lightbox-thumb-strip .thumb.active {
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(255, 0, 85, 0.4);
}

/* ============================================================
   Tarea 188: Modal de Tienda a Pantalla Completa (100vw x 100vh)
   ============================================================ */
.store-profile-overlay {
    position: fixed !important;
    inset: var(--modal-top, calc(100vw * 9 / 16 + 8px)) 0 0 0 !important;
    top: var(--modal-top, calc(100vw * 9 / 16 + 8px)) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - var(--modal-top, calc(100vw * 9 / 16 + 8px))) !important;
    max-width: 100vw !important;
    max-height: calc(100vh - var(--modal-top, calc(100vw * 9 / 16 + 8px))) !important;
    z-index: 10020 !important;
    background: var(--bg, #0d0e12) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
.store-profile-overlay[hidden] {
    display: none !important;
}
.store-profile-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg, #0d0e12);
}
.store-profile-header {
    position: sticky;
    top: 0;
    z-index: 25;
    background: var(--surface, #14151a);
    border-bottom: 1px solid var(--border);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.store-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.store-header-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.store-header-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.store-header-verified {
    font-size: 11px;
    color: #00c8ff;
    font-weight: 600;
}
.btn-store-ext {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
}
.btn-store-ext:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #00c8ff;
}
.store-profile-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 80px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.store-hero-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.store-hero-banner {
    height: 120px;
    background: linear-gradient(135deg, #1e2640, #111420);
    background-size: cover;
    background-position: center;
}
.store-hero-content {
    padding: 0 20px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.store-hero-logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #181d28;
    border: 3px solid var(--surface);
    color: #00c8ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -32px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.store-hero-logo img {
    width: 100%;
    height: 100%;
    border-radius: 13px;
    object-fit: cover;
}
.store-hero-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.store-title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin: 0;
}
.store-meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.store-category-chip {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 200, 255, 0.12);
    color: #00c8ff;
    font-weight: 600;
}
.store-loc-chip {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}
.store-rating-chip {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 215, 0, 0.12);
    color: #ffd700;
    font-weight: 700;
}
.store-desc {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-sec);
    margin: 4px 0 0;
}
.store-feed-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.store-feed-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.store-feed-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.store-feed-count {
    font-size: 12px;
    color: var(--text-muted);
}
.store-feed-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* ── Tareas 190 y 191: Modo Sidebar 20% y Grillas en Modo Web (5 por fila Marketplace/Travel, 3 en YouTube, PRO span 1, Premium span 2) ── */
.player-sidebar-nav {
    display: none;
}
.sidebar-nav-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.sidebar-nav-title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    padding: 0 8px 4px;
}
.sidebar-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    box-sizing: border-box;
}
.sidebar-nav-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--accent);
}
.sidebar-nav-btn.active {
    background: rgba(255, 0, 85, 0.12);
    color: var(--accent);
    border-color: rgba(255, 0, 85, 0.25);
    font-weight: 600;
}
.sidebar-nav-btn svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

@media (min-width: 769px), (orientation: landscape) and (min-width: 600px) {
    /* ── Tarea 190 & 192: Contenedor de Video Reducido al 20% como Sidebar Lateral y Mini-Reproductor Completo ── */
    body.layout-sidebar-mode .player-col {
        flex: 0 0 clamp(230px, 20vw, 300px) !important;
        width: clamp(230px, 20vw, 300px) !important;
        max-width: clamp(230px, 20vw, 300px) !important;
        min-width: 220px !important;
        height: 100% !important;
        background: var(--surface) !important;
        border: 1px solid var(--border) !important;
        border-radius: 20px !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 15 !important;
    }

    body.layout-sidebar-mode .sidebar-col {
        flex: 1 1 calc(100% - clamp(230px, 20vw, 300px) - 20px) !important;
        width: calc(100% - clamp(230px, 20vw, 300px) - 20px) !important;
    }

    body.layout-sidebar-mode .player-col .player-wrap {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        margin-bottom: 8px !important;
    }

    body.layout-sidebar-mode .player-col .player-bar {
        width: 100% !important;
        max-width: 100% !important;
        padding: 5px 6px !important;
        margin: 0 0 10px 0 !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border-radius: 12px !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }

    body.layout-sidebar-mode .player-col .player-bar .pvp-seek {
        margin: 1px 0 3px !important;
    }

    body.layout-sidebar-mode .player-col .player-bar .pv-times {
        font-size: 9.5px !important;
        margin-bottom: 2px !important;
    }

    /* Fila de controles completa en mini-reproductor del sidebar (Tarea 194) */
    /* Mismo orden y botones que el reproductor original: Mute, Seek -5s, Seek -10s, Prev, Play, Next, Seek +10s, Seek +5s */
    body.layout-sidebar-mode .player-col .player-bar .pc-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 3px !important;
        width: 100% !important;
        padding: 3px 0 !important;
        flex-wrap: nowrap !important;
    }

    body.layout-sidebar-mode .player-col .player-bar #pcMute {
        order: -1 !important;
        display: inline-flex !important;
    }

    body.layout-sidebar-mode .player-col .player-bar #pcQueue {
        display: none !important;
    }

    body.layout-sidebar-mode .player-col .player-bar .pc-seek {
        display: inline-flex !important;
    }

    body.layout-sidebar-mode .player-col .player-bar .pc-btn {
        width: 24px !important;
        height: 24px !important;
        min-width: 22px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        background: transparent !important;
        color: var(--text, #fff) !important;
        opacity: 0.85 !important;
        transition: opacity .15s ease, transform .15s ease !important;
    }

    body.layout-sidebar-mode .player-col .player-bar .pc-btn:hover {
        opacity: 1 !important;
        transform: scale(1.08) !important;
    }

    body.layout-sidebar-mode .player-col .player-bar .pc-btn svg {
        width: 13px !important;
        height: 13px !important;
    }

    body.layout-sidebar-mode .player-col .player-bar .pc-btn.pc-play {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        border-radius: 50% !important;
        background: var(--accent) !important;
        color: #fff !important;
        opacity: 1 !important;
        box-shadow: 0 2px 8px rgba(255, 0, 85, 0.4) !important;
    }

    body.layout-sidebar-mode .player-col .player-bar .pc-btn.pc-play svg {
        width: 15px !important;
        height: 15px !important;
    }

    /* ── Navegación Acordeón en el Sidebar (Tarea 192) ── */
    body.layout-sidebar-mode .player-sidebar-nav {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 6px !important;
        padding: 4px 0 16px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
    }

    body.layout-sidebar-mode .sidebar-accordion-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
    }

    body.layout-sidebar-mode .sidebar-nav-group {
        display: flex !important;
        flex-direction: column !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        transition: background 0.15s ease, border-color 0.15s ease !important;
    }

    body.layout-sidebar-mode .sidebar-nav-group.active {
        background: rgba(255, 255, 255, 0.04) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
    }

    body.layout-sidebar-mode .sidebar-app-btn {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 9px 12px !important;
        background: transparent !important;
        border: none !important;
        color: var(--text-muted) !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        text-align: left !important;
        transition: all 0.15s ease !important;
    }

    body.layout-sidebar-mode .sidebar-app-btn:hover {
        color: var(--text) !important;
        background: rgba(255, 255, 255, 0.04) !important;
    }

    body.layout-sidebar-mode .sidebar-app-btn.active {
        color: #fff !important;
        background: rgba(255, 255, 255, 0.07) !important;
    }

    body.layout-sidebar-mode .sidebar-app-btn svg {
        flex-shrink: 0 !important;
    }

    body.layout-sidebar-mode .accordion-arrow {
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important;
        transition: transform 0.2s ease !important;
        opacity: 0.6 !important;
    }

    body.layout-sidebar-mode .accordion-arrow.open {
        transform: rotate(180deg) !important;
        opacity: 1 !important;
    }

    body.layout-sidebar-mode .sidebar-sub-list {
        display: flex !important;
        flex-direction: column !important;
        padding: 4px 6px 8px 18px !important;
        gap: 2px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
        background: rgba(0, 0, 0, 0.15) !important;
    }

    body.layout-sidebar-mode .sidebar-sub-btn {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 6px 10px !important;
        border-radius: 7px !important;
        background: transparent !important;
        border: none !important;
        color: var(--text-muted) !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        text-align: left !important;
        transition: all 0.15s ease !important;
    }

    body.layout-sidebar-mode .sidebar-sub-btn:hover {
        color: var(--text) !important;
        background: rgba(255, 255, 255, 0.05) !important;
    }

    body.layout-sidebar-mode .sidebar-sub-btn.active {
        color: var(--accent) !important;
        background: rgba(255, 0, 85, 0.12) !important;
        font-weight: 600 !important;
    }

    body.layout-sidebar-mode .sidebar-sub-btn svg {
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
    }

    /* ── Barra Superior Limpia en Panel de Feeds Lado Derecho (Tarea 192 & 194) ── */
    body.layout-sidebar-mode .sidebar-col .subtabs,
    body.layout-sidebar-mode .sidebar-col .search-chips-bar {
        display: none !important;
    }

    body.layout-sidebar-mode .sidebar-col .search-bar .btn-app {
        display: none !important;
    }

    body.layout-sidebar-mode .sidebar-col .search-bar .search-input-wrap {
        flex: 1 1 auto !important;
    }

    /* YouTube: 3 tarjetas por fila en modo web */
    .video-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-flow: dense !important;
        gap: 10px !important;
        padding: 10px 12px 16px !important;
    }
    /* El !important de arriba mostraba también la pestaña Historial (recentGrid es
       .video-grid y .subtab-content) cuando no era la activa: salía encima de Canales (T57). */
    .video-grid.subtab-content:not(.active) { display: none !important; }
}

/* ── Tarea 192: Grilla Responsiva de Feeds (Marketplace y Travel) ── */
/* Modo Web / Desktop / Pantallas Grandes (>= 1025px): 6 tarjetas por fila */
@media (min-width: 1025px) {
    .item-grid,
    .store-feed-grid {
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        grid-auto-flow: dense !important;
        gap: 12px !important;
        padding: 12px 14px 28px !important;
        align-items: start !important;
    }
}

/* Tablets Horizontales / Pantallas Medianas (769px a 1024px): 4 tarjetas por fila */
@media (min-width: 769px) and (max-width: 1024px) {
    .item-grid,
    .store-feed-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-auto-flow: dense !important;
        gap: 10px !important;
        padding: 10px 12px 24px !important;
        align-items: start !important;
    }
}

/* Tablets Verticales (601px a 768px): 3 tarjetas por fila */
@media (min-width: 601px) and (max-width: 768px) {
    .item-grid,
    .store-feed-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-flow: dense !important;
        gap: 10px !important;
        padding: 10px 12px 20px !important;
        align-items: start !important;
    }
}

/* ── Tarea 194: Tarjetas Cuadradas (1:1), 60% Imagen / 40% Título y Precio, y Tarjetas Premium 2x2 (4 Espacios) ── */

/* Tarjetas Estándar y Pro: Cuadradas (aspect-ratio: 1 / 1), 60% Imagen / 40% Contenido */
.item-card {
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 14px !important;
    background: var(--surface2, #18191e) !important;
    border: 1px solid var(--border) !important;
    padding: 0 !important;
    position: relative !important;
    cursor: pointer !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

.item-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}

.item-card:active {
    transform: scale(0.98) !important;
}

.item-card .card-img {
    width: 100% !important;
    height: 60% !important;
    max-height: 60% !important;
    min-height: 60% !important;
    flex: 0 0 60% !important;
    aspect-ratio: auto !important;
    background: #151922 !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.item-card .card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .25s ease !important;
}

.item-card:hover .card-img img {
    transform: scale(1.05) !important;
}

.item-card .card-img-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(255, 0, 85, .12), rgba(0, 200, 255, .12)) !important;
}

.item-card .card-body {
    width: 100% !important;
    height: 40% !important;
    max-height: 40% !important;
    min-height: 40% !important;
    flex: 0 0 40% !important;
    padding: 6px 8px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
    gap: 2px !important;
}

.item-card .card-title {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--text, #fff) !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
}

.item-card .card-price {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #00d26a !important;
    margin-top: 2px !important;
    line-height: 1.2 !important;
}

/* Ocupación en Grilla: Tarjetas Normales y Pro ocupan 1 celda (1x1) */
.item-card,
.item-card:not(.item-card-paid):not(.item-banner-square),
.item-card.item-card-pro {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    width: 100% !important;
}

/* PRO: Borde azul y prioridad en feed */
.item-card.item-card-pro {
}

/* Tarjetas Premium / VIP y Banner Cuadrado: en pantallas >= 601px ocupan 4 espacios (2 columnas x 2 filas) */
@media (min-width: 601px) {
    .item-card.item-card-paid,
    .item-card.item-card-vip,
    .item-card.item-card-premium,
    .item-banner-square {
        grid-column: span 2 !important;
        grid-row: span 2 !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }

    .item-card.item-card-paid:hover,
    .item-card.item-card-vip:hover,
    .item-card.item-card-premium:hover {
    }

    /* Imagen 60% en Tarjeta Premium */
    .item-card.item-card-paid .paid-card-media,
    .item-card.item-card-vip .paid-card-media,
    .item-card.item-card-premium .paid-card-media {
        width: 100% !important;
        height: 60% !important;
        max-height: 60% !important;
        min-height: 60% !important;
        flex: 0 0 60% !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
        position: relative !important;
        background: #0d0e12 !important;
    }

    .item-card.item-card-paid .paid-card-media img,
    .item-card.item-card-vip .paid-card-media img,
    .item-card.item-card-premium .paid-card-media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Cuerpo 40% en Tarjeta Premium */
    .item-card.item-card-paid .paid-card-body,
    .item-card.item-card-vip .paid-card-body,
    .item-card.item-card-premium .paid-card-body {
        width: 100% !important;
        height: 40% !important;
        max-height: 40% !important;
        min-height: 40% !important;
        flex: 0 0 40% !important;
        padding: 10px 14px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        overflow: hidden !important;
    }

    .item-card.item-card-paid .paid-card-title,
    .item-card.item-card-vip .paid-card-title,
    .item-card.item-card-premium .paid-card-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .item-card.item-card-paid .paid-card-price,
    .item-card.item-card-vip .paid-card-price,
    .item-card.item-card-premium .paid-card-price {
        font-size: 15px !important;
        font-weight: 800 !important;
        color: #00d26a !important;
    }

    .item-card.item-card-paid .paid-card-desc,
    .item-card.item-card-vip .paid-card-desc,
    .item-card.item-card-premium .paid-card-desc {
        font-size: 12px !important;
        line-height: 1.35 !important;
        color: #a0a5b8 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin: 4px 0 !important;
    }

    /* Banners Cuadrados del Sistema en Grilla (2x2) */
    .item-banner-square {
        min-height: 0 !important;
        max-height: none !important;
        border: 1.5px solid rgba(229, 9, 20, 0.45) !important;
        box-shadow: 0 4px 18px rgba(229, 9, 20, 0.22) !important;
        padding: 12px 14px !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }

    .item-banner-square .banner-icon-bubble {
        width: 44px !important;
        height: 44px !important;
        margin: 2px 0 !important;
    }

    .item-banner-square .banner-icon-bubble svg {
        width: 22px !important;
        height: 22px !important;
    }

    .item-banner-square .banner-title {
        font-size: 14px !important;
        font-weight: 700 !important;
        margin: 2px 0 !important;
        line-height: 1.25 !important;
    }

    .item-banner-square .banner-desc {
        font-size: 11.5px !important;
        line-height: 1.35 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin-bottom: 4px !important;
    }

    .item-banner-square .banner-btn {
        padding: 6px 12px !important;
        font-size: 12px !important;
        align-self: flex-start !important;
    }
}

/* Tarjetas Premium en móvil: ocupan ancho completo (1 / -1) con borde oro */
@media (max-width: 600px) {
    .item-card.item-card-paid,
    .item-card.item-card-vip,
    .item-card.item-card-premium,
    .item-banner-square {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ── Tarea 198: Badges de Nuevo Mensaje, Notificación Flotante Plegable (5s -> Icono tras Cuenta) y Destello en Calendario ── */
.search-bar .btn-app,
.subtabs .subtab,
.sidebar-app-btn,
.sidebar-sub-btn {
    position: relative !important;
}

.app-notif-badge {
    /* Misma esquina, tamaño y borde que el badge de música (.now-badge), T53. */
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ff0055;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 0 0 2px var(--surface);
    z-index: 6;
    pointer-events: auto;
    cursor: pointer;
    animation: notifBadgePulse 1.6s infinite ease-in-out;
}
.app-notif-badge[hidden] {
    display: none !important;
}

.subtab-notif-badge {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sidebar-inline-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ff0055;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(255, 0, 85, 0.55);
}

@keyframes notifBadgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.14); }
}

/* Icono de Notificación Plegada en la Barra de Menú (justo después de Cuenta) */
.btn-menu-chat-notif {
    color: #ff2a70 !important;
    background: rgba(255, 0, 85, 0.14) !important;
    border: 1px solid rgba(255, 0, 85, 0.45) !important;
    border-radius: 10px !important;
    transition: transform 0.22s ease, background 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 2px 10px rgba(255, 0, 85, 0.28) !important;
}
.btn-menu-chat-notif[hidden] {
    display: none !important;
}
.btn-menu-chat-notif:hover {
    background: rgba(255, 0, 85, 0.24) !important;
    transform: translateY(-1px) scale(1.04) !important;
    box-shadow: 0 4px 14px rgba(255, 0, 85, 0.45) !important;
}
.btn-menu-chat-notif.just-folded-in {
    animation: menuNotifFoldIn 0.42s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* Asegurar visibilidad del icono plegado también en modo web sidebar */
@media (min-width: 769px) {
    body.layout-sidebar-mode .sidebar-col .search-bar .btn-menu-chat-notif:not([hidden]) {
        display: inline-flex !important;
    }
}

.sidebar-nav-group.chat-notif-group {
    border-color: rgba(255, 0, 85, 0.45) !important;
    background: rgba(255, 0, 85, 0.1) !important;
}
.sidebar-nav-group.chat-notif-group .sidebar-app-btn {
    color: #ff4081 !important;
    font-weight: 700 !important;
}

@keyframes menuNotifFoldIn {
    0% {
        transform: scale(0.2) translateY(-12px);
        opacity: 0;
    }
    70% {
        transform: scale(1.18) translateY(0);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Animación de plegado de #inAppToast a los 5 segundos hacia el icono del menú */
.in-app-toast.folding-to-menu {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease !important;
    transform: translateX(35%) translateY(-28px) scale(0.18) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Resaltado de la conversación específica en Cuenta -> Calendario */
.cal-event-card.has-unread-chat {
    border-color: rgba(255, 0, 85, 0.55) !important;
    background: linear-gradient(135deg, rgba(255, 0, 85, 0.09), var(--surface2)) !important;
}
.cal-event-card.cal-card-highlight-focus {
    border-color: #ff0055 !important;
    box-shadow: 0 0 0 2px rgba(255, 0, 85, 0.6), 0 10px 28px rgba(255, 0, 85, 0.35) !important;
    animation: calCardHighlightPulse 2s ease-out;
}
@keyframes calCardHighlightPulse {
    0% { transform: scale(0.98); box-shadow: 0 0 0 6px rgba(255, 0, 85, 0.75); }
    40% { transform: scale(1.015); box-shadow: 0 0 0 3px rgba(255, 0, 85, 0.65); }
    100% { transform: scale(1); box-shadow: 0 0 0 2px rgba(255, 0, 85, 0.6); }
}
.cal-card-last-msg {
    font-size: 12px;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.04);
    border-left: 2.5px solid #ff0055;
    padding: 5px 9px;
    border-radius: 6px;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}




/* Marca del final del feed: al acercarse se carga el bloque siguiente. */
.feed-fin { height: 1px; }

/* Tarjetas del calendario: heredaban align-items:center de .cal-event-card y,
   en columna, cada fila medía lo que su texto más largo y se salía por los dos
   lados. Ahora se estiran al ancho de la tarjeta y lo largo se corta con «…». */
.cal-event-card.minimal { align-items: stretch; min-width: 0; max-width: 100%; box-sizing: border-box; }
.cal-event-card.minimal > * { min-width: 0; }
.cal-card-subinfo > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-card-party { max-width: 100%; }
.cal-card-bottom-row { flex-wrap: wrap; }
.cal-day-events { min-width: 0; overflow-x: hidden; }

/* Tarjeta: el ícono va detrás de la foto; si la foto no carga, se quita y queda él. */
.item-card .card-img > img { position: relative; z-index: 1; }
.item-card .card-img > .card-img-placeholder { position: absolute !important; inset: 0; }

/* Zonas del filtro de ubicación: país/estado y sus ciudades, y estados cercanos. */
.loc-zonas { padding: 10px 16px 4px; border-top: 1px solid var(--border); max-height: 34vh; overflow-y: auto; }
.loc-zonas-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.loc-zonas-titulo { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 6px; }
.loc-zona-chip.active { background: var(--accent); border-color: var(--accent); color: #fff !important; }
.loc-zonas-otros .loc-zona-chip { opacity: .85; }

/* ── Ficha de publicación (traído de Offertalo 1.0) ─────────────────────── */
/* Galería en bucle: scroll nativo con scroll-snap; flechas solo con ratón. */
.item-detail-gallery.pgal { display: block; position: relative; width: 100%; height: 100%; margin: 0; }
.pgal__track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pgal__track::-webkit-scrollbar { display: none; }
.pgal__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; }
.pgal__slide img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.pgal__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.pgal__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); transition: background .18s, transform .18s; }
.pgal__dot.is-on { background: #fff; transform: scale(1.35); }
.pgal__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: none; }
.pgal__nav.prev { left: 8px; } .pgal__nav.next { right: 8px; }
@media (hover: hover) { .pgal:hover .pgal__nav { display: block; } }
.item-detail-gallery.pgal .img-zoom-chip { bottom: 26px; }

/* Ficha completa */
.item-stock-chip { font-size: 12px; font-weight: 700; color: #00d26a; background: rgba(0,210,106,.12); border-radius: 999px; padding: 3px 10px; vertical-align: middle; margin-left: 8px; white-space: nowrap; }
.item-detail-desc.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.item-desc-mas { align-self: flex-start; background: none; border: 0; color: var(--accent); font-weight: 700; font-size: 13px; padding: 4px 0; cursor: pointer; }
.item-job-vieja { font-size: 13px; color: #ffb74d; background: rgba(255,152,0,.1); border: 1px solid rgba(255,152,0,.35); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.user-verified-badge.no, .store-identity-badge.no { color: var(--text-muted) !important; font-weight: 600; }
.item-report-btn { color: var(--text-muted) !important; }
.item-rel-t { font-size: 15px; font-weight: 700; margin: 22px 0 10px; }
.item-rel-grid { margin: 0 !important; }

/* Panel del dueño */
.own-panel { border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-top: 12px; background: var(--surface2); }
.own-t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 4px 0 8px; }
.own-t:not(:first-child) { margin-top: 14px; }
.own-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.own-kpi { background: var(--surface); border-radius: 10px; padding: 8px 4px; text-align: center; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.own-kpi b { font-size: 16px; color: var(--text); }
.own-kpi span { font-size: 10.5px; color: var(--text-muted); }
.own-nota { font-size: 12px; color: var(--text-muted); margin: 8px 0 0; }
.own-dato { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.own-dato span { color: var(--text-muted); }
.own-estado { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.own-st, .own-ciclo { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.own-st.active { background: rgba(0,210,106,.14); color: #00d26a; }
.own-st.paused { background: rgba(255,152,0,.14); color: #ffb74d; }
.own-ciclo { background: var(--surface); color: var(--text-muted); }
.own-ciclo.vencida { background: rgba(255,0,85,.14); color: var(--accent); }
.own-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.own-btn { flex: 1 1 30%; min-width: 0; padding: 10px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; }
.own-btn:disabled { opacity: .55; cursor: default; }
.own-btn.go { background: var(--accent); border-color: var(--accent); color: #fff; }
.own-btn.peligro { color: #ff5c7a; border-color: rgba(255,92,122,.45); }
.own-editable { cursor: pointer; border-radius: 8px; outline: 1px dashed transparent; transition: outline-color .15s; }
.own-editable:hover { outline-color: rgba(255,255,255,.25); }

/* Modales de la ficha: reportar y editar */
.ficha-sub { z-index: 10030 !important; }   /* sobre la ficha (#itemDetailOverlay, 10010) */
.ficha-sub-box { max-width: 460px; width: calc(100% - 32px); height: auto; max-height: 85vh; }
.ficha-sub-body { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.ficha-op { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-size: 14px; font-family: inherit; cursor: pointer; }
.ficha-op span { margin-left: auto; color: var(--text-muted); }
.ficha-sev { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.ficha-atras { align-self: flex-start; background: none; border: 0; color: var(--text-muted); font-size: 13px; cursor: pointer; padding: 0; font-family: inherit; }
.ficha-enviar { margin-top: 6px; }
.ficha-listo { font-size: 40px; text-align: center; color: #00d26a; margin: 8px 0 0; }
.ficha-edit-pie { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); }
.ficha-guardado { font-size: 12px; color: #00d26a; margin: 0; min-height: 16px; }
.ficha-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ficha-foto { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface2); }
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha-foto-x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; font-size: 13px; }
.ficha-foto-mas { display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--text-muted); border: 1px dashed var(--border); cursor: pointer; }

/* Acerca de Offertalo: pantalla completa con pestañas (fondo difuminado, X a la derecha). */
.settings-row-btn { width: 100%; background: none; border: 0; color: inherit; font-family: inherit; text-align: left; cursor: pointer; padding-left: 0; padding-right: 0; }
.settings-row-btn svg { color: var(--text-muted); flex-shrink: 0; }
.acerca-overlay { position: fixed; inset: var(--modal-top, calc(100vw * 9 / 16 + 8px)) var(--modal-right, 0) var(--modal-bottom, 0) var(--modal-left, 0); z-index: 10045; display: none; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.acerca-overlay.active { display: flex; }
.acerca-box { width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--bg); }
.acerca-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 10px; border-bottom: 1px solid var(--border); }
.acerca-head h3 { margin: 0; font-size: 17px; font-weight: 700; }
.acerca-tabs { display: flex; gap: 8px; padding: 10px 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.acerca-tabs::-webkit-scrollbar { display: none; }
.acerca-tabs button { flex-shrink: 0; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface2); color: var(--text-muted); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.acerca-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.acerca-body { flex: 1; overflow-y: auto; padding: 18px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
.acerca-body section { max-width: 760px; margin: 0 auto; font-size: 14px; line-height: 1.65; color: var(--text-muted); }
.acerca-body h3 { color: var(--text); font-size: 15px; margin: 22px 0 6px; }
.acerca-body h3:first-child { margin-top: 0; }
.acerca-body p { margin: 0 0 10px; }
.acerca-body ul { margin: 0 0 10px; padding-left: 20px; }
.acerca-body li { margin-bottom: 6px; }
.acerca-body b { color: var(--text); }
.acerca-body .doc-act { font-size: 12px; }
.acerca-body .doc-pie { margin-top: 24px; font-size: 12px; text-align: center; }
.acerca-cargando { text-align: center; color: var(--text-muted); padding: 40px 0; }

/* ── Ficha de publicación con el formato de 1.0 (product.php) ────────────────
   Foto cuadrada a todo el ancho con los puntos debajo; fila «Ver tienda» + tipo;
   título y precio grandes; Contactar a todo el ancho; Descripción; fecha y vistas;
   «Más de esta tienda». Con el color de 2.0 y el contacto por chat. */
#itemDetailOverlay .item-detail-body { gap: 14px !important; }
#itemDetailOverlay .item-detail-image-wrap { height: auto !important; min-height: 0 !important; max-height: none !important;
    background: none !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; margin-bottom: 0 !important; cursor: default; }
#itemDetailOverlay .item-detail-gallery.pgal { height: auto; }
#itemDetailOverlay .pgal__track { height: auto; aspect-ratio: 1; max-height: 70vh; border-radius: 16px; background: #141720; }
#itemDetailOverlay .pgal__slide { height: auto; }
#itemDetailOverlay .pgal__slide img { height: 100%; }
#itemDetailOverlay .pgal__dots { position: static; margin-top: 10px; }
#itemDetailOverlay .pgal__dot { background: var(--border); }
#itemDetailOverlay .pgal__dot.is-on { background: var(--accent); }
#itemDetailOverlay .pgal__nav { top: calc(50% - 14px); }
#itemDetailOverlay .item-detail-placeholder { aspect-ratio: 1; height: auto; border-radius: 16px; background: #141720; }

#itemDetailOverlay .item-strip { display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 !important; background: none !important; border: 0 !important; }
.strip-tienda { padding: 7px 14px; border-radius: 10px; border: 0; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; }
.strip-chip { font-size: 14px; color: var(--text); }
.strip-vendedor { padding: 6px 12px; border-radius: 10px; background: var(--surface2); font-weight: 600; font-size: 13px; }
.strip-verif { font-size: 12px; font-weight: 700; color: #2196f3; margin-left: auto; }

#itemDetailOverlay .item-detail-title { font-size: 22px !important; font-weight: 800 !important; line-height: 1.25 !important; margin: 0 !important; }
#itemDetailOverlay .item-detail-price { font-size: 32px !important; font-weight: 900 !important; color: var(--accent) !important; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.item-stock-txt { font-size: 15px; font-weight: 500; color: var(--text); letter-spacing: 0; }

/* Contactar a todo el ancho, como el botón de 1.0 (aquí abre el chat). */
#itemDetailFbContact.fb-contact-box { background: none !important; border: 0 !important; padding: 0 !important; }
#itemDetailOverlay .fb-contact-input-row { flex-direction: column; gap: 10px; }
#itemDetailOverlay .fb-contact-input { width: 100%; box-sizing: border-box; }
#itemDetailOverlay .fb-contact-send-btn { width: 100%; justify-content: center; padding: 14px 18px; border-radius: 12px; background: #1f8f4e; color: #fff; font-size: 16px; font-weight: 800; gap: 8px; }

.item-desc-block[hidden] { display: none; }
.item-desc-h { margin: 6px 0 8px; font-size: 16px; font-weight: 800; color: var(--text); }
#itemDetailOverlay .item-detail-desc { font-size: 15px !important; line-height: 1.6 !important; color: var(--text) !important; }

#itemDetailOverlay .item-detail-meta { justify-content: flex-start !important; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted);
    border-top: 1px solid var(--border); padding-top: 12px; }
#itemDetailDate { display: inline-flex; gap: 14px; }

.item-rel-t { font-size: 20px !important; font-weight: 800 !important; margin: 26px 0 12px !important; }
.rel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .rel-grid { grid-template-columns: repeat(3, 1fr); } }
.rel-card { display: flex; flex-direction: column; border: 1px solid var(--border) !important; border-radius: 14px !important; overflow: hidden; background: var(--surface) !important; cursor: pointer; height: auto !important; }
.rel-img { position: relative; aspect-ratio: 1; background: #141720; }
.rel-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rel-verif { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.6); color: #2196f3;
    font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; letter-spacing: -2px; }
.rel-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.rel-title { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rel-price { font-size: 15px; font-weight: 800; color: var(--text); }

/* Publicar: fijar la ubicación del vendedor aunque busque en otro sitio. */
.geo-fija { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.geo-fija input { margin-top: 2px; accent-color: var(--accent); }

/* Pro y Premium sin bordes de color (26-oct): solo la etiqueta «Publicidad» en la
   tarjeta del feed; dentro de la ficha, nada. */
.card-publi { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 2px 7px; border-radius: 6px;
    background: rgba(0,0,0,.6); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .02em; pointer-events: none; }
.paid-card-media, .item-card .card-img { position: relative; }

/* «Patrocinado» va en la línea del precio, a la derecha. La palabra tiene que
   decir que se pagó por ese lugar: «Destacado» a secas suena a recomendación
   nuestra, y presentar como recomendación un espacio pagado es publicidad
   engañosa (Ley 842 de protección al consumidor). Es también lo que usan
   Amazon y Google. */
.card-price-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.paid-card-price-col { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.card-publi { position: static !important; flex-shrink: 0; padding: 2px 7px; border-radius: 6px; background: var(--surface2);
    color: var(--text-muted); font-size: 10px; font-weight: 600; letter-spacing: .02em; }

/* Setting de Marketplace / Travel: secciones «Para buscar» y «Para vender». */
.settings-sec { margin: 18px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.settings-sec:first-child { margin-top: 4px; }

/* Mis publicaciones (pantalla completa) */
.mp-tools { padding: 10px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.mp-buscar { width: 100%; box-sizing: border-box; }
.mp-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.mp-cats::-webkit-scrollbar { display: none; }
.mp-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; max-width: 760px; margin: 0 auto; }
.mp-img { width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--surface2); }
.mp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-muted); }
.mp-info b { font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-info span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-st { font-style: normal; font-weight: 700; }
.mp-st.activa { color: #00d26a; } .mp-st.pausada { color: #ffb74d; } .mp-st.vencida { color: var(--accent); }
.mp-acc { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.mp-acc button { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.mp-acc button.go { background: var(--accent); border-color: var(--accent); color: #fff; }
.mp-acc button.peligro { color: #ff5c7a; border-color: rgba(255,92,122,.45); }
#misPubsOverlay .acerca-body .item-grid { max-width: 760px; margin: 0 auto; }

/* Orden de capas: ficha (10010) < editar/reportar (10030) < Mis publicaciones (10045)
   < confirmación (10060). La confirmación estaba en 100 y quedaba tapada. */
#confirmOverlay { z-index: 10060 !important; }

/* Aviso de cuenta pendiente de verificar o cerrada. */
.aviso-cuenta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10040; display: flex; align-items: center; justify-content: center;
    gap: 12px; flex-wrap: wrap; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,152,0,.14); border-top: 1px solid rgba(255,152,0,.5); color: #ffb74d; font-size: 13px; }
.aviso-cuenta.grave { background: rgba(255,0,85,.14); border-top-color: rgba(255,0,85,.5); color: #ff5c7a; }
.aviso-cuenta button { padding: 7px 14px; border-radius: 10px; border: 0; background: var(--accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }

/* Destacar una publicación (se paga a mano por ahora). */
.own-btn.destacar { background: rgba(255,215,0,.14); border-color: rgba(255,215,0,.5); color: #ffd700; }
.own-boost { color: #ffd700 !important; font-weight: 700; }
.mp-st.boost { color: #ffd700; }
#destacarOverlay .ficha-op { justify-content: space-between; }
#destacarOverlay .ficha-op b { color: var(--text); }

/* Marca del principio del feed: al acercarse se añade un bloque arriba. */
.feed-ini { height: 1px; }

/* ── El feed ya no da saltos al hacer scroll (26-oct) ───────────────────────
   Eran dos cosas a la vez:
   1) Al añadir bloques arriba, el navegador movía el scroll por su cuenta
      («scroll anchoring») y encima lo movía el código: el feed saltaba el doble.
      Con overflow-anchor:none manda solo el código, y así se porta igual en
      Android y en iPhone (Safari no tiene scroll anchoring).
   2) La foto de cada tarjeta no reservaba su espacio: una regla posterior le
      quitaba el aspecto cuadrado, así que la tarjeta crecía al cargar cada
      imagen y todo lo de abajo se corría. Como las fotos cargan según se
      acercan, el tirón se repetía durante todo el scroll. */
.subtab-content.pl-panel { overflow-anchor: none; }
.item-card .card-img {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    aspect-ratio: 1 / 1 !important;
}
.item-card .card-img img { height: 100% !important; }

/* ── Tarjeta del feed con la forma de 1.0 (26-oct) ──────────────────────────
   Foto cuadrada arriba y debajo título y precio, con el alto que haga falta.
   Antes el cuerpo tenía «40% del alto de la tarjeta»: al reservar el cuadrado
   de la foto ese 40% se quedaba en nada y el texto desaparecía (overflow
   hidden). Medidas tomadas de 1.0 (.product-card en market/be/css/styles.css). */
.item-card {
    /* La tarjeta NO es un cuadrado: lo es su foto. Una regla anterior le ponía
       aspect-ratio:1/1 a la tarjeta entera, así que la foto (también cuadrada y
       a todo el ancho) la llenaba y el título y el precio quedaban recortados. */
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.item-card .card-img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
}
.item-card .card-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.item-card .card-body {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    display: block !important;
    overflow: visible !important;
    padding: 10px !important;
}
.item-card .card-title {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 0 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    white-space: normal !important;
}
.item-card .card-price { font-size: 15px !important; font-weight: 700 !important; margin: 0 !important; }

/* Verificado: solo el doble check azul, y solo para cuentas verificadas de
   verdad (correo confirmado). El check sencillo se retiró el 26-oct. */
.strip-verif { color: #2196f3 !important; }
.rel-verif { color: #2196f3 !important; }

/* Vender en Offertalo (sustituye a los planes) */
.vender-body { display: flex; flex-direction: column; gap: 14px; }
.vender-hero h4 { margin: 0 0 4px; font-size: 19px; font-weight: 800; }
.vender-hero p { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.vender-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--surface2); }
.vender-card-destacar { border-color: rgba(255,215,0,.45); }
.vender-card-h { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.vender-ico { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(0,210,106,.15); color: #00d26a; font-size: 12px; font-weight: 900; }
.vender-ico.oro { background: rgba(255,215,0,.15); color: #ffd700; }
.vender-ico.azul { background: rgba(33,150,243,.15); color: #2196f3; letter-spacing: -2px; }
.vender-sub { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); }
.vender-lista { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--text-muted); }
.vender-lista li { margin-bottom: 5px; }
.vender-lista b { color: var(--text); }
.vender-precios { display: flex; gap: 8px; margin-bottom: 12px; }
.vender-precio { flex: 1; text-align: center; padding: 10px 4px; border-radius: 10px; background: var(--surface); }
.vender-precio b { display: block; font-size: 16px; color: #ffd700; }
.vender-precio span { font-size: 11.5px; color: var(--text-muted); }
.vender-pie { font-size: 12.5px; color: var(--text-muted); text-align: center; margin: 4px 0 0; }

/* Elegir el formato del destacado: se ve el tamaño de cada uno. */
.dest-formato { align-items: flex-start !important; gap: 12px !important; }
.dest-prev { flex: 0 0 34px; height: 34px; border-radius: 6px; border: 1.5px solid var(--text-muted); position: relative; }
.dest-prev.normal::after { content: ''; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; border-radius: 2px; background: #ffd700; }
.dest-prev.grande::after { content: ''; position: absolute; left: 3px; top: 3px; right: 3px; height: 14px; border-radius: 2px; background: #ffd700; }
.dest-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dest-txt small { color: var(--text-muted); font-size: 11.5px; line-height: 1.3; }

.vender-fmt { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; }
.vender-fmt-txt { display: flex; flex-direction: column; min-width: 0; }
.vender-fmt-txt b { font-size: 13.5px; }
.vender-fmt-txt small { color: var(--text-muted); font-size: 11.5px; line-height: 1.3; }

/* Campos de fecha y cantidad de los formularios de contacto. */
.campo-fecha { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
    text-align: left; cursor: pointer; font: inherit; }
.campo-fecha svg { flex: 0 0 auto; opacity: .6; }
.campo-fecha__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campo-num { display: flex; align-items: center; gap: 6px; }
.campo-num__i { flex: 1; min-width: 0; text-align: center; -moz-appearance: textfield; }
.campo-num__i::-webkit-outer-spin-button, .campo-num__i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.campo-num__b { flex: 0 0 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface2); color: var(--text); font-size: 19px; line-height: 1; cursor: pointer; }
.campo-num__b:active { transform: scale(.94); }

/* El calendario propio sobre el formulario. Difumina el fondo, como todo modal. */
.fecha-pop { position: fixed; inset: var(--modal-top, calc(100vw * 9 / 16 + 8px)) 0 0 0; z-index: 10060; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fecha-pop__box { width: 100%; max-width: 330px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; padding: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.fecha-pop__h { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.fecha-pop__t { flex: 1; text-align: center; font-size: 14.5px; }
.fecha-pop__nav, .fecha-pop__x { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border);
    background: var(--surface2); color: var(--text); font-size: 16px; line-height: 1; cursor: pointer; }
.fecha-pop__nav:disabled { opacity: .3; cursor: default; }
.fecha-pop__x { margin-left: 4px; }   /* la X siempre a la derecha */
.fecha-pop .wl-cell[disabled] { opacity: .25; cursor: default; }

/* Detalle opcional de la ficha: secciones cerradas con contador. */
.ficha-secs { margin: 14px 0 4px; }
.ficha-secs__ayuda { font-size: 12.5px; color: var(--text-muted); margin: 0 0 8px; }
.ficha-sec { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; overflow: hidden; background: var(--surface2); }
.ficha-sec__h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0;
    background: none; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.ficha-sec__t { flex: 1; min-width: 0; }
.ficha-sec__n { font-size: 11.5px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.ficha-sec__n.on { color: var(--accent); }
.ficha-sec__v { font-size: 12px; color: var(--text-muted); transition: transform .18s; }
.ficha-sec.abierta .ficha-sec__v { transform: rotate(180deg); }
.ficha-sec__b { padding: 2px 14px 14px; }
.ficha-campo { margin-bottom: 12px; }
.ficha-campo--si { display: flex; align-items: center; gap: 8px; }
.ficha-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ficha-chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
    color: var(--text-muted); font-size: 12.5px; cursor: pointer; }
.ficha-chip.on { border-color: var(--accent); color: var(--accent); background: rgba(255,23,68,.08); }

/* Ese mismo detalle, ya publicado, dentro de la ficha. */
.item-detalles { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden; margin: 12px 0; }
.item-detalle { display: flex; justify-content: space-between; gap: 14px; padding: 9px 12px; background: var(--surface); font-size: 13.5px; }
.item-detalle span { color: var(--text-muted); flex: 0 0 auto; }
.item-detalle b { text-align: right; min-width: 0; font-weight: 600; }
@media (min-width: 720px) { .item-detalles { grid-template-columns: 1fr 1fr; } }

/* ── Barra principal en dos filas (27-oct-2026) ─────────────────────────────
   Fila 1: logo de Offertalo a la izquierda y los cuatro tabs a la derecha.
   Fila 2: la búsqueda del tab activo y el menú de sus secciones.
   Ocupa casi el mismo alto que antes (56 de la barra + ~50 de la fila de
   secciones), porque esa fila ahora vive dentro del menú. */
:root { --search-h: 104px; }
.search-bar {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    height: var(--search-h);
}
.barra-fila { display: flex; align-items: center; gap: 6px; min-width: 0; }
.barra-buscar { position: relative; }
.barra-buscar .search-input-wrap { flex: 1 1 auto; min-width: 0; }
.barra-hueco { flex: 1 1 auto; }

.btn-logo { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 6px 0 0;
    border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; }
/* Sin fondo (pedido del dueño): las etiquetas naranja y azul leen bien sobre el oscuro. */
.btn-logo img { width: 32px; height: 32px; flex-shrink: 0; }
.btn-logo b { font-size: 17px; font-weight: 800; letter-spacing: .2px; white-space: nowrap; }
.btn-logo:active { transform: scale(.97); }
/* En pantallas muy angostas el nombre no cabe junto a los cuatro tabs. */
@media (max-width: 345px) { .btn-logo b { display: none; } }

/* El menú del tab: lo que antes era la fila fija de secciones. Solo vale con
   la opción «Al lado» (por defecto); con «Abajo» mandan las reglas de siempre
   de .search-chips-bar / .search-chip. */
.btn-menu-tab[aria-expanded="true"] {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(255, 0, 85, 0.12);
    box-shadow: 0 0 8px rgba(255, 0, 85, 0.25);
}
#searchChipsBar {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 12px;
    width: min(250px, calc(100vw - 24px));
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
    overflow: visible;
    z-index: 60;
    transform: none;
    margin-top: 0;
    opacity: 1;
}
#searchChipsBar.abierto { display: flex; animation: menuTabIn .14s ease-out; }
#searchChipsBar.tucked { display: none !important; }
@keyframes menuTabIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
#searchChipsBar .search-chip {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 12px;
    height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    box-shadow: none;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
}
#searchChipsBar .search-chip > span.chip-text { display: inline !important; }
#searchChipsBar .search-chip:hover { background: var(--surface2); }
#searchChipsBar .search-chip.active { background: rgba(255, 0, 85, .12); color: var(--accent); font-weight: 600; }
#searchChipsBar .search-chip svg { width: 18px; height: 18px; }
#searchChipsBar .search-chip .now-badge { position: static; margin-left: auto; }

/* Acerca › Versiones */
.doc-vers { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.doc-ver { border-left: 3px solid var(--accent); padding: 4px 0 4px 12px; }
.doc-ver b { font-size: 14px; }
.doc-ver p { margin: 4px 0 0; }

/* Opción «Abajo» (Cuenta › Setting › Menú): el menú de la app flota al pie de la
   pantalla, centrado en la columna de la app (--modal-left/right, que calcula
   placeModals), y se esconde al bajar como la barra de arriba (clase tucked).
   app.js lo cuelga del <body> en este modo: dentro de .search-bar, que usa
   transform al esconderse, un position:fixed se anclaría a la barra y no a la
   pantalla. */
html.menu-tabs-fila #searchChipsBar {
    position: fixed;
    left: var(--modal-left, 0px);
    right: var(--modal-right, 0px);
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: fit-content;
    max-width: calc(100vw - 24px);
    margin: 0 auto;
    padding: 6px;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    z-index: 45;   /* sobre el «+» (40) y bajo cualquier modal */
}
/* Botones de tamaño fijo y cómodos para el pulgar; el activo lleva su nombre. */
html.menu-tabs-fila #searchChipsBar .search-chip { flex: 0 0 auto; height: 40px; min-width: 40px; }
html.menu-tabs-fila #searchChipsBar.tucked {
    transform: translateY(calc(100% + 28px));
    margin-top: 0;
    opacity: 0;
    pointer-events: none;
}
/* El «+» sube para no quedar debajo del menú, y las últimas tarjetas pueden
   subir por encima de él. */
html.menu-tabs-fila .pl-fab,
html.menu-tabs-fila .mkt-fab,
html.menu-tabs-fila .trv-fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
html.menu-tabs-fila .subtab-content.active { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; }
/* En web con barra lateral el menú vive en la barra lateral. */
body.layout-sidebar-mode #searchChipsBar { display: none !important; }

/* Sin buscador: el buscador solo se muestra al estar en YouTube/feed. En Playlist, Canales, Setting o Menú la fila de búsqueda se oculta por completo y la barra colapsa a 56px */
html.sin-buscador .barra-buscar { display: none !important; }
html.sin-buscador #searchForm,
html.sin-buscador #searchQuota,
html.sin-buscador #btnSearchBack,
html.sin-buscador .barra-titulo { display: none !important; }
html.sin-buscador,
html.sin-buscador body.layout-sidebar-mode { --search-h: 56px !important; }
.barra-titulo { flex: 1 1 auto; min-width: 0; height: 38px; display: flex; align-items: center; gap: 10px;
    padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface2);
    color: var(--text); font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; cursor: pointer; }
.barra-titulo[hidden] { display: none; }
.barra-titulo svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); }
.barra-titulo span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-titulo .barra-titulo__v { color: var(--text-muted); }
html.menu-tabs-fila .barra-titulo { display: none; }

/* ── Admin dentro de las apps (T14 fase 2) ───────────────────────────────── */
.adm-tags { position: absolute; top: 6px; left: 6px; z-index: 3; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.adm-tag { padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: #6b7280;
    box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.adm-tag.rep { background: #e11d48; }
.adm-tag.pago { background: #d97706; }
.adm-tag.bloq { background: #374151; }
.card-img, .paid-card-media { position: relative; }
/* Contadores de admin (T52/T53): arriba a la derecha como el de música, en ámbar para no
   confundirse con el rojo de mensajes; si los dos coinciden, el de admin va a su lado. */
.adm-num { position: absolute; top: -3px; right: -3px; z-index: 15; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    box-sizing: border-box; background: #f59e0b; color: #1a1205; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
    box-shadow: 0 0 0 2px var(--surface); pointer-events: none; animation: adm-latir 2.4s ease-in-out infinite; }
.app-notif-badge:not([hidden]) ~ .adm-num, .now-badge ~ .adm-num { right: 16px; }
@keyframes adm-latir { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .adm-num { animation: none; } }
.search-chip .adm-num, #searchChipsBar .search-chip .adm-num { position: static; margin-left: 6px; box-shadow: none; animation: none; }

.adm-ficha { margin: 16px 0 6px; padding: 12px; border: 1px solid rgba(225,29,72,.45); border-radius: 14px; background: rgba(225,29,72,.06); }
.adm-ficha__t { font-weight: 800; font-size: 14px; margin-bottom: 8px; color: #fb7185; }
.adm-nota { font-size: 13px; color: var(--text-muted); margin: 0 0 6px; }
.adm-estado.bloq { font-size: 13px; font-weight: 600; margin: 0 0 8px; color: #fbbf24; }
.adm-sec { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; font-size: 13px; }
.adm-sec > b { display: block; margin-bottom: 6px; }
.adm-sec p { margin: 0 0 6px; color: var(--text-muted); }
.adm-rep { padding: 8px 10px; border-radius: 10px; background: var(--surface2); margin-bottom: 6px; }
.adm-rep p { margin: 4px 0; color: var(--text); }
.adm-rep small { color: var(--text-muted); }
.adm-sev { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 700; background: #4b5563; color: #fff; }
.adm-sev.critical { background: #be123c; } .adm-sev.high { background: #e11d48; } .adm-sev.medium { background: #d97706; }
.adm-hist { font-size: 12px; }

.adm-deshacer { position: fixed; z-index: 10055; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
    width: min(360px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 12px 14px; overflow: hidden;
    border-radius: 14px; background: #111827; color: #fff; border: 1px solid #374151; box-shadow: 0 12px 32px rgba(0,0,0,.5); font-size: 13.5px; }
.adm-deshacer span { flex: 1; min-width: 0; }
.adm-deshacer button { border: 0; background: none; color: #fb7185; font: inherit; font-weight: 800; cursor: pointer; padding: 4px 6px; }
/* La barrita que se consume en 10 s: cuánto queda para arrepentirse. */
.adm-deshacer i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #fb7185; transform-origin: left;
    animation: admDeshacer 10s linear forwards; }
@keyframes admDeshacer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Cuenta › Pendientes (admin) */
.adm-pend { display: flex; flex-direction: column; gap: 14px; }
.adm-pend-g { display: flex; flex-direction: column; gap: 6px; }
.adm-pend-gt { font-size: 12.5px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.adm-pend-fila, .adm-pend-ad { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--border);
    border-radius: 12px; background: var(--surface2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.adm-pend-ad { flex-wrap: wrap; cursor: default; }
.adm-pend-fila img, .adm-pend-sinfoto { width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; object-fit: cover; background: var(--surface); }
.adm-pend-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-pend-txt b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-pend-txt small { font-size: 12px; color: var(--text-muted); }
.adm-pend-vacio { text-align: center; color: var(--text-muted); padding: 40px 0; }

/* Verificación de identidad (T14 fase 3) */
.strip-ident { background: rgba(56,189,248,.14); color: #38bdf8; }
.idt-priv { font-size: 12.5px; }
.idt-rech { color: #fbbf24; }
.idt-foto { display: flex; align-items: center; gap: 12px; padding: 10px; margin-bottom: 8px; border: 1px dashed var(--border);
    border-radius: 12px; background: var(--surface2); cursor: pointer; }
.idt-foto.lista { border-style: solid; border-color: #22c55e; }
.idt-prev { width: 54px; height: 40px; flex-shrink: 0; border-radius: 6px; background: var(--surface) center/cover no-repeat; }
.idt-txt { flex: 1; min-width: 0; font-size: 13.5px; }
.idt-ok { font-size: 12.5px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.idt-rev { display: grid; gap: 8px; margin: 8px 0; }
.idt-rev figure { margin: 0; }
.idt-rev img { width: 100%; border-radius: 10px; background: var(--surface2); }
.idt-rev figcaption { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.adm-pend-sinfoto.idt { display: flex; align-items: center; justify-content: center; font-size: 22px; }

/* ── Publicar: tienda primero, variantes (T15) ──────────────────────────── */
/* Campo de archivo invisible pero NO display:none (Safari del iPhone). */
.campo-oculto { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
label.dash-upload-area { display: block; position: relative; cursor: pointer; }

.tienda-paso { display: flex; flex-direction: column; gap: 10px; }
.tienda-av { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px;
    border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #ff0055, #ff7a00); color: #fff; font-weight: 800; }
.tienda-av img { width: 100%; height: 100%; object-fit: cover; }
.tienda-op { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--border);
    border-radius: 14px; background: var(--surface2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.tienda-op__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tienda-op__t small { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tienda-nueva { border-style: dashed; }
.tienda-nueva .tienda-av { background: var(--surface); color: var(--accent); font-size: 20px; }

.tienda-prev { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface2); }
.tienda-prev__banner { height: 64px; background: linear-gradient(135deg, rgba(255,0,85,.55), rgba(255,122,0,.45)); }
.tienda-prev__cuerpo { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 14px 14px; margin-top: -32px; text-align: center; }
.tienda-prev__cuerpo .tienda-av { box-shadow: 0 0 0 3px var(--surface2); }
.tienda-prev__cuerpo b { font-size: 16px; margin-top: 4px; }
.tienda-prev__cuerpo small { color: var(--text-muted); font-size: 12.5px; }
.tienda-prev__meta { font-size: 12px; color: var(--accent); margin-top: 2px; word-break: break-all; }
.tienda-foto { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px dashed var(--border); border-radius: 12px;
    background: var(--surface2); cursor: pointer; position: relative; }
.tienda-foto small { color: var(--text-muted); font-size: 12px; }
.tienda-ciudades { display: flex; flex-wrap: wrap; gap: 6px; }
.tienda-sel { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px;
    background: var(--surface2); margin-bottom: 12px; }
.tienda-sel__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tienda-sel__t small { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.var-box { border: 1px dashed var(--border); border-radius: 14px; padding: 12px; margin: 12px 0; }
.var-box__t { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.var-box__t small { text-transform: none; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.var-op { border-top: 1px solid var(--border); padding: 10px 0 4px; }
.var-op:first-of-type { border-top: 0; }
.var-op__h { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.var-op__h input { width: 20px; height: 20px; accent-color: var(--accent); }
.var-op__b { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 4px 30px; }
.var-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.var-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px 5px 12px; border-radius: 999px;
    background: var(--surface2); border: 1px solid var(--border); font-size: 13px; }
.var-chip button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--surface); color: var(--text-muted);
    font-size: 15px; line-height: 1; cursor: pointer; }
.var-add { display: inline-flex; align-items: center; gap: 4px; }
.var-add input { width: 96px; padding: 6px 10px; border-radius: 999px; border: 1px dashed var(--border); background: transparent;
    color: var(--text); font: inherit; font-size: 13px; }
.var-add button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface2);
    color: var(--accent); font-size: 16px; cursor: pointer; }
.var-pub { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.var-pub input { width: 18px; height: 18px; accent-color: var(--accent); }
.var-pub small { grid-column: 2; color: var(--text-muted); font-size: 11.5px; }

/* Salto staging ⇄ admin (T126): el botón visible fue retirado; el salto se hace tocando el logo en staging/admin. */
.adm-salto { display: none !important; }

/* Logo de Offertalo (T23): el logo transparente, nunca el nombre escrito dentro de
   una caja. En la caja de color el nombre no cabía y se salía. */
.adm-webapp { background: none; }
.adm-webapp img { width: 100%; height: 100%; object-fit: contain; }
.feed-ad .ad-logo.ad-logo-of { background: none; box-shadow: none; }
.feed-ad .ad-logo.ad-logo-of img { width: 100%; height: 100%; object-fit: contain; }

/* admin.offertalo.com: el admin nunca es usuario (T26) */
html.en-admin .solo-usuario { display: none !important; }

/* ── Calendario › Recordatorios y Temporizadores (T42) ─────────────────── */
.ag-modos { display: flex; gap: 6px; padding: 4px; margin: 4px 0 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.ag-modo { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 8px; border: 0; border-radius: 10px;
    background: transparent; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s; }
.ag-modo.active { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(255, 0, 85, .3); }
@media (max-width: 380px) { .ag-modo span { font-size: 11.5px; } .ag-modo svg { display: none; } }
.ag-vista[hidden] { display: none !important; }
.ag-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ag-cab b { display: block; font-size: 17px; }
.ag-cab small { color: var(--text-muted); font-size: 12.5px; }
.ag-nuevo { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px 8px 10px; border: 0; border-radius: 999px; background: var(--accent);
    color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.ag-recs { display: flex; flex-direction: column; gap: 8px; }
.ag-rec { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; cursor: pointer; overflow: hidden; transition: border-color .2s, transform .1s; }
.ag-rec::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.ag-rec:hover { border-color: var(--c); }
.ag-rec:active { transform: scale(.99); }
.ag-rec--fin { opacity: .55; }
.ag-rec__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ag-rec__txt b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-rec__cuando { color: var(--c); font-size: 13.5px; font-weight: 700; }
.ag-rec__txt small { color: var(--text-muted); font-size: 12.5px; }
.ag-vacio { text-align: center; padding: 36px 18px; background: var(--surface); border: 1px dashed var(--border); border-radius: 16px; }
.ag-vacio__ico { font-size: 38px; margin-bottom: 6px; }
.ag-vacio p { color: var(--text-muted); font-size: 13.5px; margin: 6px 0 16px; }
.ag-btn { padding: 9px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); color: var(--text); font: inherit;
    font-weight: 700; font-size: 14px; cursor: pointer; }
.ag-btn--pri { background: var(--accent); border-color: var(--accent); color: #fff; }
.ag-btn--peligro { background: transparent; border-color: rgba(225, 29, 72, .6); color: #ff5c7a; }
.ag-btn--ico { display: inline-grid; place-items: center; padding: 8px 10px; }
/* El editor */
.ag-editor .ficha-sub-box { max-width: 520px; }
.ag-f { margin-bottom: 14px; }
.ag-f--titulo { display: flex; flex-direction: column; gap: 10px; }
.ag-f--titulo .form-input { font-size: 18px; font-weight: 700; }
.ag-colores { display: flex; gap: 10px; }
.ag-color { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; box-shadow: 0 0 0 2px var(--surface); }
.ag-color.on { border-color: #fff; box-shadow: 0 0 0 2px var(--c); }
.ag-fila { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--surface2); border-radius: 12px; }
.ag-rango { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.ag-rango > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ag-rango svg { color: var(--text-muted); }
.ag-rango small, .ag-et { color: var(--text-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.ag-et { display: block; margin-bottom: 8px; }
.ag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-chips--col { margin-top: 10px; }
.ag-chip { padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.ag-chip.on { background: rgba(255, 0, 85, .14); border-color: var(--accent); color: #ff6b98; font-weight: 700; }
.ag-cada { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--text-muted); font-size: 14px; }
.ag-cada .form-input { width: 76px; text-align: center; }
.ag-cada input[type="date"] { width: auto; }
.ag-dias { display: flex; justify-content: space-between; gap: 4px; margin-top: 10px; }
.ag-dia { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface2); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.ag-dia.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ag-resumen { margin: 10px 0 0; color: #ff6b98; font-size: 13px; font-weight: 600; }
.ag-pie { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 10px; }
.ag-hueco { flex: 1; }
/* La alarma */
.ag-alarma { text-align: center; padding: 6px 0 4px; }
.ag-alarma__ico { font-size: 52px; animation: ag-vibra .5s ease-in-out infinite alternate; }
@keyframes ag-vibra { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.ag-alarma p { color: var(--text-muted); margin: 8px 0 18px; }
.ag-alarma__acc { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
/* Temporizadores */
.ag-tmps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding-bottom: 90px; }
.ag-tmp { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; }
.ag-tmp.corre { border-color: rgba(255, 0, 85, .55); box-shadow: 0 6px 20px rgba(255, 0, 85, .12); }
.ag-tmp__top { width: 100%; display: flex; align-items: center; gap: 4px; }
.ag-tmp__nom { flex: 1; min-width: 0; text-align: left; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; padding: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ag-x { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; }
.ag-x:hover { background: var(--surface2); color: var(--text); }
.ag-tmp__reloj { position: relative; width: 100%; max-width: 150px; aspect-ratio: 1; border: 0; padding: 0; background: none; color: var(--text); cursor: pointer; }
.ag-tmp__reloj svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ag-pista { fill: none; stroke: var(--surface2); stroke-width: 5; }
.ag-arco { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .9s linear; }
.ag-tmp__t { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font-size: clamp(20px, 6vw, 28px); font-weight: 300; font-variant-numeric: tabular-nums; }
.ag-tmp__ico { position: absolute; left: 0; right: 0; top: 58%; display: flex; justify-content: center; color: var(--text); }
.ag-tmp__ico svg { width: auto; height: auto; transform: none; }
.ag-tmp.corre .ag-tmp__ico { color: var(--accent); }
.ag-tmp__acc { display: none; gap: 6px; }
.ag-tmp.tocado .ag-tmp__acc { display: flex; }
.ag-fab { position: fixed; right: max(18px, calc(50% - 300px)); bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 30; width: 60px; height: 60px; border: 0;
    border-radius: 20px; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 26px rgba(255, 0, 85, .4); }
.ag-hms { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin: 6px 0 14px; }
.ag-hms label { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ag-hms .form-input { width: 76px; text-align: center; font-size: 26px; font-weight: 300; font-variant-numeric: tabular-nums; }
.ag-hms small { color: var(--text-muted); font-size: 12px; }
.ag-hms b { font-size: 26px; padding-top: 8px; color: var(--text-muted); }

/* Bienvenida a pantalla completa (T45) */
/* T48: tapa TODO (también el video: placeModals deja los modales bajo la barra) y se
   desplaza si no cabe; antes se cortaba abajo y no se veía «Empezar». */
.modal-overlay.nick-full { inset: var(--modal-top, calc(100vw * 9 / 16 + 8px)) 0 0 0 !important; padding: 0; z-index: 10000; align-items: stretch; overflow-y: auto;
    -webkit-overflow-scrolling: touch; background: var(--bg); }
.nick-full .nick-box { width: 100%; max-width: none; max-height: none; height: auto; min-height: 100%; overflow: visible; border-radius: 0;
    display: flex; flex-direction: column; justify-content: center; margin: 0;
    padding: max(24px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom)); }
@media (max-height: 760px) { .nick-full .nick-box::before { width: 60px; height: 60px; margin-bottom: 10px; } .nick-full .nick-box h3 { font-size: 22px; } }
.nick-full .nick-box > * { width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; }
.nick-full .nick-box h3 { font-size: 26px; }
.nick-full .nick-box::before { content: ''; display: block; width: 84px; height: 84px; margin: 0 auto 18px;
    background: url(/assets/icons/logo.png) center / contain no-repeat; }
.nick-dev { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; text-align: left; }
.nick-dev[hidden] { display: none; }
.nick-dev label { font-size: 13px; font-weight: 700; color: var(--text-muted); }
#nickDev { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface2);
    color: var(--text); font: inherit; font-size: 16px; font-weight: 600; outline: none; }
#nickDev:focus, #nickInput:focus { border-color: var(--accent); }
.nick-dev-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nick-dev-chip { padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface2); color: var(--text);
    font: inherit; font-size: 13px; cursor: pointer; }
.nick-dev-chip:hover { border-color: var(--accent); }
.nick-dev small { color: var(--text-muted); font-size: 12px; }

/* Atajos al panel de admin, arriba de Pendientes (T50) */
.adm-atajos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 16px; }
.adm-atajo { padding: 12px 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text);
    font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-align: left; }
.adm-atajo:hover { border-color: var(--accent); }

/* Pendientes como app propia (T55): sin el menú de Cuenta mientras estás ahí. */
html.en-pendientes #searchChipsBar, html.en-pendientes .barra-titulo__v { display: none !important; }
#btnAppPendientes[hidden] { display: none !important; }

/* Panel de admin como modal a pantalla completa (T56) */
.adm-modal-x { display: none; }
/* overflow con !important: «.panel:has(.subtabs)» lo congelaba (el panel tiene sus pestañas) y no se desplazaba (T71). */
#panelAdm.adm-modal { display: block !important; position: fixed; inset: var(--modal-top, calc(100vw * 9 / 16 + 8px)) 0 0 0 !important; z-index: 9000; background: var(--bg); overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; touch-action: pan-y;
    -webkit-overflow-scrolling: touch; padding: max(60px, calc(env(safe-area-inset-top) + 52px)) 16px max(24px, env(safe-area-inset-bottom)); }
#panelAdm.adm-modal > * { max-width: 900px; margin-left: auto; margin-right: auto; }
html.adm-modal-abierto .adm-modal-x { display: grid; place-items: center; position: fixed; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 9001;
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
html.adm-modal-abierto body { overflow: hidden; }

/* Menú principal de 4 cuadros (#btnMenuTab): siempre visible en la fila superior */
#btnMenuTab { display: flex !important; }

/* Modo admin sin sesión: candado (T78). Debajo de los modales (la puerta va encima). */
.adm-candado { position: fixed; inset: var(--modal-top, calc(100vw * 9 / 16 + 8px)) 0 0 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(13, 17, 23, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.adm-candado__box { width: 100%; max-width: 380px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.adm-candado__box h2 { margin: 6px 0 0; font-size: 22px; }
.adm-candado__box p { margin: 0 0 8px; color: var(--text-muted); font-size: 14.5px; line-height: 1.5; }
.adm-candado__box .ag-btn { width: 100%; padding: 13px; }

/* Solo en staging y admin (T81): fuera de ahí, como si no existiera. */
html:not(.es-staging) .solo-staging { display: none !important; }

/* T83 #1: publicaciones sin enviar · #5: estado de un mensaje de chat */
.pub-pend-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 60;
    display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 10px 10px 10px 16px; border-radius: 999px;
    background: #1e242d; border: 1px solid #f59e0b; color: var(--text); font-size: 13.5px; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.pub-pend-bar button { border: 0; border-radius: 999px; padding: 8px 14px; background: #f59e0b; color: #1a1205; font: inherit; font-weight: 800; cursor: pointer; }
.chat-envio { display: block; margin-top: 4px; border: 0; padding: 0; background: none; font: inherit; font-size: 11px; opacity: .8; color: inherit; text-align: right; }
.chat-envio.fallo { color: #fbbf24; font-weight: 700; opacity: 1; cursor: pointer; text-decoration: underline; }

/* ── Estado del VPS en Admin (T87) ─────────────────────────────────────── */
.adm-vps { --vps-ok: #3fb950; --vps-alto: #d29922; --vps-crit: #f85149; margin: 0 0 18px; }
.vps-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.vps-cab b { display: block; font-size: 15px; }
.vps-cab small, .vps-sub, .vps-pico { color: var(--text-muted); font-size: 12px; }
.vps-rangos { display: flex; flex: none; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; }
.vps-rango { padding: 5px 10px; border: 0; border-radius: 999px; background: none; color: var(--text-muted); font: inherit; font-size: 12px; cursor: pointer; }
.vps-rango.on { background: var(--surface2); color: var(--text); }
.vps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.vps-caja { --c: var(--accent); display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.vps-caja.ok { --c: var(--vps-ok); }
.vps-caja.alto { --c: var(--vps-alto); }
.vps-caja.crit { --c: var(--vps-crit); border-color: var(--vps-crit); }
.vps-t { display: flex; justify-content: space-between; gap: 6px; color: var(--text-muted); font-size: 12px; }
.vps-t span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vps-est { flex: none; color: var(--c); font-weight: 600; }
.vps-v { color: var(--text); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vps-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vps-svg { width: 100%; height: 44px; margin-top: 6px; overflow: visible; touch-action: pan-y; cursor: crosshair; }
.vps-linea { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.vps-area { fill: var(--c); opacity: .14; stroke: none; }
.vps-marca { stroke: var(--text-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vps-pico { font-variant-numeric: tabular-nums; }
.vps-sin { padding: 14px 0; color: var(--text-muted); font-size: 12px; text-align: center; }
.vps-proteccion { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--vps-alto); border-radius: 12px; color: var(--text); font-size: 13px; }
.vps-proteccion.crit { border-color: var(--vps-crit); }

/* Visitas, en línea y descargas: solo en Admin, debajo de Servidor (T90) */
.settings-stats[hidden] { display: none; }
.adm-pend #admStats { margin: -6px 0 18px; }

/* Borrador de la publicación (T90) */
.lf-borrador { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); color: var(--text); font-size: 13px; }
.lf-borrador button { flex: none; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--text-muted);
    font: inherit; font-size: 12px; cursor: pointer; }
.lf-borrador button:hover { color: var(--text); border-color: var(--accent); }

/* Soporte del usuario (T92) y Admin Soporte (T130) */
.sop-punto { color: var(--accent); font-size: 12px; vertical-align: middle; }
.sop-lista { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; min-height: 140px; overflow-y: auto; margin-bottom: 10px; }
.sop-m { align-self: flex-start; max-width: 85%; padding: 9px 13px; border-radius: 14px; background: var(--surface2); color: var(--text); font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.sop-m b { display: block; margin-bottom: 3px; font-size: 11.5px; color: var(--accent); }
.sop-m.yo { align-self: flex-end; background: rgba(255, 0, 85, .18); border: 1px solid rgba(255, 0, 85, .3); }
.sop-m time { display: block; margin-top: 4px; color: var(--text-muted); font-size: 10.5px; }

/* Modal directo de Soporte para el Admin (T130) */
.adm-sop-wrap { display: flex; flex-direction: column; height: 100%; min-height: 380px; max-height: 75vh; gap: 10px; }
.adm-sop-meta { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; }
.adm-sop-user-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.adm-sop-avatar { font-size: 18px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border-radius: 50%; flex-shrink: 0; }
.adm-sop-nick { display: block; font-size: 14px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-sop-status { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-muted); }
.adm-sop-panel-btn { flex: none; padding: 6px 12px; font-size: 12px; border-radius: 8px; cursor: pointer; }
.adm-sop-lista { flex: 1 1 auto; min-height: 220px; max-height: 48vh; overflow-y: auto; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: rgba(0, 0, 0, 0.25); }
.adm-sop-reply-box { display: flex; gap: 8px; align-items: flex-end; margin-top: 2px; }
.adm-sop-txt { flex: 1 1 auto; resize: none; min-height: 48px; max-height: 120px; padding: 10px 12px; font-size: 13.5px; border-radius: 12px; font-family: inherit; }
.adm-sop-send-btn { flex: none; padding: 10px 18px; height: 48px; font-weight: 700; font-size: 13.5px; border-radius: 12px; cursor: pointer; }

/* WhatsApp con bandera (T99, de 1.0) */
.wa-campo { position: relative; }
.wa-fila { display: flex; gap: 6px; }
.wa-bandera { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text); font: inherit; font-size: 15px; cursor: pointer; white-space: nowrap; }
.wa-bandera span:first-child { font-size: 20px; }
.wa-num { flex: 1 1 auto; min-width: 0; letter-spacing: .5px; }
.wa-ayuda { display: block; margin-top: 5px; color: var(--text-muted); font-size: 12px; }
.wa-lista { position: absolute; z-index: 30; left: 0; top: calc(100% - 18px); width: min(300px, 100%); max-height: 280px; overflow-y: auto; padding: 6px;
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.wa-lista button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none;
    color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.wa-lista button:hover { background: var(--surface2); }
.wa-lista button span:first-child { font-size: 20px; }
.wa-lista button small { margin-left: auto; color: var(--text-muted); }

/* Tienda: editar y WhatsApp público (T99) */
.tienda-op-fila { display: flex; gap: 6px; align-items: stretch; }
.tienda-op-fila .tienda-op { flex: 1 1 auto; min-width: 0; }
.tienda-editar { flex: none; width: 46px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text-muted); font-size: 18px; cursor: pointer; }
.tienda-editar:hover { color: var(--text); border-color: var(--accent); }
.tienda-wa-pub { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; cursor: pointer; }
.tienda-wa-pub > span:first-child { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.tienda-wa-pub small { color: var(--text-muted); font-size: 12px; }

/* ── Indicador de Preview en tarjetas (T103) ────────────────────────── */
.preview-card-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .5px;
    color: #fff;
    pointer-events: none;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .55);
}
.preview-card-badge .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .7);
    display: inline-block;
}
.preview-card-badge.badge-p1 {
    background: rgba(30, 64, 175, .92);
    border: 1px solid rgba(96, 165, 250, .8);
}
.preview-card-badge.badge-p2 {
    background: rgba(107, 33, 168, .92);
    border: 1px solid rgba(192, 132, 252, .8);
}
.preview-card-badge.badge-p12 {
    background: linear-gradient(135deg, rgba(30, 64, 175, .95), rgba(107, 33, 168, .95));
    border: 1px solid rgba(167, 139, 250, .8);
}
.preview-card-badge.active .badge-dot {
    background: #4ade80;
    box-shadow: 0 0 6px #4ade80;
}
.queue-item.preview-p1 { border-left: 3px solid #3b82f6; }
.queue-item.preview-p2 { border-left: 3px solid #a855f7; }


/* ── OFFERTALO PRO & 5 TABS LIMPIOS (Tarea T105) ───────────────────────────── */
.logo-pro-badge {
    display: none !important;
}
.pro-status-card {
    background: linear-gradient(145deg, rgba(255, 0, 85, 0.12), rgba(255, 120, 0, 0.08));
    border: 1px solid rgba(255, 0, 85, 0.3);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 20px;
}
.pro-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.pro-badge-pill {
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    letter-spacing: 0.5px;
}
.pro-trial-badge {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.pro-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px 0;
}
.pro-card-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 10px 0;
    line-height: 1.4;
}
.pro-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 8px;
}
/* ── Vista Dedicada /login y Aceptación de Términos (T123) ── */
body.page-login {
    background: #090a0f !important;
    overflow-y: auto !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.page-login .app,
body.page-login .player-col,
body.page-login .sidebar-col,
body.page-login .player-wrap,
body.page-login .player-bar,
body.page-login .player-tabs,
body.page-login .sidebar-header,
body.page-login .search-bar,
body.page-login .sub-tabs,
body.page-login .quick-chips-row,
body.page-login .bottom-bar,
body.page-login .pvp-player,
body.page-login #playerEmpty,
body.page-login #layer-a,
body.page-login #layer-b,
body.page-login #layer-p1,
body.page-login #layer-p2,
body.page-login .video-grid,
body.page-login .feed-container,
body.page-login .app-install-banner {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}
.pro-onboarding-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at 50% 15%, #181b24 0%, #0a0b10 100%);
    z-index: 999990;
    overflow-y: auto;
    padding: 24px 16px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.pro-onboarding-overlay[hidden] {
    display: none !important;
}
body.page-login .pro-onboarding-overlay,
body.page-login #proOnboardingOverlay {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 999999 !important;
}
body.page-login .acerca-overlay {
    inset: 0 !important;
    top: 0 !important;
    z-index: 1000005 !important;
}
body.page-login #googleLoginOverlay,
body.page-login #proGoogleRequiredOverlay {
    z-index: 1000010 !important;
}
.pro-modal-box {
    background: #14161d;
    border: 1px solid rgba(255, 0, 85, 0.4);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(255, 0, 85, 0.2);
    border-radius: 18px;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px 24px;
    color: #fff;
    animation: proModalPop .25s ease-out;
    box-sizing: border-box;
    position: relative;
    margin: auto;
}
@keyframes proModalPop {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.pro-modal-hero {
    text-align: center;
    margin-bottom: 20px;
}
.pro-sparkle-ico {
    font-size: 32px;
    margin-bottom: 6px;
}
.pro-modal-pill {
    display: inline-block;
    background: rgba(255, 0, 85, 0.2);
    color: #ff0055;
    border: 1px solid rgba(255, 0, 85, 0.4);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
    letter-spacing: 0.8px;
}
.pro-modal-title {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 6px 0;
    color: #fff;
}
.pro-modal-sub {
    font-size: 13px;
    color: #9ba3af;
    margin: 0;
    line-height: 1.4;
}
.pro-features-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 20px;
}
.pro-feat-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.pro-feat-ico {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}
.pro-feat-item b {
    display: block;
    font-size: 13px;
    color: #fff;
    margin-bottom: 2px;
}
.pro-feat-item small {
    display: block;
    font-size: 11px;
    color: #9ba3af;
    line-height: 1.3;
}
.pro-existing-notice {
    background: rgba(0, 200, 83, 0.1);
    border: 1px solid rgba(0, 200, 83, 0.25);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.pro-notice-h {
    font-size: 13px;
    font-weight: 700;
    color: #00e676;
    margin-bottom: 4px;
}
.pro-existing-notice p {
    font-size: 12px;
    color: #c0c7d2;
    margin: 0;
    line-height: 1.35;
}
.pro-gift-box {
    background: linear-gradient(135deg, rgba(255, 0, 85, 0.15), rgba(255, 120, 0, 0.1));
    border: 1px dashed rgba(255, 0, 85, 0.4);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    margin-bottom: 20px;
}
.pro-gift-badge {
    font-size: 10px;
    font-weight: 800;
    color: #ff0055;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}
.pro-gift-title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}
.pro-gift-sub {
    font-size: 12px;
    color: #9ba3af;
}
.pro-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pro-input-wrap label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #c0c7d2;
    margin-bottom: 6px;
}
.pro-input {
    width: 100%;
    box-sizing: border-box;
    background: #0d0f12;
    border: 1px solid #2a2e39;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 14px;
    color: #fff;
    outline: none;
    transition: border-color .15s;
}
.pro-input:focus {
    border-color: var(--accent);
}
.pro-input-hint {
    display: block;
    font-size: 11px;
    color: #727a89;
    margin-top: 5px;
}
.pro-divider-or {
    display: flex;
    align-items: center;
    text-align: center;
    color: #555c68;
    font-size: 12px;
    margin: 2px 0;
}
.pro-divider-or::before, .pro-divider-or::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #2a2e39;
}
.pro-divider-or span {
    padding: 0 10px;
}
.pro-google-btn {
    width: 100%;
    justify-content: center;
    padding: 10px;
    font-size: 13px;
}
.pro-terms-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: #9ba3af;
    cursor: pointer;
    line-height: 1.35;
    user-select: none;
}
.pro-terms-label input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.pro-terms-label a {
    color: var(--accent);
    text-decoration: underline;
}
.pro-cta-btn {
    width: 100%;
    background: linear-gradient(135deg, #ff0055, #ff3300);
    border: none;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 14px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 0, 85, 0.35);
    transition: transform .15s, box-shadow .15s;
}
.pro-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 0, 85, 0.45);
}
.pro-cta-btn:active {
    transform: translateY(1px);
}

/* ── Panel Menú (Tarea T112) ── */
.menu-tab-container {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 6px 0 24px;
}
.menu-pro-card {
    background: linear-gradient(135deg, rgba(255, 0, 85, 0.16) 0%, rgba(20, 22, 28, 0.95) 100%);
    border: 1px solid rgba(255, 0, 85, 0.35);
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.menu-pro-card:hover {
    transform: translateY(-1px);
    border-color: var(--accent);
    box-shadow: 0 4px 20px rgba(255, 0, 85, 0.2);
}
.menu-pro-badge {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.menu-pro-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
}
.menu-pro-desc {
    font-size: 13.5px;
    color: var(--text-muted);
    margin: 0 0 10px;
    line-height: 1.45;
}
.menu-pro-meta {
    font-size: 12.5px;
    color: var(--accent);
    font-weight: 600;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 8px;
}
.menu-options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.menu-item-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font: inherit;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, transform .12s ease;
}
.menu-item-row[hidden] {
    display: none !important;
}
.menu-item-row:hover {
    background: var(--surface2);
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateX(2px);
}
.menu-item-row:active {
    transform: scale(0.99);
}
div.menu-item-row {
    cursor: default;
}
div.menu-item-row:hover {
    transform: none;
    background: var(--surface);
    border-color: var(--border);
}
.menu-item-row--stack {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    cursor: default;
}
.menu-item-row--stack:hover {
    transform: none;
    background: var(--surface);
    border-color: var(--border);
}
.menu-item-header {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}
.menu-item-row--stack .cols-options {
    max-width: 100%;
    justify-content: flex-start;
    gap: 8px;
    padding-left: 54px;
}
@media (max-width: 480px) {
    .menu-item-row--stack .cols-options {
        padding-left: 0;
    }
}
.menu-item-row--stack .menu-item-subtitle {
    white-space: normal;
    line-height: 1.35;
}
.menu-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.menu-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--accent);
    flex-shrink: 0;
}
.menu-item-info {
    flex: 1 1 auto;
    min-width: 0;
}
.menu-item-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}
.menu-item-subtitle {
    display: block;
    font-size: 12.5px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.menu-item-arrow {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    flex-shrink: 0;
    opacity: 0.6;
}
.menu-item-row:hover .menu-item-arrow {
    color: var(--accent);
    opacity: 1;
}

/* Barra de retorno en Historial (recentGrid) */
.recent-back-bar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 10px;
}
.recent-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.recent-back-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface2);
}
.recent-count {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ── Feed de Reels / Shorts con algoritmo personalizado (T129, T131) ── */
.btn-app#btnAppReels.active {
    color: var(--accent);
    background: rgba(255, 0, 85, 0.12);
}

/* Modo Reels a Pantalla Completa (T131, T133) */
/* IMPORTANTE: NO usar display:none en .player-col porque destruye el layout box de los iframes
   de YouTube en Chromium/Chrome y desvincula la API www-widgetapi.js. Se mantiene en 240x135
   con opacidad 0.001 detrás de la interfaz, igual que en body.hide-player-col. */
body.modo-reels .player-col {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 240px !important;
    height: 135px !important;
    flex: 0 0 0px !important;
    opacity: 0.001 !important;
    pointer-events: none !important;
    z-index: -1 !important;
    overflow: hidden !important;
}
body.modo-reels .player-col .player-bar,
body.modo-reels .player-col .player-tabs {
    display: none !important;
}
body.modo-reels .sidebar-col {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    flex: 1 1 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
body.modo-reels .search-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 2000 !important;
    background: linear-gradient(to bottom, rgba(11, 12, 16, 0.96) 0%, rgba(11, 12, 16, 0.72) 65%, transparent 100%) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: none !important;
    padding: 8px 12px 14px !important;
    pointer-events: auto !important;
    transition: none !important;
    transform: none !important;
}
body.modo-reels .search-bar .btn-app,
body.modo-reels .search-bar .btn-logo {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
}
body.modo-reels .search-bar .barra-tabs {
    margin-bottom: 0 !important;
}
body.modo-reels .search-bar .barra-buscar,
body.modo-reels .search-chips-bar,
body.modo-reels .sound-cta {
    display: none !important;
}
body.modo-reels #panelFolders {
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
body.modo-reels #panelReels.active {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
    z-index: 50 !important;
}
body.modo-reels #reelsLoading {
    position: fixed !important;
    inset: 0 !important;
    margin: auto !important;
    z-index: 900 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
body.modo-reels #reelsEmpty {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 900 !important;
    color: #fff !important;
    text-align: center !important;
    padding: 24px !important;
    max-width: 85% !important;
    background: rgba(20, 22, 30, 0.9);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
}

.reels-container {
    width: 100%;
    height: 100%;
    height: 100dvh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    background: #000;
}
.reels-header {
    display: none !important;
}
.reels-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.reels-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(255, 0, 85, 0.14);
    color: var(--accent);
    flex-shrink: 0;
}
.reels-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.reels-subtitle {
    font-size: 11.5px;
    color: var(--text-muted);
    display: block;
}
.reels-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(20, 22, 30, 0.7);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    cursor: pointer;
    transition: color .15s, border-color .15s, transform .12s;
}
.reels-icon-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    transform: rotate(45deg);
}
.reels-icon-btn:active {
    transform: scale(0.92);
}
.reels-filters {
    position: fixed !important;
    top: 54px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    padding: 6px 14px 10px !important;
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 70%, transparent 100%) !important;
    pointer-events: auto !important;
}
.reels-filters::-webkit-scrollbar {
    display: none;
}
.reels-filter-chip {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(25, 28, 38, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ddd;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s, color .14s, border-color .14s;
}
.reels-filter-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.reels-feed {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: scroll !important;
    scroll-snap-type: y mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #000 !important;
}
.reel-card {
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    margin: 0 auto;
    border-radius: 0 !important;
    background: #000;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease, opacity .25s ease;
}
@media (min-width: 600px) {
    .reel-card {
        max-width: 480px !important;
        margin: 0 auto !important;
    }
}
.reel-media-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.reel-player-box {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
    z-index: 1;
}
.reel-thumbnail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 2;
    transition: opacity .3s ease;
}
.reel-card.is-playing .reel-thumbnail {
    opacity: 0;
    pointer-events: none;
}
.reel-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: auto;
    z-index: 3;
    background: #000;
}
.reel-play-overlay-btn {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .15s, background .15s, opacity .25s;
    z-index: 4;
    backdrop-filter: blur(6px);
}
.reel-play-overlay-btn:hover {
    transform: scale(1.1);
    background: var(--accent);
    border-color: var(--accent);
}
.reel-card.is-playing .reel-play-overlay-btn {
    opacity: 0;
    pointer-events: none;
}
.reel-badge-reason {
    position: absolute;
    top: 106px;
    left: 14px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(10, 12, 18, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.reel-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}
.reel-badge-reason[data-reason="search"] .reel-badge-dot {
    background: #00d2ff;
}
.reel-badge-reason[data-reason="watch"] .reel-badge-dot {
    background: #ffaa00;
}
.reel-badge-reason[data-reason="discover"] .reel-badge-dot {
    background: #a855f7;
}
.reel-actions-bar {
    position: absolute;
    right: 14px;
    bottom: 86px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.reel-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(15, 17, 23, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    width: 46px;
    height: 46px;
    padding: 0;
    color: #fff;
    cursor: pointer;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.reel-action-btn:hover {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.22);
}
.reel-action-btn:active {
    transform: scale(0.92);
}
.reel-action-btn.reel-like-btn.active {
    color: #ff0055;
    border-color: #ff0055;
    background: rgba(255, 0, 85, 0.25);
}
.reel-action-btn.reel-dislike-btn.active {
    color: #888;
    border-color: #666;
    background: rgba(0, 0, 0, 0.7);
}
.reel-action-label {
    display: none;
}
.reel-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 76px;
    padding: 20px 16px 26px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.55) 60%, transparent 100%);
    z-index: 9;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    pointer-events: none;
}
.reel-info-overlay * {
    pointer-events: auto;
}
.reel-channel-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.reel-channel-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.reel-channel-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reel-lang-badge {
    font-size: 10px;
    font-weight: 700;
    background: rgba(255,255,255,0.18);
    padding: 1px 6px;
    border-radius: 6px;
    color: #ddd;
    text-transform: uppercase;
}
.reel-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}