:root{
  --k-emerald:#5eb88e; --k-emerald-lo:#7ac9a3;
  --k-cyan:#6ba8a8;    --k-blue:#6b8caf;
  --k-purple:#8a7bb3;  --k-amber:#c4923a; --k-red:#b85450; --k-red-lo:#cc6e6a;
  --k-line:rgba(232,236,240,0.09);
  --k-line-hi:rgba(232,236,240,0.14);
  --k-elev: 0 24px 48px -24px rgba(0,0,0,0.66), 0 6px 16px -8px rgba(0,0,0,0.5);
  --k-inset: inset 0 1px 0 rgba(255,255,255,0.05);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

html{ background:#0a0d12; }
body{ background:transparent !important; }

body::before{                         
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58vw 58vw at 84% 6%,  rgba(94,184,142,0.11), transparent 60%),
    radial-gradient(52vw 52vw at 6% 92%,  rgba(107,140,175,0.10), transparent 60%),
    radial-gradient(42vw 42vw at 50% 46%, rgba(107,168,168,0.05), transparent 62%);
  animation: k-drift 22s ease-in-out infinite alternate;
}
body::after{                          
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.6;
  background-image:
    linear-gradient(rgba(232,236,240,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,236,240,0.022) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 38%, #000 55%, transparent 100%);
          mask-image:radial-gradient(circle at 50% 38%, #000 55%, transparent 100%);
}
@keyframes k-drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(-1.5%,1.5%,0) scale(1.05); }
}

.marcos_principales,
.marcos_desplegable,
.marcos_principales_sin,
.marcos_principales_sin2,
.marcos_desagregados,
.marcos_desplegable_inv{
  position:relative;
  background:#161c26 !important;
  border:1px solid rgba(232,236,240,0.11) !important;
  box-shadow:var(--k-elev), inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px rgba(255,255,255,0.012) !important;
  overflow:visible;
}

.marcos_principales::before,
.marcos_principales_sin::before,
.marcos_principales_sin2::before{
  content:''; position:absolute; top:-1px; left:1.6vh; right:1.6vh; height:1px;
  background:linear-gradient(90deg, transparent, rgba(94,184,142,0.55) 22%, rgba(107,168,168,0.55) 78%, transparent);
  opacity:.9; pointer-events:none;
}

.marcos_principales::after{
  content:''; position:absolute; top:0; right:0; width:38%; height:34%;
  background:radial-gradient(120% 120% at 100% 0%, rgba(94,184,142,0.08), transparent 60%);
  pointer-events:none; border-radius:inherit;
}

.marco_banner{
  position:relative;
  background:linear-gradient(180deg, rgba(24,30,38,0.98), rgba(14,18,24,0.99)) !important;
  border:1px solid var(--k-line) !important;
  box-shadow:0 8px 24px -12px rgba(0,0,0,0.6), var(--k-inset) !important;
}
.marco_banner::after{           
  content:''; position:absolute; left:8%; right:8%; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(94,184,142,0.35), transparent);
  pointer-events:none;
}

.marco_botones,
.marco_pestanas,
.marco_fecha, .marco_fecha_2, .marco_fecha_hora,
.marco_boton_guardar, .marco_botones_edicion{
  background:linear-gradient(180deg, rgba(31,38,48,0.6), rgba(22,27,34,0.6)) !important;
  border:1px solid var(--k-line) !important;
  box-shadow:var(--k-inset);
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.marco_botones:hover,
.marco_pestanas:hover,
.marco_boton_guardar:hover{
  border-color:var(--k-line-hi) !important;
  background:linear-gradient(180deg, rgba(38,46,58,0.72), rgba(26,32,41,0.72)) !important;
}

.marco_pestanas.activo, .marco_pestanas.seleccionado, .marco_pestanas.activa,
.marco_pestanas[aria-selected="true"]{
  border-color:rgba(94,184,142,0.55) !important;
  box-shadow:0 0 0 1px rgba(94,184,142,0.18), 0 0 22px -8px rgba(94,184,142,0.5);
}

.desplegables, .desplegables_ban, .desplegables_banner,
.desplegado, .desplegado_banner, .dropdown-menu,
.opciones_of, .opciones_of_lista, select{
  background:linear-gradient(180deg, rgba(31,38,48,0.9), rgba(22,27,34,0.92)) !important;
  border:1px solid var(--k-line) !important;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.dropdown-menu{ box-shadow:var(--k-elev) !important; border-radius:12px !important; }
input, select, .input_of, .input_inc, .input_desc_ubi, .fecha, .fecha_2{
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input:focus, select:focus,
.input_of:focus, .input_inc:focus, .input_desc_ubi:focus, .fecha:focus{
  outline:none;
  border-color:rgba(94,184,142,0.6) !important;
  box-shadow:0 0 0 3px rgba(94,184,142,0.16) !important;
}

button{
  letter-spacing:.005em;
  transition:transform .18s var(--ease), box-shadow .22s var(--ease),
             background .22s var(--ease), color .22s var(--ease), filter .22s var(--ease);
}
button:hover{ transform:translateY(-1px); filter:brightness(1.08); }
button:active{ transform:translateY(0); }

.titulo_marcos, .titulo_detalle, .titulo_alertas,
.titulos_detalle1, .titulos_detalle2, .titulos_detalle3, .titulos_detalle4,
.titulo_marcos_2, .texto_banner{
  font-family:'Space Grotesk','Inter',sans-serif;
  letter-spacing:-0.01em;
}
.titulo_marcos{
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.14em !important;
  font-size:1.55vh !important;
  color:var(--k-cyan) !important;
  display:inline-flex; align-items:center; gap:.7vh;
}
.titulo_marcos::before{                 
  content:''; width:.7vh; height:.7vh; border-radius:2px; flex:0 0 auto;
  background:linear-gradient(135deg, var(--k-emerald), var(--k-cyan));
  box-shadow:0 0 8px rgba(94,184,142,0.55);
}

.marco_dias_ener{
  border-radius:8px !important;
  border:1px solid rgba(0,0,0,0.22) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.22), 0 3px 10px -4px rgba(0,0,0,0.5) !important;
  color:#0a0d12 !important; font-weight:700 !important;
  letter-spacing:.02em; text-shadow:0 1px 0 rgba(255,255,255,0.18);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.marco_dias_ener:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 18px -6px rgba(0,0,0,0.6) !important;
}

.valor_detalle, .valor_detalle2, .valor_detalle3,
.valor_detalle_det, .valor_detalle_inv, .reparto, .fecha, .fecha_2,
.marco_fecha_hora{
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' on,'lnum' on;
}

.estructura_detalle, .estructura_detalle2, .estructura_pestanas,
.contenedor_detalle > div{
  transition:background .18s var(--ease);
}
.estructura_detalle:hover, .estructura_detalle2:hover{
  background:rgba(232,236,240,0.03);
  border-radius:8px;
}

.iconos, .iconos_desp, .iconos_desplegable{
  transition:color .2s var(--ease), transform .2s var(--ease), filter .2s var(--ease);
}
.iconos:hover, .iconos_desp:hover{
  color:var(--k-emerald-lo) !important;
  filter:drop-shadow(0 0 8px rgba(94,184,142,0.55));
  transform:translateY(-1px);
}

.sidenav{
  background:linear-gradient(180deg, rgba(16,20,27,0.96), rgba(10,13,18,0.98)) !important;
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  border-right:1px solid var(--k-line);
  box-shadow:var(--k-elev);
}
.nivel1_desplegable{
  transition:background .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease);
  border-radius:8px;
}
.nivel1_desplegable:hover{
  background:rgba(94,184,142,0.10) !important;
  color:var(--k-emerald-lo) !important;
  padding-left:.4vw;
}

@keyframes k-rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.marcos_principales{ animation:k-rise .5s var(--ease) both; }

:focus-visible{
  outline:2px solid rgba(94,184,142,0.7);
  outline-offset:2px;
  border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}