/* /orionapp/public/styles/stories.css */

/* El lienzo exacto de una Story (1080x1920) */
#story-canvas {
    width: 1080px;
    height: 1920px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    color: white;
    background-color: #000;
}

/* Contenedor vista previa */
#preview-container {
    width: 1080px;
    height: 1920px;
    transform: scale(0.45); 
    transform-origin: top center;
    margin-bottom: -950px; 
    margin-top: 20px;
}

/* FIX DISEÑO: Efecto Vidrio Mejorado
   En lugar de color sólido, usamos un degradado sutil.
   Esto simula el brillo sin que se vea como un bloque gris/blanco feo.
*/
.glass-card {
    /* Degradado de arriba-izquierda (brillo) a abajo-derecha (transparencia) */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
    
    /* Sin filtro blur para evitar problemas de renderizado, confiamos en el borde y gradiente */
    backdrop-filter: none; 
    -webkit-backdrop-filter: none;

    /* Bordes brillantes para definir la forma */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.3); /* Borde superior más brillante */
    border-left: 1px solid rgba(255, 255, 255, 0.3); /* Borde izquierdo más brillante */
    
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}