/*
Theme Name:     Divi Child Theme - Kripto
Theme URI:      https://devia.cl/
Description:    Tema hijo de Divi personalizado para kripto.cl
Author:         Tu Nombre
Author URI:     https://devia.cl/
Template:       Divi
Version:        1.0.0
*/

/**
 * Estilos para la tabla generada por el shortcode [saldo_cliente].
 * Diseñados para funcionar bien en fondos claros y oscuros, priorizando el contraste.
 */

/* 1. Contenedor y Tabla Base */
.saldo-cliente-container {
    /* Relleno opcional para separar del contenido circundante */
    padding: 15px; 
    border-radius: 8px;
    /* Usa un color de fondo sutil si la tabla está en un contenedor sin color */
    background-color: transparent; 
}

.saldo-cliente-table {
    width: 100%;
    border-collapse: collapse; 
    margin: 20px 0;
    font-family: Arial, sans-serif;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para levantarla */
    border-radius: 8px; /* Aplica el borde redondeado */
    overflow: hidden; /* Asegura que los bordes redondeados se vean bien */
}

/* 2. Estilos para Encabezados (Header TH) */
.saldo-cliente-table thead th {
    /* Color de fondo oscuro (Navy Blue/Charcoal) para alto contraste */
    background-color: #2c3e50; 
    color: #ecf0f1; /* Texto blanco brillante */
    padding: 15px 10px;
    text-align: left;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
}

/* 3. Estilos para Celdas de Datos (TD) */
.saldo-cliente-table tbody td {
    /* Color de texto oscuro para contraste en fondos claros */
    color: #34495e; 
    padding: 12px 10px;
    border-bottom: 1px solid #bdc3c7; /* Línea separadora suave */
    font-size: 0.95rem;
    background-color: #ffffff; /* Fondo blanco por defecto */
}

/* Patrón a Rayas (Stripe pattern) */
.saldo-cliente-table tbody tr:nth-child(even) td {
    /* Color muy sutil para las filas pares (funciona tanto en claro como en oscuro) */
    background-color: #f5f5f5;
}

/* Hover effect */
.saldo-cliente-table tbody tr:hover td {
    background-color: #ecf0f1; /* Resalta la fila al pasar el ratón */
}

/* 4. Adaptabilidad para Fondos Oscuros (Asegurando la Legibilidad) */
/* Si Divi está en modo oscuro (o el contenedor es muy oscuro), la tabla aún debe ser legible.
   El fondo blanco de las filas (tbody) ya ayuda mucho.
   Podemos hacer el texto más oscuro en el hover.
*/
.saldo-cliente-table tbody td {
    /* Asegura que el texto dentro de la tabla es siempre legible */
    color: #34495e; 
}


/* 5. Responsividad (Móviles) */

@media (max-width: 767px) {
    
    /* Hace que la tabla se desplace horizontalmente si es demasiado ancha */
    .saldo-cliente-container {
        overflow-x: auto;
        padding: 0;
    }

    .saldo-cliente-table {
        /* Fuerza un ancho mínimo para evitar que se comprima demasiado */
        min-width: 700px; 
        display: block;
        box-shadow: none; /* Quitamos la sombra en móvil para un look más plano */
    }
    
    /* Opcional: Centrar el texto en móviles para algunos campos */
    .saldo-cliente-table thead th,
    .saldo-cliente-table tbody td {
        /* Centrado general en móvil (ajusta según preferencia) */
        text-align: center;
    }
}