/* Actualización 38 · Sistema visual dinámico global ROFAV. */
:root{
  --ui-navy:#071a3a;--ui-navy-2:#0b2d64;--ui-blue:#145ac0;--ui-blue-2:#2588e8;
  --ui-cyan:#14b8d4;--ui-violet:#7957d5;--ui-green:#12a875;--ui-amber:#f0a11a;
  --ui-red:#e44b4b;--ui-ink:#10213e;--ui-muted:#64748b;--ui-line:#dbe5f2;
  --ui-surface:#fff;--ui-canvas:#f3f7fc;--ui-shadow:0 14px 38px rgba(23,58,112,.11);
  --ui-shadow-hover:0 20px 52px rgba(23,58,112,.17);--ui-radius:15px;
  --ui-ease:cubic-bezier(.22,1,.36,1);
}
html{scroll-behavior:smooth;background:var(--ui-canvas)}
body{min-height:100vh;background:var(--ui-canvas);color:var(--ui-ink)}
body:before{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(circle at 87% 7%,rgba(20,184,212,.11),transparent 25rem),radial-gradient(circle at 14% 92%,rgba(121,87,213,.09),transparent 28rem)}
::selection{background:#bfe6ff;color:#082858}
*{scrollbar-width:thin;scrollbar-color:#8aaad0 #edf3f9}
*::-webkit-scrollbar{width:9px;height:9px}*::-webkit-scrollbar-track{background:#edf3f9}*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#7bbbea,#7087cf);border:2px solid #edf3f9;border-radius:99px}

/* Navegación principal */
.sidebar{background:linear-gradient(165deg,#07172f 0%,#0a2858 54%,#103d78 100%)!important;border-right:1px solid rgba(255,255,255,.08);box-shadow:18px 0 48px rgba(7,26,58,.14)}
.sidebar:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 8%,rgba(37,136,232,.26),transparent 26%),radial-gradient(circle at 100% 80%,rgba(20,184,212,.18),transparent 30%)}
.sidebar>*{position:relative;z-index:1}.brand{border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:18px!important;margin-bottom:8px}.brand-icon{background:linear-gradient(145deg,#2ea4ff,#7757d5)!important;box-shadow:0 9px 22px rgba(36,139,236,.34)}
.brand strong{letter-spacing:.01em}.brand small{color:#a8c5e9!important}.nav-label{letter-spacing:.12em!important;color:#86a8d1!important}
.sidebar .nav-item{position:relative;overflow:hidden;border:1px solid transparent;border-radius:11px!important;transition:transform .25s var(--ui-ease),background .25s,border-color .25s,box-shadow .25s!important}
.sidebar .nav-item:before{content:"";position:absolute;inset:0;opacity:0;background:linear-gradient(100deg,rgba(255,255,255,.13),rgba(255,255,255,.03));transition:opacity .25s}
.sidebar .nav-item:hover{transform:translateX(5px) scale(1.01);border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.08)!important}.sidebar .nav-item:hover:before{opacity:1}
.sidebar .nav-item.active{background:linear-gradient(100deg,#1677d2,#2464c5)!important;border-color:rgba(151,220,255,.45);box-shadow:0 10px 24px rgba(0,48,117,.34)}
.sidebar .nav-item svg{transition:transform .25s var(--ui-ease),filter .25s}.sidebar .nav-item:hover svg{transform:scale(1.12) rotate(-3deg);filter:drop-shadow(0 4px 7px rgba(0,0,0,.18))}
.sidebar-bottom{border-top-color:rgba(255,255,255,.1)!important;background:rgba(3,14,34,.15)}.user-profile{transition:background .2s,transform .2s}.user-profile:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}

/* Barra superior y lienzo */
.topbar{background:rgba(255,255,255,.88)!important;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid rgba(193,210,232,.78)!important;box-shadow:0 8px 28px rgba(20,53,101,.08);transition:box-shadow .25s,background .25s}
.global-search{background:#f5f8fc!important;border:1px solid #dbe6f3!important;border-radius:12px!important;transition:border-color .22s,box-shadow .22s,background .22s,transform .22s}
.global-search:focus-within{background:#fff!important;border-color:#68a9e7!important;box-shadow:0 0 0 4px rgba(37,136,232,.12),0 10px 24px rgba(23,75,139,.09);transform:translateY(-1px)}
.topbar-meta{border-left:1px solid #e2eaf4;padding-left:14px}.top-quote{box-shadow:0 9px 22px rgba(20,90,192,.25)}
.page{position:relative;background:transparent!important;padding-bottom:48px!important}.page:after{content:"";position:fixed;z-index:-1;right:-120px;bottom:-140px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(37,136,232,.08),transparent 68%)}

/* Jerarquía y encabezados */
.page-heading{position:relative;padding:4px 0 10px}.page-heading h1,.operations-hero h1{color:#0b2c62!important;letter-spacing:-.035em}.page-heading h1:after{content:"";display:block;width:48px;height:4px;margin-top:9px;border-radius:99px;background:linear-gradient(90deg,var(--ui-blue-2),var(--ui-cyan),var(--ui-violet))}
.section-title,.section-head h2,.card>h2,.card>header h2{letter-spacing:-.018em}.section-title{color:#113f7a!important}

/* Superficies */
.card,.operations-hero,.executive-metrics article,.confirmation-card,.search-hero,.cash-summary article{border-color:var(--ui-line)!important;border-radius:var(--ui-radius)!important;box-shadow:var(--ui-shadow);transition:transform .28s var(--ui-ease),box-shadow .28s var(--ui-ease),border-color .25s,background .25s}
.card:hover,.executive-metrics article:hover,.cash-summary article:hover{transform:translateY(-3px);box-shadow:var(--ui-shadow-hover);border-color:#b9d4ef!important}
.card.no-hover:hover,.proforma-preview:hover,.document-box:hover{transform:none}
.card>header:first-child{border-radius:calc(var(--ui-radius) - 1px) calc(var(--ui-radius) - 1px) 0 0}
.metric,.executive-metrics article,.cash-summary article{overflow:hidden}.metric:before,.executive-metrics article:before,.cash-summary article:before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:4px;background:linear-gradient(90deg,var(--ui-blue),var(--ui-cyan));opacity:.9}
.executive-metrics article:nth-child(4n+2):before,.cash-summary article:nth-child(4n+2):before{background:linear-gradient(90deg,var(--ui-green),#59d5a6)}.executive-metrics article:nth-child(4n+3):before,.cash-summary article:nth-child(4n+3):before{background:linear-gradient(90deg,var(--ui-amber),#ffd071)}.executive-metrics article:nth-child(4n):before,.cash-summary article:nth-child(4n):before{background:linear-gradient(90deg,var(--ui-violet),#b398ff)}
.metric-icon{transition:transform .28s var(--ui-ease),box-shadow .28s}.executive-metrics article:hover .metric-icon{transform:translateY(-2px) rotate(-5deg) scale(1.08);box-shadow:0 8px 18px rgba(33,91,167,.16)}

/* Botones y controles */
.btn,.icon-button,.tab,.period-tabs button{position:relative;overflow:hidden;isolation:isolate;transition:transform .2s var(--ui-ease),box-shadow .22s,background-color .22s,border-color .22s,color .22s!important}
.btn:hover,.icon-button:hover{transform:translateY(-2px)}.btn:active,.icon-button:active{transform:translateY(0) scale(.975)}
.btn.primary{background:linear-gradient(120deg,#0e4fae,#1875d2)!important;border-color:#125abf!important;box-shadow:0 8px 20px rgba(18,84,166,.2)}.btn.primary:hover{background:linear-gradient(120deg,#0b438f,#1268c2)!important;box-shadow:0 12px 28px rgba(18,84,166,.3)}
.btn.danger:hover{background:#fff1f1!important;box-shadow:0 8px 18px rgba(209,55,55,.12)}
.ui-ripple{position:absolute;z-index:-1;width:12px;height:12px;margin:-6px;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.42);transform:scale(0);animation:ui-ripple .58s ease-out forwards}.btn:not(.primary)>.ui-ripple,.icon-button>.ui-ripple{background:rgba(31,111,196,.16)}
input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea{background-color:#fbfdff!important;border-color:#d6e3f1!important;border-radius:10px!important;transition:border-color .2s,box-shadow .2s,background .2s,transform .2s}
input:not([type=checkbox]):not([type=radio]):not([type=color]):hover,select:hover,textarea:hover{border-color:#a9c6e5!important;background-color:#fff!important}
input:not([type=checkbox]):not([type=radio]):not([type=color]):focus,select:focus,textarea:focus{border-color:#438ed8!important;background:#fff!important;box-shadow:0 0 0 4px rgba(37,136,232,.12)!important;transform:translateY(-1px)}
[type=checkbox],[type=radio]{transition:transform .18s,box-shadow .18s,border-color .18s}[type=checkbox]:checked,[type=radio]:checked{transform:scale(1.06);box-shadow:0 0 0 3px rgba(37,136,232,.12)}
.field label{color:#334a68;font-weight:700}.field:focus-within label{color:#125abf}

/* Tablas, listas y estados */
.table-scroll{border-radius:12px}.table-scroll table{overflow:hidden}.table-scroll thead,.operations-table thead{background:linear-gradient(100deg,#eef5fc,#e9f2fb)}
th{color:#28476d!important;font-size:11px!important;letter-spacing:.035em;text-transform:uppercase}tbody tr{transition:background .18s,transform .18s,box-shadow .18s}tbody tr:hover{background:#f1f7fd!important;box-shadow:inset 3px 0 0 #2d87df}
.badge{border:1px solid rgba(37,136,232,.12);box-shadow:0 3px 10px rgba(24,82,148,.06);transition:transform .18s,box-shadow .18s}.badge:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(24,82,148,.1)}
.notice{position:relative;overflow:hidden;border-radius:12px!important;box-shadow:0 9px 24px rgba(23,58,112,.08);animation:ui-notice-in .42s var(--ui-ease)}.notice:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:currentColor}
.tabs{padding:5px!important;background:#eaf1f8!important;border-radius:12px!important;gap:4px!important}.tab{border-radius:9px!important}.tab.active{color:#fff!important;background:linear-gradient(110deg,#1254a6,#207ad4)!important;box-shadow:0 7px 17px rgba(18,84,166,.22)}
details>summary{transition:background .2s,color .2s}details>summary:hover{background:#eef6ff!important}details[open]>summary{color:#1254a6}.ui-details-opening>*:not(summary){animation:ui-details-in .3s var(--ui-ease)}

/* Kanban, cotizaciones y PREPS */
.kanban-board{scroll-behavior:smooth}.kanban-column{border:1px solid #dbe5f1!important;box-shadow:0 10px 26px rgba(20,54,103,.08);transition:transform .24s var(--ui-ease),box-shadow .24s,border-color .24s,background .24s!important}.kanban-column:hover{transform:translateY(-3px);box-shadow:0 17px 36px rgba(20,54,103,.13);border-color:#bad2ec!important}
.kanban-card{border-color:#dce6f2!important;box-shadow:0 7px 18px rgba(26,62,111,.09);transition:transform .22s var(--ui-ease),box-shadow .22s,border-color .22s!important}.kanban-card:hover{transform:translateY(-4px) scale(1.012);box-shadow:0 15px 31px rgba(26,62,111,.16);border-color:#91bde9!important}
.kanban-column.drag-over{box-shadow:0 0 0 4px rgba(20,164,216,.14),0 20px 40px rgba(20,54,103,.14)!important}
.quote-item{transition:transform .26s var(--ui-ease),box-shadow .26s,border-color .22s!important}.quote-item:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(17,61,120,.14)}
.technical-strip,.quote-liquidation>header,.quote-liquidation>h2{background:linear-gradient(115deg,#0a2858,#1457a6 62%,#157dbb)!important}
.prepress-layout,.prepress-sheet-canvas{box-shadow:inset 0 0 0 1px rgba(20,90,166,.08);transition:box-shadow .24s,transform .24s}.prepress-layout:hover,.prepress-sheet-canvas:hover{box-shadow:inset 0 0 0 2px rgba(20,164,216,.22),0 11px 25px rgba(23,68,125,.1);transform:translateY(-2px)}
.prepress-alternatives>span,.material-rate-list>span,.sequence-card{transition:transform .22s var(--ui-ease),box-shadow .22s,border-color .22s}.prepress-alternatives>span:hover,.material-rate-list>span:hover,.sequence-card:hover{transform:translateY(-2px);border-color:#a9c8e7;box-shadow:0 10px 22px rgba(18,65,125,.1)}
.production-chart{background:linear-gradient(180deg,#eef5fc,#f8fbff)!important}.bars i{transform-origin:bottom;animation:ui-bar-grow .7s var(--ui-ease) both}

/* Modales, entrada y microinteracciones */
dialog[open]{animation:ui-dialog-in .3s var(--ui-ease)}dialog::backdrop{animation:ui-backdrop-in .25s ease-out}
.ui-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ui-ease),transform .5s var(--ui-ease)}.ui-reveal.is-visible{opacity:1;transform:none}
.page.ui-page-ready{animation:ui-page-in .45s var(--ui-ease)}
.state-progress i{background:linear-gradient(90deg,var(--ui-blue),var(--ui-cyan),var(--ui-violet))!important;box-shadow:0 0 14px rgba(20,184,212,.5)}
.connection-notice,.runtime-notice{animation:ui-toast-in .36s var(--ui-ease)}
.avatar{background:linear-gradient(145deg,#ddecff,#c6e9fb)!important;color:#0c4e9b!important;box-shadow:0 5px 14px rgba(20,80,150,.13);transition:transform .2s,box-shadow .2s}.avatar:hover{transform:scale(1.06);box-shadow:0 8px 20px rgba(20,80,150,.2)}

/* Acceso y seguridad */
.auth-login{background:linear-gradient(145deg,#030b1c,#071a3a 48%,#0b2d64)!important}.auth-login:before{z-index:0;background:radial-gradient(circle at 12% 25%,rgba(37,136,232,.2),transparent 27rem),radial-gradient(circle at 88% 78%,rgba(121,87,213,.17),transparent 25rem)}
.auth-login>header,.auth-login>main,.auth-login>footer{position:relative;z-index:1}.auth-login [data-purpose="hero-overview"]>div:first-child{box-shadow:0 8px 25px rgba(20,120,220,.12)}
.auth-login [data-purpose="hero-overview"] .bg-slate-800\/60{transition:transform .25s var(--ui-ease),border-color .25s,background .25s,box-shadow .25s}.auth-login [data-purpose="hero-overview"] .bg-slate-800\/60:hover{transform:translateY(-4px);background:rgba(30,52,87,.82)!important;box-shadow:0 13px 27px rgba(0,0,0,.2)}
.auth-login [data-purpose="login-card-container"]>div{box-shadow:0 28px 70px rgba(0,0,0,.38)!important;transition:transform .35s var(--ui-ease),box-shadow .35s}.auth-login [data-purpose="login-card-container"]>div:hover{transform:translateY(-3px);box-shadow:0 34px 82px rgba(0,0,0,.44)!important}
.auth-login input:not([type=checkbox]):not([type=radio]),.auth-login select{background-color:rgba(8,21,47,.92)!important;border-color:#33445f!important;color:#f1f5f9!important}.auth-login input:not([type=checkbox]):not([type=radio]):hover,.auth-login select:hover{background-color:#0b1e41!important;border-color:#536b8d!important}.auth-login input:not([type=checkbox]):not([type=radio]):focus,.auth-login select:focus{background-color:#091a39!important;border-color:#3c91e6!important;box-shadow:0 0 0 4px rgba(37,136,232,.16)!important}.auth-login label{color:#cbd5e1!important}
.secondary-auth{background:radial-gradient(circle at 15% 12%,rgba(20,184,212,.13),transparent 21rem),radial-gradient(circle at 86% 90%,rgba(121,87,213,.12),transparent 25rem),linear-gradient(145deg,#edf4fb,#f8fbff)!important}.secondary-auth>.card,.secondary-auth>main.card{animation:ui-dialog-in .42s var(--ui-ease);border-top:5px solid #1f75cc!important;box-shadow:0 24px 65px rgba(16,54,105,.18)}

@keyframes ui-page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ui-ripple{to{transform:scale(24);opacity:0}}
@keyframes ui-notice-in{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}
@keyframes ui-dialog-in{from{opacity:0;transform:translateY(16px) scale(.975)}to{opacity:1;transform:none}}
@keyframes ui-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes ui-details-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes ui-bar-grow{from{transform:scaleY(.06);opacity:.35}to{transform:scaleY(1);opacity:1}}
@keyframes ui-toast-in{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}

@media(max-width:900px){.topbar{backdrop-filter:blur(13px)}.card:hover,.executive-metrics article:hover,.cash-summary article:hover{transform:none}.page{padding-bottom:28px!important}}
@media(max-width:620px){.page-heading h1{font-size:25px!important}.global-search{border-radius:10px!important}.top-quote{box-shadow:none}.sidebar .nav-item:hover{transform:none}.btn{min-height:42px}.card{border-radius:13px!important}.kanban-column:hover,.kanban-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.ui-reveal{opacity:1!important;transform:none!important}}
@media print{body:before,.page:after{display:none!important}.ui-reveal{opacity:1!important;transform:none!important}.card,.document-box,.proforma-preview{box-shadow:none!important;transform:none!important}}

/* Actualización 39 · Contraste, costos desplegables y marca lateral. */
.quote-liquidation>h2.section-title,.quote-liquidation>h2.section-title svg{color:#fff!important}.quote-liquidation>h2.section-title{font-weight:850;text-shadow:0 1px 2px rgba(0,0,0,.12)}
.sidebar .brand{border-bottom:0!important}
.cost-stage-grid{grid-template-columns:1fr!important;gap:9px}
details.cost-stage{padding:0;overflow:hidden;border-top-width:4px}
details.cost-stage>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;cursor:pointer;list-style:none;background:#f8fbff;color:#173d72;font-size:15px;font-weight:850}
details.cost-stage>summary::-webkit-details-marker{display:none}details.cost-stage>summary::marker{content:""}
details.cost-stage>summary svg{width:21px;height:21px;color:#55789f;transition:transform .25s var(--ui-ease),color .2s}
details.cost-stage[open]>summary{border-bottom:1px solid #dce7f3;background:#eef6ff}details.cost-stage[open]>summary svg{transform:rotate(180deg);color:#1254a6}
.cost-stage-body{padding:12px 13px 14px;animation:ui-details-in .3s var(--ui-ease)}
details.stage-prepress>summary{box-shadow:inset 4px 0 0 #28a9e2}details.stage-press>summary{box-shadow:inset 4px 0 0 #6d49b8}details.stage-postpress>summary{box-shadow:inset 4px 0 0 #19a974}
@media(max-width:620px){details.cost-stage>summary{padding:12px}.cost-stage-body{padding:10px}}
.book-component{border-left:4px solid #1769c2!important;background:linear-gradient(135deg,#eef7ff,#fff)!important}.book-component.book-cover{border-left-color:#7c4fd4!important;background:linear-gradient(135deg,#f5f0ff,#fff)!important}.book-component b{color:#123d73}.book-cover b{color:#56349a}