/* ============================================================
   LATINBOOK — HISTORIAS (STORIES)
   css/stories.css
   Carrusel de tarjetas grandes (estilo Estados de WhatsApp) con brillo
   animado + visor a pantalla completa.
   Este archivo ANULA el bloque viejo "STORIES" de app.css
   (se carga después, así que gana por cascada) — ese bloque de app.css
   se dejó como referencia histórica nada más, ya no se usa.
   ============================================================ */

/* ---------- CARRUSEL ----------
   Tarjetas grandes (parecido a los Estados de WhatsApp) con la foto de
   fondo y el nombre encima, más un anillo de brillo animado con los
   colores de la marca para las historias sin ver — esto reemplaza el
   carrusel chico estilo Instagram que había antes; fue decisión del
   cliente después de comparar varias opciones. El fondo de la franja y
   el interior de la tarjeta se quedan blancos a propósito, nunca oscuros
   (antes usaban var(--bg-card), que en este sitio es un azul oscuro). */
.stories-container {
    display: flex;
    gap: 16px;
    padding: 16px 20px 18px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
    background: #ffffff;
}

.stories-container::-webkit-scrollbar {
    display: none;
}

.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 112px;
    max-width: 112px;
    cursor: pointer;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* Anillo/brillo animado: gira lentamente con un resplandor de color
   alrededor — se apaga (gris, sin animar) en las historias ya vistas. */
.story-ring {
    width: 112px;
    height: 172px;
    border-radius: 24px;
    padding: 3px; /* grosor del anillo */
    background: conic-gradient(
        from 0deg,
        var(--secondary),
        var(--primary),
        var(--tertiary),
        var(--secondary)
    );
    animation: storyGlowSpin 4s linear infinite;
    box-shadow: 0 0 14px rgba(255, 60, 172, 0.45);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.story-item:active .story-ring {
    transform: scale(0.97);
}

@keyframes storyGlowSpin {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Historia ya vista: anillo gris fijo, sin brillo ni animación */
.story-item.viewed .story-ring {
    background: #dcdce2;
    animation: none;
    box-shadow: none;
}

/* La tarjeta en sí: SIEMPRE blanca por dentro (el "hueco" entre el
   anillo de afuera y la foto) — la foto de la persona va encima. */
.story-avatar {
    width: 100%;
    height: 100%;
    border-radius: 21px;
    background-color: #ffffff;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Sombra suave abajo para que el nombre se lea encima de cualquier foto */
.story-avatar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 21px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 55%);
    pointer-events: none;
}

/* Nombre pintado encima de la tarjeta (abajo), sobre la foto */
.story-card-name {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* --- Tarjeta "Crear historia": mismo tamaño, sin brillo, borde punteado --- */
.story-item.add-story .story-ring {
    background: #f0f0f3;
    animation: none;
    box-shadow: none;
}

.story-item.add-story .story-avatar {
    border: 2px dashed var(--border);
    background-color: rgba(255, 255, 255, 0.6);
}

/* Sin foto propia todavía: no hace falta la sombra oscura de abajo */
.story-item.add-story .story-avatar:not([style*="background-image"])::after {
    display: none;
}

.story-item.add-story .story-avatar i.fa-plus {
    font-size: 30px;
    color: var(--primary);
}

/* Insignia "+" arriba a la derecha (no abajo) para no toparse con el
   nombre "Crear historia", que necesita todo el ancho de abajo. */
.story-add-plus {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gradient);
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    z-index: 2;
}

/* ============================================================
   VISOR A PANTALLA COMPLETA
   ============================================================ */
.story-viewer {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    touch-action: none;
    overscroll-behavior: contain;
}

.story-viewer.open {
    display: flex;
}

/* Escenario (foto/video) */
.story-stage {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 480px;   /* en escritorio se ve como tarjeta vertical */
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
}

@media (min-width: 768px) {
    .story-stage {
        max-height: 92vh;
        border-radius: 14px;
    }
}

/* La foto/video (.story-media) la mete el JS dentro de este div
   (#storyMediaSlot) que antes no tenía NINGUNA regla de tamaño — por
   eso en pantallas anchas (escritorio) no llenaba la tarjeta como
   corresponde y la foto se recortaba/desbordaba. Ahora ocupa el 100%
   del escenario y centra la foto/video adentro. */
#storyMediaSlot {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.story-media {
    width: 100%;
    height: 100%;
    min-width: 0;   /* evita que la foto/video se niegue a encogerse dentro
                       del flexbox y se desborde ignorando object-fit */
    min-height: 0;
    object-fit: contain;
    background: #000;
    pointer-events: none;
}

/* --- Barras de progreso segmentadas --- */
.story-progress-row {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    gap: 4px;
    z-index: 5;
}

.story-progress-track {
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.story-progress-fill {
    width: 0%;
    height: 100%;
    border-radius: 3px;
    background: #fff;
}

.story-progress-track.done .story-progress-fill {
    width: 100%;
}

/* --- Cabecera: avatar + nombre + hora + cerrar --- */
.story-viewer-header {
    position: absolute;
    top: 22px;
    left: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 5;
    color: #fff;
}

.story-viewer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
}

.story-viewer-username {
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.story-viewer-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    flex-shrink: 0;
}

.story-viewer-close {
    margin-left: auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- Zonas de tap (izquierda = atrás, derecha = adelante) --- */
.story-tap-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.story-tap-prev { left: 0;  width: 32%; }
.story-tap-next { right: 0; width: 68%; }

/* --- Flechas en escritorio (fuera de la tarjeta) --- */
.story-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    z-index: 6;
    display: none;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.story-arrow:hover {
    background: var(--primary);
}

.story-arrow-prev { left: 18px; }
.story-arrow-next { right: 18px; }

@media (min-width: 768px) {
    .story-arrow { display: flex; }
}

/* ============================================================
   HOJA DE PREVISUALIZACIÓN AL CREAR HISTORIA
   ============================================================ */
.story-create-sheet {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.92);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.story-create-sheet.open {
    display: flex;
}

.story-create-preview {
    max-width: min(480px, 92vw);
    max-height: 68vh;
    border-radius: 14px;
    object-fit: contain;
    background: #000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.story-create-actions {
    display: flex;
    gap: 12px;
    margin-top: 22px;
}

.story-create-btn {
    border: none;
    border-radius: 26px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.story-create-btn.publish {
    background: var(--gradient);
    color: #fff;
}

.story-create-btn.cancel {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* Aviso pequeño (errores / confirmaciones) */
.story-toast {
    position: fixed;
    bottom: 90px; /* por encima de la barra inferior móvil */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100001;
    background: var(--bg-card);
    color: var(--text-primary, #fff);
    border: 1px solid var(--border);
    padding: 10px 18px;
    border-radius: 24px;
    font-size: 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    max-width: 88vw;
    text-align: center;
}

.story-toast.show {
    opacity: 1;
}