/* admin/css/alphage-rifas-admin.css */

/*
 * Estilos generales para el plugin AlphaGE Rifas en el área de administración.
 * Basado en la interfaz de usuario de WordPress para una integración fluida.
 */

/* --- 1. Estilos de Cuadrícula de Números --- */

/* Contenedor principal para la grilla de números y la lista de vendidos */
.alphage-grid-container {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea en pantallas pequeñas */
    gap: 20px; /* Espacio entre la grilla de números y la lista de vendidos */
    margin-top: 20px; /* Espacio superior */
}

/* Estilos para la grilla de números de rifa */
.alphage-numbers-grid {
    display: grid;
    /* Adapta las columnas automáticamente. Mínimo 60px, ocupa el espacio disponible */
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 8px; /* Espacio entre los "número-box" */
    flex: 1; /* Permite que la grilla ocupe el espacio disponible */
    padding: 10px;
    border: 1px solid #c3c4c7; /* Borde sutil, similar al de WordPress */
    background-color: #fcfcfc; /* Fondo ligeramente diferente para destacar */
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Sombra suave para profundidad */
    max-width: 100%; /* Evita desbordamiento en contenedores flex */
}

/* Estilos individuales para cada caja de número */
.alphage-number-box {
    width: 60px; /* Tamaño fijo para el cuadrado */
    height: 60px; /* Tamaño fijo para el cuadrado */
    display: flex; /* Usar flexbox para centrar contenido */
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    text-align: center;
    border-radius: 8px; /* Bordes ligeramente redondeados */
    cursor: pointer;
    font-weight: bold;
    font-size: 1.2em; /* Tamaño de fuente del número */
    border: 2px solid #ccc; /* Borde por defecto */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-sizing: border-box; /* Asegura que padding/border no aumenten el tamaño */
}

.alphage-number-box:hover {
    transform: translateY(-2px); /* Pequeño levantamiento al pasar el ratón */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra más pronunciada al pasar el ratón */
}

/* Clases de estado para los números */
.alphage-number-box.status-disponible {
    background-color: #e6ffe6; /* Verde claro */
    color: #1c7b39; /* Verde oscuro */
    border-color: #28a745;
}

.alphage-number-box.status-apartado {
    background-color: #fff8e1; /* Amarillo claro */
    color: #a07800; /* Amarillo-naranja oscuro */
    border-color: #ffc107;
}

.alphage-number-box.status-pagado {
    background-color: #e7f3ff; /* Azul claro */
    color: #004a75; /* Azul oscuro */
    border-color: #0073aa;
}

/* --- 2. Estilos para la Lista de Números Vendidos/Apartados --- */

.alphage-vendidos-list {
    flex-basis: 300px; /* Ancho base para la lista lateral */
    flex-shrink: 0; /* No permite que se encoja */
    background-color: #fff;
    border: 1px solid #c3c4c7;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.alphage-vendidos-list h3 {
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    font-size: 1.1em;
    color: #2c3338;
}

.alphage-vendidos-list table {
    width: 100%;
    border-collapse: collapse;
}

.alphage-vendidos-list th,
.alphage-vendidos-list td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
    font-size: 0.9em;
}

.alphage-vendidos-list th {
    background-color: #f7f7f7;
    font-weight: 600;
    color: #555d66;
}

.alphage-vendidos-list tr:last-child td {
    border-bottom: none;
}

/* Círculos de estado en la lista */
.alphage-status-circle {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    border: 1px solid rgba(0,0,0,0.1); /* Borde sutil para el círculo */
}

/* Colores de los círculos (deben coincidir con number-box estados) */
.alphage-status-circle.status-disponible { background-color: #28a745; } /* Color más oscuro para el círculo */
.alphage-status-circle.status-apartado { background-color: #ffc107; }
.alphage-status-circle.status-pagado { background-color: #0073aa; }

/* --- 3. Estilos del Modal (pop-up para editar números) --- */

.alphage-modal {
    display: none; /* Controlado por JavaScript */
    position: fixed;
    z-index: 10000; /* Asegura que esté por encima de la mayoría de elementos */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7); /* Fondo semi-transparente más oscuro */
    display: flex; /* Para centrar el contenido */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    opacity: 0; /* Inicialmente transparente para fade-in */
    transition: opacity 0.3s ease-in-out;
}

.alphage-modal.is-open {
    opacity: 1;
}

.alphage-modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25); /* Sombra más definida */
    width: 90%;
    max-width: 450px; /* Ancho máximo para el modal */
    position: relative;
    box-sizing: border-box;
    transform: translateY(20px); /* Ligeramente desplazado para animación */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
}

.alphage-modal.is-open .alphage-modal-content {
    transform: translateY(0);
    opacity: 1;
}

/* Estilos para el botón de cerrar del modal */
.alphage-close-button {
    color: #666;
    font-size: 32px; /* Un poco más grande para facilitar el clic */
    font-weight: normal; /* No tan bold */
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
    line-height: 1; /* Alineación vertical */
    transition: color 0.2s ease;
}

.alphage-close-button:hover,
.alphage-close-button:focus {
    color: #333;
    text-decoration: none;
}

/* Estilos para los campos dentro del modal */
.alphage-form-group {
    margin-bottom: 15px;
    text-align: left; /* Alinea etiquetas y campos a la izquierda */
}

.alphage-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600; /* Un poco más de peso para las etiquetas */
    color: #444;
}

.alphage-form-group input[type="text"],
.alphage-form-group select {
    width: 100%; /* Ocupa todo el ancho del contenedor */
    padding: 10px 12px;
    border: 1px solid #ccd0d4; /* Borde estándar de WP */
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.07); /* Sombra interior para campos de WP */
    box-sizing: border-box; /* Incluye padding y border en el width */
    font-size: 14px;
    line-height: 1.5;
}

.alphage-form-group input[type="text"]:focus,
.alphage-form-group select:focus {
    border-color: #007cba; /* Borde de enfoque de WP */
    box-shadow: 0 0 0 1px #007cba;
    outline: none;
}

/* Botones dentro del modal */
.alphage-form-actions { /* Renombrado para consistencia */
    display: flex;
    justify-content: flex-end; /* Alinea los botones a la derecha */
    gap: 10px; /* Espacio entre botones */
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee; /* Línea separadora para acciones */
}

/* Sobrescribir estilos base de WordPress para consistencia si es necesario, pero usa las clases nativas */
.alphage-form-actions .button { /* Apunta a los botones dentro de alphage-form-actions */
    height: auto; /* Permite que el padding determine la altura */
    line-height: 1; /* Ajusta la altura de línea */
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

/* --- 4. Estilos para Toast Notifications --- */

.alphage-toast {
    position: fixed;
    bottom: 30px; /* Desde la parte inferior */
    left: 50%;
    transform: translateX(-50%); /* Centra el toast horizontalmente */
    background-color: #333; /* Fondo oscuro */
    color: #fff; /* Texto blanco */
    padding: 12px 25px; /* Más padding para que se vea mejor */
    border-radius: 8px; /* Bordes más suaves */
    box-shadow: 0 5px 15px rgba(0,0,0,0.4); /* Sombra más pronunciada */
    z-index: 100000; /* El más alto, siempre visible */
    display: none; /* Inicialmente oculto */
    font-weight: 500; /* Peso de fuente */
    font-size: 15px;
    opacity: 0; /* Para animación de fade */
    transition: opacity 0.3s ease-in-out;
    min-width: 250px; /* Ancho mínimo */
    text-align: center;
}

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

/* Colores de toast para diferentes tipos de mensaje */
.alphage-toast.success {
    background-color: #4CAF50; /* Verde para éxito */
}
.alphage-toast.error {
    background-color: #f44336; /* Rojo para error */
}
.alphage-toast.info {
    background-color: #2196F3; /* Azul para información */
}


/* --- 5. Responsive Design --- */

@media (max-width: 768px) {
    .alphage-grid-container {
        flex-direction: column; /* Apila la grilla y la lista de vendidos en móvil */
        gap: 15px; /* Reduce el espacio entre elementos apilados */
    }

    .alphage-numbers-grid {
        grid-template-columns: repeat(auto-fill, minmax(45px, 1fr)); /* Ajusta el tamaño de los números para móvil */
        padding: 8px;
    }

    .alphage-number-box {
        width: 45px;
        height: 45px;
        font-size: 1em;
        border-radius: 6px;
    }

    .alphage-vendidos-list {
        flex-basis: auto; /* Permite que la lista ocupe el ancho completo */
        width: 100%;
        padding: 10px;
    }

    .alphage-vendidos-list th,
    .alphage-vendidos-list td {
        padding: 8px;
        font-size: 0.85em;
    }

    .alphage-modal-content {
        padding: 20px;
        max-width: 95%; /* Ocupa más ancho en pantallas pequeñas */
    }

    .alphage-form-group label {
        font-size: 13px;
    }
    .alphage-form-group input[type="text"],
    .alphage-form-group select {
        padding: 8px 10px;
        font-size: 13px;
    }

    .alphage-toast {
        width: 90%; /* Ocupa más ancho en móvil */
        font-size: 13px;
        padding: 10px 15px;
        bottom: 20px;
    }
}

/* Estilos para tablas generales de WordPress si son usadas en otras partes */
.wp-list-table.widefat {
    margin-top: 20px;
}