/* ==========================================================================
   IO SAT PRO V3 - CAPA VISUAL CORPORATIVA
   --------------------------------------------------------------------------
   Objetivo:
   - Unificar cabeceras, cajas, botones, tablas y formularios del SAT.
   - Mejorar versión PC y móvil sin tocar la base de datos.
   - Este archivo se carga al final para corregir estilos antiguos sin romper PHP.
   --------------------------------------------------------------------------
   Si quieres cambiar colores principales:
   modifica las variables :root de este bloque.
   ========================================================================== */

:root{
    --io-primary:#0069ff;
    --io-primary-dark:#0f172a;
    --io-bg:#eef2f7;
    --io-card:#ffffff;
    --io-soft:#f8fafc;
    --io-border:#dbe3ef;
    --io-text:#111827;
    --io-muted:#64748b;
    --io-green:#16a34a;
    --io-orange:#f59e0b;
    --io-red:#dc2626;
    --io-purple:#7c3aed;
    --io-radius-xl:22px;
    --io-radius:16px;
    --io-shadow:0 10px 26px rgba(15,23,42,.08);
    --io-shadow-header:0 14px 34px rgba(15,23,42,.18);
}

/* ==========================================================================
   BASE GENERAL
   --------------------------------------------------------------------------
   Cambia aquí tamaño de letra general, fondo y ancho global.
   ========================================================================== */
html,body{
    max-width:100%;
    overflow-x:hidden;
}

body{
    background:var(--io-bg) !important;
    color:var(--io-text) !important;
    font-family:Inter,Segoe UI,Roboto,Arial,sans-serif !important;
    font-size:15px !important;
    line-height:1.45 !important;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}

/* ==========================================================================
   CONTENEDORES
   --------------------------------------------------------------------------
   .contenedor, .container y .wrap controlan el ancho de las páginas.
   ========================================================================== */
.contenedor,
.container,
.wrap,
.main-container{
    width:min(96%,1360px) !important;
    max-width:1360px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* ==========================================================================
   CABECERA CORPORATIVA
   --------------------------------------------------------------------------
   Afecta a:
   - .io-header
   - .cabecera
   - .topbar
   - .ticket-header
   - .taller-header

   Para cambiar altura: padding.
   Para dejar fija: position sticky.
   ========================================================================== */
.io-header,
.cabecera,
.ticket-header,
.taller-header,
.modulo-header{
    width:min(96%,1360px) !important;
    max-width:1360px !important;
    margin:0 auto 14px !important;
    background:linear-gradient(135deg,var(--io-primary),var(--io-primary-dark)) !important;
    color:#fff !important;
    border-radius:var(--io-radius-xl) !important;
    padding:22px 26px !important;
    box-shadow:var(--io-shadow-header) !important;
    border:0 !important;
    position:sticky !important;
    top:8px !important;
    z-index:900 !important;
}

.io-header h1,
.cabecera h1,
.ticket-header h1,
.taller-header h1,
.modulo-header h1{
    color:#fff !important;
    margin:0 !important;
    font-size:clamp(24px,2.2vw,34px) !important;
    line-height:1.08 !important;
    letter-spacing:-.02em !important;
}

.io-header p,
.cabecera p,
.ticket-header p,
.taller-header p,
.modulo-header p{
    color:#dbeafe !important;
    margin:8px 0 0 !important;
    font-size:14px !important;
}

/* Zona de botones dentro de cabecera */
.io-header-bottom,
.header-actions,
.cabecera-botones,
.acciones-cabecera,
.ticket-actions,
.taller-actions{
    margin-top:16px !important;
    padding-top:14px !important;
    border-top:1px solid rgba(255,255,255,.18) !important;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:9px !important;
    flex-wrap:wrap !important;
}

/* Topbar antiguas: se neutralizan para evitar doble cabecera visual */
.topbar:not(.mantener-topbar){
    background:transparent !important;
    box-shadow:none !important;
    padding:0 !important;
}

/* ==========================================================================
   CAJAS / PANELES
   --------------------------------------------------------------------------
   Para cambiar tamaño de cajas: padding, border-radius, margin-bottom.
   Borde izquierdo por tipo:
   - .panel-cliente azul
   - .panel-facturacion naranja
   - .panel-ok verde
   - .panel-danger rojo
   ========================================================================== */
.panel,
.card,
.box,
.caja,
.bloque,
.factura-box,
.aviso,
.aviso-cliente,
.bloque-aviso-pedido{
    background:var(--io-card) !important;
    border:1px solid #e5e7eb !important;
    border-radius:18px !important;
    padding:18px !important;
    margin-bottom:16px !important;
    box-shadow:var(--io-shadow) !important;
}

.panel h2,
.card h2,
.box h2,
.caja h2,
.bloque h2{
    margin:0 0 14px !important;
    font-size:20px !important;
    line-height:1.15 !important;
    color:#0f172a !important;
}

.panel-cliente,
.cliente-box,
.datos-cliente{
    border-left:6px solid var(--io-primary) !important;
}

.panel-facturacion,
.facturacion-box,
.datos-facturacion{
    border-left:6px solid var(--io-orange) !important;
}

.panel-ok,
.aviso-ok,
.estado-ok{
    border-left:6px solid var(--io-green) !important;
}

.panel-danger,
.aviso-rechazado,
.estado-error{
    border-left:6px solid var(--io-red) !important;
}

.panel-purple,
.panel-notificaciones,
.notificaciones-box{
    border-left:6px solid var(--io-purple) !important;
}

/* ==========================================================================
   CAJAS DE DATOS PEQUEÑAS
   --------------------------------------------------------------------------
   Afecta a tarjetas tipo: Fecha, Estado, Cliente, Total, etc.
   Para aumentar/reducir: cambiar min-height y padding.
   ========================================================================== */
.datos-grid,
.grid-datos,
.info-grid,
.form-grid,
.grid{
    display:grid !important;
    gap:12px !important;
    align-items:stretch !important;
}

.datos-grid-2{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
.datos-grid-3{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
.datos-grid-4{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
.datos-grid-5{grid-template-columns:repeat(5,minmax(0,1fr)) !important;}
.datos-grid-6{grid-template-columns:repeat(6,minmax(0,1fr)) !important;}

.dato,
.info-card,
.mini-card,
.kpi{
    background:var(--io-soft) !important;
    border:1px solid var(--io-border) !important;
    border-radius:14px !important;
    padding:10px 13px !important;
    min-height:68px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    overflow:hidden !important;
}

.dato small,
.info-card small,
.mini-card small,
.kpi small{
    display:block !important;
    color:var(--io-muted) !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    font-size:11px !important;
    letter-spacing:.02em !important;
    margin-bottom:5px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.dato strong,
.info-card strong,
.mini-card strong,
.kpi strong{
    display:block !important;
    color:#0f172a !important;
    font-weight:800 !important;
    font-size:16px !important;
    line-height:1.18 !important;
    text-align:right !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.dato-base{border-left:5px solid var(--io-primary) !important;}
.dato-impuesto{border-left:5px solid var(--io-orange) !important;}
.dato-total{
    border-left:5px solid var(--io-green) !important;
    background:#ecfdf5 !important;
}
.dato-total strong{color:#166534 !important;}

/* ==========================================================================
   BOTONES
   --------------------------------------------------------------------------
   Cambia aquí tamaño general de botones.
   ========================================================================== */
.btn,
button,
input[type="submit"],
.boton,
.boton-panel{
    border:0;
    border-radius:12px !important;
    min-height:38px !important;
    padding:9px 14px !important;
    font-weight:800 !important;
    font-size:14px !important;
    cursor:pointer !important;
    transition:transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
.boton:hover,
.boton-panel:hover{
    transform:translateY(-1px);
    filter:brightness(.98);
}

.btn-azul,.btn-primary,.azul{background:#2563eb !important;color:white !important;}
.btn-verde,.verde{background:#16a34a !important;color:white !important;}
.btn-rojo,.rojo{background:#dc2626 !important;color:white !important;}
.btn-gris,.gris{background:#475569 !important;color:white !important;}
.btn-naranja,.naranja{background:#f59e0b !important;color:white !important;}
.btn-morado,.morado{background:#7c3aed !important;color:white !important;}

/* ==========================================================================
   FORMULARIOS
   --------------------------------------------------------------------------
   Para cambiar altura de campos: padding y font-size.
   ========================================================================== */
label{
    color:#374151 !important;
    font-weight:800 !important;
    font-size:13px !important;
    margin-bottom:6px !important;
}

input,
select,
textarea{
    width:100%;
    border:1px solid #d1d5db !important;
    border-radius:12px !important;
    background:#fff !important;
    color:#111827 !important;
    font-size:14px !important;
    padding:10px 12px !important;
    outline:none !important;
}

textarea{
    min-height:90px;
    resize:vertical;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--io-primary) !important;
    box-shadow:0 0 0 3px rgba(0,105,255,.12) !important;
}

/* Checks compactos */
input[type="checkbox"]{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    accent-color:var(--io-primary) !important;
}

/* ==========================================================================
   PILLS / ESTADOS
   --------------------------------------------------------------------------
   Para estados largos tipo "Pedido proveedor", se permite ancho flexible.
   ========================================================================== */
.estado-pill,
.pill,
.badge,
.presupuesto-pill,
.pill-presupuesto,
.metodo-pill{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
    padding:6px 10px !important;
    font-size:12px !important;
    font-weight:900 !important;
    line-height:1.1 !important;
    min-width:auto !important;
    max-width:100% !important;
    white-space:normal !important;
    text-align:center !important;
    background:#dbeafe !important;
    color:#1d4ed8 !important;
}

.pill-ok,
.aceptado,
.estado-pill.aceptado{
    background:#dcfce7 !important;
    color:#166534 !important;
}

.pill-no,
.rechazado,
.cancelado,
.estado-pill.cancelado{
    background:#fee2e2 !important;
    color:#991b1b !important;
}

.pill-pendiente,
.pendiente{
    background:#fef3c7 !important;
    color:#92400e !important;
}

/* ==========================================================================
   TABLAS
   --------------------------------------------------------------------------
   Tablas cómodas en PC y legibles en móvil.
   ========================================================================== */
.tabla-scroll,
.table-responsive{
    width:100%;
    overflow-x:auto;
}

table,
.tabla{
    width:100% !important;
    border-collapse:collapse !important;
    background:#fff !important;
}

.tabla th,
table th{
    background:#f8fafc !important;
    color:#64748b !important;
    font-size:11px !important;
    text-transform:uppercase !important;
    border-bottom:1px solid var(--io-border) !important;
    padding:9px 10px !important;
    text-align:left !important;
    white-space:nowrap !important;
}

.tabla td,
table td{
    border-bottom:1px solid #edf2f7 !important;
    padding:9px 10px !important;
    vertical-align:middle !important;
}

td.num,
th.num,
.num{
    text-align:right !important;
}

/* ==========================================================================
   PANEL PRINCIPAL / TARJETAS DE MENÚ
   --------------------------------------------------------------------------
   Tarjetas pequeñas, profesionales y responsive.
   ========================================================================== */
.panel-grid,
.grid-panel,
.menu-grid,
.cards-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important;
    gap:14px !important;
}

.panel-card,
.boton-panel{
    background:#fff !important;
    border:1px solid #e5e7eb !important;
    border-left:6px solid var(--io-primary) !important;
    border-radius:18px !important;
    box-shadow:var(--io-shadow) !important;
    padding:16px !important;
    color:#111827 !important;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    min-height:92px !important;
}

.panel-card .icono,
.boton-panel .icono{
    width:42px !important;
    height:42px !important;
    border-radius:14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#eff6ff !important;
    color:var(--io-primary) !important;
    font-size:24px !important;
    flex:0 0 42px !important;
}

.panel-card h2,
.panel-card h3,
.boton-panel h2,
.boton-panel h3{
    margin:0 0 3px !important;
    font-size:17px !important;
    color:#0f172a !important;
}

.panel-card p,
.boton-panel p,
.panel-card small,
.boton-panel small{
    margin:0 !important;
    color:var(--io-muted) !important;
    font-size:13px !important;
}

/* ==========================================================================
   LISTAS DE PEDIDOS / TALLER / TICKETS COMPACTAS
   --------------------------------------------------------------------------
   Soporta filas de dos líneas y cajas compactas.
   ========================================================================== */
.pedido-fila,
.lista-fila,
.ticket-fila,
.taller-fila{
    background:#fff !important;
    border:1px solid #e5e7eb !important;
    border-left:7px solid var(--io-orange) !important;
    border-radius:18px !important;
    box-shadow:var(--io-shadow) !important;
    padding:12px 14px !important;
    margin-bottom:10px !important;
}

/* ==========================================================================
   IMPRESIÓN
   --------------------------------------------------------------------------
   Evita que cabecera sticky y sombras ensucien el PDF/impresión.
   ========================================================================== */
@media print{
    .io-header,
    .cabecera,
    .ticket-header,
    .taller-header,
    .modulo-header{
        position:static !important;
        box-shadow:none !important;
        color:#000 !important;
        background:#fff !important;
        border:1px solid #ddd !important;
    }

    .btn,
    button,
    .no-print,
    .acciones,
    .io-header-bottom{
        display:none !important;
    }

    .panel,
    .card,
    .box,
    .caja{
        box-shadow:none !important;
        break-inside:avoid !important;
    }
}

/* ==========================================================================
   RESPONSIVE MÓVIL
   --------------------------------------------------------------------------
   Aquí se controla cómo se ven las páginas en móvil.
   ========================================================================== */
@media(max-width:1100px){
    .datos-grid-6{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
    .datos-grid-5{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
    .datos-grid-4{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
    .datos-grid-3{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}

@media(max-width:760px){
    body{
        padding:10px !important;
        font-size:14px !important;
    }

    .io-header,
    .cabecera,
    .ticket-header,
    .taller-header,
    .modulo-header{
        width:100% !important;
        border-radius:18px !important;
        padding:18px !important;
        top:0 !important;
    }

    .io-header h1,
    .cabecera h1,
    .ticket-header h1,
    .taller-header h1,
    .modulo-header h1{
        font-size:23px !important;
    }

    .io-header-bottom,
    .header-actions,
    .cabecera-botones,
    .acciones-cabecera,
    .ticket-actions,
    .taller-actions{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
    }

    .io-header-bottom .btn,
    .header-actions .btn,
    .cabecera-botones .btn,
    .acciones-cabecera .btn{
        width:100% !important;
    }

    .panel,
    .card,
    .box,
    .caja,
    .bloque{
        padding:15px !important;
        border-radius:16px !important;
        margin-bottom:12px !important;
    }

    .datos-grid,
    .datos-grid-2,
    .datos-grid-3,
    .datos-grid-4,
    .datos-grid-5,
    .datos-grid-6,
    .form-grid,
    .grid{
        grid-template-columns:1fr !important;
    }

    .dato{
        min-height:62px !important;
    }

    .dato strong{
        white-space:normal !important;
        word-break:break-word !important;
        text-align:left !important;
    }

    .acciones{
        display:grid !important;
        grid-template-columns:1fr !important;
    }

    .acciones .btn,
    .acciones button{
        width:100% !important;
    }

    table.responsive-table,
    .tabla.responsive-table{
        display:block !important;
    }
}