/* Orión Suite · colores originales del Excel (hoja Modulo Empleados) */
@font-face{font-family:"Visuelt Pro";src:url("assets/fuentes/VisueltPro-Light.woff2") format("woff2");font-weight:300;font-display:swap;}
@font-face{font-family:"Visuelt Pro";src:url("assets/fuentes/VisueltPro-Regular.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"Visuelt Pro";src:url("assets/fuentes/VisueltPro-Medium.woff2") format("woff2");font-weight:500;font-display:swap;}
@font-face{font-family:"Visuelt Pro";src:url("assets/fuentes/VisueltPro-Bold.woff2") format("woff2");font-weight:700;font-display:swap;}
@font-face{font-family:"Visuelt Pro";src:url("assets/fuentes/VisueltPro-Black.woff2") format("woff2");font-weight:900;font-display:swap;}

:root{
  /* Barra lateral: degradado vertical del Excel */
  --nav-azul:#0F9ED5;     /* accent4 del tema, 0–17 % */
  --nav-teal:#38A3A5;     /* 41 % */
  --nav-verde:#57CC99;    /* 72 % */
  --nav-claro:#80ED99;    /* 100 % */
  --nav-menta:#C7F9CC;    /* franja derecha y botón activo */
  --boton:#00C1B0;        /* píldora de los botones */
  --boton-oscuro:#008679;
  --texto-estado:#808080; /* "Ultima Planilla" y "Estatus" */
  --tinta:#1f2544;

  --ancho-nav:290px;
  --ancho-boton:min(238px,calc((100vh - 250px) / 9 * 3.6));
  --franja:28px;

  /* Patrón de fondo de la hoja; la identidad de cada empresa lo reemplaza */
  --patron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='84' viewBox='0 0 72 64'%3E%3Cg fill='%23f4f5f8'%3E%3Cpath d='M18 4c1.4 7.6 3.4 9.6 11 11-7.6 1.4-9.6 3.4-11 11-1.4-7.6-3.4-9.6-11-11 7.6-1.4 9.6-3.4 11-11z'/%3E%3Cpath d='M54 36c1.4 7.6 3.4 9.6 11 11-7.6 1.4-9.6 3.4-11 11-1.4-7.6-3.4-9.6-11-11 7.6-1.4 9.6-3.4 11-11z'/%3E%3Ccircle cx='52' cy='14' r='3'/%3E%3Ccircle cx='16' cy='46' r='3'/%3E%3C/g%3E%3C/svg%3E");
  --patron-tamano:96px 84px;
  --marca-agua:url("identidades/orion/marca-agua.png");
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;display:grid;grid-template-columns:var(--ancho-nav) 1fr;min-height:100vh;
  font-family:"Visuelt Pro",system-ui,sans-serif;color:var(--tinta);background:#fff;
}

/* ---------- Barra lateral ---------- */
.navegador{
  position:sticky;top:0;height:100vh;overflow:hidden auto;display:flex;flex-direction:column;
  padding:18px var(--franja) 18px 0;
  background:
    linear-gradient(var(--nav-menta),var(--nav-menta)) right/var(--franja) 100% no-repeat,
    linear-gradient(180deg,var(--nav-azul) 0%,var(--nav-azul) 17%,var(--nav-teal) 41%,var(--nav-verde) 72%,var(--nav-claro) 100%);
  scrollbar-width:none;
}
.navegador::-webkit-scrollbar{display:none;}
.botones{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;position:relative;}
.botones li{padding:2px 0 2px 12px;border-radius:16px 0 0 16px;transition:background .2s;}
.botones li:has(.activo){
  background:var(--nav-menta);
  box-shadow:-2px 3px 6px rgba(0,0,0,.18);
  margin-right:calc(var(--franja) * -1);padding-right:var(--franja);
}
.boton{
  display:block;width:var(--ancho-boton);border-radius:40px;outline:none;
  transition:transform .18s ease,filter .18s ease;
  filter:drop-shadow(0 2px 2px rgba(0,60,55,.25));
}
.boton img{display:block;width:100%;height:auto;}
.boton:hover{transform:translateY(-2px) scale(1.02);filter:drop-shadow(0 6px 8px rgba(0,60,55,.3)) brightness(1.06);}
.boton:active{transform:translateY(1px) scale(.99);filter:drop-shadow(0 1px 1px rgba(0,60,55,.3)) brightness(.97);}
.boton:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--nav-azul);}
.logo-orion{
  position:relative;display:block;width:92px;margin:auto auto 0;padding-top:12px;
  filter:drop-shadow(0 2px 6px rgba(255,255,255,.55));transition:transform .18s;
}
.logo-orion img{display:block;width:100%;height:auto;}
.logo-orion:hover{transform:scale(1.05);}

/* ---------- Portada ---------- */
.portada{
  position:relative;min-height:100vh;display:flex;flex-direction:column;
  background:#fff var(--patron) center/var(--patron-tamano) repeat;
}
.estado{
  position:relative;display:flex;gap:56px;padding:24px 0 0 6%;font-size:15px;color:var(--texto-estado);font-weight:400;
}
.estado b{font-weight:500;margin-left:14px;color:#6b6b6b;}

/* Marca de agua: logos desvanecidos a la derecha, como en la hoja */
.marca-agua{
  position:absolute;top:0;right:0;bottom:0;width:var(--marca-agua-ancho,15%);pointer-events:none;
  background:var(--marca-agua) center top/100% auto repeat-y;
}

/* Presentación: cuadro con marco claro, como el original */
.presentacion{
  position:relative;z-index:1;width:min(72%,1240px);aspect-ratio:1672/941;margin:14px 0 0 6%;
  background:#f3f6fa center/cover no-repeat;
  border:12px solid #e6e3dc;
  box-shadow:0 10px 30px rgba(40,40,30,.18);
}

/* Imagen decorativa al pie (las botellas en BPS) */
.decoracion{
  position:relative;flex:1;min-height:0;width:min(72%,1240px);margin-left:6%;
  background:var(--decoracion,none) center top/100% auto no-repeat;
}
/* Selector de identidad (solo para la vista previa) */
.selector-identidad{
  position:fixed;right:18px;bottom:16px;display:flex;align-items:center;gap:8px;
  padding:8px 10px 8px 14px;border-radius:999px;background:rgba(255,255,255,.92);
  box-shadow:0 4px 16px rgba(0,0,0,.12);font-size:12px;color:var(--texto-estado);
}
.selector-identidad select{font:inherit;color:var(--tinta);border:1px solid #dfe3ea;border-radius:999px;padding:4px 8px;background:#fff;}

[hidden]{display:none !important;}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#1f2544;color:#fff;padding:10px 18px;
  border-radius:12px;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:60;max-width:90vw;}
.toast.ok{background:#00897b;} .toast.error{background:#9b2c5a;}

/* ---------- Pantallas angostas ---------- */
@media (max-width:820px){
  body{grid-template-columns:1fr;}
  .navegador{position:relative;height:auto;flex-direction:row;align-items:center;padding:10px 12px;overflow-x:auto;
    background:linear-gradient(90deg,var(--nav-azul) 0%,var(--nav-teal) 40%,var(--nav-verde) 75%,var(--nav-claro) 100%);}
  .marca-agua,.logo-orion,.decoracion{display:none;}
  .botones{flex-direction:row;gap:6px;}
  .botones li{padding:4px;border-radius:14px;}
  .botones li:has(.activo){margin:0;padding:4px;box-shadow:none;}
  .boton{width:170px;}
  .estado{padding:18px 16px 0;gap:20px;flex-wrap:wrap;font-size:13px;}
  .presentacion{width:calc(100% - 32px);margin:20px 16px;border-width:6px;}
}
}