/* Estilo "bento": barra lateral negra con pestaña curva, tarjetas pastel y esquinas grandes.
   Se carga al final; para volver al diseño anterior basta con quitar esta hoja en index.php. */
:root{--bg:#EEF0F2;--surface:#fff;--sunken:#F5F6F7;--fg:#111214;--muted:#7A7F87;--line:#ECEEF0;--rail:#0E0F11;--rail-fg:#8A8F98;--rail-hi:#fff;
 --lime:#D6F35B;--peach:#FFDCCB;--orange:#FF6A2C;
 --accent:#111214;--accent-soft:#F0F9C9;
 --ok:#7DB10F;--ok-soft:#EEF9C8;--warn:#F2A13A;--warn-soft:#FFE9D9;--crit:#FF5A1F;--crit-soft:#FFE2D6;--info:#111214;--info-soft:#F0F1F3;
 --f-display:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;--f-body:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
 --r:24px;--shadow:0 1px 2px rgba(17,18,20,.04),0 8px 24px rgba(17,18,20,.04);--teal:var(--accent);--ink:var(--fg)}
body{background:var(--bg);color:var(--fg);font:15px/1.5 var(--f-body)}
h1,h2,h3{font-family:var(--f-display);letter-spacing:-.02em}

/* ---------- barra lateral ---------- */
aside{width:240px;padding:30px 0 24px 18px;gap:30px;background:var(--rail);overflow:visible;z-index:20}
.brand{padding:0 18px 0 0;text-align:center}
.brand b{font:800 26px/1 var(--f-display);color:#fff;letter-spacing:-.03em}
.brand b span{color:var(--lime)}
.brand small{display:block;margin-top:9px;font:600 10px/1 var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:var(--rail-fg);opacity:1}
aside nav{position:relative;gap:6px;overflow:visible}
aside nav a{position:relative;z-index:1;display:flex;align-items:center;gap:14px;height:52px;margin:0;padding:0 18px;border-radius:26px 0 0 26px;color:var(--rail-fg);font-weight:600;white-space:nowrap}
aside nav a:hover{background:rgba(255,255,255,.06);color:var(--rail-hi)}
aside nav svg{width:20px;height:20px;flex:none}
/* pestaña activa: una pieza aparte (.tab) que se une con el fondo y se desliza al cambiar de sección */
aside nav .tab{position:absolute;left:0;right:0;top:0;transform:translateY(calc(var(--i)*58px));height:52px;border-radius:26px 0 0 26px;background:var(--bg);pointer-events:none;view-transition-name:nav-tab}
aside nav .tab::before,aside nav .tab::after{content:"";position:absolute;right:0;width:24px;height:24px}
aside nav .tab::before{top:-24px;background:radial-gradient(circle at 0 0,transparent 23.5px,var(--bg) 24px)}
aside nav .tab::after{bottom:-24px;background:radial-gradient(circle at 0 100%,transparent 23.5px,var(--bg) 24px)}
aside nav a.active,aside nav a.active:hover{background:transparent;color:var(--fg);box-shadow:none}
aside nav a.active svg{color:var(--fg)}
aside nav .count{margin:0 0 0 auto;min-width:22px;padding:4px 7px;font:700 11px/1 var(--f-body);text-align:center;background:var(--orange);color:#fff;border-radius:999px}
.rail-foot{gap:12px;padding-right:18px}
aside .user{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;background:rgba(255,255,255,.05)}
aside .user b{color:#fff;font-size:14px}aside .user small{color:var(--rail-fg);font-size:12px}
.avatar{width:38px;height:38px;background:var(--lime);color:var(--fg);font:700 13px var(--f-display)}
.logout button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:transparent;color:var(--rail-fg);font-weight:600}
.logout button:hover{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.25)}
.logout svg{width:17px;height:17px}

/* ---------- área de trabajo ---------- */
.content{margin-left:240px;padding:28px 32px 40px}
.eyebrow{font:500 13px/1.2 var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted)}
.content h1{font:800 30px/1.15 var(--f-display);letter-spacing:-.03em;margin:6px 0 0}
.panel,.dpanel{background:var(--surface);border:0;border-radius:var(--r);box-shadow:var(--shadow)}
.panel{padding:24px}
.panel h2{font-size:18px}
footer{color:var(--muted)}

/* barra superior del resumen: buscador, campana y botón en píldoras */
.tools{gap:10px}
.dsearch{height:46px;border:0;border-radius:999px;padding:0 18px;box-shadow:var(--shadow)}
.bell{position:relative;flex:none;width:46px;height:46px;border-radius:50%;background:var(--surface);display:grid;place-items:center;color:var(--fg);box-shadow:var(--shadow)}
.bell:hover{background:var(--sunken)}
.bell svg{width:18px;height:18px}
.bell i{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--orange);color:#fff;font:700 11px/20px var(--f-body);font-style:normal;text-align:center;border:2px solid var(--bg)}
.btn{height:46px;padding:0 20px;border-radius:999px;background:var(--fg);color:#fff}
.btn:hover{filter:none;background:#2A2C30}

/* ---------- tarjetas de resumen (bento) ---------- */
.kpi{border:0;border-radius:var(--r);padding:22px;gap:12px;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease;isolation:isolate}
.kpi:hover{border:0;transform:translateY(-5px);box-shadow:0 14px 34px rgba(17,18,20,.1)}
/* mancha de color decorativa en la esquina, como en el diseño */
.kpi::before{inset:-40px -40px auto auto;width:150px;height:130px;border-radius:46% 54% 40% 60%/55% 45% 55% 45%;background:var(--blob,transparent);z-index:-1;transform:rotate(-18deg)}
.kpi-label{color:var(--fg);font-weight:600}
.kpi-ico{width:40px;height:40px;border-radius:50%;background:var(--fg);color:var(--ico,#fff)}
.kpi-ico svg{width:18px;height:18px}
.kpi-val{font:800 40px/1 var(--f-display);letter-spacing:-.04em}
.kpi-sub{color:var(--muted)}
.kpi-sub b{color:var(--fg);background:rgba(255,255,255,.7);padding:2px 10px;border-radius:999px;font-size:12px}
.kpi.t-info{--blob:var(--lime);--ico:var(--lime)}
.kpi.t-warn{--blob:var(--peach);--ico:#FFB48C}
.kpi.t-crit{background:var(--orange);color:#fff;--ico:var(--orange)}
.kpi.t-crit .kpi-label,.kpi.t-crit .kpi-sub{color:rgba(255,255,255,.85)}
.kpi.t-crit .kpi-ico{background:#fff}
.kpi.t-crit .kpi-sub b{background:#fff;color:var(--fg)}
.kpi.t-crit::before{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.22),transparent 70%)}
.kpi.t-ok{background:var(--lime);--ico:var(--lime)}
.kpi.t-ok .kpi-sub{color:#3E4A12}

/* ---------- paneles ---------- */
.calm-ico{background:var(--lime);color:var(--fg)}
.later li{border-radius:16px}
.later em{color:var(--fg);background:var(--lime);padding:3px 10px;border-radius:999px;font-size:12px}
.dpanel{padding:22px}
.dpanel h2{font:700 17px/1.3 var(--f-display)}
.link{color:var(--fg);font-weight:700;font-size:13px;background:var(--sunken);padding:7px 14px;border-radius:999px}
.link:hover{text-decoration:none;background:var(--lime)}
.link.crit{color:var(--fg)}.link.crit:hover{background:var(--peach)}
.dash .change-notice{border-radius:var(--r)}

.runway{height:140px;gap:4px;border-bottom:0}
.day i{border-radius:8px;opacity:1}
.day.empty i{background:var(--sunken);height:10px!important;border-radius:6px}
.day:hover i{outline-offset:2px}
.day .tip{border-radius:10px;padding:8px 10px}
.runway-axis{font:500 11px/1 var(--f-body)}
.zones i{border-radius:50%}

/* tablas: cabecera suave y filas redondeadas */
.dash th,th{font:600 12px/1 var(--f-body);letter-spacing:0;text-transform:none;color:var(--muted)}
th,td{border-bottom:1px solid var(--line)}
.dash tbody tr:hover td{background:var(--sunken)}
.dash tbody tr td:first-child{border-radius:14px 0 0 14px}.dash tbody tr td:last-child{border-radius:0 14px 14px 0}
.dash tbody tr.sel td{background:var(--sunken)}
.prod small{font:500 12px var(--f-body);color:var(--muted)}
.mono{font-family:var(--f-body);font-weight:500}
.days{font:700 13px var(--f-body);color:var(--fg)}
.bar{height:8px;border-radius:999px;background:var(--sunken)}
.dash .pill{color:color-mix(in srgb,var(--tone) 55%,#111);background:var(--tone-soft);font-weight:700}
.dash .pill::before{background:var(--tone)}
.dash .row-act{border-radius:999px}

/* tarjeta de detalle: fondo de color pleno según el estado */
.detail{border-radius:var(--r);background:linear-gradient(160deg,var(--tone-soft) 0%,var(--surface) 75%)}
.detail.t-ok{background:var(--lime)}
.detail.t-ok .owner,.detail.t-ok .next{background:rgba(255,255,255,.65);border-color:transparent}
.detail.t-ok .detail-val{color:var(--fg)}
.detail.t-ok .pill{background:#fff}
.detail-top .kpi-ico{border-radius:50%;background:var(--fg);color:#fff;border:0}
.detail-top small{font:500 12px var(--f-body)}
.detail-val{font-weight:800}
.detail .next{background:var(--fg);color:#fff;border:0}
.detail .next:hover{background:#2A2C30;color:#fff}
.timeline small{font:500 12px var(--f-body)}
.timeline li.now::before{border-color:var(--fg);background:var(--fg);box-shadow:0 0 0 4px rgba(17,18,20,.1)}
.owner{border:0;border-radius:18px;background:var(--sunken)}
.owner .avatar{width:38px;height:38px;background:var(--fg);color:#fff;box-shadow:none}
.owner .link{background:#fff}

.split{height:16px;border-radius:999px;background:var(--sunken)}
.split i{border-radius:999px}
.dlegend i{border-radius:50%}
.dlegend small{font:500 12px var(--f-body)}
.big-total b{font-weight:800}

.action{border:0;border-radius:18px;background:var(--sunken);transition:transform .2s ease,background .2s}
.action:hover{border:0;background:var(--tone-soft);transform:translateY(-3px)}
.action .kpi-ico{background:var(--tone-soft);color:color-mix(in srgb,var(--tone) 60%,#111)}
.action.t-info .kpi-ico{background:var(--fg);color:var(--lime)}

/* ---------- formularios y otras páginas ---------- */
input,select{border:1px solid var(--line);border-radius:14px;background:var(--sunken);padding:12px 14px}
input:focus,select:focus{outline:none;border-color:var(--fg);background:#fff}
button{border-radius:999px;background:var(--fg);padding:11px 20px}
button:hover{background:#2A2C30}
.search input{border-radius:999px}
.badge{font-weight:700}
.good{background:var(--ok-soft);color:#3E5A06}.warn{background:var(--warn-soft);color:#8A4B00}.bad{background:var(--crit-soft);color:#A8310B}
.delete{background:var(--crit-soft);color:#A8310B}.delete:hover{background:var(--peach)}
.alert{border-radius:16px}
.ok{background:var(--ok-soft);color:#3E5A06}.error{background:var(--crit-soft);color:#A8310B}
.change-notice{background:var(--peach);border:0;border-radius:var(--r);color:#5A2A12}
.change-notice a{background:var(--fg);border-radius:999px;padding:9px 14px}
.add-expiry summary{background:var(--accent-soft);color:var(--fg);border-radius:999px;padding:7px 12px}
.add-expiry[open] form{border-radius:var(--r)!important}
.add-expiry[open] form:before{color:var(--fg)}
.exchange-badge{background:var(--warn-soft);color:#8A4B00}

.report{border:0;box-shadow:var(--shadow)}
.report-brand span{color:var(--orange)}
.report-kpis div{border-radius:16px}
.report-filters .ghost{border-radius:999px;padding:0 20px}
.report-filters .ghost:hover{background:var(--lime);border-color:var(--lime)}

.member{border:0;border-top:0;box-shadow:var(--shadow)}
.member.t-crit .member-top .avatar{background:var(--orange);color:#fff}.member.t-warn .member-top .avatar{background:var(--peach)}.member.t-ok .member-top .avatar{background:var(--lime)}
.member .avatar{width:42px;height:42px;font-size:14px;box-shadow:none}
.area-pill{background:var(--fg);color:#fff}
.member-stats div{border-radius:16px}
.member-stats .t-warn b{color:#C46A00}
.member-actions>a{border-radius:999px}
.member-actions>a:hover{background:var(--lime)}
.member-actions .inline-delete button{border-radius:999px}
.member-actions .inline-delete{display:flex;gap:6px}
.member-actions .remove-user{background:var(--crit);color:#fff}.member-actions .remove-user:hover{background:#d9440f}
.viewing{background:var(--fg);color:#fff;border-radius:999px;padding:10px 12px 10px 20px}
.viewing a{color:var(--fg);background:var(--lime);padding:6px 14px;border-radius:999px}
.unassigned{background:var(--peach);border-radius:var(--r)}
.unassigned a{background:var(--fg);color:#fff;padding:8px 14px;border-radius:999px}
.search select{border-radius:999px}

.alert-list li{border-radius:16px}
.alert-list .done{background:var(--fg)}
.alert-person .avatar{width:42px;height:42px;background:var(--lime);color:var(--fg);box-shadow:none}
.alert-popup .kpi-ico{background:var(--peach);color:var(--fg)}
.popup-actions .ghost{border-radius:999px}
aside a.user:hover,aside a.user.current{background:rgba(255,255,255,.1)}
.exchange-done{color:#4C7A00}

.products .dates-chip{background:var(--lime)}
.products .group.open .group-head td:first-child{box-shadow:inset 3px 0 0 var(--fg)}

/* ---------- inicio de sesión ---------- */
.auth{background:radial-gradient(40% 50% at 15% 20%,rgba(214,243,91,.35),transparent 70%),radial-gradient(40% 50% at 85% 80%,rgba(255,106,44,.35),transparent 70%),var(--rail)}
.login-card{border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.logo{font-family:var(--f-display);font-weight:800;letter-spacing:-.04em}
.logo span{color:var(--orange)}
.login-card button{padding:14px}

/* ---------- pantallas medianas y móviles ---------- */
@media(max-width:900px){
 aside{position:sticky;top:0;width:auto;flex-direction:row;align-items:center;gap:6px;padding:10px 12px;overflow-x:auto;overflow-y:hidden}
 .brand{padding:0 6px 0 0}.brand b{font-size:18px}.brand small{display:none}
 aside nav{width:auto;flex-direction:row;gap:2px}
 aside nav a,aside nav a.active{width:40px;height:40px;margin:0;padding:0;justify-content:center;align-self:center;border-radius:50%}
 aside nav a.active{background:transparent}
 aside nav .tab{top:0;left:0;transform:translateX(calc(var(--i)*42px));right:auto;width:40px;height:40px;border-radius:50%;background:#fff}
 aside nav .tab::before,aside nav .tab::after{display:none}
 aside nav .count{position:absolute;left:24px;top:0;min-width:18px;padding:3px 5px;font-size:10px;border:2px solid var(--rail)}
 .rail-foot{padding:0}aside .user{padding:0;background:none}.logout button{width:38px;height:38px;padding:0;border:0}
 .rail-foot{display:flex;flex-direction:row;margin:0 0 0 auto;gap:2px}
 .logout{display:block}
 .avatar{width:38px;height:38px;font-size:12px}
 /* en móvil los nombres quedan solo para lectores de pantalla */
 aside .lbl{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;opacity:1}
 .content{margin:0;padding:20px 16px 32px}
}
@media(max-width:520px){aside .brand{display:none}.kpi{padding:16px}.kpi-val{font-size:30px}.kpi::before{width:110px;height:100px}}
@media(prefers-reduced-motion:reduce){.kpi:hover,.action:hover{transform:none}}

/* ---------- modo app: la pestaña se desliza y el contenido aparece con un fundido corto ---------- */
/* el círculo/pestaña se mueve con transform: los celulares lo animan con la tarjeta gráfica y se ve suave */
aside nav .tab{transition:transform .35s cubic-bezier(.22,.8,.24,1);will-change:transform}
@keyframes page-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#page.enter{animation:page-in .22s ease-out}
@media(prefers-reduced-motion:reduce){aside nav .tab{transition-duration:.2s}#page.enter{animation:none}}

/* ---------- cambio de página suave (Chrome y Edge) ---------- */
@view-transition{navigation:auto}
aside{view-transition-name:sidebar}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
::view-transition-old(sidebar),::view-transition-new(sidebar){animation-duration:.2s}
::view-transition-group(nav-tab){animation-duration:.34s;animation-timing-function:cubic-bezier(.22,.8,.24,1)}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- celulares: sin zoom automático ---------- */
/* El iPhone acerca la pantalla al tocar un campo con letra menor de 16 px (y en modo app el zoom se quedaba pegado) */
@media(max-width:900px){input,select,textarea{font-size:16px!important}}
/* pantallas muy pequeñas (iPhone SE y similares): tarjetas de Usuarios más compactas */
@media(max-width:380px){
 .member{padding:14px}
 .member-top{flex-wrap:wrap}.member-top .area-pill{margin-left:0}
 .member-stats{grid-template-columns:repeat(2,1fr)}
 .member-actions .inline-delete{margin-left:0;width:100%;justify-content:flex-end}
}