/* ============================================
   Estilos Reutilizables para WebView
   /https://ag.ret-ai-ler.net/html/css/webview.css
   ============================================ */

/* Reset y Configuración Base */
:root {
    --color-primary: #8B0000;
    --color-secondary: #4A4A4A;
    --color-background: #F0F0F0;
    --color-white: #FFFFFF;
    --color-accent: #FFD700;
    --font-main: 'Arial', sans-serif;
    --border-radius: 8px;
}

/* ⭐ NUEVO: Evitar desbordamiento global */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Estilos de Contenedor Universal */
.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 15px;
    background-color: var(--color-white);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius);
    overflow-x: hidden; /* ⭐ NUEVO */
}

/* Títulos Universales */
.title {
    color: var(--color-primary);
    font-family: var(--font-main);
    text-align: center;
    margin-bottom: 20px;
}

/* ⭐ NUEVO: Contenedor wrapper para tablas */
.table-wrapper {
    width: 100%;
    overflow-x: auto;           /* Scroll horizontal solo si es necesario */
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    margin-bottom: 15px;
    border-radius: var(--border-radius);
    border: 1px solid #ddd;
}

/* Tablas Responsive */
.table-responsive {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-main);
    table-layout: auto;         /* ⭐ NUEVO */
    word-wrap: break-word;      /* ⭐ NUEVO */
    overflow-wrap: break-word;  /* ⭐ NUEVO */
}

.table-responsive th {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 10px;
    text-align: left;
    white-space: nowrap; /* ⭐ Encabezados no se parten */
}

.table-responsive tr:nth-child(even) {
    background-color: #f2f2f2;
}

.table-responsive td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

/* Botones Universales */
.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #6A0000;
}

/* Tarjetas Informativas */
.card {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin-bottom: 15px;
}

/* Listas Estilizadas */
.list-styled {
    list-style-type: none;
    padding: 0;
}

.list-styled li {
    padding: 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}

.list-styled li:last-child {
    border-bottom: none;
}

/* Alertas y Notificaciones */
.alert {
    padding: 10px;
    border-radius: var(--border-radius);
    margin-bottom: 15px;
}

.alert-success {
    background-color: #dff0d8;
    color: #3c763d;
}

.alert-warning {
    background-color: #fcf8e3;
    color: #8a6d3b;
}

.alert-danger {
    background-color: #f2dede;
    color: #a94442;
}

/* Espaciado Universal */
.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px; }
.ml-10 { margin-left: 10px; }
.mr-10 { margin-right: 10px; }

/* Texto Responsivo */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

/* Colores de Texto */
.text-primary   { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-white     { color: var(--color-white); }

/* Efectos de Hover */
.hover-effect {
    transition: transform 0.2s ease;
}
.hover-effect:hover {
    transform: scale(1.05);
}


/* ============================================
   MEDIA QUERIES - MÓVIL
   ============================================ */
@media screen and (max-width: 600px) {
    .container {
        max-width: 100%;
        padding: 8px;           /* ⭐ Reducido de 10px */
    }

    .title {
        font-size: 1.3rem;     /* ⭐ Reducido de 1.5rem */
    }

    h1 { font-size: 1.3rem; } /* ⭐ Reducido de 1.4rem */
    h2 { font-size: 1.1rem; } /* ⭐ Reducido de 1.2rem */
    h3 { font-size: 1rem; }   /* ⭐ Reducido de 1.1rem */
    p  { font-size: 0.85rem; } /* ⭐ Reducido de 0.9rem */

    .list-styled li {
        padding: 8px;
        font-size: 0.85rem;   /* ⭐ Reducido */
    }

    .card {
        padding: 8px;          /* ⭐ Reducido */
    }

    /* ⭐⭐⭐ TABLA EN MÓVIL - LA SOLUCIÓN PRINCIPAL ⭐⭐⭐ */
    .table-wrapper {
        margin-left: -8px;
        margin-right: -8px;
        width: calc(100% + 16px); /* Usar todo el ancho disponible */
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .table-responsive {
        font-size: 0.75rem;    /* ⭐ Texto pequeño en tablas móvil */
        min-width: 100%;
    }

    .table-responsive th {
        padding: 6px 4px;      /* ⭐ Padding reducido */
        font-size: 0.7rem;     /* ⭐ Encabezados más pequeños */
        white-space: normal;   /* ⭐ Permitir salto de línea si es necesario */
    }

    .table-responsive td {
        padding: 6px 4px;      /* ⭐ Padding reducido */
        font-size: 0.75rem;
        word-break: break-word; /* ⭐ Romper palabras largas */
    }

    /* ⭐ Botones más compactos */
    .btn {
        padding: 8px 14px;
        font-size: 0.85rem;
    }

    .alert {
        font-size: 0.85rem;
        padding: 8px;
    }
}

/* ⭐ NUEVO: Para pantallas MUY pequeñas (< 360px) */
@media screen and (max-width: 360px) {
    .container {
        padding: 5px;
    }

    .table-responsive {
        font-size: 0.65rem;
    }

    .table-responsive th {
        padding: 4px 3px;
        font-size: 0.6rem;
    }

    .table-responsive td {
        padding: 4px 3px;
        font-size: 0.65rem;
    }

    h1 { font-size: 1.1rem; }
    h2 { font-size: 1rem; }
    h3 { font-size: 0.9rem; }
    p  { font-size: 0.8rem; }
}