/* ===========================================================
   Responsive Layouts y Media Queries
   -----------------------------------------------------------
   - Breakpoints definidos en :root para facilitar mantenimiento.
   - Uso combinado de Flexbox y Grid según la necesidad del layout.
   =========================================================== */

/* ===== VARIABLES DE BREAKPOINTS =====
   --mobile : máximo 600px -> smartphones en portrait/landscape.
   --tablet : máximo 900px -> tablets pequeñas y medianas.
*/
:root {
    --mobile: 600px;
    --tablet: 900px;
}

/* ===== LAYOUT GLOBAL =====
   Se define un layout flexible con footer pegado al fondo.
   min-height y padding-bottom aseguran que el footer no se superponga.
*/

html, body { 
    height: 100%; 
    margin: 0; 
} 
body { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
    padding-bottom: env(safe-area-inset-bottom); /* para iOS */
} 
main { 
    flex: 1 0 auto;
    min-height: 0;
}

/* =================== NAV ===========================
   Menú principal en grid. En desktop se muestran 4 columnas.
   En mobile y tablet se reduce según media queries.
*/
nav.menu a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

nav.menu ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 1rem;
}

nav.menu li {
    display: block;
    width: auto;
    min-width: 0;
    margin: 0;
}

/* =================== MÉTRICAS =============================
   Cards mostradas en grilla. Número de columnas varía con el ancho.
*/
.metrics-title {
    font-size: 1.30rem; 
    margin-bottom: 1rem;
}
.cards {
    display: block;
    width: auto;
    min-width: 0;
    margin: 0;
}

/* =================== ACCIONES RÁPIDAS =====================
   Flex con wrap para adaptar botones.
*/
.acciones .acciones-botones {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

/* =================== HEADER & FOOTER ======================
   Header flexible y footer pegado o relativo según breakpoint.
*/
header > div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
header img {
    margin-right: .75rem;
}
footer {
    position: relative;
    left: 0;
    right: 0;
}

/* =================== SECCIONES ESPECÍFICAS ================ */
.nueva-factura .estado-factura {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}
.gestion-facturas {
    display: grid;
    grid-template-rows: auto 1fr;
}
.gestion-facturas .buscador {
    display: flex;
    justify-content: flex-start;
    margin-bottom: -0.1rem;
}
.gestion-facturas .estado-facturas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}
.configuracion {
    display: grid;
    grid-template-rows: auto;
    gap: 1.25rem;
}
.configuracion .impuesto-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
}
.configuracion .impuesto-item {
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* ===========================================================
   MEDIA QUERIES
   -----------------------------------------------------------
   MOBILE FIRST: estilos base para <600px.
   Tablet y Desktop sobrescriben en orden creciente.
   =========================================================== */

/* ====== MOBILE: < 600px ======
   - Una sola columna para menú y métricas.
   - Botones en columna.
   - Header y footer centrados.
*/


/* Configuración: fila de impuestos - comportamiento fluido y limpio */

@media (max-width: 600px) {
    html {
        overflow-x: hidden;
    }
    
    body { 
        padding-bottom: 0 !important; 
        overflow-x: hidden;
    }
    
    nav.menu ul {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    nav.menu a {
        justify-content: flex-start;
        padding: 0.5rem 0.75rem;
    }
    .metrics-title {
        text-align: center;
        margin-bottom: 1rem;
    }
    .cards {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .cards .card {
        width: 95%;
    }
     
    .acciones .acciones-botones {
        flex-direction: column;
        gap: 0.5rem;
    }
    header > div {
        flex-direction: column;
        text-align: center;
    }
    header img {
        margin: 0 auto 0.5rem;
    }
    header p {
        text-align: center;
    }
    footer {
        position: relative;
        text-align: center;
    }
    .nueva-factura .estado-factura {
        flex-direction: column;
        gap: 0.75rem;
    }
    .gestion-facturas {
        grid-template-rows: auto 1fr;
        gap: 1rem;
    }
    .gestion-facturas .buscador {
        justify-content: center;
    }
    .gestion-facturas .estado-facturas {
        flex-direction: column;
        gap: 0.75rem;
    }
    .configuracion .impuesto-card { grid-template-columns: 1fr; justify-items: start; }
    /* Configuración: evitar desbordes en filas y formularios */
    .configuracion .section-card { 
        padding: 1rem; 
        max-width: 100%; 
    }
    .configuracion .list-group, 
    .configuracion .list-group-item { 
        overflow-x: 
        hidden; max-width: 100%; 
    }
    .configuracion .list-group-item .d-flex { 
        flex-wrap: wrap; 
    }
    .configuracion .ms-auto, 
    .configuracion .ms-sm-auto { 
        margin-left: 0; 
        width: 100%; 
        display: flex; 
        justify-content: 
        flex-end; gap: .5rem; 
    }
    .configuracion 
    .text-muted { 
        white-space: normal; 
    }
    .configuracion 
    .form-floating 
    .form-control { 
        min-width: 0; 
    }
    .configuracion 
    .calculadora-iva > .p-3, 
    .configuracion 
    .calculadora-iva > .p-md-4 { 
        max-width: 100%; overflow-x: hidden; 
    }
    html, body { 
        overflow-x: hidden; 
    }
}

/* ====== EXTRA SMALL: <= 375px ======
   En "Agregar nuevo impuesto", forzar que el botón "Activo" baje a otra fila
   y que los campos ocupen 100% para evitar desbordes. */
@media (max-width: 375px) {
    .configuracion .card .row .col-8 { 
        flex: 0 0 100%; 
        max-width: 100%; 
    }
    .configuracion 
    .card 
    .row 
    .col-4 { 
        flex: 0 0 100%; 
        max-width: 100%; 
    }
    #btnEstadoNuevo { 
        width: 100%; 
    }
}

/*  Orden: botón, editar, borrar */
@media (max-width: 576px) {
  .imp-item { 
    row-gap: .35rem; 
}
  .imp-item .btn-estado-col, 
  .imp-item .edit-col, 
  .imp-item .delete-col { 
    flex: 0 0 auto; 
}
}
@media (max-width: 520px) {
  .imp-item 
  .btn-estado-col { 
    flex: 0 0 100%; 
    max-width: 100%; 
}
}
@media (max-width: 480px) {
  .imp-item .edit-col { 
    flex: 0 0 100%; 
    max-width: 100%; 
  }
}
@media (max-width: 440px) {
  .imp-item 
  .delete-col { 
    flex: 0 0 100%; 
    max-width: 100%;
  }
}

/* ====== TABLET: 601px–900px ======
   - Dos columnas para menú y métricas.
   - Botones envueltos en flex-wrap.
   - Header alineado a la izquierda.
*/
@media (min-width: 601px) and (max-width: 900px) {
    nav.menu ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .metrics-title {
        text-align: center;
        margin-bottom: 1rem;
    }
    .cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
    }
    .cards .card {
        width: 95%;
        max-width: 350px;
    }
    .acciones .acciones-botones {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    header > div {
        flex-direction: row;
        justify-content: flex-start;
    }
    header p {
        text-align: left;
    }
    footer {
        position: relative;
    }
    .nueva-factura .estado-factura {
        flex-direction: row;
        justify-content: center;
        gap: 1rem;
    }
    .gestion-facturas .estado-facturas {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .configuracion .impuesto-card {
        grid-template-columns: 1fr auto;
    }
}

/* ====== DESKTOP: > 900px ======
   - Cuatro columnas para menú y métricas.
   - Botones en fila.
*/
@media (min-width: 901px) {
    nav.menu ul {
        grid-template-columns: repeat(4, minmax(180px, 1fr));
        gap: 1rem;
    }
    .acciones .acciones-botones {
        flex-direction: row;
        gap: 0.75rem;
    }
    header > div {
        flex-direction: row;
        align-items: center;
    }
    footer {
        position: relative;
    }
}

/* ===== ORIENTACIÓN =====
   Ajustes específicos para landscape/portrait en celulares de alta resolución.
*/
@media (max-width: 932px) and (orientation: landscape) {
    header {
        padding-top: 0.1rem;
        padding-bottom: 0.1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .metrics-title {
        text-align: center;
        margin-bottom: 1rem;
    }
    .cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        justify-items: stretch;
        align-items: stretch;
        margin: 0 auto;
    }
    .cards .card {
        width: 100%;
        height: auto;
    }
    footer {
        position: relative;
    }
}
@media (min-width: 801px) and (max-width: 1024px) and (orientation: portrait) {
    .metricas {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    } 
    nav.menu ul {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .gestion-facturas .estado-facturas {
        flex-direction: column;
        gap: 0.75rem;
    }
    .nueva-factura .estado-factura {
        flex-direction: column;
    }
    main {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
/* Ajuste específico para landscape en dispositivos de 601px a 900px 
para solucionar errores en nueva-factura y facturas
*/ 
@media (min-width: 601px) and (max-width: 900px) {
    .gestion-facturas .estado-facturas,
    .nueva-factura .estado-factura {
        flex-direction: column;   /* vuelve a columna */
        gap: 0.75rem;
    }
}

/* ===== TRANSICIONES =====
   Suaviza hover/focus en tarjetas y links.
*/
.metricas .card,
nav.menu a {
    transition: all 0.15s ease;
}

/* Entre 576px y 600px: forzar una sola línea, sin espacios muertos */
@media (min-width: 576px) and (max-width: 600px) {
  .imp-item { 
    flex-wrap: nowrap; 
}
  .imp-item 
  .name-group { 
    flex: 1 1 auto; 
    min-width: 0; 
    }
  .imp-item 
  .btn-estado-col, 
  .imp-item .actions-col { 
    flex: 0 0 auto; 
    }
}

/* <= 575px: apilar ordenado - primero botón Activo, luego acciones */
@media (max-width: 575px) {
  .imp-item 
  .btn-estado-col { 
    flex: 0 0 100%; 
    max-width: 100%; 
    }
  .imp-item 
  .actions-col { 
    flex: 0 0 100%; 
    max-width: 100%; 
    justify-content: flex-start; 
    }
}