* { box-sizing: border-box; }
        body, html { margin: 0; padding: 0; font-family: 'Arial Black', Gadget, sans-serif; background: #000; }
        
        /* Contenedor Principal Adaptable */
        .widget-card { 
            width: 650px; 
            height: 200px; 
            position: relative; 
            background: #000 url('../img/quiniela-fondo.jpg') center/cover no-repeat;
            display: flex; 
            flex-direction: row; /* Horizontal en PC */
            border: 2px solid #ffc107;
            overflow: hidden;
        }

        .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1; }

        /* Columna Izquierda: Info y Fecha */
        .side-info {
            position: relative; z-index: 2;
            width: 30%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
     /*     background: rgba(0,0,0,0.8);
            border-right: 2px solid #ffc107; */
            text-align: center;
            padding: 10px;
        }

        .draw-info { font-size: 15px; color: #fff; text-transform: uppercase; margin-bottom: 5px; }
        .draw-date { font-size: 16px; color: #fff; }

        /* Centro: Contenido Principal */
        .content { 
            position: relative; z-index: 2; 
            flex-grow: 1; 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            align-items: center; 
            padding: 10px;
        }

        /* Columna Derecha: Botón de Acción */
        .side-action {
            position: relative; z-index: 2;
            width: 25%;
        /*    background: rgba(0,0,0,0.8); */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 15px;
        }

        /* Cuadros de Estado */
        .status-box { 
            background: #fff; color: #000; border: 3px solid #28a745;
            border-radius: 10px; padding: 10px; width: 100%; max-width: 280px;
            text-align: center; box-shadow: 0 0 15px rgba(0,0,0,0.5);
        }
        .status-box1 { background: #fff; border: 3px solid #333; border-radius: 10px; padding: 10px; text-align: center; }
        .status-vacante { border-color: #e74c3c; }

        .winner-label { font-size: 10px; color: #1e8449; text-transform: uppercase; }
        .winner-num { font-size: 38px; font-weight: 900; line-height: 1; margin: 0; }
        .winner-name { background: #28a745; color: #fff; font-size: 13px; padding: 3px; border-radius: 4px; margin-top: 5px; }
        
        .price-tag { background: #28a745; color: #fff; font-size: 24px; padding: 5px 15px; border-radius: 8px; margin-top: 5px; }
        .title-text { color: #000; font-size: 16px; margin-bottom: 5px; }

        .btn-action { 
            width: 100%; padding: 12px; border-radius: 8px; text-align: center; 
            text-decoration: none; font-weight: bold; text-transform: uppercase; 
            font-size: 12px; border: 1px solid #fff; color: #fff; 
        }
        .btn-green { background: #28a745; border: none; }

        /* ----- MEDIA QUERY PARA MÓVILES ----- */
        @media (max-width: 570px) {
            .widget-card {
                width: 100% !important;
                height: auto !important;
                flex-direction: column; /* Apilar elementos verticalmente */
            }
            .side-info, .content, .side-action {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid #ffc107;
            }
            .side-info { padding: 15px; }
            .side-action { border-bottom: none; padding: 20px; }
            .winner-num { font-size: 50px; }
        }