/* Estilos públicos de Lotoup */

/* Reset y estilos base */
.lotoup-sorteos-lista,
.lotoup-sorteo-detalle,
.lotoup-mi-cuenta,
.lotoup-login,
.lotoup-registro,
.lotoup-seleccion-numeros {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Botones */
.btn {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
}

.btn-primary {
    background: #0073aa;
    color: white;
    border-color: #0073aa;
}

.btn-primary:hover {
    background: #005a87;
    border-color: #005a87;
    color: white;
}

.btn-secondary {
    background: #6c757d;
    color: white;
    border-color: #6c757d;
}

.btn-secondary:hover {
    background: #545b62;
    border-color: #545b62;
    color: white;
}

.btn-outline {
    background: transparent;
    color: #0073aa;
    border-color: #0073aa;
}

.btn-outline:hover {
    background: #0073aa;
    color: white;
}

.btn-large {
    padding: 15px 30px;
    font-size: 16px;
}

.btn-small {
    padding: 6px 12px;
    font-size: 13px;
}

/* Lista de sorteos */
.lotoup-sorteos-lista {
    margin: 20px 0;
}

.lotoup-sorteos-lista h2 {
    margin-bottom: 25px;
    color: #2c3e50;
    border-bottom: 3px solid #0073aa;
    padding-bottom: 10px;
}

.sorteo-card {
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease;
}

.sorteo-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.sorteo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.sorteo-header h3 {
    margin: 0;
    color: #2c3e50;
    font-size: 22px;
}

.sorteo-precio {
    background: #27ae60;
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 16px;
}

.sorteo-info {
    margin-bottom: 20px;
}

.sorteo-info p {
    margin: 8px 0;
    color: #555;
}

.sorteo-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.no-sorteos {
    text-align: center;
    padding: 40px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    color: #6c757d;
}

/* Detalle de sorteo */
.lotoup-sorteo-detalle {
    margin: 20px 0;
}

.sorteo-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.sorteo-header h2 {
    margin: 0 0 10px 0;
    font-size: 28px;
}

.sorteo-descripcion {
    margin: 0;
    opacity: 0.9;
    font-size: 16px;
}

.sorteo-stats {
    margin-bottom: 30px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.stat-item {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e1e8ed;
    text-align: center;
}

.stat-label {
    display: block;
    color: #6c757d;
    font-size: 14px;
    margin-bottom: 5px;
}

.stat-value {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #2c3e50;
}

.estado-abierta {
    color: #27ae60 !important;
}

.estado-cerrada {
    color: #e74c3c !important;
}

.estado-pendiente {
    color: #f39c12 !important;
}

/* Sección de premios */
.premios-section {
    background: white;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #e1e8ed;
    margin-bottom: 30px;
}

.premios-section h3 {
    margin: 0 0 20px 0;
    color: #2c3e50;
    font-size: 20px;
}

.tabla-premios {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.tabla-premios th,
.tabla-premios td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e1e8ed;
}

.tabla-premios th {
    background: #f8f9fa;
    font-weight: 600;
    color: #2c3e50;
}

.tabla-premios tr:hover {
    background: #f8f9fa;
}

/* Sección de referencia */
.referencia-section {
    background: #e8f4fd;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #0073aa;
    margin-bottom: 30px;
}

.referencia-section h3 {
    margin: 0 0 10px 0;
    color: #0073aa;
}

/* Acciones del sorteo */
.sorteo-actions {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.login-required {
    padding: 20px;
    text-align: center;
}

.sorteo-cerrado {
    color: #e74c3c;
    font-weight: 600;
    font-style: italic;
}

/* Mi Cuenta */
.lotoup-mi-cuenta {
    margin: 20px 0;
}

.cuenta-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.usuario-info h3 {
    margin: 0 0 5px 0;
    font-size: 24px;
}

.email-usuario {
    margin: 0;
    opacity: 0.8;
}

.saldo-section {
    text-align: right;
}

.saldo-actual {
    margin-bottom: 15px;
}

.saldo-label {
    display: block;
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 5px;
}

.saldo-value {
    display: block;
    font-size: 28px;
    font-weight: bold;
}

.saldo-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Menú de pestañas */
.cuenta-menu {
    margin-bottom: 30px;
}

.tabs-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tabs-menu li {
    flex: 1;
}

.cuenta-tab {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #6c757d;
    text-align: center;
    border-right: 1px solid #e1e8ed;
    transition: all 0.3s ease;
}

.tabs-menu li:last-child .cuenta-tab {
    border-right: none;
}

.cuenta-tab:hover,
.cuenta-tab.active {
    background: #0073aa;
    color: white;
}

/* Contenido de pestañas */
.tab-content {
    display: none;
    background: white;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #e1e8ed;
}

.tab-content.active {
    display: block;
}

.tab-content h4 {
    margin: 0 0 20px 0;
    color: #2c3e50;
    font-size: 20px;
}

/* Estadísticas en Mi Cuenta */
.stat-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #e1e8ed;
}

.stat-card .stat-number {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #0073aa;
    margin-bottom: 5px;
}

.stat-card .stat-label {
    display: block;
    color: #6c757d;
    font-size: 14px;
}

.acciones-rapidas {
    margin-top: 30px;
}

.acciones-rapidas h5 {
    margin: 0 0 15px 0;
    color: #2c3e50;
}

.acciones-rapidas .btn {
    margin-right: 10px;
    margin-bottom: 10px;
}

/* Placeholders */
.tickets-placeholder,
.transacciones-placeholder {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
    background: #f8f9fa;
    border-radius: 8px;
}

/* Perfil */
.perfil-info {
    margin-bottom: 30px;
}

.campo-perfil {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.campo-perfil label {
    font-weight: 600;
    color: #2c3e50;
}

.perfil-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Login */
.lotoup-login {
    max-width: 400px;
    margin: 20px auto;
}

.login-container {
    background: white;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #e1e8ed;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.login-container h2 {
    margin: 0 0 10px 0;
    text-align: center;
    color: #2c3e50;
}

.login-container > p {
    text-align: center;
    color: #6c757d;
    margin-bottom: 25px;
}

.login-error {
    background: #f8d7da;
    color: #721c24;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
    border: 1px solid #f5c6cb;
}

#lotoup-loginform {
    margin-bottom: 20px;
}

#lotoup-loginform p {
    margin-bottom: 15px;
}

#lotoup-loginform label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #2c3e50;
}

#lotoup-loginform input[type="text"],
#lotoup-loginform input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

#lotoup-loginform input[type="submit"] {
    background: #0073aa;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
}

#lotoup-loginform input[type="submit"]:hover {
    background: #005a87;
}

.login-links {
    text-align: center;
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
}

.registro-link {
    margin-top: 15px;
}

.ya-logueado {
    text-align: center;
    padding: 20px;
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    color: #155724;
}

/* Registro */
.lotoup-registro {
    max-width: 500px;
    margin: 20px auto;
}

.registro-container {
    background: white;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #e1e8ed;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.registro-container h2 {
    margin: 0 0 10px 0;
    text-align: center;
    color: #2c3e50;
}

.registro-container > p {
    text-align: center;
    color: #6c757d;
    margin-bottom: 25px;
}

.registro-info {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
}

.registro-info h3 {
    margin: 0 0 15px 0;
    color: #2c3e50;
}

.registro-info ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.registro-info li {
    padding: 5px 0;
    color: #555;
}

.registro-action {
    text-align: center;
    margin-bottom: 20px;
}

.login-link {
    text-align: center;
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .sorteo-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .sorteo-actions {
        flex-direction: column;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .cuenta-header {
        flex-direction: column;
        text-align: center;
    }
    
    .saldo-section {
        text-align: center;
    }
    
    .tabs-menu {
        flex-direction: column;
    }
    
    .cuenta-tab {
        border-right: none;
        border-bottom: 1px solid #e1e8ed;
    }
    
    .tabs-menu li:last-child .cuenta-tab {
        border-bottom: none;
    }
    
    .tabla-premios {
        font-size: 14px;
    }
    
    .tabla-premios th,
    .tabla-premios td {
        padding: 8px;
    }
}

@media (max-width: 480px) {
    .sorteo-card,
    .login-container,
    .registro-container,
    .tab-content {
        padding: 15px;
    }
    
    .cuenta-header {
        padding: 20px 15px;
    }
    
    .saldo-value {
        font-size: 24px;
    }
    
    .usuario-info h3 {
        font-size: 20px;
    }
}

/* Agregar estos estilos a public/css/lotoup-public.css */

/* Estilos para Mi Perfil */
.lotoup-perfil {
    max-width: 800px;
    margin: 20px auto;
}

.lotoup-form {
    background: white;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #e1e8ed;
}

.form-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.form-section:last-child {
    border-bottom: none;
}

.form-section h3 {
    margin: 0 0 20px 0;
    color: #2c3e50;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #2c3e50;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.form-group textarea {
    resize: vertical;
}

.form-group small {
    display: block;
    margin-top: 5px;
    color: #6c757d;
    font-size: 13px;
}

.form-info {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.status-badge.success {
    background: #d4edda;
    color: #155724;
}

.status-badge.warning {
    background: #fff3cd;
    color: #856404;
}

.lotoup-btn {
    display: inline-block;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    margin-right: 10px;
}

.lotoup-btn-primary {
    background: #0073aa;
    color: white;
}

.lotoup-btn-primary:hover {
    background: #005a87;
    color: white;
}

.lotoup-btn-secondary {
    background: #6c757d;
    color: white;
}

.lotoup-btn-secondary:hover {
    background: #545b62;
    color: white;
}

/* Estilos para Mis Tickets */
.lotoup-mis-tickets {
    margin: 20px 0;
}

.ticket-group {
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
}

.ticket-header {
    background: #f8f9fa;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ticket-header h3 {
    margin: 0;
    color: #2c3e50;
}

.fecha-sorteo {
    color: #6c757d;
    font-size: 14px;
}

.ticket-info {
    padding: 20px;
}

.numeros-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
}

.numero {
    display: inline-block;
    padding: 8px 12px;
    background: #f8f9fa;
    border: 2px solid #e1e8ed;
    border-radius: 4px;
    font-weight: 600;
    font-size: 16px;
}

.numero-ganador {
    background: #d4edda;
    border-color: #27ae60;
    color: #155724;
}

.numeros-ganadores {
    margin-top: 15px;
    padding: 10px;
    background: #e8f4fd;
    border-left: 4px solid #0073aa;
    border-radius: 4px;
}

.no-tickets {
    text-align: center;
    padding: 40px;
    color: #6c757d;
}

/* Estilos para Transacciones */
.lotoup-transacciones {
    margin: 20px 0;
}

.tabla-responsive {
    overflow-x: auto;
}

.tabla-transacciones {
    width: 100%;
    background: white;
    border-collapse: collapse;
    margin-top: 20px;
}

.tabla-transacciones th,
.tabla-transacciones td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e1e8ed;
}

.tabla-transacciones th {
    background: #f8f9fa;
    font-weight: 600;
    color: #2c3e50;
}

.monto-positivo {
    color: #27ae60;
    font-weight: 600;
}

.monto-negativo {
    color: #e74c3c;
    font-weight: 600;
}

/* Estilos para Depositar */
.lotoup-depositar {
    margin: 20px 0;
}

.metodos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.metodo-card {
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.metodo-card:hover {
    border-color: #0073aa;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.metodo-card img {
    height: 60px;
    margin-bottom: 15px;
}

.metodo-card h4 {
    margin: 0 0 10px 0;
    color: #2c3e50;
}

.metodo-card p {
    color: #6c757d;
    font-size: 14px;
    margin-bottom: 15px;
}

.info-importante {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 20px;
    margin-top: 30px;
}

.info-importante h4 {
    margin: 0 0 10px 0;
    color: #856404;
}

.info-importante ul {
    margin: 0;
    padding-left: 20px;
}

/* Estilos para Retiros */
.lotoup-retiros {
    margin: 20px 0;
}

.saldo-disponible {
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    margin-bottom: 30px;
}

.saldo-grande {
    font-size: 36px;
    font-weight: bold;
    color: #0073aa;
    margin: 10px 0;
}

.form-retiro {
    background: white;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #e1e8ed;
    margin-bottom: 30px;
}

.aviso-metodos {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
}

.saldo-insuficiente {
    text-align: center;
    padding: 40px;
    background: #f8f9fa;
    border-radius: 8px;
}

.tabla-retiros {
    width: 100%;
    background: white;
    border-collapse: collapse;
}

.tabla-retiros th,
.tabla-retiros td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e1e8ed;
}

.tabla-retiros th {
    background: #f8f9fa;
    font-weight: 600;
}

.estado-pendiente {
    color: #f39c12;
    font-weight: 600;
}

.estado-completado {
    color: #27ae60;
    font-weight: 600;
}

.estado-rechazado {
    color: #e74c3c;
    font-weight: 600;
}

/* Estilos para Selección de Números */
.lotoup-seleccion-numeros {
    margin: 20px 0;
}

.info-seleccion {
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.info-item {
    text-align: center;
}

.info-item .label {
    display: block;
    color: #6c757d;
    font-size: 14px;
    margin-bottom: 5px;
}

.info-item .value {
    display: block;
    font-size: 20px;
    font-weight: bold;
    color: #2c3e50;
}

.leyenda-estados {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.estado-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cuadro {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 4px;
}

.cuadro.disponible {
    background: white;
    border-color: #28a745;
}

.cuadro.reservado {
    background: #ffc107;
    border-color: #ffc107;
}

.cuadro.vendido {
    background: #dc3545;
    border-color: #dc3545;
}

.cuadro.seleccionado {
    background: #007bff;
    border-color: #007bff;
}

.grid-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px;
    padding: 20px;
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    margin-bottom: 30px;
}

.numero-item {
    padding: 12px;
    text-align: center;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    user-select: none;
}

.numero-item.disponible {
    background: white;
    border-color: #28a745;
}

.numero-item.disponible:hover {
    background: #e8f5e9;
}

.numero-item.reservado {
    background: #ffc107;
    border-color: #ffc107;
    cursor: not-allowed;
    opacity: 0.7;
}

.numero-item.vendido {
    background: #dc3545;
    border-color: #dc3545;
    color: white;
    cursor: not-allowed;
    opacity: 0.7;
}

.numero-item.seleccionado {
    background: #007bff;
    border-color: #007bff;
    color: white;
}

.numero-item[disabled] {
    pointer-events: none;
}

.acciones-seleccion {
    text-align: center;
    gap: 15px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.lotoup-aviso-perfil {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    margin: 20px 0;
}

.lotoup-aviso-perfil h3 {
    color: #721c24;
    margin: 0 0 10px 0;
}

/* Notificaciones */
.lotoup-notice {
    padding: 15px;
    margin: 20px 0;
    border-radius: 4px;
    border-left: 4px solid;
}

.lotoup-notice.success {
    background: #d4edda;
    color: #155724;
    border-color: #27ae60;
}

.lotoup-notice.error {
    background: #f8d7da;
    color: #721c24;
    border-color: #e74c3c;
}

.lotoup-notice.warning {
    background: #fff3cd;
    color: #856404;
    border-color: #ffc107;
}

/* Responsive para las nuevas páginas */
@media (max-width: 768px) {
    .metodos-grid {
        grid-template-columns: 1fr;
    }
    
    .grid-numeros {
        grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
        gap: 5px;
        padding: 10px;
    }
    
    .numero-item {
        padding: 8px;
        font-size: 14px;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .ticket-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .lotoup-form {
        padding: 20px;
    }
    
    .saldo-grande {
        font-size: 28px;
    }
    
    .tabla-transacciones {
        font-size: 14px;
    }
    
    .tabla-transacciones th,
    .tabla-transacciones td {
        padding: 8px;
    }
}