:root { --navy:#10263f; --navy2:#1a3a5c; --blue:#1f4e79; --gold:#c9a227; --bg:#f4f6f9; --line:#d6dee7; --txt:#1a2332; --mut:#6a7a8d; --accent:#0aa699; }
* { box-sizing:border-box; margin:0; }
body { font-family:'Inter',"Segoe UI",Arial,sans-serif; color:var(--txt); background:var(--bg); font-size:14px; }

/* ══════════ HERO + MODAL LOGIN (patrón Velorah/Isildur) ══════════ */
.hero-body { background:#000; color:#fff; min-height:100vh; overflow:hidden; }
.hero-bg { position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(900px 500px at 78% 18%, rgba(201,162,39,.16), transparent 60%),
    radial-gradient(1100px 700px at 15% 85%, rgba(31,78,121,.55), transparent 65%),
    linear-gradient(160deg, #0a1a2c 0%, #10263f 45%, #071320 100%); }
.hero-grain { position:fixed; inset:-10%; z-index:1; pointer-events:none; opacity:.12; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.85'/></svg>"); }
.hero-nav { position:relative; z-index:10; display:flex; justify-content:space-between; align-items:center;
  padding:26px 40px; max-width:1400px; margin:0 auto; }
.hero-brand { font-family:'DM Serif Display',serif; font-size:28px; letter-spacing:-.5px; }
.hero-brand sup { font-size:11px; opacity:.7; margin-left:2px; }
.hero-links { display:flex; gap:38px; font-size:13.5px; color:rgba(255,255,255,.75); }
.hero-links span { cursor:default; }
.hero-cta { border:1px solid rgba(255,255,255,.45); background:transparent; color:#fff;
  border-radius:999px; padding:10px 26px; font-size:14px; cursor:pointer; transition:.2s; font-family:'Inter',sans-serif; }
.hero-cta:hover { background:var(--gold); border-color:var(--gold); color:#10263f; }
.hero-cta.big { margin-top:38px; padding:14px 36px; font-size:15px; border-color:var(--gold); color:var(--gold); }
.hero-cta.big:hover { color:#10263f; }
.hero-main { position:relative; z-index:10; max-width:1400px; margin:0 auto; padding:12vh 40px 0; }
.hero-main h1 { font-family:'DM Serif Display',serif; font-weight:400; font-size:clamp(44px,7vw,84px);
  line-height:1.05; letter-spacing:-1px; }
.hero-main h1 em { font-style:italic; color:var(--gold); }
.hero-main p { margin-top:26px; font-size:16.5px; line-height:1.7; color:rgba(255,255,255,.78); }

.modal-scrim { position:fixed; inset:0; z-index:100; background:rgba(4,10,18,.62); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; }
.modal-scrim[hidden] { display:none; }
.login-modal { width:440px; max-width:92vw; background:#fafaf8; color:#000; border-radius:14px;
  padding:38px 36px 26px; position:relative; box-shadow:0 40px 90px rgba(0,0,0,.5); }
.modal-close { position:absolute; top:12px; right:16px; border:none; background:none; font-size:26px;
  color:#999; cursor:pointer; line-height:1; }
.lm-brand { font-family:'DM Serif Display',serif; font-size:30px; letter-spacing:-.5px; text-align:center; }
.lm-brand sup { font-size:11px; opacity:.6; }
.lm-sub { text-align:center; font-size:10px; letter-spacing:3px; color:#8a8a85; margin:6px 0 24px; }
.login-modal label { display:block; font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:#6b6b66; margin:14px 0 6px; }
.login-modal input { width:100%; padding:12px 14px; border-radius:8px; border:1px solid #ddddd6;
  background:#fff; font-size:15px; font-family:'Inter',sans-serif; }
.login-modal input:focus { outline:2px solid var(--gold); border-color:transparent; }
.lm-submit { width:100%; margin-top:26px; padding:13px; border:none; border-radius:8px;
  background:#000; color:#fff; font-weight:600; font-size:15px; cursor:pointer; letter-spacing:.5px; }
.lm-submit:hover { background:#1f2a37; }
.lm-err { margin-top:12px; color:#b33a3a; font-size:12.5px; text-align:center; min-height:16px; }
.lm-foot { margin-top:18px; text-align:center; color:#a9a9a2; font-size:10.5px; }

/* ══════════ APP SHELL — réplica panel.eltriunfo.ai (captura Omar 2026-08-21 + fuente Isildur)
   header 56px full-width · sidebar 255px BLANCO item activo pill gris · Open Sans ══════════ */
.appwrap { display:flex; flex-direction:column; height:100vh;
  font-family:'Nunito Sans','Open Sans','Segoe UI',Helvetica,Arial,sans-serif; background:#F8F7F3; }
.header { background:#fff; border-bottom:1px solid #eceff1; height:56px; flex-shrink:0;
  display:flex; align-items:center; padding:0 16px 0 0; }
.header .logo { width:255px; padding:0 20px; display:flex; align-items:center; }
.header .logo img { height:30px; width:auto; object-fit:contain; }
.hamburger { border:none; background:none; cursor:pointer; padding:8px 10px; margin-left:4px;
  color:#424242; border-radius:6px; }
.hamburger svg { display:block; }
.hamburger:hover { background:#f5f5f5; }
.header .spacer { flex:1; }
.body { display:flex; flex:1; overflow:hidden; }
.side { width:255px; flex-shrink:0; background:#fff; border-right:1px solid #eceff1;
  display:flex; flex-direction:column; padding:10px 10px; }
.appwrap.collapsed .side { display:none; }
.nav { flex:1; display:flex; flex-direction:column; gap:2px; }
.nav a { display:flex; align-items:center; gap:12px; padding:10px 12px; color:#8a8f95;
  text-decoration:none; font-size:15px; font-weight:500; border-radius:10px; }
.nav a svg { width:18px; height:18px; color:#8a8f95; flex-shrink:0; }
.nav a.active { background:#f0f0f0; color:#1a1a1a; }
.nav a.active svg { color:#1a1a1a; }
.nav a:not(.active):hover { background:#f0f0f0; color:#1a1a1a; }
.nav a:not(.active):hover svg { color:#1a1a1a; }
.content { flex:1; overflow-y:auto; padding:28px 32px; background:#F8F7F3; }
.content h1.page-title { font-family:'DM Serif Display',serif; font-weight:400; font-size:30px;
  color:#1a1a1a; letter-spacing:-.3px; }

/* User pill + dropdown — réplica captura */
.usermenu { position:relative; display:flex; align-items:center; gap:6px; }
.btn-user { display:flex; align-items:center; gap:8px; border:none; background:none; cursor:pointer;
  padding:5px 10px 5px 5px; border-radius:8px; font-family:'Nunito Sans',sans-serif; }
.btn-user:hover, .btn-user.open { background:#f0f0f0; }
.avatar { position:relative; width:34px; height:34px; border-radius:50%; background:#10263f; color:#c9a227;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; }
.avatar::after { content:""; position:absolute; bottom:0; left:0; width:10px; height:10px;
  background:#22c55e; border:2px solid #fff; border-radius:50%; }
.uname { font-size:13px; color:#616161; }
.chev { width:12px; height:12px; color:#9e9e9e; transition:transform .15s; }
.btn-user.open .chev { transform:rotate(180deg); }
.btn-gear { border:none; background:none; cursor:pointer; padding:8px; border-radius:8px; color:#424242; }
.btn-gear svg { width:20px; height:20px; display:block; }
.btn-gear:hover { background:#f0f0f0; }
.menu { position:absolute; right:0; top:calc(100% + 10px); width:200px; background:#fff;
  border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.10); border:1px solid #eceff1; z-index:60; overflow:hidden; }
.menu .item { display:flex; align-items:center; gap:10px; width:100%; padding:13px 18px; font-size:13px;
  color:#424242; background:none; border:none; cursor:pointer; text-align:left; font-family:'Nunito Sans',sans-serif; }
.menu .item svg { width:15px; height:15px; color:#757575; }
.menu .item:hover { background:#f7f7f7; }
.menu .item.danger, .menu .item.danger svg { color:#f35958; }
.menu .sep { border-top:1px solid #eceff1; }
.menu .subtitle { padding:8px 16px 4px; font-size:10px; letter-spacing:1.5px; color:#9e9e9e; text-transform:uppercase; }
.menu .vu { display:flex; align-items:center; gap:8px; width:100%; padding:8px 16px; font-size:12.5px;
  color:#424242; background:none; border:none; cursor:pointer; text-align:left; font-family:'Nunito Sans',sans-serif; }
.menu .vu:hover { background:#f7f7f7; }
.menu .vu .dot { width:8px; height:8px; border-radius:50%; background:#0aa699; flex-shrink:0; }
.menu .vu small { margin-left:auto; color:#9e9e9e; font-size:10px; }
.menu .vulist { max-height:240px; overflow-y:auto; padding-bottom:6px; }

.viewas-banner { background:#c9a227; color:#10263f; font-weight:600; padding:7px 18px; font-size:13px;
  display:flex; gap:12px; align-items:center; font-family:'Nunito Sans',sans-serif; }
.viewas-banner button { border:none; background:#10263f; color:#fff; border-radius:5px; padding:4px 10px; cursor:pointer; font-size:12px; }

/* ══════════ Cards estilo panel (Presentaciones) + organigrama RRHH ══════════ */
.section-sub { font-family:'DM Serif Display',serif; font-size:19px; color:#1a1a1a; margin:26px 0 14px; }
.cards-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.card-dash { position:relative; min-height:170px; background:#fff; border:2px dashed #cbd5e1;
  border-radius:12px; padding:24px; }
.card-dash .num { position:absolute; top:-13px; left:-13px; width:27px; height:27px; border-radius:50%;
  background:#fff; border:1.5px solid #0aa699; color:#0aa699; display:flex; align-items:center;
  justify-content:center; font-size:12.5px; font-weight:600; }
.card-dash .ctitle { font-family:'DM Serif Display',serif; font-size:19px; color:#1a1a1a;
  text-align:center; margin-bottom:14px; }
.org-list { display:flex; flex-direction:column; gap:7px; }
.org-row { display:flex; align-items:baseline; gap:8px; font-size:13px; }
.org-row .dot { width:7px; height:7px; border-radius:50%; background:#0aa699; flex-shrink:0; align-self:center; }
.org-row .oname { color:#2b2b2b; font-weight:600; }
.org-row .orole { color:#8a8f95; font-size:12px; margin-left:auto; text-align:right; }
.org-row.jefe .oname { font-size:13.5px; }
.org-row.jefe .dot { background:#c9a227; width:8px; height:8px; }

/* ====== RRHH: organigramas replica Talent&HR de Isildur ====== */
.pill-tabs { display:flex; gap:8px; margin:14px 0 8px; }
.pill-tab { padding:7px 14px; border-radius:8px; font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:1px; border:1px solid #d0d5dd; background:transparent; color:#9ca3af; cursor:pointer;
  font-family:'Nunito Sans',sans-serif; transition:all .15s; }
.pill-tab.active { background:#05adb012; border-color:#05adb060; color:#05adb0; }
.orgwrap { display:flex; flex-direction:column; align-items:center; margin-top:24px; }
.emp-card { position:relative; width:350px; background:#fff; border:1px solid #e5e9ec; border-radius:12px;
  padding:16px; text-align:left; transition:all .2s; }
.emp-card:hover { transform:scale(1.02); background:#f9fafb; border-color:#d0d5dd; }
.emp-card .gdot { position:absolute; top:14px; right:14px; width:10px; height:10px; border-radius:50%;
  background:#22c55e; }
.emp-card .gdot::after { content:""; position:absolute; inset:0; border-radius:50%; background:#22c55e;
  opacity:.4; animation:ping 1.2s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 75%,100% { transform:scale(2.2); opacity:0; } }
.emp-card .top { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.emp-card .av { width:48px; height:48px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.emp-card .av.ini { display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; }
.emp-card h3 { font-size:16px; font-weight:600; color:#1a1a1a; line-height:1.25; margin:0;
  font-family:'Nunito Sans',sans-serif; }
.emp-card .dept { font-size:13px; color:#6b7280; margin-top:2px; }
.emp-card .foot { display:flex; align-items:center; justify-content:space-between; gap:6px; overflow:hidden; }
.emp-card .fname { color:#9ca3af; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.emp-card .tags { display:flex; gap:6px; flex-shrink:0; }
.emp-card .tag { color:#6b7280; border:1px solid #e5e9ec; border-radius:4px; font-size:10px;
  padding:2px 8px; text-transform:uppercase; letter-spacing:1px; white-space:nowrap; }
.emp-card .clicknote { color:#9ca3af; font-size:11px; }
.board-box { display:flex; flex-direction:column; align-items:center; border:1.5px dashed #d0d5dd;
  border-radius:16px; padding:16px 22px 20px; }
.board-box .btitle { text-transform:uppercase; letter-spacing:2px; font-weight:700; color:#C9A227;
  font-size:15px; margin-bottom:14px; }
.hrow { display:flex; justify-content:center; align-items:center; }
.hbridge { width:24px; height:1px; background:#d0d5dd; }
.vconn { width:1px; background:#e5e9ec; }
.org-pill { display:flex; align-items:center; gap:8px; padding:6px 16px; border-radius:8px;
  border:1px solid #05adb060; background:#05adb015; width:fit-content; }
.org-pill span { font-weight:700; letter-spacing:1.5px; text-transform:uppercase; font-size:12px; color:#05adb0; }
.org-pill small { font-weight:700; font-size:11px; color:#05adb0; opacity:.75; }
.org-pill.gray { border-color:#d0d5dd; background:#f3f4f6; }
.org-pill.gray span { color:#6b7280; }
.org-cols { display:flex; gap:40px; align-items:flex-start; justify-content:center; margin-top:8px; }
.org-col { display:flex; flex-direction:column; align-items:center; }
.cards-grid2 { display:grid; grid-template-columns:repeat(2,350px); gap:16px; }


/* Breadcrumb back-arrow (como el panel AI) + FitBox */
.page-head { display:flex; align-items:center; gap:10px; }
.backchip { width:18px; height:18px; border-radius:50%; border:1px solid #dce1e4; background:transparent;
  display:inline-flex; align-items:center; justify-content:center; color:#9e9e9e;
  cursor:pointer; flex-shrink:0; padding:0; }
.backchip:hover { background:#f5f5f5; color:#616161; }
.backchip svg { width:9px; height:9px; }
.fitwrap { width:100%; display:flex; justify-content:center; }
.fitinner { width:max-content; }

/* ====== CATÁLOGO (F2 demo · galería estilo tienda de la web) ====== */
.cat-src { margin-left:14px; font-size:12px; color:#9ca3af; align-self:flex-end; padding-bottom:5px; }
.pill-tabs.wrap { flex-wrap:wrap; }
.brand-row { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 6px; }
.brand-chip { padding:4px 12px; border-radius:999px; font-size:11px; border:1px solid #e2e5e9;
  background:#fff; color:#8a8f95; cursor:pointer; font-family:'Nunito Sans',sans-serif; transition:all .15s; }
.brand-chip.active { border-color:#10263f; background:#10263f; color:#fff; }
.brand-chip:not(.active):hover { border-color:#b9c0c8; color:#1a1a1a; }
.prod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:18px; margin-top:18px; }
.prod-card { background:#fff; border:1px solid #e5e9ec; border-radius:12px; overflow:hidden;
  cursor:pointer; transition:all .2s; }
.prod-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(16,38,63,.10); border-color:#d0d5dd; }
.pimg { position:relative; aspect-ratio:3/4; background:#f3f4f6; }
.pimg img { width:100%; height:100%; object-fit:cover; display:block; transition:opacity .2s; }
.pimg .noimg { display:flex; align-items:center; justify-content:center; height:100%; color:#c3c9d0; font-size:12px; }
.psale { position:absolute; top:10px; left:10px; background:#c9a227; color:#10263f; font-size:10px;
  font-weight:700; letter-spacing:1px; padding:3px 8px; border-radius:4px; }
.pinfo { padding:12px 14px 14px; }
.pname { font-size:13.5px; font-weight:600; color:#1a1a1a; line-height:1.3; min-height:35px; }
.psku { font-size:11px; color:#9ca3af; margin-top:3px; letter-spacing:.5px; }
.pprice { margin-top:6px; font-size:14px; color:#1a1a1a; }
.pprice s { color:#b0b6bd; font-size:12px; margin-right:2px; }
.cat-empty { margin-top:26px; color:#8a8f95; }

/* Ficha de producto (modal con galería) */
.ficha-scrim { position:fixed; inset:0; z-index:120; background:rgba(10,18,28,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:30px; }
.ficha { position:relative; display:flex; gap:26px; width:min(940px,94vw); max-height:88vh; background:#fff;
  border-radius:14px; padding:26px; box-shadow:0 40px 90px rgba(0,0,0,.4); overflow:auto; }
.fgal { flex:0 0 46%; }
.fmain { aspect-ratio:3/4; background:#f3f4f6; border-radius:10px; overflow:hidden; }
.fmain img { width:100%; height:100%; object-fit:cover; display:block; }
.fthumbs { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.fthumbs img { width:56px; height:70px; object-fit:cover; border-radius:6px; cursor:pointer;
  border:2px solid transparent; opacity:.75; }
.fthumbs img.sel, .fthumbs img:hover { border-color:#c9a227; opacity:1; }
.fdata { flex:1; min-width:0; }
.fdata h2 { font-family:'DM Serif Display',serif; font-weight:400; font-size:24px; color:#1a1a1a; margin-bottom:6px; }
.fprice { font-size:19px; color:#10263f; font-weight:700; margin-bottom:16px; }
.fprice s { color:#b0b6bd; font-weight:400; font-size:14px; }
.frow { display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid #f0f2f4; font-size:13px; }
.frow span { color:#8a8f95; flex-shrink:0; }
.frow b { color:#1a1a1a; font-weight:600; text-align:right; }
.fdesc { margin-top:14px; font-size:13px; line-height:1.6; color:#4b5563; }
.fnote { margin-top:18px; font-size:11px; color:#9ca3af; border-top:1px dashed #e5e9ec; padding-top:10px; }