/* =========================================================
   CABECERAS SAT UNIFICADAS - PATRON TALLER ADAPTADO A SAT
   Objetivo:
   - mismo ancho que las fichas: 1180px
   - misma tipografia, altura y radios
   - cabecera azul arriba
   - botones en caja blanca debajo
   - salir/eliminar izquierda, resto derecha cuando exista estructura
   ========================================================= */
:root{
    --sat-cabecera-ancho:1180px;
    --sat-azul:#0069ff;
    --sat-oscuro:#111827;
    --sat-fondo:#eef2f7;
    --sat-borde:#e5e7eb;
    --sat-rojo:#dc2626;
    --sat-gris:#64748b;
    --sat-verde:#16a34a;
    --sat-morado:#7c3aed;
    --sat-naranja:#f59e0b;
}

html,body{max-width:100%!important;overflow-x:hidden!important;}
body{font-family:Arial,sans-serif!important;background:var(--sat-fondo)!important;}

/* El contenido y las cabeceras usan el mismo ancho */
.contenedor,
.container,
.wrapper,
.contenido,
.main,
.zona-fija,
.io-fixed-wrap,
.taller-sticky-head,
.header-fijo-inner{
    max-width:var(--sat-cabecera-ancho)!important;
    width:min(var(--sat-cabecera-ancho), calc(100% - 48px))!important;
    margin-left:auto!important;
    margin-right:auto!important;
}

/* En paginas con .contenedor ya no estrechamos doblemente los hijos */
.contenedor .io-fixed-wrap,
.contenedor .taller-sticky-head,
.contenedor .zona-fija,
.contenedor > .cabecera,
.contenedor > header.cabecera{
    width:100%!important;
    max-width:100%!important;
}

/* Cabecera azul comun */
.contenedor > .cabecera,
.contenedor > header.cabecera,
.zona-fija > .cabecera,
.io-cabecera-modelo,
.taller-cabecera,
.header-fijo-inner{
    background:linear-gradient(135deg,var(--sat-azul),var(--sat-oscuro))!important;
    color:#fff!important;
    padding:26px 32px!important;
    border-radius:18px!important;
    box-shadow:0 12px 30px rgba(0,0,0,.18)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    font-family:Arial,sans-serif!important;
    min-height:auto!important;
}

.contenedor > .cabecera,
.contenedor > header.cabecera,
.zona-fija > .cabecera{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:18px!important;
    flex-wrap:wrap!important;
}

/* Titulos iguales en todas */
.cabecera h1,
.cabecera h2,
.io-cabecera-modelo h1,
.taller-cabecera h1,
.header-fijo-inner h1,
.ticket-numero,
.ticket-cliente{
    margin:0!important;
    color:#fff!important;
    font-size:30px!important;
    line-height:1.15!important;
    font-weight:900!important;
    font-family:Arial,sans-serif!important;
}

.cabecera p,
.io-cabecera-modelo p,
.taller-cabecera p,
.header-fijo-inner p,
.ticket-titulo{
    margin:7px 0 0!important;
    color:#dbeafe!important;
    font-size:16px!important;
    line-height:1.35!important;
    font-family:Arial,sans-serif!important;
}

/* Caja blanca de botones separada */
.io-action-box,
.taller-botonera,
.io-header-bottom,
.contenedor > .cabecera > .acciones-cabecera,
.contenedor > .cabecera > .cabecera-mini-menu,
.zona-fija > .cabecera .cabecera-mini-menu,
.header-botones{
    background:#fff!important;
    border:1px solid var(--sat-borde)!important;
    border-radius:16px!important;
    padding:12px 14px!important;
    box-shadow:0 8px 22px rgba(0,0,0,.08)!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    flex-wrap:wrap!important;
    font-family:Arial,sans-serif!important;
}

/* Cuando la botonera esta dentro de la cabecera, la bajamos visualmente */
.contenedor > .cabecera:has(.acciones-cabecera),
.contenedor > .cabecera:has(.cabecera-mini-menu),
.zona-fija > .cabecera:has(.cabecera-mini-menu){
    margin-bottom:88px!important;
    position:relative!important;
    overflow:visible!important;
}

.contenedor > .cabecera > .acciones-cabecera,
.contenedor > .cabecera > .cabecera-mini-menu,
.zona-fija > .cabecera .cabecera-mini-menu{
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:-72px!important;
    min-height:58px!important;
    justify-content:flex-end!important;
}

/* Estructuras izquierda/derecha */
.io-actions-left,
.io-action-left,
.taller-actions-left,
.cabecera-lado.izquierda,
.header-botones-left{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:10px!important;
    flex-wrap:wrap!important;
    margin-right:auto!important;
}

.io-actions-right,
.io-action-right,
.taller-actions-right,
.cabecera-lado.derecha,
.header-botones-right{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:10px!important;
    flex-wrap:wrap!important;
    margin-left:auto!important;
}

/* Botones iguales */
.btn,
.btn-top,
.io-action-box a,
.io-action-box button,
.taller-botonera a,
.taller-botonera button,
.cabecera a,
.cabecera button,
.header-botones a,
.header-botones button,
.io-header-bottom a,
.io-header-bottom button{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    padding:10px 14px!important;
    min-height:40px!important;
    border-radius:10px!important;
    border:0!important;
    color:#fff!important;
    font-weight:800!important;
    font-size:14px!important;
    line-height:1.1!important;
    text-decoration:none!important;
    cursor:pointer!important;
    width:auto!important;
    white-space:nowrap!important;
    font-family:Arial,sans-serif!important;
}

/* Colores normalizados */
.btn-rojo,.rojo,.salir,.btn-salir,.btn-eliminar,.btn-eliminar-top{background:var(--sat-rojo)!important;}
.btn-gris,.gris,.btn-panel,.btn-volver,.secundario{background:var(--sat-gris)!important;}
.btn-azul,.azul,.btn-informe,.btn-guardar{background:#2563eb!important;}
.btn-verde,.verde,.gestionar{background:var(--sat-verde)!important;}
.btn-morado,.morado{background:var(--sat-morado)!important;}
.btn-naranja,.naranja,.warning{background:var(--sat-naranja)!important;}

/* Panel tecnico con zona fija */
.zona-fija{
    left:50%!important;
    transform:translateX(-50%)!important;
    padding:18px 0 8px!important;
    background:var(--sat-fondo)!important;
}

.zona-fija .cabecera-superior{
    width:100%!important;
    display:flex!important;
    align-items:flex-start!important;
    gap:18px!important;
}
.zona-fija .cabecera-centro{flex:1!important;min-width:0!important;}
.zona-fija .cabecera-lado{width:auto!important;}

/* Evita que el listado se monte debajo de la zona fija */
.contenido-tickets{padding-top:360px;}

@media(max-width:900px){
    body{padding:12px!important;}
    .contenedor,
    .container,
    .wrapper,
    .contenido,
    .main,
    .zona-fija,
    .io-fixed-wrap,
    .taller-sticky-head,
    .header-fijo-inner{
        width:100%!important;
        max-width:100%!important;
    }

    .zona-fija{
        position:relative!important;
        top:auto!important;
        left:auto!important;
        transform:none!important;
        padding:0 0 12px!important;
    }

    .contenido-tickets{padding-top:0!important;}

    .contenedor > .cabecera,
    .contenedor > header.cabecera,
    .zona-fija > .cabecera,
    .io-cabecera-modelo,
    .taller-cabecera,
    .header-fijo-inner{
        padding:22px!important;
        border-radius:18px!important;
    }

    .cabecera h1,
    .cabecera h2,
    .io-cabecera-modelo h1,
    .taller-cabecera h1,
    .header-fijo-inner h1,
    .ticket-numero,
    .ticket-cliente{
        font-size:26px!important;
    }

    .contenedor > .cabecera:has(.acciones-cabecera),
    .contenedor > .cabecera:has(.cabecera-mini-menu),
    .zona-fija > .cabecera:has(.cabecera-mini-menu){
        margin-bottom:14px!important;
    }

    .contenedor > .cabecera > .acciones-cabecera,
    .contenedor > .cabecera > .cabecera-mini-menu,
    .zona-fija > .cabecera .cabecera-mini-menu{
        position:static!important;
        margin-top:14px!important;
        width:100%!important;
        display:grid!important;
        grid-template-columns:1fr!important;
    }

    .io-action-box,
    .taller-botonera,
    .io-header-bottom,
    .header-botones{
        display:grid!important;
        grid-template-columns:1fr!important;
        width:100%!important;
    }

    .io-actions-left,
    .io-action-left,
    .taller-actions-left,
    .io-actions-right,
    .io-action-right,
    .taller-actions-right,
    .cabecera-lado.izquierda,
    .cabecera-lado.derecha{
        display:grid!important;
        grid-template-columns:1fr!important;
        width:100%!important;
        margin-left:0!important;
        margin-right:0!important;
    }

    .btn,
    .btn-top,
    .io-action-box a,
    .io-action-box button,
    .taller-botonera a,
    .taller-botonera button,
    .cabecera a,
    .cabecera button,
    .header-botones a,
    .header-botones button,
    .io-header-bottom a,
    .io-header-bottom button{
        width:100%!important;
        white-space:normal!important;
    }
}

@media print{
    .zona-fija,
    .io-fixed-wrap,
    .taller-sticky-head,
    .io-action-box,
    .taller-botonera,
    .io-header-bottom,
    .header-botones{position:static!important;box-shadow:none!important;}
}