:root{--calport-primary:#0d3b66;--calport-accent:#16a3a5;--sidebar-width:250px}body{background:#f4f7fb;color:#172033;overflow:hidden}
/* ===== Rediseño visual (solo estética): paleta de estado + refinamiento de componentes Bootstrap ya usados en toda la plataforma ===== */
:root{
    --status-success:#16a34a;--status-success-rgb:22,163,74;
    --status-warning:#d97706;--status-warning-rgb:217,119,6;
    --status-danger:#dc2626;--status-danger-rgb:220,38,38;
    --status-neutral:#475569;--status-neutral-rgb:71,85,105;
    /* Bootstrap ya reparte estos colores por toda la app vía text-bg-*, alert-*, text-*, border-*:
       redefinir las variables acá alcanza para que todo hable el mismo lenguaje sin tocar PHP. */
    --bs-primary:var(--calport-primary);--bs-primary-rgb:13,59,102;
    --bs-info:var(--calport-accent);--bs-info-rgb:22,163,165;
    --bs-success:var(--status-success);--bs-success-rgb:var(--status-success-rgb);
    --bs-warning:var(--status-warning);--bs-warning-rgb:var(--status-warning-rgb);
    --bs-danger:var(--status-danger);--bs-danger-rgb:var(--status-danger-rgb);
    --bs-secondary:var(--status-neutral);--bs-secondary-rgb:var(--status-neutral-rgb);
}
.text-bg-warning,.text-bg-info{color:#fff!important}
.card{border:1px solid rgba(13,59,102,.08);border-radius:.75rem;box-shadow:0 1px 2px rgba(13,59,102,.06)!important}
.card.shadow-sm{box-shadow:0 2px 10px rgba(13,59,102,.07)!important}
.badge{font-weight:600;padding:.4em .65em}
.table>thead{border-bottom:2px solid rgba(13,59,102,.1)}
.table>thead th{background:rgba(13,59,102,.035);color:var(--calport-primary);font-weight:700;padding-top:.65rem;padding-bottom:.65rem}
.table-striped>tbody>tr:nth-of-type(odd),.table>tbody>tr:nth-of-type(even){background:rgba(13,59,102,.012)}
.table>tbody>tr:hover{background:rgba(22,163,165,.06)}
/* Pedidos: cada fila representa un pedido distinto; se refuerza la separación
   visual (franjas alternadas + borde + más aire) para no confundir uno con otro. */
#orders-table>tbody>tr{border-bottom:2px solid rgba(13,59,102,.18)}
#orders-table>tbody>tr:last-child{border-bottom:none}
#orders-table>tbody>tr:nth-of-type(even){background:rgba(13,59,102,.07)}
#orders-table>tbody>tr:hover{background:rgba(22,163,165,.12)}
#orders-table>tbody>td{padding-top:1.1rem;padding-bottom:1.1rem}
/* Pedidos Zolutium: cada pedido ocupa dos filas (datos + panel de chat/dirección/productos
   colapsable). Se marca el borde entre un pedido y el siguiente y, además, se alterna un
   tono de fondo muy suave de la propia paleta (azul/turquesa) para que el bloque completo
   se lea de un vistazo. Las filas en error/excluido conservan su color de estado tal cual,
   por eso el PHP no les asigna zolutium-pedido-a/b. El estado abierto/cerrado del panel no
   se toca. */
#zolutium-table>tbody>tr.zolutium-pedido-inicio{border-top:3px solid rgba(13,59,102,.2)}
#zolutium-table>tbody>tr.zolutium-pedido-inicio:first-of-type{border-top:none}
#zolutium-table>tbody>tr.zolutium-pedido-inicio>td{padding-top:1.25rem}
#zolutium-table>tbody>tr.zolutium-pedido-a{background:rgba(13,59,102,.05)}
#zolutium-table>tbody>tr.zolutium-pedido-a>td:first-child{border-left:3px solid var(--calport-primary)}
#zolutium-table>tbody>tr.zolutium-pedido-b{background:rgba(22,163,165,.07)}
#zolutium-table>tbody>tr.zolutium-pedido-b>td:first-child{border-left:3px solid var(--calport-accent)}
/* ===== fin rediseño visual ===== */.app-shell{display:flex;align-items:stretch;height:100vh;overflow-x:hidden;overflow-y:scroll}.table-responsive{overflow-y:visible}.sidebar{background:var(--calport-primary);box-sizing:border-box;color:#fff;flex:0 0 var(--sidebar-width);min-height:100%;padding:1.5rem;width:var(--sidebar-width);z-index:1040;transition:transform .2s}.sidebar-brand,.auth-logo{color:#fff;font-size:1.35rem;font-weight:800;letter-spacing:.04em;text-decoration:none}.sidebar-brand span,.auth-logo span{color:#60d5d6}.sidebar .nav-link{color:#dbe8f4;border-radius:.5rem;padding:.7rem .8rem}.sidebar .nav-link.active,.sidebar .nav-link:hover{background:rgba(255,255,255,.12);color:#fff}.sidebar-label{color:#87a6c2;font-size:.7rem;font-weight:700;letter-spacing:.09em;margin:.9rem .8rem .25rem;text-transform:uppercase}.app-main{flex:1 1 auto;min-width:0;min-height:100vh}.auth-body{background:linear-gradient(140deg,#0d3b66,#146b7a);min-height:100vh}.auth-shell{align-items:center;display:flex;justify-content:center;min-height:100vh}.auth-card{max-width:440px;width:100%}.auth-logo{color:var(--calport-primary)}.btn-primary{background:var(--calport-primary);border-color:var(--calport-primary)}@media(max-width:991.98px){.app-shell{display:block}.sidebar{position:fixed;inset:0 auto 0 0;height:100vh;overflow-y:auto;transform:translateX(-100%)}.sidebar.show{transform:translateX(0)}.app-main{margin-left:0}}