/* ============================================================
   TEMA VIDRIO — VISTOBUENO (archivo central, estilo EXPO)
   Parte 1: marco del panel (login, pestañas, ventana)
   Parte 2: reportes y vistas (reglas con !important que doman
            el CSS propio de cada reporte)
   Ajustar = editar este archivo + recargar el navegador.
   ============================================================ */

/* ---------- 1. MARCO DEL PANEL ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-size:16px;color:#eceef2;
 font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
 background:#17181c;
 background-image:radial-gradient(900px 500px at 20% -10%,rgba(80,90,110,.35),transparent 60%),
 radial-gradient(700px 500px at 110% 90%,rgba(60,70,95,.3),transparent 55%),
 linear-gradient(180deg,#1b1c21 0%,#121317 100%);
 background-attachment:fixed}
.app{display:flex;height:100vh;padding:18px;gap:18px}
.sb{width:264px;flex:0 0 264px;display:flex;flex-direction:column;gap:6px;padding:20px 14px;
 background:rgba(52,54,60,.55);-webkit-backdrop-filter:blur(28px) saturate(1.3);backdrop-filter:blur(28px) saturate(1.3);
 border:1px solid rgba(255,255,255,.14);border-radius:30px;
 box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12)}
.brand{display:flex;align-items:center;gap:12px;padding:6px 12px 18px}
.brand img{width:44px;height:auto;border-radius:14px;box-shadow:0 6px 18px rgba(61,142,240,.35)}
.brand b{font-size:19px;letter-spacing:.5px;color:#fff}
.nav{display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.tab{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
 padding:15px 20px;border-radius:18px;border:1px solid transparent;background:transparent;
 color:#b9bec8;font-weight:600;font-size:16px;cursor:pointer;text-align:left;font-family:inherit;white-space:nowrap}
.tab:hover{background:rgba(255,255,255,.07);color:#fff}
.tab.on{background:rgba(61,142,240,.22);border-color:rgba(61,142,240,.45);color:#fff;
 box-shadow:0 0 22px rgba(61,142,240,.25)}
.tab.off{opacity:.32;cursor:default}
.badge{min-width:24px;padding:2px 9px;border-radius:999px;
 background:linear-gradient(135deg,#3d8ef0,#7a5cff);color:#fff;font-size:13px;font-weight:700;
 text-align:center;box-shadow:0 0 12px rgba(61,142,240,.5)}
.sb .sp{flex:1}
.salir{display:block;text-align:center;padding:13px 18px;border-radius:16px;color:#9aa0ab;
 text-decoration:none;font-weight:600;font-size:15px;border:1px solid rgba(255,255,255,.12)}
.salir:hover{color:#fff;border-color:rgba(255,120,120,.45);background:rgba(255,90,90,.1)}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.win{flex:1;display:flex;flex-direction:column;min-height:0;
 background:rgba(58,60,66,.5);-webkit-backdrop-filter:blur(34px) saturate(1.25);backdrop-filter:blur(34px) saturate(1.25);
 border:1px solid rgba(255,255,255,.13);border-radius:28px;overflow:hidden;
 box-shadow:0 34px 90px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1)}
.title{height:58px;flex:0 0 58px;display:flex;align-items:center;gap:12px;padding:0 24px;
 border-bottom:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03)}
.title .dot{width:10px;height:10px;border-radius:50%;background:#3d8ef0;box-shadow:0 0 12px #3d8ef0}
.title span{font-weight:700;font-size:17px;letter-spacing:.3px;color:#eef2f8}
.frame{flex:1 1 auto;width:100%;border:0;background:#212227;min-height:0}
.hint{flex:1;display:flex;align-items:center;justify-content:center;color:#9aa0ab}
/* logo Santibáñez gigante y difuminado de fondo (solo pagina de login) */
body:has(> .login)::before{content:"";position:fixed;inset:0;z-index:0;
 background:url('/logo') center 45%/min(80vmin,780px) no-repeat;
 filter:invert(1) hue-rotate(180deg) blur(3px) saturate(1.4);
 opacity:.5;mix-blend-mode:screen;pointer-events:none}
.login{position:relative;z-index:1}
/* logo chico de la barra: fuera (se muda animado abajo); el del login se queda */
.brand img{display:none}
.login .head img{filter:invert(1) hue-rotate(180deg);background:transparent}
/* logo grande animado al fondo de la barra lateral */
.sb .sp{position:relative}
.sb .sp::after{content:"";position:absolute;left:50%;bottom:22px;
 width:180px;height:180px;background:url('/logo') center/contain no-repeat;
 filter:invert(1) hue-rotate(180deg) saturate(1.35) drop-shadow(0 0 16px rgba(77,163,255,.35));
 animation:logoflota 7s ease-in-out infinite;pointer-events:none}
@keyframes logoflota{
 0%,100%{transform:translateX(-50%) translateY(0) scale(1);opacity:.85;
  filter:invert(1) hue-rotate(180deg) saturate(1.35) drop-shadow(0 0 12px rgba(77,163,255,.25))}
 50%{transform:translateX(-50%) translateY(-12px) scale(1.04);opacity:1;
  filter:invert(1) hue-rotate(180deg) saturate(1.5) drop-shadow(0 0 26px rgba(77,163,255,.55))}
}
.login{max-width:400px;margin:15vh auto 0;
 background:rgba(52,54,60,.6);-webkit-backdrop-filter:blur(30px) saturate(1.3);backdrop-filter:blur(30px) saturate(1.3);
 border:1px solid rgba(255,255,255,.16);border-radius:26px;overflow:hidden;
 box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12)}
.login .head{padding:24px 28px 0;display:flex;align-items:center;gap:12px}
.login .head img{width:38px;border-radius:11px}
.login .head b{font-size:20px;letter-spacing:.7px;color:#fff}
.login .body{padding:20px 28px 28px}
.login label{font-weight:600;font-size:14px;color:#aab0bb}
.login input{width:100%;padding:14px 16px;margin:7px 0 16px;border-radius:14px;
 border:1px solid rgba(255,255,255,.14);background:rgba(28,29,34,.7);color:#eceef2;
 font-family:inherit;font-size:16px;outline:none}
.login input:focus{border-color:rgba(61,142,240,.6);box-shadow:0 0 0 3px rgba(61,142,240,.18)}
.btn{font-family:inherit;font-weight:700;color:#fff;border:0;border-radius:999px;
 padding:13px 26px;cursor:pointer;font-size:16px;
 background:linear-gradient(135deg,#3d8ef0,#5b6cf5);box-shadow:0 8px 24px rgba(61,142,240,.4)}
.btn:hover{filter:brightness(1.1)}
.err{font-weight:600;font-size:14px;border:1px solid rgba(255,120,120,.4);color:#ffb4b4;
 padding:11px 14px;margin-bottom:14px;border-radius:14px;background:rgba(255,90,90,.1)}
@media(max-width:900px){
 .app{flex-direction:column;padding:10px;gap:10px}
 .sb{width:auto;flex:0 0 auto;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;padding:10px;border-radius:22px}
 .brand{padding:0 8px}
 .nav{flex-direction:row;flex-wrap:wrap}
 .tab{padding:11px 15px;font-size:14.5px}
 .sb .sp{flex:0 0 8px}
 .sb .sp::after{display:none}
}

/* ---------- 2. REPORTES Y VISTAS (dentro del iframe) ---------- */
body.rep, body.rep *{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif!important;line-height:1.5!important}
body.rep{background:#212227!important;
 background-image:radial-gradient(700px 400px at 15% -10%,rgba(80,90,110,.25),transparent 60%)!important;
 color:#dde1e8!important;margin:18px!important;font-size:15px!important}
body.rep div,body.rep section,body.rep header,body.rep footer,body.rep p,body.rep li,body.rep ul,body.rep ol{
 background:transparent!important;color:#dde1e8!important;border-color:rgba(255,255,255,.12)!important}
body.rep h1,body.rep h2,body.rep h3,body.rep h4,body.rep h5{color:#fff!important;margin:12px 0 9px!important}
body.rep table{border-collapse:separate!important;border-spacing:0!important;
 width:100%!important;margin:18px 0!important;
 border:1px solid rgba(255,255,255,.11)!important;border-radius:20px!important;
 background:rgba(255,255,255,.035)!important;font-size:13px!important}
body.rep tbody,body.rep tr{background:transparent!important}
body.rep th,body.rep td{border:0!important;border-bottom:1px solid rgba(255,255,255,.07)!important;
 padding:9px 11px!important;text-align:left!important}
body.rep th{width:auto!important}
body.rep thead,body.rep thead tr,body.rep th{background:#34363c!important}
body.rep th{color:#c9cfda!important;font-weight:600!important;position:static!important;
 white-space:normal!important;word-break:keep-all!important;overflow-wrap:normal!important;hyphens:none!important}
body.rep td{background:transparent!important;color:#dde1e8!important;vertical-align:top!important;
 white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important}
body.rep .bitacora-container{width:280px!important;min-width:0!important}
/* bitacora desplegada = panel flotante (no ensancha la tabla) */
body.rep details[open] .bitacora-container{position:fixed!important;top:70px!important;right:22px!important;
 width:430px!important;max-width:calc(100vw - 44px)!important;max-height:75vh!important;overflow-y:auto!important;
 z-index:80!important;background:#26282e!important;border:1px solid rgba(255,255,255,.18)!important;
 border-radius:18px!important;box-shadow:0 24px 70px rgba(0,0,0,.65)!important;padding:14px!important}
body.rep tr:nth-child(even) td{background:rgba(255,255,255,.025)!important}
body.rep a{color:#8ec2ff!important;text-decoration:none!important}
body.rep hr{border:0!important;border-top:1px solid rgba(255,255,255,.1)!important}
body.rep .search-input,body.rep .search-container{position:static!important}
body.rep .cell-content{max-width:none!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;display:inline!important}
body.rep{max-width:100%!important;overflow-x:auto!important}
body.rep input{background:rgba(28,29,34,.7)!important;color:#eceef2!important;
 border:1px solid rgba(255,255,255,.14)!important;border-radius:999px!important;padding:13px 18px!important;outline:none!important}
body.rep img{max-width:100%!important;height:auto!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:10px!important}
/* buscador y botones de cliente (widget del espejo) */
body.rep .cbar{margin:12px 0;display:flex;flex-wrap:wrap;gap:10px}
body.rep .cbtn{font-weight:600!important;background:rgba(255,255,255,.06)!important;color:#c3c9d4!important;
 border:1px solid rgba(255,255,255,.13)!important;border-radius:999px!important;padding:12px 22px!important;
 cursor:pointer;box-shadow:none!important;font-size:15px!important}
body.rep .cbtn.on{background:rgba(61,142,240,.25)!important;color:#fff!important;border-color:rgba(61,142,240,.5)!important;
 box-shadow:0 0 18px rgba(61,142,240,.25)!important}
body.rep .csearch{font-size:15px!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:999px!important;
 padding:13px 18px!important;margin:10px 0!important;width:430px;max-width:92%;
 background:rgba(28,29,34,.7)!important;color:#eceef2!important;display:block;outline:none}
body.rep .ctgt{margin-top:10px}
/* badges de estado (ISP) y botones de documentos */
body.rep .badge{border-radius:999px!important;padding:5px 15px!important;font-size:13px!important;font-weight:700!important}
body.rep .badge-ok{background:rgba(64,200,120,.18)!important;color:#5fd48f!important;border:1px solid rgba(64,200,120,.4)!important}
body.rep .badge-pending{background:rgba(243,156,18,.16)!important;color:#f5b942!important;border:1px solid rgba(243,156,18,.45)!important}
body.rep .badge-alert{background:rgba(231,76,60,.16)!important;color:#ff7a6e!important;border:1px solid rgba(231,76,60,.45)!important}
body.rep .download-btn,body.rep .btn-pdf{background:rgba(61,142,240,.22)!important;color:#8ec2ff!important;
 border:1px solid rgba(61,142,240,.45)!important;border-radius:999px!important;padding:6px 16px!important;
 font-size:13px!important;font-weight:700!important;text-decoration:none!important}
body.rep summary,body.rep .log-date{color:#8ec2ff!important}
body.rep .log-action{color:#dde1e8!important}
body.rep .log-card{background:rgba(61,142,240,.08)!important;border-radius:12px!important}
body.rep .tag-historico{display:inline-block!important;background:rgba(255,255,255,.06)!important;color:#9aa0ab!important;
 border:1px solid rgba(255,255,255,.14)!important;border-radius:12px!important;padding:6px 12px!important;
 font-style:normal!important;text-decoration:none!important;line-height:1.35!important;text-align:center!important}
body.rep .tag-historico *{text-decoration:none!important;font-style:normal!important}
/* tarjetas resumen del ISP (mono() ya no pinta: las pinta el tema) */
body.rep .summary-cards{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;gap:14px!important;margin-bottom:14px!important}
body.rep .summary-card{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.12)!important;
 border-radius:20px!important;padding:18px 22px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)!important}
body.rep .summary-card .number{font-size:34px!important;font-weight:800!important;color:#fff!important}
body.rep .summary-card .label{font-size:12px!important;letter-spacing:.6px!important;color:#9aa0ab!important}
body.rep .summary-card.green{border-color:rgba(64,200,120,.4)!important}
body.rep .summary-card.green .number{color:#5fd48f!important}
body.rep .summary-card.orange{border-color:rgba(243,156,18,.45)!important}
body.rep .summary-card.orange .number{color:#f5b942!important}
/* vistas Estadisticas / Planilla (usan .cards/.card) */
body.rep .cards{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0}
body.rep .card{background:rgba(255,255,255,.05)!important;border:1px solid rgba(61,142,240,.3)!important;
 border-radius:20px!important;box-shadow:0 0 24px rgba(61,142,240,.08)!important;padding:18px 24px!important;min-width:150px}
body.rep .card .n{font-size:34px!important;font-weight:800!important;color:#fff!important}
body.rep .card .l{font-size:12px!important;color:#9aa0ab!important;text-transform:uppercase!important;letter-spacing:.6px!important}