/* ================================================================
   RESPONSIVE - Adaptacion para celulares y tablets
   Se carga despues de dark.css para poder sobrescribir.
   ================================================================ */

/* ---------- Base ---------- */
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ---------- Tablets y celulares (<= 768px) ---------- */
@media (max-width: 768px) {
    body {
        margin: 10px !important;
        padding: 0 !important;
    }

    h1 { font-size: 22px !important; }
    h2 { font-size: 19px !important; }
    h3 { font-size: 17px !important; }

    /* Tablas: scroll horizontal */
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    th, td {
        padding: 6px 8px !important;
        font-size: 13px !important;
    }

    /* Formularios: apilar verticalmente */
    form {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    /* Los forms dentro de celdas de tabla mantienen su disposicion */
    td form, th form {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: auto !important;
        gap: 4px !important;
    }
    td form button, td form .btn, th form button, th form .btn {
        width: auto !important;
    }

    /* Inputs y selects a ancho completo */
    input[type="text"], input[type="number"], input[type="email"],
    input[type="password"], input[type="file"], input[type="search"],
    select, textarea {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Botones de formularios a ancho completo */
    form button[type="submit"], form .btn {
        width: 100%;
    }

    /* Barra de navegacion: apilar */
    .toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .toolbar .btn {
        width: 100%;
        text-align: center;
    }

    /* Cards de resumen: apilar */
    .cards {
        flex-direction: column !important;
    }
    .card {
        min-width: auto !important;
    }

    /* Buscador y filtros del catalogo */
    .filters {
        flex-direction: column !important;
    }
    .filters input, .filters select, .filters button {
        width: 100% !important;
    }

    /* Textos */
    .count { font-size: 13px !important; }

    /* Link del carrito */
    .cartlink {
        display: block;
        text-align: center;
        margin-top: 10px;
    }
}

/* ---------- Celulares pequenos (<= 480px) ---------- */
@media (max-width: 480px) {
    body { margin: 6px !important; }
    h1 { font-size: 19px !important; }
    th, td { padding: 5px 6px !important; font-size: 12px !important; }
    .toolbar .btn, form .btn {
        font-size: 13px !important;
        padding: 7px 10px !important;
    }
}