/* Tema visual DIELA Control CNC — compartido por todas las pantallas de Produccion */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  --navy:#0a2247;--navy2:#0d2c5c;--navy3:#163a73;
  --bg:#f4f6fa;--bg2:#ffffff;--bg3:#eef1f6;--bg4:#e3e8f0;--bg5:#d6dde8;
  --border:#d6dde8;--border2:#c3ccdb;--border3:#aab6c9;
  --text:#0b1b33;--text2:#3d4c63;--text3:#6b7a90;
  --blue:#1463e6;--blue2:#1463e6;
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
}
body,button,input,select,textarea{font-family:'Inter','Segoe UI',system-ui,sans-serif}
h1,h2,.page-title{letter-spacing:-.3px}
/* Barra lateral azul marino con el logo de DIELA sobre ficha blanca */
.sidebar{background:var(--navy)!important;border-right:0!important}
.sidebar .brand{border-bottom:1px solid rgba(255,255,255,.12)!important}
.sidebar .brand img{background:#fff;padding:8px 14px;border-radius:2px;height:88px!important}
.sidebar .brand-name{color:#fff!important;font-weight:800!important;letter-spacing:.3px}
.sidebar .brand-sub{color:#9fb2d1!important}
.sidebar .brand-tag{background:transparent!important;border:1px solid rgba(255,255,255,.28)!important;color:#dbe6f7!important;border-radius:0!important}
.sidebar .nav-item,.sidebar .proj-nav-item,.sidebar .emp-nav-item{color:#cfd9ea!important;border-radius:0!important}
.sidebar .nav-item:hover,.sidebar .proj-nav-item:hover,.sidebar .emp-nav-item:hover{background:var(--navy2)!important;color:#fff!important}
.sidebar .nav-item.active,.sidebar .emp-nav-item.active{background:var(--blue)!important;color:#fff!important;font-weight:600}
.sidebar .nav-badge,.sidebar .emp-nav-count{background:rgba(255,255,255,.14)!important;color:#dbe6f7!important}
.sidebar .nav-section{color:#7f95b8!important}
.sidebar-bottom{border-top:1px solid rgba(255,255,255,.12)!important}
.sidebar .user-card{background:var(--navy2)!important;border-radius:0!important}
.sidebar .user-name{color:#fff}.sidebar .user-role{color:#9fb2d1}
.sidebar .user-av{background:#6c7f9d!important;color:#fff}
/* Barra superior */
.topbar{background:var(--navy)!important;border-bottom:0!important;color:#fff}
.topbar .page-title{color:#fff;font-size:18px;font-weight:700}
.topbar .notif-btn{background:transparent!important;border-color:rgba(255,255,255,.3)!important;border-radius:0!important}
.topbar .notif-btn svg{color:#fff!important}
/* Esquinas rectas y azul DIELA en botones */
.btn-primary,.btn.primary,button.primary{background:var(--blue)!important;border-color:var(--blue)!important;border-radius:0!important}
input,select,textarea{border-radius:0!important}
.proj-block,.emp-detail-hdr,.emp-stat{border-radius:0!important}
/* Cabecera de la pantalla TV y de operario/RR.HH. */
:root{--hdr:#0a2247;--hdr2:#0d2c5c;--hdr-border:#163a73}

/* ── Encabezado con pestañas (escritorio) ───────────────────────────────── */
.hd-brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.hd-brand img{height:44px;width:auto;background:#fff;padding:3px 6px}
.hd-name b{font-size:22px;font-weight:800;letter-spacing:.3px}
.hd-name i{font-style:normal;font-size:15px;color:#c9d7ee;margin-left:6px}
.tag-admin{margin-left:auto;font-size:9px;font-weight:700;background:rgba(163,88,208,.18);color:#a358d0;padding:1px 5px}
.live{font-size:9px;font-weight:700;background:#e2445c;color:#fff;padding:1px 6px;margin-left:6px}
.dd{position:relative;display:flex}
.dd-menu{display:none}
.tema-hd{display:block}
#view-inicio iframe,#view-ordenes iframe,#view-preaprob iframe{display:block;width:100%;border:0;height:calc(100vh - 121px);background:#fff}
.content:has(#view-inicio[style*="block"]),.content:has(#view-ordenes[style*="block"]),.content:has(#view-preaprob[style*="block"]){padding:0!important}
@media(min-width:821px){
  .sidebar{position:sticky!important;top:0;left:0;width:100%!important;height:64px!important;flex-direction:row!important;align-items:stretch;padding:0 28px;gap:36px;z-index:120;transform:none!important}
  .sidebar .brand,.sidebar-bottom{display:none}
  .hd-nav{display:flex;flex:1;align-items:stretch;padding:0!important;gap:2px;overflow:visible!important}
  .hd-nav>.nav-item,.hd-nav>.dd>.nav-item{width:auto!important;margin:0!important;padding:0 18px!important;font-size:15px;font-weight:500;border-radius:0!important;border-bottom:3px solid transparent;background:none!important;color:#dbe6f7!important;gap:8px;height:64px;align-items:center;text-decoration:none;white-space:nowrap}
  .hd-nav>.nav-item:hover,.hd-nav>.dd>.nav-item:hover,.dd:hover>.nav-item{color:#fff!important;background:var(--navy2)!important}
  .hd-nav>.nav-item.active,.dd:has(.dd-menu .nav-item.active)>.dd-btn{color:#fff!important;font-weight:600;border-bottom-color:#fff!important;background:transparent!important}
  .hd-nav .nav-badge{margin-left:6px}
  .dd-btn svg{width:13px!important;height:13px!important}
  .dd-menu{position:absolute;top:100%;left:0;min-width:250px;background:#fff;border:1px solid var(--border2);box-shadow:0 12px 32px rgba(10,34,71,.22);flex-direction:column;z-index:130}
  .dd:hover>.dd-menu,.dd:focus-within>.dd-menu{display:flex}
  .dd-menu .nav-item{color:var(--text)!important;padding:12px 16px!important;font-size:14px;border-radius:0!important;margin:0!important;border-bottom:1px solid var(--bg4)}
  .dd-menu .nav-item:hover{background:var(--blue-soft,#e8f0fd)!important;color:var(--blue)!important}
  .dd-menu .nav-item.active{background:var(--blue-soft,#e8f0fd)!important;color:var(--blue)!important;font-weight:600}
  .dd-menu .nav-badge{background:var(--bg4)!important;color:var(--text2)!important}
  .main{margin-left:0!important}
  .topbar{top:64px!important;background:#fff!important;border-bottom:1px solid var(--border)!important;padding:8px 28px!important;color:var(--text)}
  .topbar .page-title{color:var(--text)!important}
  .topbar .notif-btn{border-color:var(--border2)!important}
  .topbar .notif-btn svg{color:var(--text2)!important}
  #view-inicio iframe,#view-ordenes iframe{height:calc(100vh - 121px)}
}
@media(max-width:820px){
  .hd-brand{padding:14px}.hd-name i{display:none}
  .hd-nav{display:flex;flex-direction:column;padding:8px!important}
  .dd{display:block}.dd-menu{display:block;padding-left:12px}
  .dd-btn{pointer-events:none;color:#7f95b8!important;font-size:11px!important;text-transform:uppercase;letter-spacing:.1em}
  .dd-btn svg{display:none}
  .dd-menu .nav-item{color:#cfd9ea!important}
  #view-inicio iframe,#view-ordenes iframe,#view-preaprob iframe{height:calc(100vh - 110px)}
}

/* ── Encabezado blanco con logo grande (escritorio) ─────────────────────── */
@media(min-width:821px){
  .sidebar{background:#fff!important;height:84px!important;border-bottom:1px solid var(--border)!important;box-shadow:0 1px 0 rgba(10,34,71,.04)}
  .hd-brand img{height:75px;padding:0;background:transparent}
  .hd-name b{color:var(--navy)}
  .hd-name i{color:var(--text3)}
  .hd-nav>.nav-item,.hd-nav>.dd>.nav-item{height:84px;color:var(--text2)!important}
  .hd-nav>.nav-item:hover,.hd-nav>.dd>.nav-item:hover,.dd:hover>.nav-item{background:var(--blue-soft,#e8f0fd)!important;color:var(--blue)!important}
  .hd-nav>.nav-item.active,.dd:has(.dd-menu .nav-item.active)>.dd-btn{color:var(--blue)!important;border-bottom-color:var(--blue)!important;background:transparent!important}
  .hd-nav .nav-badge{background:var(--bg4)!important;color:var(--text2)!important}
  .topbar{top:84px!important}
  #view-inicio iframe,#view-ordenes iframe,#view-preaprob iframe{height:calc(100vh - 141px)}
}

/* ── Iconografia minimalista monocroma ──────────────────────────────────── */
.ic{width:1.15em;height:1.15em;vertical-align:-.2em;flex:none}
.ic-w{display:inline-flex;align-items:center}
.nav-item svg,.btn svg,.topbar svg,.notif-btn svg,.dd-btn svg{stroke-width:1.5}

/* Notificacion de Pre-aprobaciones en el encabezado principal */
@media(min-width:821px){
  .sidebar .pre-en-hdr{margin-left:auto;align-self:center;display:flex;align-items:center}
  .sidebar .pre-en-hdr .notif-btn{width:46px;height:46px;background:#fff!important;border:1px solid var(--border2)!important;border-radius:0!important;color:var(--navy)!important}
  .sidebar .pre-en-hdr .notif-btn:hover{background:var(--navy)!important;color:#fff!important;border-color:var(--navy)!important}
  .sidebar .pre-en-hdr .notif-btn svg{width:22px;height:22px}
  .sidebar .pre-en-hdr #pre-notif-badge{top:-6px;right:-6px}
  .sidebar .pre-en-hdr .notif-panel{right:0;top:calc(100% + 12px);z-index:300}
}

/* ── Modal "Componentes" (verComponentes / condet): dos paneles ── */
.cd-modal{border-radius:0!important;border-top:4px solid var(--navy);display:flex;flex-direction:column}
.cd-hdr{padding:22px 28px 14px!important;border-bottom:0!important;flex:none}
.cd-hdr-l{display:flex;align-items:baseline;gap:14px}
.cd-title{font-size:24px;font-weight:800;color:var(--navy);letter-spacing:-.3px}
.cd-title-sep{color:var(--border2);font-weight:400}
.cd-orden-tag{font-size:18px;font-weight:700;color:var(--ink)}
.cd-close{border-radius:0!important;border:1px solid var(--border2)!important;color:var(--text2)!important;padding:7px 10px!important}
.cd-close:hover{background:var(--navy)!important;color:#fff!important;border-color:var(--navy)!important}
.cd-sub{font-size:13.5px;color:var(--text2);padding:0 28px 18px;border-bottom:1px solid var(--border);flex:none}
.cd-body{padding:18px 28px 0!important;display:flex;flex-direction:column;flex:1;min-height:0}
.cd-tools{display:flex;align-items:center;gap:14px;margin-bottom:16px!important;flex:none}
.cd-search{border-radius:0!important;border:1px solid var(--border2)!important;background:#fff!important;height:46px}
.cd-search input{font-size:14.5px!important}
.cd-count{font-size:12.5px!important;font-weight:600;color:var(--text2)!important;background:#eef1f6;padding:7px 12px;border:1px solid var(--border);white-space:nowrap}
.cd-panes{display:grid;grid-template-columns:300px 1fr;gap:0;border:1px solid var(--border);flex:1;min-height:0}
.cd-lista{overflow-y:auto;border-right:1px solid var(--border);background:#fafbfd}
.cd-li{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 18px;border:0;border-bottom:1px solid var(--border);background:#fff;cursor:pointer;font-family:'Inter',sans-serif}
.cd-li:hover{background:#f1f4f9}
.cd-li.sel{background:var(--blue-soft,#e8f0fd);box-shadow:inset 3px 0 0 var(--navy)}
.cd-li-num{font-size:15px;font-weight:700;color:var(--navy)}
.cd-li-dot{width:9px;height:9px;border-radius:50%;flex:none}
.cd-dot-ok{background:#1fa463}.cd-dot-prog{background:var(--blue,#1463e6)}.cd-dot-pend{background:var(--border2)}
.cd-detalle{overflow-y:auto;padding:22px 26px;background:#fff}
.cd-det-hdr{padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:16px}
.cd-det-lbl{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.cd-det-row{display:flex;align-items:center;gap:14px;margin-top:6px;flex-wrap:wrap}
.cd-det-num{font-size:26px;font-weight:800;color:var(--navy);letter-spacing:-.3px}
.cd-vsep2{width:1px;height:20px;background:var(--border2)}
.cd-det-cant{font-size:14.5px;color:var(--text2)}
.cd-chip{margin-left:auto;font-size:13px;font-weight:600;padding:6px 14px;border:1px solid;white-space:nowrap}
.cd-chip-ok{background:#eaf7f0;border-color:#1fa463;color:#12804a}
.cd-chip-prog{background:var(--blue-soft,#e8f0fd);border-color:var(--blue,#1463e6);color:var(--blue,#1463e6)}
.cd-hist-hdr{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.cd-hist-hdr h3{font-size:18px;font-weight:800;color:var(--navy)}
.cd-hist-hdr span{font-size:13px;color:var(--text3)}
.cd-hist-w{overflow-x:auto;border:1px solid var(--border)}
.cd-hist{width:100%;border-collapse:collapse;min-width:560px}
.cd-hist thead th{background:#f1f4f9;text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text2);padding:10px 16px;border-bottom:1px solid var(--border)}
.cd-hist tbody td{padding:12px 16px;border-bottom:1px solid var(--border);font-size:14px;color:var(--ink);font-family:'Inter',sans-serif;vertical-align:middle}
.cd-hist tbody tr:last-child td{border-bottom:0}
.cd-hist tbody tr:hover{background:#fafbfd}
.cd-op-n{color:var(--text3);font-weight:600;margin-right:4px}
.cd-op{display:flex;align-items:center;gap:10px}
.cd-av{width:26px;height:26px;border-radius:50%;background:#6c7f9d;color:#fff;font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.cd-est-ok{color:#12804a;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.cd-est-ok::before{content:"";width:8px;height:8px;border-radius:50%;background:#1fa463}
.cd-est-prog{color:var(--blue,#1463e6);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.cd-est-prog::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue,#1463e6)}
.cd-acc-col{text-align:right}
.cd-link{background:none;border:1px solid var(--border2);color:var(--navy);font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;padding:6px 12px;cursor:pointer}
.cd-link:hover{border-color:var(--navy);background:var(--navy);color:#fff}
.cd-link-ok{border-color:#1fa463;color:#12804a}
.cd-link-ok:hover{background:#1fa463;border-color:#1fa463;color:#fff}
.cd-vacio{padding:40px 20px;text-align:center;color:var(--text3);font-size:13.5px}
.cd-vacio-det{padding:80px 20px}
.cd-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 20px;flex:none}
.cd-foot-txt{font-size:13px;color:var(--text3)}
.cd-cerrar{border-radius:0!important}
@media(max-width:760px){.cd-panes{grid-template-columns:1fr}.cd-lista{max-height:200px;border-right:0;border-bottom:1px solid var(--border)}}
