/* ==========================================================================
   RPSI · ERP Ingenieria Aplicada — Sistema de diseno "industrial moderno"
   Paleta base tomada del sistema original (navy / teal) reinterpretada
   con un lenguaje visual mas industrial: graphite, acero, acentos teal.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root{
  /* Marca / acento */
  --navy-900:#0c3357;
  --navy-800:#123c63;
  --navy-700:#164873;
  --teal-700:#095f82;
  --teal-600:#0b7aa8;
  --teal-500:#2093c4;
  --teal-100:#e3f2f9;

  /* Graphite (chasis / sidebar industrial) */
  --graphite-900:#141b24;
  --graphite-800:#1b2530;
  --graphite-700:#26313f;
  --graphite-600:#374254;
  --steel-400:#94a2b3;
  --steel-300:#b7c1cd;

  /* Superficie */
  --bg-page:#f2f4f7;
  --bg-card:#ffffff;
  --bg-subtle:#f7f8fa;
  --border:#e0e4e9;
  --border-strong:#c7cdd6;

  /* Texto */
  --text-900:#161d27;
  --text-700:#3d4552;
  --text-500:#6b7480;
  --text-400:#98a1ac;

  /* Semaforo (identico al original) */
  --success:#1b8a5a;
  --success-bg:#e5f4ec;
  --warning:#c98a06;
  --warning-bg:#fdf3d0;
  --danger:#d6455a;
  --danger-bg:#fbe7ea;

  --radius-sm:6px;
  --radius:10px;
  --radius-lg:14px;
  --shadow-sm:0 1px 2px rgba(20,27,36,.06);
  --shadow-md:0 4px 16px rgba(20,27,36,.08);
  --shadow-lg:0 12px 32px rgba(20,27,36,.14);

  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }

/* Los iconos del set ICONS son <svg viewBox="0 0 24 24"> sin width/height
   propios: sin una regla base se colapsan a 0x0 dentro de flex (botones,
   .row-actions) o se expanden al tamano de reemplazo por defecto (300x150)
   sueltos en texto plano. 1em los deja del tamano del texto que los rodea;
   las reglas mas especificas de abajo (.icon-btn, .nav-item, etc.) ganan
   por especificidad cuando necesitan un tamano fijo distinto. El selector
   ":not([width])" excluye a proposito las graficas SVG dibujadas a mano
   (radar, barras+linea, Pareto), que sí traen width/height explicitos.  */
svg:not([width]){ width:1em; height:1em; flex:none; vertical-align:-0.125em; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg-page);
  color:var(--text-900);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-.01em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--teal-100); }

.mono{ font-family:var(--font-mono); }

/* Scrollbar industrial, discreto */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:8px; border:2px solid var(--bg-page); }

/* ---------------------------------------------------------------------- */
/* Auth (login / registro)                                                */
/* ---------------------------------------------------------------------- */
.auth-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr 1fr;
}
@media (max-width:880px){ .auth-shell{ grid-template-columns:1fr; } .auth-visual{ display:none; } }

.auth-visual{
  position:relative;
  background:
    radial-gradient(1100px 600px at 15% 0%, rgba(11,122,168,.35), transparent 55%),
    linear-gradient(155deg, var(--graphite-900) 0%, var(--navy-900) 55%, var(--graphite-800) 100%);
  color:#fff;
  padding:56px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}
.auth-visual::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 26px);
  pointer-events:none;
}
.auth-brand{ display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.auth-brand .mark{
  width:42px; height:42px; border-radius:10px;
  background:linear-gradient(155deg, var(--teal-500), var(--teal-700));
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md);
  font-weight:800; color:#fff; font-size:18px;
}
.auth-brand .name{ font-size:20px; font-weight:800; letter-spacing:.02em; }
.auth-brand .sub{ font-size:11.5px; color:var(--steel-300); text-transform:uppercase; letter-spacing:.12em; margin-top:2px; }

.auth-copy{ position:relative; z-index:1; max-width:460px; }
.auth-copy .tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-500); background:rgba(32,147,196,.14);
  border:1px solid rgba(32,147,196,.35);
  padding:5px 10px; border-radius:999px; margin-bottom:18px;
}
.auth-copy h1{ font-size:32px; line-height:1.2; color:#fff; margin-bottom:14px; }
.auth-copy p{ color:var(--steel-300); font-size:14.5px; line-height:1.6; }

.auth-modules{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:28px; }
.auth-modules .mini{
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
  border-radius:var(--radius); padding:10px 12px;
  font-size:12.5px; color:var(--steel-300);
}
.auth-modules .mini b{ display:block; color:#fff; font-size:13px; margin-bottom:2px; }

.auth-foot{ position:relative; z-index:1; font-size:12px; color:var(--steel-400); }

.auth-form-wrap{
  display:flex; align-items:center; justify-content:center;
  padding:40px 24px;
  background:var(--bg-page);
}
.auth-card{
  width:100%; max-width:420px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  padding:34px 32px 28px;
}
.auth-card .kicker{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-600); margin-bottom:6px;
}
.auth-card h2{ font-size:22px; margin-bottom:6px; }
.auth-card .lead{ color:var(--text-500); font-size:13px; margin-bottom:24px; }

.field{ margin-bottom:16px; }
.field label{
  display:block; font-size:12px; font-weight:600; color:var(--text-700);
  margin-bottom:6px; letter-spacing:.01em;
}
.field .hint{ font-size:11.5px; color:var(--text-400); margin-top:5px; }
.input, select.input, textarea.input{
  width:100%; padding:10px 12px; font-size:13.5px; color:var(--text-900);
  background:var(--bg-subtle); border:1px solid var(--border); border-radius:var(--radius-sm);
  outline:none; transition:border-color .15s, box-shadow .15s, background .15s;
  font-family:inherit;
}
.input:focus, select.input:focus, textarea.input:focus{
  border-color:var(--teal-600); background:#fff;
  box-shadow:0 0 0 3px rgba(11,122,168,.14);
}
.input-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:420px){ .input-row{ grid-template-columns:1fr; } }

.form-error{
  display:flex; gap:8px; align-items:flex-start;
  background:var(--danger-bg); border:1px solid rgba(214,69,90,.35); color:#9b2e3d;
  border-radius:var(--radius-sm); padding:10px 12px; font-size:12.5px; margin-bottom:16px;
}
/* Avisos dentro de las formas (class="alert", "alert alert-danger"): el de error en rojo, como .form-error. */
.alert{ border-radius:var(--radius-sm); padding:10px 12px; font-size:12.5px; margin-bottom:16px; }
.alert-danger{ background:var(--danger-bg); border:1px solid rgba(214,69,90,.35); color:#9b2e3d; }
.form-ok{
  display:flex; gap:8px; align-items:flex-start;
  background:var(--success-bg); border:1px solid rgba(27,138,90,.3); color:#155f3e;
  border-radius:var(--radius-sm); padding:10px 12px; font-size:12.5px; margin-bottom:16px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; font-size:13.5px; font-weight:600;
  border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer;
  transition:filter .12s, transform .05s, box-shadow .15s;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--teal-600); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--teal-700); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; }
.btn-dark{ background:var(--navy-900); color:#fff; }
.btn-dark:hover{ filter:brightness(1.15); }
.btn-ghost{ background:transparent; color:var(--text-700); border-color:var(--border-strong); }
.btn-ghost:hover{ background:var(--bg-subtle); }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-danger:hover{ filter:brightness(1.08); }
.btn-block{ width:100%; }
.btn-sm{ padding:7px 12px; font-size:12.5px; }
.btn-icon{ padding:8px; }

.auth-switch{ margin-top:18px; text-align:center; font-size:13px; color:var(--text-500); }
.auth-switch a{ color:var(--teal-600); font-weight:600; }

/* ---------------------------------------------------------------------- */
/* App shell: sidebar + topbar                                            */
/* ---------------------------------------------------------------------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:248px; flex:none;
  background:linear-gradient(180deg, var(--graphite-900), var(--graphite-800));
  color:#fff; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.sidebar-brand{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  padding:18px 16px 16px; border-bottom:1px solid rgba(255,255,255,.08);
}
/* Marca por default: los dos cuadrilateros de ICONS.logo directo sobre el fondo oscuro, con los azules
   del logo aclarados lo justo para que contrasten. Si Configuracion ERP tiene un logo cargado,
   applyEmpresaBranding() lo pone en un recuadro blanco (.con-logo) para que se lea con cualquier color. */
.sidebar-brand .mark{ flex:none; display:flex; align-items:center; justify-content:center; }
.sidebar-brand .mark svg{ width:58px; height:auto; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.sidebar-brand .mark .mk-a{ fill:#2a8fd0; }
.sidebar-brand .mark .mk-b{ fill:#8dc8d8; }
.sidebar-brand .mark.con-logo{ width:46px; height:46px; border-radius:10px; background:#fff; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.35); }
.sidebar-brand .mark img{ width:100%; height:100%; object-fit:contain; padding:4px; box-sizing:border-box; }
.sidebar-brand .txt{ min-width:0; padding-left:12px; border-left:1px solid rgba(255,255,255,.14); }
.sidebar-brand .txt .word{ font-size:19px; font-weight:800; letter-spacing:.14em; line-height:1; color:#fff; }
.sidebar-brand .txt .name{ margin-top:5px; font-size:10.5px; font-weight:600; line-height:1.3; letter-spacing:.02em; color:var(--steel-300); }

.sidebar-nav{ flex:1; overflow-y:auto; padding:14px 10px; }
.nav-section-label{
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--steel-400); padding:14px 10px 6px;
}
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--radius-sm);
  color:var(--steel-300); font-size:13px; font-weight:500;
  margin-bottom:2px; cursor:pointer; position:relative;
  border-left:3px solid transparent;
}
.nav-item svg{ width:17px; height:17px; flex:none; opacity:.85; }
.nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-item.active{
  background:rgba(32,147,196,.16); color:#fff;
  border-left-color:var(--teal-500);
}
.nav-item .tag-soon{
  margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.06em;
  background:rgba(255,255,255,.08); color:var(--steel-400);
  padding:2px 6px; border-radius:999px; text-transform:uppercase;
}

.sidebar-foot{ padding:12px 14px 16px; border-top:1px solid rgba(255,255,255,.08); }
.sidebar-foot .rev{ font-size:10.5px; color:var(--steel-400); font-family:var(--font-mono); }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  height:64px; flex:none;
  background:var(--bg-card); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; position:sticky; top:0; z-index:20;
}
.topbar-title h1{ font-size:16px; }
.topbar-title .crumb{ font-size:11.5px; color:var(--text-400); }
.topbar-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); border:1px solid var(--border); background:#fff; color:var(--text-500);
  cursor:pointer; position:relative;
}
.icon-btn:hover{ background:var(--bg-subtle); color:var(--text-900); }
.icon-btn svg{ width:16px; height:16px; }
.icon-btn.lang-btn{ font-size:11px; font-weight:800; letter-spacing:.02em; }

.notif-wrap{ position:relative; }
.notif-dot{
  position:absolute; top:-4px; right:-4px; min-width:15px; height:15px; padding:0 3px;
  border-radius:999px; background:var(--danger); color:#fff; font-size:9.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center; line-height:1; border:2px solid #fff;
}
.notif-panel{
  position:absolute; top:calc(100% + 8px); right:0; width:340px; max-height:420px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  z-index:30; overflow:hidden; display:flex; flex-direction:column;
}
/* [hidden] y .notif-panel tienen la misma especificidad (0,1,0); sin esta
   regla, el `display:flex` de arriba gana igual con el atributo puesto y el
   panel nunca se cierra. */
.notif-panel[hidden]{ display:none; }
.notif-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 14px; border-bottom:1px solid var(--border); font-size:12.5px; font-weight:700;
}
.notif-head button{
  background:none; border:none; color:var(--teal-500); font-size:11px; font-weight:600; cursor:pointer; padding:0;
}
.notif-list{ overflow-y:auto; }
/* Panel de cuenta (chip de usuario del topbar); reutiliza el contenedor de .notif-panel.
   Mismo lenguaje que el sidebar: cabecera graphite, acento teal, etiquetas en mayusculas. */
.user-chip{ transition:border-color .15s, box-shadow .15s; }
.user-chip:hover, .user-chip.open{ border-color:var(--teal-500); box-shadow:0 0 0 3px var(--teal-100); }
.chip-caret{ width:14px; height:14px; color:var(--text-400); transition:transform .18s ease; }
.user-chip.open .chip-caret{ transform:rotate(180deg); color:var(--teal-600); }

.cuenta-panel{
  width:320px; max-width:calc(100vw - 32px); max-height:none; border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:0 20px 44px rgba(20,27,36,.20), 0 2px 6px rgba(20,27,36,.08);
  animation:cuenta-in .18s cubic-bezier(.2,.8,.3,1); transform-origin:top right;
}
@keyframes cuenta-in{ from{ opacity:0; transform:translateY(-6px) scale(.97); } to{ opacity:1; transform:none; } }

.cuenta-head{
  position:relative; display:flex; align-items:center; gap:14px; padding:22px 18px 20px;
  color:#fff; overflow:hidden;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(32,147,196,.32) 0%, rgba(32,147,196,0) 55%),
    linear-gradient(180deg, var(--graphite-900), var(--graphite-800));
}
.cuenta-head::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg, var(--teal-500), var(--navy-700));
}
.cuenta-head .avatar{
  width:56px; height:56px; font-size:19px; overflow:hidden;
  box-shadow:0 0 0 2px var(--graphite-900), 0 0 0 4px var(--teal-500), 0 6px 16px rgba(0,0,0,.35);
}
.cuenta-id{ min-width:0; }
.cuenta-nombre{ font-size:15px; font-weight:700; line-height:1.25; letter-spacing:-.01em; overflow-wrap:anywhere; }
.cuenta-puesto{ font-size:12px; color:var(--steel-300); margin-top:2px; }
.cuenta-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:9px; }
.cuenta-user{
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; color:var(--steel-300);
  padding:2px 7px; border-radius:var(--radius-sm); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);
}
.cuenta-estado{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px;
  background:rgba(27,138,90,.22); color:#8fe3b8; font-size:10.5px; font-weight:700; letter-spacing:.02em;
}
.cuenta-estado::before{ content:''; width:6px; height:6px; border-radius:50%; background:#3ecf8e; box-shadow:0 0 0 3px rgba(62,207,142,.18); }
.cuenta-estado.off{ background:rgba(214,69,90,.22); color:#f4a9b4; }
.cuenta-estado.off::before{ background:var(--danger); box-shadow:none; }

.cuenta-seccion{
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-400); padding:14px 18px 4px;
}
.cuenta-datos, .cuenta-acciones{ padding:2px 8px 6px; }
.cuenta-acciones{ padding-bottom:10px; }
.cuenta-fila, .cuenta-accion{ display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:var(--radius); }
.cuenta-ico{
  flex:none; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--teal-100); color:var(--teal-600);
}
.cuenta-ico svg{ width:17px; height:17px; }
.cuenta-txt{ min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; text-align:left; }
.cuenta-txt span{ font-size:10.5px; font-weight:700; color:var(--text-400); text-transform:uppercase; letter-spacing:.08em; }
.cuenta-txt b{ font-size:12.5px; font-weight:600; color:var(--text-900); overflow-wrap:anywhere; }
.cuenta-txt em{ font-style:normal; font-weight:500; color:var(--text-500); }

.cuenta-accion{
  width:100%; border:1px solid var(--border); background:#fff; cursor:pointer; font:inherit;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.cuenta-accion .cuenta-ico{ background:var(--graphite-800); color:#fff; transition:background .15s; }
.cuenta-accion .cuenta-txt b{ font-size:13px; }
.cuenta-accion .cuenta-txt span{ text-transform:none; letter-spacing:0; font-weight:500; font-size:11.5px; }
.cuenta-flecha{ flex:none; color:var(--text-400); display:flex; transition:transform .15s, color .15s; }
.cuenta-flecha svg{ width:16px; height:16px; }
.cuenta-accion:hover{ border-color:var(--teal-500); background:var(--teal-100); box-shadow:var(--shadow-sm); }
.cuenta-accion:hover .cuenta-ico{ background:var(--teal-600); }
.cuenta-accion:hover .cuenta-flecha{ color:var(--teal-600); transform:translateX(2px); }
.cuenta-accion:focus-visible{ outline:2px solid var(--teal-500); outline-offset:2px; }

/* Modal de cambiar contraseña (abre desde el panel de cuenta) */
.cp-intro{
  display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:18px;
  border-radius:var(--radius); background:var(--bg-subtle); border:1px solid var(--border);
}
.cp-intro .cuenta-ico{ background:var(--graphite-800); color:#fff; }
.cp-intro p{ margin:0; font-size:12.5px; color:var(--text-500); line-height:1.4; }
.cp-sep{ height:1px; background:var(--border); margin:2px 0 18px; }
.cp-reqs{ list-style:none; margin:2px 0 0; padding:0; display:grid; gap:7px; }
.cp-reqs li{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-400); transition:color .15s; }
.cp-reqs li svg{
  width:16px; height:16px; padding:2px; border-radius:50%; flex:none;
  background:var(--bg-subtle); border:1px solid var(--border-strong); color:transparent;
  transition:background .15s, border-color .15s, color .15s;
}
.cp-reqs li.ok{ color:var(--success); }
.cp-reqs li.ok svg{ background:var(--success); border-color:var(--success); color:#fff; }
.notif-empty{ padding:22px 14px; text-align:center; color:var(--text-400); font-size:12.5px; }
.notif-item{
  display:flex; align-items:flex-start; gap:8px;
  padding:10px 14px; border-bottom:1px solid var(--border); cursor:pointer;
}
.notif-item:last-child{ border-bottom:none; }
.notif-item:hover{ background:var(--bg-subtle); }
.notif-item.unread{ background:var(--success-bg); }
.notif-item .body{ flex:1; min-width:0; }
.notif-item .msg{ font-size:12.5px; color:var(--text-900); line-height:1.35; }
.notif-item .when{ font-size:10.5px; color:var(--text-400); margin-top:4px; }
.notif-item .del{
  flex:none; width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  border:none; background:none; color:var(--text-400); cursor:pointer; border-radius:4px; font-size:14px; line-height:1;
}
.notif-item .del:hover{ background:var(--danger-bg); color:var(--danger); }
.status-dot{
  width:8px; height:8px; border-radius:50%; background:var(--success); display:inline-block;
  box-shadow:0 0 0 2px var(--success-bg);
}
.user-chip{
  display:flex; align-items:center; gap:9px; padding:5px 10px 5px 6px;
  border:1px solid var(--border); border-radius:999px; cursor:pointer; background:#fff;
}
.avatar{
  width:26px; height:26px; border-radius:50%;
  background:linear-gradient(155deg, var(--teal-500), var(--navy-800));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; flex:none;
}
.user-chip .who{ line-height:1.15; }
/* Foto de perfil dentro de cualquier circulo de avatar (ver avatarHtml en app.js). */
.avatar-foto{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.user-chip .who .n{ font-size:12.5px; font-weight:600; }
.user-chip .who .r{ font-size:10.5px; color:var(--text-400); }

.content{ padding:24px; max-width:1400px; width:100%; margin:0 auto; }

/* ---------------------------------------------------------------------- */
/* Componentes reutilizables de contenido                                  */
/* ---------------------------------------------------------------------- */
.page-head{ margin-bottom:20px; }
.page-head h2{ font-size:19px; }
.page-head p{ color:var(--text-500); font-size:13px; margin-top:4px; }

.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
@media (max-width:1000px){ .kpi-grid{ grid-template-columns:repeat(2,1fr); } }
.kpi-card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.kpi-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--teal-600);
}
.kpi-card .label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-400); font-weight:700; }
.kpi-card .value{ font-size:26px; font-weight:800; margin-top:6px; font-family:var(--font-mono); }
.kpi-card .foot{ font-size:11.5px; color:var(--text-500); margin-top:4px; }
.kpi-card.warn::before{ background:var(--warning); }
.kpi-card.danger::before{ background:var(--danger); }
.kpi-card.ok::before{ background:var(--success); }

.card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.card + .card{ margin-top:16px; }
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px; border-bottom:1px solid var(--border); background:var(--bg-subtle);
}
.card-head h3{ font-size:13.5px; }
.card-head .actions{ display:flex; gap:8px; }
.card-body{ padding:18px; }
.card-body.pad-0{ padding:0; }

.info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px; }
@media (max-width:900px){ .info-grid{ grid-template-columns:1fr; } }
.info-card{
  border:1px solid var(--border); border-left:3px solid var(--teal-600);
  border-radius:var(--radius-sm); padding:13px 15px; background:var(--bg-card);
}
.info-card h4{ font-size:12.5px; margin-bottom:5px; }
.info-card p{ font-size:12px; color:var(--text-500); line-height:1.5; }

.toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 18px; border-bottom:1px solid var(--border);
}
.toolbar .search{ flex:1; min-width:200px; position:relative; }
.toolbar .search svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--text-400); }
.toolbar .search input{ padding-left:34px; }
.toolbar select.input{ width:auto; }

table.data-table{ width:100%; border-collapse:collapse; font-size:12.8px; }
table.data-table thead th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-400); font-weight:700; padding:10px 16px; background:var(--bg-subtle);
  border-bottom:1px solid var(--border); white-space:nowrap;
}
table.data-table tbody td{ padding:11px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.data-table tbody tr:last-child td{ border-bottom:none; }
table.data-table tbody tr:hover{ background:var(--bg-subtle); }
.sku{ font-family:var(--font-mono); font-weight:600; color:var(--navy-800); font-size:12px; }

.badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.02em;
}
.badge-ok{ background:var(--success-bg); color:var(--success); }
.badge-warn{ background:var(--warning-bg); color:var(--warning); }
.badge-danger{ background:var(--danger-bg); color:var(--danger); }
.badge-neutral{ background:var(--bg-subtle); color:var(--text-500); border:1px solid var(--border); }
.badge-navy{ background:var(--navy-800); color:#fff; }

.row-actions{ display:flex; gap:6px; }
.row-actions button{ background:none; border:1px solid var(--border); border-radius:6px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-500); flex:none; }
.row-actions button:hover{ background:var(--bg-subtle); color:var(--text-900); }
.row-actions button.danger:hover{ background:var(--danger-bg); color:var(--danger); border-color:rgba(214,69,90,.35); }
.row-actions.row-actions-compact{ flex-wrap:wrap; gap:4px; max-width:64px; }
.row-actions.row-actions-compact button{ width:24px; height:24px; }
.row-actions.row-actions-compact button svg{ width:14px; height:14px; }

/* Ancho automatico: cada columna mide al menos su palabra mas larga, asi el
   texto solo baja de renglon entre palabras y nunca a mitad de una. */
table.table-historico{ table-layout:auto; }
table.table-historico thead th{ padding:9px 6px; font-size:9px; letter-spacing:.02em; white-space:normal; word-break:normal; overflow-wrap:normal; text-align:center; vertical-align:middle; }
table.table-historico tbody td{ padding:9px 6px; font-size:11.5px; word-break:normal; overflow-wrap:normal; text-align:center; vertical-align:middle; }
table.table-historico .badge{ white-space:nowrap; }
table.table-historico .row-actions{ justify-content:center; margin:0 auto; }
.historico-paginador{ display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; padding:10px 14px; font-size:12px; color:var(--text-500); border-top:1px solid var(--border); }
.historico-paginador span:first-child{ margin-right:auto; }

.empty-state{ padding:40px 20px; text-align:center; color:var(--text-400); font-size:13px; }
.empty-state svg{ width:34px; height:34px; margin-bottom:10px; opacity:.5; }

/* Modal */
.modal-overlay{
  position:fixed; inset:0; background:rgba(20,27,36,.55); backdrop-filter:blur(2px);
  display:flex; align-items:flex-start; justify-content:center; padding:40px 16px;
  z-index:100; overflow-y:auto;
}
.modal{
  width:100%; max-width:560px; background:#fff; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border);
  background:var(--graphite-900); color:#fff;
}
.modal-head h3{ font-size:14px; }
.modal-head button{ background:none; border:none; color:var(--steel-300); cursor:pointer; }
.modal-body{ padding:20px; max-height:70vh; overflow-y:auto; }
.modal-foot{ display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--border); background:var(--bg-subtle); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:500px){ .grid-2{ grid-template-columns:1fr; } }

.pill-tabs{ display:flex; gap:6px; padding:4px; background:var(--bg-subtle); border:1px solid var(--border); border-radius:999px; width:fit-content; }
.pill-tab{ padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--text-500); cursor:pointer; }
.pill-tab.active{ background:var(--navy-900); color:#fff; }

.toast-wrap{ position:fixed; top:18px; right:18px; z-index:200; display:flex; flex-direction:column; gap:8px; }
.toast{
  min-width:260px; max-width:360px; background:var(--graphite-900); color:#fff;
  padding:12px 14px; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);
  font-size:12.8px; display:flex; gap:10px; align-items:flex-start;
  border-left:3px solid var(--teal-500);
  animation:toast-in .18s ease-out;
}
.toast.error{ border-left-color:var(--danger); }
.toast.success{ border-left-color:var(--success); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }

.module-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:1000px){ .module-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .module-grid{ grid-template-columns:1fr; } }
.module-card{
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:10px;
  transition:transform .12s, box-shadow .12s; position:relative;
}
.module-card:not(.soon):hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.module-card .icn{
  width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:var(--teal-100); color:var(--teal-700);
}
.module-card .icn svg{ width:19px; height:19px; }
.module-card h3{ font-size:14px; }
.module-card p{ font-size:12px; color:var(--text-500); line-height:1.5; flex:1; }
.module-card.soon{ opacity:.72; }
.module-card .soon-flag{
  position:absolute; top:14px; right:14px; font-size:9.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-400); background:var(--bg-subtle); border:1px solid var(--border);
  padding:2px 7px; border-radius:999px;
}

.progress{ height:7px; border-radius:99px; background:var(--bg-subtle); border:1px solid var(--border); overflow:hidden; }
.progress > span{ display:block; height:100%; background:var(--teal-600); }

.helper-bar{
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:var(--teal-100); color:var(--teal-700); font-size:12px; border-radius:var(--radius-sm);
  margin-bottom:16px;
}

/* ---------------------------------------------------------------------- */
/* Ing. de Calidad: barras horizontales, heatmaps, radar, formularios      */
/* ---------------------------------------------------------------------- */
.bar-row{ display:flex; align-items:center; gap:10px; padding:6px 0; }
.bar-row .label{ width:230px; flex:none; font-size:12.3px; font-weight:600; color:var(--text-700); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-row .track{ flex:1; height:9px; background:var(--bg-subtle); border:1px solid var(--border); border-radius:99px; overflow:hidden; }
.bar-row .track > span{ display:block; height:100%; background:var(--teal-600); border-radius:99px; }
.bar-row.danger .track > span{ background:var(--danger); }
.bar-row.warn .track > span{ background:var(--warning); }
.bar-row .val{ width:46px; flex:none; text-align:right; font-size:12px; font-family:var(--font-mono); font-weight:700; }

.heat-table{ border-collapse:collapse; width:100%; font-size:12px; }
.heat-table th{ text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-400); font-weight:700; padding:8px 10px; background:var(--bg-subtle); border-bottom:1px solid var(--border); white-space:nowrap; }
.heat-table th:not(:first-child){ text-align:center; }
.heat-table td{ padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
.heat-table td.heat-cell{ text-align:center; font-weight:700; font-family:var(--font-mono); font-size:11.5px; border-radius:4px; }
.heat-good{ background:var(--success-bg); color:var(--success); }
.heat-warn{ background:var(--warning-bg); color:var(--warning); }
.heat-bad{ background:var(--danger-bg); color:var(--danger); }
.heat-row-label{ font-weight:700; font-size:11.5px; }
.heat-row-sub{ font-size:10.5px; color:var(--text-400); font-weight:500; }
.heat-row-total td{ border-top:2px solid var(--border-strong); }
.heat-row-total td.heat-cell{ font-size:12.5px; }

.attn-card{ border:1px solid var(--border); border-left:3px solid var(--danger); border-radius:var(--radius-sm); padding:10px 14px; background:#fff; }
.attn-card .row1{ display:flex; justify-content:space-between; align-items:baseline; }
.attn-card .name{ font-weight:700; font-size:12.5px; }
.attn-card .pct{ font-family:var(--font-mono); font-weight:800; font-size:13px; color:var(--danger); }
.attn-card .crit{ font-size:11px; color:var(--text-500); margin-top:2px; }
.attn-list{ display:flex; flex-direction:column; gap:8px; }

.radar-wrap{ display:flex; align-items:center; justify-content:center; padding:6px; }

.cat-bar{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--graphite-800); color:#fff; padding:9px 14px;
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  border-radius:6px 6px 0 0; margin-top:14px;
}
.cat-bar .pct{ font-family:var(--font-mono); font-size:12.5px; }
.cat-bar .sub{ font-weight:500; text-transform:none; letter-spacing:0; color:var(--steel-300); font-size:11px; margin-left:8px; }

table.scale-table{ width:100%; border-collapse:collapse; font-size:12px; }
table.scale-table th{ text-align:left; font-size:10px; text-transform:uppercase; color:var(--text-400); font-weight:700; padding:7px 8px; border-bottom:1px solid var(--border); background:var(--bg-subtle); }
table.scale-table td{ padding:8px; border-bottom:1px solid var(--border); vertical-align:top; }
table.scale-table td.scale-cell{ text-align:center; white-space:nowrap; }
table.scale-table input[type=radio]{ accent-color:var(--teal-600); width:15px; height:15px; cursor:pointer; }
table.scale-table .act-name{ font-weight:600; font-size:12px; }
table.scale-table .act-desc{ font-size:11px; color:var(--text-500); margin-top:2px; }

.scale-legend{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-bottom:14px; }
.scale-legend .lg{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 9px; background:var(--bg-subtle); }
.scale-legend .lg b{ display:block; font-size:12px; color:var(--navy-800); }
.scale-legend .lg span{ font-size:10px; color:var(--text-500); line-height:1.3; display:block; margin-top:2px; }
@media (max-width:700px){ .scale-legend{ grid-template-columns:repeat(3,1fr); } }

.doc-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px 18px; margin-bottom:16px;
}
.doc-header .brand{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-500); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.doc-header .title{ font-size:16px; font-weight:800; letter-spacing:.02em; text-align:center; flex:1; }
.doc-header .meta{ display:flex; gap:10px; }
.doc-header .meta .field label{ font-size:9.5px; }
.doc-header .meta .field input{ width:90px; padding:6px 8px; font-size:12px; }

.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.stat-strip{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 16px; }
.stat-chip{ border:1px solid var(--border); border-radius:999px; padding:5px 12px; font-size:11.5px; background:var(--bg-subtle); color:var(--text-700); }
.stat-chip b{ font-family:var(--font-mono); margin-right:4px; }

/* Panel con scroll propio (Historico de auditorias / Catalogo de areas) */
.scroll-panel{ max-height:560px; overflow-y:auto; }

/* Catalogo de areas como lista de tarjetas */
.area-list{ display:flex; flex-direction:column; gap:10px; }
.area-card{
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px 13px;
  background:#fff; display:flex; flex-direction:column; gap:5px;
}
.area-card .row1{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.area-card .name{ font-weight:700; font-size:12.8px; color:var(--text-900); }
.area-card .depto{ font-size:11px; color:var(--teal-600); font-weight:600; }
.area-card .row2{ display:flex; justify-content:space-between; align-items:center; margin-top:2px; }

/* ------------------------------------------------------------------ */
/* Introduccion de Nuevos Proyectos: catalogo, Gantt e hitos            */
/* ------------------------------------------------------------------ */
.proyecto-list{ display:flex; flex-direction:column; gap:10px; }
.proyecto-card{
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px;
  background:#fff; display:flex; flex-direction:column; gap:8px; cursor:pointer; transition:box-shadow .15s;
}
.proyecto-card:hover{ box-shadow:var(--shadow-sm); border-color:var(--border-strong); }
.proyecto-card .row1{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.proyecto-card .codigo{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-400); font-weight:700; letter-spacing:.03em; }
.proyecto-card .name{ font-weight:700; font-size:13px; color:var(--text-900); margin-top:2px; }
.proyecto-card .sub{ font-size:11px; color:var(--text-500); }
.proyecto-card .badges{ display:flex; gap:6px; flex-wrap:wrap; align-items:flex-start; }
.proyecto-card .row2{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:11px; color:var(--text-500); }
.proyecto-card .row-actions{ flex:none; }
.proyecto-progress{ flex:1; height:7px; border-radius:999px; background:var(--bg-subtle); overflow:hidden; border:1px solid var(--border); }
.proyecto-progress span{ display:block; height:100%; border-radius:999px; background:var(--teal-600); }

.hito-list{ display:flex; flex-direction:column; gap:0; }
.hito-item{ display:flex; gap:10px; padding:10px 2px; border-bottom:1px solid var(--border); }
.hito-item:last-child{ border-bottom:none; }
.hito-item .dot{ width:9px; height:9px; border-radius:50%; margin-top:4px; flex:none; background:var(--text-400); }
.hito-item.venc .dot{ background:var(--danger); }
.hito-item.prox .dot{ background:var(--warning); }
.hito-item .txt{ flex:1; min-width:0; }
.hito-item .n{ font-size:12px; font-weight:600; color:var(--text-900); }
.hito-item .p{ font-size:10.5px; color:var(--text-400); margin-top:1px; }
.hito-item .f{ font-size:10.5px; font-weight:700; white-space:nowrap; }

/* Gantt dinamico (HTML/CSS, sin librerias): filas con una barra posicionada
   por porcentaje entre la fecha minima y maxima del rango visible. Un overlay
   absoluto (alineado con el inicio de la pista, tras la columna de labels)
   dibuja la linea de "hoy" y los diamantes de hitos sobre todas las filas. */
.gantt-wrap{ padding:6px 4px 2px; }
.gantt-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.gantt-container{ position:relative; }
.gantt{ display:flex; flex-direction:column; }
.gantt-row{ display:flex; align-items:center; min-height:36px; border-bottom:1px solid var(--border); transition:background .1s; }
.gantt-row:hover{ background:rgba(11,122,168,.045); }
.gantt-row:last-child{ border-bottom:none; }
.gantt-row .label{ width:230px; flex:none; padding:0 12px 0 8px; }
.gantt-row .label .n{ font-size:11.5px; font-weight:700; color:var(--text-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gantt-row .label .s{ font-size:10px; color:var(--text-400); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gantt-track{ position:relative; flex:1; height:26px; border-left:1px solid var(--border); }
.gantt-bar{ position:absolute; top:4px; height:18px; border-radius:4px; min-width:6px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.gantt-bar .fill{ position:absolute; left:0; top:0; bottom:0; background:rgba(255,255,255,.35); }
.gantt-bar .pct{ position:absolute; inset:0; display:flex; align-items:center; padding:0 7px; font-size:9.5px; font-weight:700; color:#fff; white-space:nowrap; text-shadow:0 1px 1px rgba(0,0,0,.25); }
.gantt-bar.pendiente{ opacity:.55; }
.gantt-bar.bloqueada{ opacity:.55; background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 4px, transparent 4px 8px); }
.gantt-header{ display:flex; border-bottom:1px solid var(--border); background:var(--bg-card); }
.gantt-header .label{ width:230px; flex:none; }
.gantt-header .months{ position:relative; flex:1; height:26px; border-left:1px solid var(--border); }
.gantt-header .months span{ position:absolute; top:0; font-size:10.5px; color:var(--text-700); font-weight:700; text-transform:capitalize; border-left:1px solid var(--border); padding:6px 0 0 6px; height:100%; box-sizing:border-box; }
.gantt-overlay{ position:absolute; left:230px; right:0; top:0; bottom:0; pointer-events:none; }
.gantt-today-line{ position:absolute; top:0; bottom:0; width:0; border-left:2px solid var(--danger); z-index:2; }
.gantt-today-line .tag{ position:absolute; top:4px; left:-14px; font-size:8.5px; font-weight:700; color:#fff; background:var(--danger); padding:1px 5px; border-radius:8px; white-space:nowrap; }
.gantt-milestone{
  position:absolute; top:19px; width:12px; height:12px; transform:translateX(-50%) rotate(45deg);
  background:var(--warning); border:2px solid #fff; box-shadow:0 0 0 1px var(--border-strong); cursor:default; z-index:3;
  pointer-events:auto;
}
.gantt-milestone.cumplido{ background:var(--success); }
.gantt-milestone.vencido{ background:var(--danger); }
.gantt-empty{ padding:30px; text-align:center; color:var(--text-400); font-size:12.5px; }

/* Gantt dinamico interactivo (drag / resize / zoom / subprocesos), con el aspecto del Gantt de
   YouTrack: lista a la izquierda, encabezado de fechas en dos niveles, cuadricula con fines de semana
   sombreados, barras claras con el avance en color solido y el nombre a la derecha de la barra.
   Las filas de la tabla y del timeline miden lo mismo (36 px); los separadores son box-shadow para
   que un borde no desalinee una fila con su barra. */
.dgantt-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:0 16px 12px; }
.dgantt-scales{ display:inline-flex; border:1px solid var(--border-strong); border-radius:var(--radius-sm); overflow:hidden; background:var(--bg-card); }
.dgantt-scales button{ border:none; background:none; padding:6px 11px; font:inherit; font-size:11.5px; font-weight:600; color:var(--text-700); cursor:pointer; }
.dgantt-scales button + button{ border-left:1px solid var(--border); }
.dgantt-scales button:hover{ background:var(--bg-subtle); }
.dgantt-scales button.active{ background:var(--navy-800); color:#fff; }
.dgantt-legend{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; padding:0 16px 10px; font-size:10.5px; color:var(--text-500); }
.dgantt-legend .sw{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:-1px; }
.dgantt-body{ display:flex; align-items:flex-start; border-top:1px solid var(--border); overflow:hidden; }
.dgantt-left{ flex:0 0 48%; max-width:680px; overflow:hidden; border-right:1px solid var(--border-strong); background:var(--bg-card); }
.dgantt-left table{ margin:0; width:100%; table-layout:fixed; }
.dgantt-left table th, .dgantt-left table td{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dgantt-left table.dg-table thead th{
  position:sticky; top:0; z-index:2; height:48px; box-sizing:border-box; padding:0 8px; vertical-align:bottom; padding-bottom:9px;
  font-size:10px; background:var(--bg-card); border-bottom:none; box-shadow:inset 0 -1px 0 var(--border-strong);
}
.dgantt-left table.dg-table tbody td{ height:36px; box-sizing:border-box; padding:0 8px; font-size:11.5px; border-bottom:none; box-shadow:inset 0 -1px 0 var(--border); }
.dgantt-left table tr{ cursor:pointer; }
.dgantt-left table tbody tr:hover{ background:transparent; }
.dgantt-left table tr.hover td{ background:rgba(11,122,168,.05); }
.dgantt-left table tr.selected td{ background:var(--teal-100); }
.dgantt-left table tr.dg-row-tarea td{ font-size:11.5px; color:var(--text-500); }
.dgantt-left table tr.dg-row-addtarea td{ color:var(--teal-600); font-size:11.5px; font-weight:600; cursor:pointer; }
.dgantt-left table tr.dg-row-addtarea:hover td{ color:var(--teal-700); }
.dg-id{ font-size:10.5px; font-weight:700; color:var(--teal-600); font-variant-numeric:tabular-nums; }
.dg-cell-proc{ display:flex; align-items:center; gap:4px; min-width:0; }
.dg-cell-proc .dg-truncate{ min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Agarradera para cambiar el orden de fases y subfases (aparece al pasar el mouse por la fila). */
.dg-grip{ flex-shrink:0; width:10px; margin-left:-4px; font-size:11px; line-height:1; letter-spacing:-3px; color:var(--text-400); cursor:grab; user-select:none; opacity:0; }
.dgantt-left tr.hover .dg-grip, .dgantt-left tr.dg-reordenando .dg-grip{ opacity:1; }
.dg-id-grip{ display:inline-block; min-width:14px; cursor:grab; user-select:none; }
.dg-id-grip .dg-id-asa{ display:none; font-size:11px; letter-spacing:-3px; color:var(--text-400); }
.dgantt-left tr.hover .dg-id-grip .dg-id-num, .dgantt-left tr.dg-reordenando .dg-id-grip .dg-id-num{ display:none; }
.dgantt-left tr.hover .dg-id-grip .dg-id-asa, .dgantt-left tr.dg-reordenando .dg-id-grip .dg-id-asa{ display:inline; }
.dgantt-left table tr.dg-reordenando td, .dgantt-row.dg-reordenando{ background:var(--teal-100); box-shadow:inset 0 0 0 1px var(--teal-600); }
body.dg-reordenando-body, body.dg-reordenando-body *{ cursor:grabbing !important; user-select:none; }
.dg-input-nueva{ width:calc(100% - 22px); height:24px; box-sizing:border-box; padding:0 6px; font:inherit; font-weight:400; color:var(--text-700); border:1px solid var(--teal-600); border-radius:4px; outline:none; background:var(--bg-card); }
.dg-resp{ display:flex; align-items:center; gap:6px; min-width:0; }
.dg-resp .dg-truncate{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar-circle.xs{ width:20px; height:20px; font-size:8px; background:linear-gradient(155deg, var(--teal-500), var(--navy-800)); }
.dg-toggle{ flex:none; background:none; border:none; cursor:pointer; width:18px; height:18px; padding:0; border-radius:3px; color:var(--text-700); font-size:13px; line-height:1; display:inline-flex; align-items:center; justify-content:center; }
.dg-toggle:hover{ color:var(--teal-700); background:var(--teal-100); }
/* Una fase sin subprocesos tambien se expande (para agregarle el primero), solo se ve mas tenue. */
.dg-toggle.dg-toggle-empty{ opacity:.45; }
.dgantt-right{ flex:1; overflow-x:auto; overflow-y:hidden; position:relative; }

/* Encabezado de la linea de tiempo: periodo que agrupa (arriba) y unidad de la escala (abajo). */
.dg-hdr{ position:sticky; top:0; z-index:6; height:48px; background:var(--bg-card); box-shadow:inset 0 -1px 0 var(--border-strong); }
.dg-hdr-top, .dg-hdr-bottom{ position:relative; }
.dg-hdr-top{ height:22px; box-shadow:inset 0 -1px 0 var(--border); }
.dg-hdr-bottom{ height:26px; }
.dg-hdr-cell{
  position:absolute; top:0; bottom:0; box-sizing:border-box; display:flex; align-items:center; gap:3px; padding:0 6px;
  border-left:1px solid var(--border); font-size:10px; color:var(--text-500); white-space:nowrap; overflow:hidden;
}
.dg-hdr-cell i{ font-style:normal; color:var(--text-400); }
.dg-hdr-top .dg-hdr-cell{ font-size:10.5px; font-weight:700; color:var(--text-700); text-transform:capitalize; }
.dg-hdr-bottom .dg-hdr-cell{ text-transform:capitalize; }
.dg-hdr-cell.dia{ flex-direction:column; justify-content:center; gap:0; padding:0; line-height:1.1; }
.dg-hdr-cell.dia b{ font-size:10.5px; font-weight:600; color:var(--text-700); }
.dg-hdr-cell.dia i{ font-size:8.5px; }
.dg-hdr-cell.finde{ background:var(--bg-subtle); }
.dg-hdr-cell.hora{ justify-content:center; padding:0; font-size:9px; }
.dg-hdr-cell.hoy{ color:var(--danger); font-weight:700; }
.dg-hdr-cell.hoy b, .dg-hdr-cell.hoy i{ color:var(--danger); }
.dg-hdr-cell.dia.hoy b{ background:var(--danger); color:#fff; border-radius:8px; padding:0 4px; }

.dgantt-rows{ position:relative; }
.dg-grid{ position:absolute; inset:0; pointer-events:none; }
.dg-grid-line{ position:absolute; top:0; bottom:0; width:0; border-left:1px solid var(--border); opacity:.7; }
.dg-grid-finde{ position:absolute; top:0; bottom:0; background:rgba(148,162,179,.10); }
.dgantt-row{ position:relative; height:36px; box-shadow:inset 0 -1px 0 var(--border); }
.dgantt-row.hover{ background:rgba(11,122,168,.05); }
.dgantt-row.selected{ background:rgba(11,122,168,.10); }

/* Barras: fondo claro del color de avance, parte avanzada en solido y el nombre a la derecha. */
.dgantt-bar{ --dg-color:var(--steel-400); position:absolute; top:5px; height:26px; border-radius:5px; }
.dgantt-bar.dg-bar-tarea{ top:6px; height:24px; border-radius:4px; }
.dgantt-bar .body{
  position:absolute; inset:0; border-radius:inherit; overflow:hidden; cursor:grab;
  background:#e8ecf1; background:color-mix(in srgb, var(--dg-color) 24%, #fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--dg-color) 60%, #fff);
}
.dgantt-bar .body:active{ cursor:grabbing; }
.dgantt-bar .fill{ position:absolute; left:0; top:0; bottom:0; background:var(--dg-color); pointer-events:none; }
.dgantt-bar:hover .body{ box-shadow:inset 0 0 0 1px var(--dg-color), 0 1px 4px rgba(0,0,0,.18); }
.dg-bar-label{
  position:absolute; left:100%; top:50%; transform:translateY(-50%); margin-left:10px; pointer-events:none;
  font-size:11px; font-weight:600; color:var(--text-900); white-space:nowrap;
}
.dg-bar-label span{ font-weight:500; color:var(--text-400); margin-left:3px; }
.dg-bar-tarea .dg-bar-label{ font-weight:500; color:var(--text-700); font-size:10.5px; }
/* Fase con subprocesos: barra resumen delgada con los extremos en punta hacia abajo. */
.dgantt-bar.dg-bar-resumen{ top:9px; height:13px; border-radius:2px 2px 0 0; }
.dgantt-bar.dg-bar-resumen .body{ overflow:visible; box-shadow:none; background:color-mix(in srgb, var(--dg-color) 35%, #fff); }
.dgantt-bar.dg-bar-resumen .fill{ border-radius:2px 0 0 0; }
.dgantt-bar.dg-bar-resumen .body::before, .dgantt-bar.dg-bar-resumen .body::after{
  content:''; position:absolute; top:100%; width:0; height:0; border-top:6px solid var(--dg-color);
}
.dgantt-bar.dg-bar-resumen .body::before{ left:0; border-right:6px solid transparent; }
.dgantt-bar.dg-bar-resumen .body::after{ right:0; border-left:6px solid transparent; }
.dgantt-bar.dg-bar-resumen .dg-bar-label{ font-weight:700; }
.dgantt-row.selected .dgantt-bar .body{ box-shadow:inset 0 0 0 1px var(--dg-color), 0 0 0 2px var(--teal-600); }
.dgantt-bar .handle{ position:absolute; top:-2px; bottom:-2px; width:8px; cursor:ew-resize; z-index:2; }
.dgantt-bar .handle.l{ left:-2px; }
.dgantt-bar .handle.r{ right:-2px; }
/* Las fechas de una fase con subfases salen de ellas: su barra resumen solo se mueve, no se estira. */
.dgantt-bar.dg-bar-resumen .handle{ display:none; }
.dgantt-bar.dragging .body{ opacity:.9; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.dgantt-bar.dragging{ z-index:5; }
.dgantt-today{ position:absolute; top:0; bottom:0; width:0; border-left:2px solid var(--danger); z-index:3; pointer-events:none; opacity:.85; }
.dgantt-today .tag{ position:absolute; top:3px; left:-15px; font-size:8.5px; font-weight:700; color:#fff; background:var(--danger); padding:1px 5px; border-radius:8px; white-space:nowrap; }
.dgantt-footer{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:8px 16px; font-size:10.5px; color:var(--text-400); border-top:1px solid var(--border); }

/* Conectores para crear enlaces visuales entre barras (clic y arrastra) */
.dg-conn{ position:absolute; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:#fff; border:2px solid var(--steel-400); cursor:crosshair; z-index:4; opacity:0; transition:opacity .12s, transform .12s, background .12s, border-color .12s; }
.dgantt-bar:hover .dg-conn, .dg-conn.connecting{ opacity:1; }
.dg-conn:hover{ transform:scale(1.4); background:var(--teal-600); border-color:var(--teal-600); }
.dg-conn.connecting{ background:var(--teal-600); border-color:var(--teal-600); }
.dg-conn-l{ left:-5px; }
.dg-conn-r{ right:-5px; }
.dgantt-links-svg{ position:absolute; top:0; left:0; height:100%; pointer-events:none; z-index:2; overflow:visible; }
.dg-link-path{ fill:none; stroke:var(--text-500); stroke-width:1.3; opacity:.75; cursor:pointer; pointer-events:stroke; }
.dg-link-path:hover{ stroke:var(--danger); opacity:1; stroke-width:2; }
.dg-link-temp{ stroke:var(--teal-600); stroke-width:2; stroke-dasharray:4,3; opacity:.8; pointer-events:none; }

/* Ver en grande: la tarjeta del Gantt cubre la ventana; el timeline tiene scroll en ambos ejes con el
   encabezado de fechas fijo, y la tabla de la izquierda sigue el scroll vertical (ver proyectos.html). */
body.dg-fullscreen-on{ overflow:hidden; }
.card.dg-fullscreen{ position:fixed; inset:0; z-index:90; margin:0; border-radius:0; display:flex; flex-direction:column; overflow:hidden; }
.card.dg-fullscreen > .card-head{ flex:none; }
.card.dg-fullscreen #gantt-body{ flex:1; min-height:0; display:flex; flex-direction:column; overflow:auto; }
.card.dg-fullscreen #gantt-body > *{ flex:none; }
.card.dg-fullscreen #gantt-body > #dg-inner{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.card.dg-fullscreen #dg-inner > *{ flex:none; }
.card.dg-fullscreen #dg-inner > .dgantt-body{ flex:1 1 auto; min-height:0; align-items:stretch; }
.card.dg-fullscreen .dgantt-left{ overflow:hidden; }
.card.dg-fullscreen .dgantt-right{ overflow:auto; }
.card.dg-fullscreen .gantt-header{ position:sticky; top:0; z-index:4; }

/* Formularios inline compactos (agregar fase / tarea / hito dentro del modal) */
.inline-form{ border:1px dashed var(--border-strong); border-radius:var(--radius-sm); padding:12px; margin:10px 0; background:var(--bg-subtle); }
.inline-form .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.inline-form .grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:640px){ .inline-form .grid-3, .inline-form .grid-4{ grid-template-columns:1fr 1fr; } }
.inline-form .actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }

.fase-card{ border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:10px; overflow:hidden; }
.fase-head{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg-subtle); flex-wrap:wrap; }
.fase-head .n{ font-weight:700; font-size:12.5px; flex:1; min-width:160px; }
.fase-head .dates{ font-size:11px; color:var(--text-500); }
.fase-body{ padding:10px 12px; }
.fase-body.hidden{ display:none; }

.mini-table{ width:100%; border-collapse:collapse; font-size:11.5px; }
.mini-table th{ text-align:left; font-size:9.5px; text-transform:uppercase; color:var(--text-400); padding:6px 8px; border-bottom:1px solid var(--border); }
.mini-table td{ padding:6px 8px; border-bottom:1px solid var(--border); vertical-align:middle; }
.mini-table tr:last-child td{ border-bottom:none; }
.mini-table select.input, .mini-table input.input{ padding:4px 6px; font-size:11px; }
.mini-input-pct{ width:56px; }

/* ------------------------------------------------------------------ */
/* Recursos Humanos: directorio, organigrama, vacaciones y solicitudes  */
/* ------------------------------------------------------------------ */
.avatar-circle{
  width:36px; height:36px; border-radius:50%; background:var(--navy-800); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex:none;
}
.avatar-circle.sm{ width:28px; height:28px; font-size:10.5px; }
.avatar-circle.lg{ width:72px; height:72px; font-size:22px; }
.emp-foto-row{ display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.emp-foto-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.emp-foto-actions .hint{ width:100%; font-size:11px; color:var(--text-400); }

.empleado-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:10px; }
.empleado-card{
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px;
  background:#fff; display:flex; flex-direction:column; gap:9px; cursor:pointer; transition:box-shadow .15s;
}
.empleado-card:hover{ box-shadow:var(--shadow-sm); border-color:var(--border-strong); }
.empleado-card .row1{ display:flex; align-items:center; gap:10px; }
.empleado-card .row1 .info{ flex:1; min-width:0; }
.empleado-card .n{ font-size:12.8px; font-weight:700; color:var(--text-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.empleado-card .p{ font-size:11px; color:var(--text-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.empleado-card .badges{ display:flex; gap:6px; flex-wrap:wrap; }
.empleado-card .vac{ display:flex; align-items:center; gap:8px; font-size:10.5px; color:var(--text-500); }

.vac-bar{ flex:1; height:7px; border-radius:999px; background:var(--bg-subtle); overflow:hidden; border:1px solid var(--border); }

/* Documentos: lista compacta de empleados para elegir de quien ver el expediente. */
.doc-emp-row{ display:flex; align-items:center; gap:9px; padding:9px 14px; cursor:pointer; border-bottom:1px solid var(--border); }
.doc-emp-row:hover{ background:var(--bg-subtle); }
.doc-emp-row.activo{ background:var(--teal-100); }
.doc-emp-row .info{ min-width:0; flex:1; }
.doc-emp-row .n{ font-size:12.5px; font-weight:700; color:var(--text-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.doc-emp-row .p{ font-size:10.5px; color:var(--text-500); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vac-bar span{ display:block; height:100%; border-radius:999px; background:var(--teal-600); }

/* Organigrama: diagrama jerarquico clasico con tarjetas tipo listón,
   avatar circular y lineas conectoras dibujadas con CSS puro (sin JS/SVG).
   Cada nivel de la jerarquia recibe un color propio (degradado navy -> teal)
   para que la profundidad se lea de un vistazo. */
#org-tree-wrap{
  background:
    radial-gradient(var(--border) 1px, transparent 1px) 0 0/18px 18px,
    var(--bg-subtle);
  border-radius:var(--radius-lg);
  overflow:auto;
  max-height:70vh;
}
.oc-forest{ display:flex; gap:56px; justify-content:center; width:max-content; margin:0 auto; padding:28px 22px 18px; }
.oc-branch{ display:flex; flex-direction:column; align-items:center; }

.oc-card{
  min-width:172px; max-width:210px; border-radius:12px; overflow:hidden; border:1px solid var(--border);
  background:#fff; box-shadow:var(--shadow-sm); transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.oc-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--border-strong); }
.oc-card .oc-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 16px 8px 13px; color:#fff; font-size:11.3px; font-weight:700;
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);
}
.oc-card .oc-head-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oc-card .oc-body{ padding:8px 10px 10px; display:flex; flex-direction:column; gap:6px; }
.oc-card.leaf .oc-body{ padding:10px; }

/* Colores por nivel: raiz en navy solido, bajando hacia teal segun profundidad. */
.oc-card.lvl-0 .oc-head{ background:linear-gradient(135deg,var(--navy-900),var(--navy-700)); }
.oc-card.lvl-1 .oc-head{ background:linear-gradient(135deg,var(--navy-800),var(--teal-700)); }
.oc-card.lvl-2 .oc-head{ background:linear-gradient(135deg,var(--teal-700),var(--teal-600)); }
.oc-card.lvl-3 .oc-head{ background:linear-gradient(135deg,var(--teal-600),var(--teal-500)); }
.oc-card.lvl-4 .oc-head{ background:linear-gradient(135deg,var(--teal-500),#59b3d6); }
.oc-card.vacante{ background:var(--bg-subtle); }
.oc-card.vacante .oc-head{ background:var(--text-400); opacity:.75; }

.oc-person{
  display:flex; align-items:center; gap:7px; padding:3px 4px; border-radius:7px;
  cursor:pointer; transition:background .12s ease;
}
.oc-person:hover{ background:var(--teal-100); }
.oc-avatar{
  width:24px; height:24px; border-radius:50%; background:var(--navy-800); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:800;
  flex:none;
}
.oc-card .oc-name{ font-size:11.6px; font-weight:700; color:var(--text-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oc-card .oc-pos{
  font-size:9.3px; letter-spacing:.02em; text-transform:uppercase; color:var(--text-500);
  text-align:center; padding:2px 0;
}

.oc-count{
  flex:none; background:rgba(255,255,255,.24); color:#fff; font-size:9px;
  font-weight:800; padding:1px 7px; border-radius:999px; white-space:nowrap;
}

/* Lineas conectoras: un tallo baja de la tarjeta padre, se reparte en una
   linea horizontal y cada hijo recibe otro tallo hacia su avatar. Si un
   nodo tiene un solo hijo, el segmento horizontal se anula automaticamente
   (left:50% + right:50% en el mismo elemento = ancho cero).
   Los pseudo-elementos de .oc-branch (bar horizontal y tallo hacia la
   tarjeta) se posicionan respecto a la propia .oc-branch, cuyo borde
   superior ya arranca DESPUES del padding-top de .oc-children (justo donde
   empieza la tarjeta). Por eso usan "top" negativo: asi quedan dentro de la
   franja vacia del padding-top y nunca se dibujan encima de la tarjeta. */
.oc-children{ display:flex; padding-top:30px; position:relative; }
.oc-children::before{
  content:''; position:absolute; top:0; left:50%; width:2px; height:15px;
  background:var(--teal-500); transform:translateX(-50%); border-radius:2px;
}
.oc-children > .oc-branch{ padding:0 18px; position:relative; }
.oc-children > .oc-branch::before{ content:''; position:absolute; top:-15px; left:0; right:0; height:2px; background:var(--teal-500); }
.oc-children > .oc-branch:first-child::before{ left:50%; border-radius:2px 0 0 2px; }
.oc-children > .oc-branch:last-child::before{ right:50%; border-radius:0 2px 2px 0; }
.oc-children > .oc-branch:only-child::before{ content:none; }
.oc-children > .oc-branch::after{
  content:''; position:absolute; top:-15px; left:50%; width:2px; height:15px;
  background:var(--teal-500); transform:translateX(-50%); border-radius:2px;
}

/* Barra de zoom del organigrama. */
.oc-toolbar{ display:flex; align-items:center; gap:6px; }
.oc-zoom-btn{
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-strong); border-radius:7px; background:#fff; color:var(--text-700);
  cursor:pointer; font-size:15px; font-weight:700; line-height:1; padding:0;
}
.oc-zoom-btn:hover{ background:var(--bg-subtle); border-color:var(--teal-500); color:var(--teal-600); }
.oc-zoom-pct{ font-size:10.5px; font-weight:700; color:var(--text-500); min-width:34px; text-align:center; }

/* El canvas se escala con transform y el contenedor exterior se dimensiona
   por JS al tamano ya escalado (ver setupOrgZoomPan), asi el scroll nativo
   de #org-tree-wrap sigue funcionando en cualquier nivel de zoom. */
#org-tree-wrap{ cursor:grab; }
#org-tree-wrap.dragging{ cursor:grabbing; user-select:none; }
.oc-canvas-outer{ position:relative; }
#oc-canvas{ transform-origin:0 0; position:absolute; top:0; left:0; }

/* Resalta al empleado de la cuenta que esta viendo el organigrama. */
.oc-person.me{ background:var(--teal-100); }
.oc-person.me .oc-avatar{ background:var(--teal-600); box-shadow:0 0 0 2px var(--teal-100); }
.oc-person.me .oc-name{ color:var(--teal-700); }

/* Puestos con muchas personas (ej. tecnicos): rejilla de dos columnas con
   alto maximo y scroll interno, para que la tarjeta no crezca sin limite. */
.oc-body.grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px 6px; }
.oc-body.scroll{ max-height:172px; overflow-y:auto; padding-right:4px; }
.oc-body.grid .oc-person{ padding:3px 3px; }
.oc-body.grid .oc-avatar{ width:20px; height:20px; font-size:8.5px; }
.oc-body.grid .oc-name{ font-size:10.5px; }

.solicitud-tipo-badge{ display:inline-flex; align-items:center; gap:4px; }

/* ------------------------------------------------------------------ */
/* Tablero de comunicacion: pizarron dinamico, semaforo y buzon         */
/* ------------------------------------------------------------------ */
.tb-board{ border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); }
.tb-board-head{
  display:flex; align-items:center; justify-content:space-between; padding:16px 24px;
  background:linear-gradient(135deg,var(--navy-900),var(--navy-800));
}
.tb-board-head h2{ color:#fff; font-size:16px; font-weight:800; letter-spacing:.04em; margin:0; text-transform:uppercase; }
.tb-logo-chip{ background:#fff; padding:6px 14px; border-radius:8px; display:flex; align-items:center; }
.tb-logo{ height:20px; width:auto; display:block; }

.tb-board-body{ display:grid; grid-template-columns:200px minmax(600px,1fr); gap:20px; padding:20px; background:var(--bg-subtle); overflow-x:auto; }

.tb-sidebar{ display:flex; flex-direction:column; gap:14px; }

.tb-semaforo{ background:var(--graphite-900); border-radius:14px; padding:14px 10px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow-md); }
.tb-luz{ display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px; opacity:.4; transition:opacity .2s, background .2s; }
.tb-luz.clickable{ cursor:pointer; }
.tb-luz.clickable:hover{ background:rgba(255,255,255,.07); }
.tb-luz.on{ opacity:1; }
.tb-luz-dot{ width:28px; height:28px; border-radius:50%; flex:none; background:#333; box-shadow:inset 0 -3px 6px rgba(0,0,0,.35); }
.tb-luz-verde .tb-luz-dot{ background:radial-gradient(circle at 35% 30%, #6fe08a, #1b8a3a); }
.tb-luz-amarillo .tb-luz-dot{ background:radial-gradient(circle at 35% 30%, #ffe27a, #d99a06); }
.tb-luz-rojo .tb-luz-dot{ background:radial-gradient(circle at 35% 30%, #ff8a80, #c22626); }
.tb-luz-verde.on .tb-luz-dot{ box-shadow:0 0 15px 4px rgba(58,214,116,.75), inset 0 -3px 6px rgba(0,0,0,.25); }
.tb-luz-amarillo.on .tb-luz-dot{ box-shadow:0 0 15px 4px rgba(255,196,26,.75), inset 0 -3px 6px rgba(0,0,0,.25); }
.tb-luz-rojo.on .tb-luz-dot{ box-shadow:0 0 15px 4px rgba(255,64,64,.8), inset 0 -3px 6px rgba(0,0,0,.25); }
.tb-luz-text{ display:flex; flex-direction:column; color:#fff; line-height:1.25; }
.tb-luz-text b{ font-size:10.3px; letter-spacing:.03em; }
.tb-luz-text small{ font-size:8.4px; color:rgba(255,255,255,.62); }

.tb-contador-card{ background:var(--graphite-900); border-radius:14px; padding:14px; text-align:center; box-shadow:var(--shadow-md); }
.tb-contador-label{ font-size:9.3px; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:8px; font-weight:700; }
.tb-display{
  font-family:var(--font-mono); font-size:32px; font-weight:800; letter-spacing:.05em;
  color:#3ee06a; background:#04140a; border-radius:8px; padding:8px 4px;
  text-shadow:0 0 10px rgba(62,224,106,.75); border:1px solid rgba(62,224,106,.25);
}

.tb-tagline{ background:linear-gradient(135deg,var(--navy-800),var(--navy-700)); border-radius:14px; padding:14px 12px; text-align:center; box-shadow:var(--shadow-md); }
.tb-tagline-text{ color:#fff; font-weight:800; font-size:11px; letter-spacing:.02em; margin-bottom:8px; }
.tb-stripes{ height:10px; border-radius:4px; background-image:repeating-linear-gradient(45deg,#f4c110 0 10px,#141b24 10px 20px); }

.tb-grid{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.tb-row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.tb-section{ background:#fff; border:1px solid var(--border); border-radius:10px; overflow:hidden; box-shadow:var(--shadow-sm); }
.tb-section-head{ color:#fff; font-size:10.8px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:8px 12px; }
.tb-notes-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; padding:10px; }

.tb-note{
  position:relative; border-radius:4px; padding:14px 8px 8px; min-height:84px; display:flex; flex-direction:column;
  box-shadow:1px 2px 5px rgba(20,27,36,.15); transform:rotate(var(--tilt,0deg)); font-size:10.6px; color:#3a3320;
}
.tb-note:nth-child(3n+1){ --tilt:-2deg; }
.tb-note:nth-child(3n+2){ --tilt:1.5deg; }
.tb-note:nth-child(3n+3){ --tilt:-1deg; }
.tb-note-amarillo{ background:#fff6b0; }
.tb-note-naranja{ background:#ffd9a0; }
.tb-note-rosa{ background:#ffc9dc; }
.tb-note-azul{ background:#bfe3ff; }
.tb-note-verde{ background:#c8f0c2; }

.tb-pin{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); width:16px; height:16px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.tb-pin-amarillo{ color:#d9a300; }
.tb-pin-naranja{ color:#d9600a; }
.tb-pin-rosa{ color:#d43f7e; }
.tb-pin-azul{ color:#1c6fbf; }
.tb-pin-verde{ color:#2f9142; }

.tb-note-text{ flex:1; white-space:pre-wrap; word-break:break-word; line-height:1.35; }
.tb-note-autor{ margin-top:6px; font-size:9px; font-style:italic; color:rgba(0,0,0,.55); text-align:right; }
.tb-note-del{
  position:absolute; top:3px; right:3px; width:16px; height:16px; border:none; background:rgba(0,0,0,.1);
  border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0;
  transition:opacity .15s; padding:0; color:#3a3320;
}
.tb-note-del svg{ width:9px; height:9px; }
.tb-note:hover .tb-note-del{ opacity:1; }

.tb-note-add{
  min-height:84px; border:1.5px dashed var(--border-strong); border-radius:4px; background:transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--text-400);
  cursor:pointer; font-size:10px; font-weight:600; transition:border-color .15s, color .15s;
}
.tb-note-add svg{ width:16px; height:16px; }
.tb-note-add:hover{ border-color:var(--teal-600); color:var(--teal-600); }

.tb-note-full{
  min-height:84px; border:1.5px dashed var(--border); border-radius:4px; display:flex; align-items:center;
  justify-content:center; color:var(--text-400); font-size:9.3px; text-align:center; padding:6px; line-height:1.4;
}

.tb-buzon-card{
  display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--border); border-radius:10px;
  padding:14px 16px; cursor:pointer; transition:box-shadow .15s;
}
.tb-buzon-card:hover{ box-shadow:var(--shadow-sm); }
.tb-buzon-icon{ width:40px; height:40px; border-radius:50%; background:var(--teal-100); color:var(--teal-700); display:flex; align-items:center; justify-content:center; flex:none; }
.tb-buzon-icon svg{ width:22px; height:22px; }
.tb-buzon-text{ flex:1; }
.tb-buzon-title{ font-size:12.5px; font-weight:700; color:var(--text-900); }
.tb-buzon-sub{ font-size:10.5px; color:var(--text-500); }

.tb-color-picker{ display:flex; gap:10px; }
.tb-color-dot{ width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent; display:block; }
.tb-color-dot.sel{ border-color:var(--graphite-900); box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--graphite-900); }
.tb-color-dot.tb-pin-amarillo{ background:#fff6b0; }
.tb-color-dot.tb-pin-naranja{ background:#ffd9a0; }
.tb-color-dot.tb-pin-rosa{ background:#ffc9dc; }
.tb-color-dot.tb-pin-azul{ background:#bfe3ff; }
.tb-color-dot.tb-pin-verde{ background:#c8f0c2; }

/* Buzon: animacion de sobre abriendose */
.tb-envelope-scene{ perspective:700px; width:200px; height:130px; margin:6px auto 4px; }
.tb-envelope{ position:relative; width:100%; height:100%; }
.tb-envelope-body{ position:absolute; inset:0; background:linear-gradient(135deg,var(--navy-800),var(--navy-700)); border-radius:8px; box-shadow:var(--shadow-md); }
.tb-envelope-letter{
  position:absolute; left:12px; right:12px; top:14px; bottom:-10px; background:#fff; border-radius:5px;
  box-shadow:0 3px 10px rgba(0,0,0,.18); z-index:1; transition:transform .5s ease .35s; transform:translateY(0);
}
.tb-envelope.open .tb-envelope-letter{ transform:translateY(-52px); }
.tb-envelope-flap{
  position:absolute; top:0; left:0; width:0; height:0; z-index:2;
  border-left:100px solid transparent; border-right:100px solid transparent; border-top:70px solid var(--navy-900);
  transform-origin:top center; transition:transform .6s ease; transform:rotateX(0deg);
}
.tb-envelope.open .tb-envelope-flap{ transform:rotateX(170deg); }

.tb-buzon-gracias{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 10px; color:var(--success); }
.tb-buzon-gracias svg{ width:40px; height:40px; }
.tb-buzon-gracias p{ color:var(--text-700); font-size:12.5px; margin:0; }

.tb-buzon-item{ border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin-bottom:8px; }
.tb-buzon-item.sin-leer{ border-left:3px solid var(--teal-600); background:var(--teal-100); }
.tb-buzon-item-head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.tb-buzon-item-fecha{ font-size:10px; color:var(--text-400); flex:1; }
.tb-buzon-item-texto{ font-size:11.5px; color:var(--text-700); line-height:1.4; }

@media (max-width:900px){
  .tb-board-body{ grid-template-columns:180px minmax(560px,1fr); }
}

/* Boton de ver/ocultar contraseña (ver agregarVerPassword en app.js) */
.password-wrap{ position:relative; }
.password-wrap .input{ padding-right:40px; }
.password-toggle{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:none; background:none; border-radius:var(--radius-sm); color:var(--text-400); cursor:pointer; }
.password-toggle:hover{ color:var(--text-700); background:var(--bg-subtle); }
.password-toggle:focus-visible{ outline:2px solid var(--teal-600); outline-offset:1px; }
.password-toggle svg{ width:18px; height:18px; }

/* Gauge semicircular de Proyectos (material y horas), tambien en el Dashboard general (ver gaugeHtml en app.js). */
.gauge-wrap{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.gauge-wrap .gauge-value{ font-size:24px; font-weight:700; fill:var(--text-900); }
.gauge-wrap .gauge-label{ font-size:10px; fill:var(--text-500); }
.gauge-legend{ display:flex; flex-direction:column; gap:6px; font-size:12px; }
.gauge-legend span{ color:var(--text-500); margin-right:8px; }
.gauge-estado{ display:flex; align-items:center; gap:6px; font-weight:700; margin-top:4px; }
.gauge-estado svg{ width:15px; height:15px; }
.gauge-estado.bien{ color:var(--text-700); }
.gauge-estado.mal{ color:var(--danger); }

/* Buscador de materiales (ver montarBuscadorMaterial en app.js). */
.busca-mat{ position:relative; }
.busca-mat-lista{ position:absolute; left:0; right:0; top:calc(100% + 2px); z-index:40; background:var(--bg-card); border:1px solid var(--border-strong); border-radius:8px; box-shadow:var(--shadow-md); max-height:280px; overflow-y:auto; }
.busca-mat-op{ padding:7px 10px; cursor:pointer; font-size:12.5px; border-bottom:1px solid var(--border); }
.busca-mat-op:last-child{ border-bottom:none; }
.busca-mat-op small{ display:block; font-size:11px; color:var(--text-400); }
.busca-mat-op:hover, .busca-mat-op.activo{ background:var(--bg-subtle); }
.busca-mat-mas{ padding:7px 10px; font-size:11px; color:var(--text-400); }
.busca-mat .search{ position:relative; }
.busca-mat .search svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--text-400); pointer-events:none; }
.busca-mat .search input{ padding-left:34px; width:100%; }
.busca-mat-op.busca-mat-nuevo{ color:var(--teal-600); font-weight:600; background:var(--bg-subtle); }
.busca-mat-op.busca-mat-nuevo svg{ width:13px; height:13px; vertical-align:-2px; }