:root{ --color-primary:#0B69FF; --color-success:#16A34A; --color-warn:#F59E0B; --color-critical:#DC2626; --text:#0F172A; --muted:#6B7280; --bg:#FFFFFF; --surface:#F8FAFC }
body{ font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto; margin:0; background:var(--bg); color:var(--text) }
.nav{ display:flex; gap:12px; padding:12px; background:var(--color-primary); color:#fff }
.nav a{ color:#fff; text-decoration:none }
.main{ padding:16px }
.card{ background:var(--surface); border-radius:8px; padding:16px; box-shadow:0 2px 6px rgba(0,0,0,0.04) }
.kpi-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px }
@media (max-width:1024px){ .kpi-grid{ grid-template-columns: repeat(2,1fr) } }
@media (max-width:600px){ .kpi-grid{ grid-template-columns: 1fr } }

/* ORDENYCO · panel operativo (referencia visual FRONT ORDENYCO) */
.oy-root{ height:100vh; overflow:hidden; background:radial-gradient(1200px 600px at 20% -10%, #0C2548 0%, #050E1C 55%); color:#E6EEF8; display:flex; flex-direction:column }
.oy-top{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; border-bottom:1px solid #12263F; background:#06122299 }
.oy-sub{ font-size:11px; letter-spacing:3px; opacity:.65; margin-top:2px }
.oy-body{ flex:1; display:grid; grid-template-columns:210px minmax(0,1fr) 330px; min-height:0 }
.oy-nav{ display:flex; flex-direction:column; gap:2px; padding:14px 10px; border-right:1px solid #12263F; background:#07162A }
.oy-nav-item{ display:flex; align-items:center; gap:10px; padding:11px 12px; border:none; border-radius:8px; background:transparent; color:#B9C8DD; font-size:14px; cursor:pointer; text-align:left }
.oy-nav-item.activo{ background:#0F3A73; color:#fff; font-weight:700 }
.oy-badge{ margin-left:auto; background:#EF4444; color:#fff; border-radius:50%; width:18px; height:18px; font-size:11px; display:flex; align-items:center; justify-content:center }
.oy-nav-pie{ margin-top:auto; padding:12px 8px 0; border-top:1px solid #12263F }
.oy-centro{ display:flex; flex-direction:column; min-height:0; min-width:0 }
.oy-lateral{ overflow-y:auto; padding:14px; border-left:1px solid #12263F }
.oy-typing{ display:flex; gap:5px; background:#14273F; padding:12px 14px; border-radius:12px }
.oy-typing span{ width:7px; height:7px; border-radius:50%; background:#8FB2E6; animation:oyp 1s infinite ease-in-out }
.oy-typing span:nth-child(2){ animation-delay:.15s } .oy-typing span:nth-child(3){ animation-delay:.3s }
@keyframes oyp{ 0%,80%,100%{ opacity:.3; transform:translateY(0) } 40%{ opacity:1; transform:translateY(-3px) } }
@media (max-width:1100px){
  .oy-root{ height:auto; overflow:visible }
  .oy-body{ grid-template-columns:1fr; height:auto }
  .oy-nav{ flex-direction:row; flex-wrap:wrap; border-right:none; border-bottom:1px solid #12263F }
  .oy-nav-pie{ display:none }
  .oy-centro{ min-height:70vh }
  .oy-lateral{ border-left:none; border-top:1px solid #12263F }
}

/* ORDENYCO · panel como ventana flotante y dashboard del supervisor */
.oy-fondo{ position:fixed; inset:0; background:#020813AA; z-index:55 }
.oy-ventana{ position:fixed !important; z-index:60; right:24px; bottom:24px; width:min(1180px,calc(100vw - 48px)); height:min(740px,calc(100vh - 48px)) !important; border-radius:16px; border:1px solid #1B3350; box-shadow:0 24px 70px #000C; overflow:hidden !important }
.oy-lanzador{ position:fixed; right:24px; bottom:56px; z-index:40; display:flex; align-items:center; gap:12px; background:#0B1B31; border:1px solid #1F3C5E; color:#E6EEF8; border-radius:40px; padding:8px 18px 8px 8px; cursor:pointer; box-shadow:0 8px 30px #0006; font-size:12px; text-align:left }
.oy-lanzador-anillo{ width:42px; height:42px; border-radius:50%; border:6px solid #2E7BFF; box-shadow:0 0 16px #2E7BFF99; flex:none }
.db-root{ min-height:100vh; background:#E9EFF7; color:#0F172A; display:flex; flex-direction:column; font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif }
.db-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 28px; background:linear-gradient(90deg,#0A1830,#13294A); color:#fff; flex-wrap:wrap }
.db-main{ flex:1; display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; padding:18px 22px }
.db-col{ display:flex; flex-direction:column; gap:16px; min-width:0 }
.db-hero{ display:flex; gap:24px; flex-wrap:wrap; align-items:center; padding:22px 26px; border-radius:16px; color:#fff; position:relative; overflow:hidden; background:linear-gradient(100deg,#0D1D36 0%,#12274A 55%,#1B3556 100%) }
.db-hero-lema{ margin-left:auto; text-align:right; font-size:20px; font-weight:600; opacity:.9; align-self:flex-end }
.db-cta{ display:inline-block; margin-top:14px; background:#0B69FF; color:#fff; border:none; border-radius:10px; padding:11px 22px; font-weight:800; font-size:15px; cursor:pointer }
.db-fila3{ display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:16px }
.db-fila2{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.db-aviso{ position:fixed; right:24px; bottom:112px; width:340px; z-index:45; background:#0B1B31; color:#E6EEF8; border:1px solid #2E7BFF; border-radius:14px; padding:16px; box-shadow:0 12px 40px #0008 }
.db-pie{ display:flex; justify-content:space-between; padding:10px 28px; background:#0A1830; color:#9FB3CF; font-size:12px }
@media (max-width:1100px){
  .db-main{ grid-template-columns:1fr } .db-fila3{ grid-template-columns:1fr } .db-fila2{ grid-template-columns:1fr }
  .db-lema,.db-hero-lema{ display:none } .oy-ventana{ right:0; bottom:0; width:100vw; height:100vh !important; border-radius:0 }
}