/* Portal EMS — UI tokens + layout (v1) */
:root{
  --topbar-fixed-h: 68px;
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;

  --shadow-sm: 0 8px 20px rgba(0,0,0,.12);
  --shadow: 0 18px 40px rgba(0,0,0,.18);

  /* Paleta EMS (default) */
  --navy-950:#071125;
  --navy-900:#0b1731;
  --navy-850:#0f1e3a;
  --navy-800:#142a4f;
  --blue-700:#1b3f86;
  --blue-650:#203c7a;
  --cyan-500:#16c7ff;
  --cyan-400:#43d6ff;

  --slate-50:#f6f8fc;
  --slate-100:#eef2fb;
  --slate-200:#dfe6f3;
  --slate-300:#c4cfdf;
  --slate-600:#475569;
  --slate-700:#334155;
  --slate-900:#0f172a;

  --ok:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;

  /* Tema claro */
  --bg: var(--slate-50);
  --bg-elev: rgba(255,255,255,.75);
  --card: rgba(255,255,255,.70);
  --card-border: rgba(15,23,42,.08);
  --text: #0b1220;
  --muted: rgba(2, 6, 23, .62);
  --link: #0b4bd3;

  /* Topbar siempre oscura (estilo software) */
  --topbar: rgba(8, 17, 37, .94);
  --topbar-border: rgba(255,255,255,.08);
  --topbar-text: rgba(255,255,255,.92);
  --topbar-muted: rgba(255,255,255,.62);

  /* Hero */
  --hero-a: #112a62;
  --hero-b: #0b1636;
  --hero-text: rgba(255,255,255,.96);
  --hero-muted: rgba(255,255,255,.72);

  /* Foto blur (fondo pro) */
  --bg-photo: url("../img/bg_portal_blur.jpg");
  --bg-photo-opacity: .58;
}

:root[data-theme="dark"]{
  --bg: #0b0f17;
  --bg-elev: rgba(12, 18, 35, .62);
  --card: rgba(12, 18, 35, .62);
  --card-border: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --link: var(--cyan-400);
  --shadow-sm: 0 10px 26px rgba(0,0,0,.35);
  --shadow: 0 22px 54px rgba(0,0,0,.45);

  --bg-photo-opacity: .48;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background: var(--bg);
  color:var(--text);
  cursor: url("../img/cursor-default.png") 2 2, default;
}

/* Fondo con foto blur + overlays (premium) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-image: var(--bg-photo);
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
  transform: scale(1.04);
  opacity: var(--bg-photo-opacity);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(1100px 720px at 14% 0%, rgba(22,199,255,.10), transparent 58%),
    radial-gradient(900px 620px at 92% 12%, rgba(27,63,134,.16), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,.18) 55%, rgba(0,0,0,.12) 100%);
  pointer-events:none;
}

:root[data-theme="dark"] body::after{
  background:
    radial-gradient(1100px 720px at 14% 0%, rgba(22,199,255,.10), transparent 58%),
    radial-gradient(900px 620px at 92% 12%, rgba(27,63,134,.16), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.10) 60%, rgba(0,0,0,.22) 100%);
}

a, button, .chip, .shortcut, .tab, .btn{ cursor: url("../img/cursor-pointer.png") 6 2, pointer; }
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto}

.muted{color:var(--muted)}
.kicker{font-size:12px; color:var(--muted); letter-spacing:.2px}
.divider{height:1px; background:var(--card-border); margin: var(--space-4) 0}
.dot{display:inline-block; width:8px; height:8px; border-radius:99px; background:currentColor; opacity:.9; margin-right:8px}

/* Layout */
.main{
  padding: 86px var(--space-6) var(--space-6);
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 900px){
  .main{ padding: 86px var(--space-4) var(--space-5); }
}

/* Topbar */
.topbar{
  position: fixed;
  top:0; left:0; right:0;
  height: 68px;
  background: var(--topbar);
  border-bottom: 1px solid var(--topbar-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 var(--space-6);
}
.topbar__left, .topbar__right{display:flex; align-items:center; gap: var(--space-3)}
.brand{display:flex; align-items:center; gap: 10px; color: var(--topbar-text); text-decoration:none}
.brand__logo{width:28px; height:28px; border-radius:8px; background: rgba(255,255,255,.06); padding:5px}
.brand__name{font-weight:700; letter-spacing:.2px}

.search input{
  width: 320px;
  max-width: 42vw;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--topbar-text);
  padding: 10px 14px;
  outline:none;
}
.search input::placeholder{color: rgba(255,255,255,.55)}
.search input:focus{border-color: rgba(22,199,255,.55); box-shadow: 0 0 0 4px rgba(22,199,255,.10);}

.company select{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--topbar-text);
  padding: 10px 12px;
  outline:none;
}

.modules{display:flex; gap:10px; align-items:center}
.chip{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: var(--topbar-text);
  font-size: 13px;
  text-decoration:none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); text-decoration:none}
@media (max-width: 980px){
  .modules{display:none}
  .search input{width: 240px}
}

.iconbtn{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--topbar-text);
  border-radius: 12px;
  padding: 8px 10px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.iconbtn:hover{transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18);}
.iconbtn:active{transform: translateY(0px);}

.profile{
  display:flex; align-items:center; gap: 10px;
  padding-left: 6px;
}
.avatar{
  width:36px; height:36px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(22,199,255,.35), rgba(27,63,134,.35));
  border: 1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  color: var(--topbar-text);
  font-weight:800;
}
.profile__meta{display:flex; flex-direction:column; line-height:1.1}
.profile__name{color: var(--topbar-text); font-weight:700; font-size:13px}
.profile__sub{color: var(--topbar-muted); font-size:12px}
.profile .link{color: var(--topbar-text); background:transparent; border:0; padding: 0 0 0 10px; cursor:pointer; font-weight:600}
.profile .link:hover{text-decoration:underline}

/* Toast (mensajes pequeños para acciones) */
.toastStack{
  position: fixed;
  top: 86px;
  right: 22px;
  z-index: 999;
  display:flex;
  flex-direction:column;
  gap: 10px;
  max-width: min(420px, 92vw);
}
body.auth .toastStack{ top: 18px; }

.toast{
  border-radius: var(--radius);
  padding: 12px 14px;
  border: 1px solid var(--card-border);
  backdrop-filter: blur(10px);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
  animation: toastIn .18s ease;
}
.toast--error{ border-left: 4px solid var(--bad); }
.toast--success{ border-left: 4px solid var(--ok); }

@keyframes toastIn{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Hero */
.hero{
  position: relative;
  border-radius: 22px;
  overflow:hidden;
  padding: 44px var(--space-6);
  color: var(--hero-text);
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.12);
}
.hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(165deg, rgba(8,17,37,.92), rgba(8,17,37,.72)),
    radial-gradient(1200px 520px at 20% 10%, rgba(22,199,255,.22), transparent 55%),
    radial-gradient(800px 520px at 85% 30%, rgba(27,63,134,.48), transparent 55%),
    url("../img/bg_portal_blur.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}
.hero__content{position:relative; max-width: 860px}

.hero__wm{
  position:absolute;
  right:-80px;
  bottom:-160px;
  width: 560px;
  opacity: .12;
  pointer-events:none;
  user-select:none;
  transform: rotate(-8deg);
}
@media (max-width: 900px){
  .hero__wm{width: 420px; right:-120px; bottom:-190px; opacity:.10}
}

.hero h1{
  margin:0;
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -.8px;
}
.hero h1 span{color: rgba(255,255,255,.88)}
.hero p{margin: 14px 0 0; font-size: 16px; color: var(--hero-muted); max-width: 720px}
@media (max-width: 900px){
  .hero{padding: 34px var(--space-4)}
  .hero h1{font-size: 40px}
}

/* Cards / grid */
.grid{display:grid; gap: var(--space-4)}
.grid--2{grid-template-columns: 1.2fr .8fr}
@media (max-width: 980px){
  .grid--2{grid-template-columns: 1fr}
}

.card{
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  background: var(--card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.card__head{display:flex; justify-content:space-between; align-items:flex-start; gap: var(--space-4); margin-bottom: var(--space-4)}
.card h2{margin:0; font-size: 18px}
.card h3{margin: var(--space-3) 0 var(--space-2); font-size: 16px}
.card p{margin: 6px 0 0}

.panel{
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.45);
  padding: var(--space-4);
}
:root[data-theme="dark"] .panel{ background: rgba(255,255,255,.05); }

.list{list-style:none; padding:0; margin: 10px 0 0}
.list li{display:flex; justify-content:space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--card-border)}
.list li:last-child{border-bottom:0}

/* Buttons */
.btn{
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.65);
  color: var(--text);
  padding: 10px 12px;
  font-weight:700;
  font-size: 14px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}
:root[data-theme="dark"] .btn{ background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); border-color: rgba(255,255,255,.10) }
.btn:hover{transform: translateY(-1px); filter: brightness(1.03)}
.btn:active{transform: translateY(0px)}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none}
.btn--primary{
  background: linear-gradient(135deg, rgba(22,199,255,.92), rgba(27,63,134,.92));
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.96);
}
.btn--sm{padding: 8px 10px; font-size: 13px; border-radius: 10px}

/* Actions */
.actions{display:flex; flex-wrap:wrap; gap: var(--space-2)}

/* Status cards */
.statusGrid{display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-3)}
@media (max-width: 620px){ .statusGrid{grid-template-columns:1fr} }
.statusCard{
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.55);
  padding: var(--space-4);
}
:root[data-theme="dark"] .statusCard{ background: rgba(255,255,255,.05); }
.statusCard__title{display:flex; justify-content:space-between; gap: 12px; align-items:flex-start}
.statusCard__meta{margin-top: 10px; font-size: 13px; display:flex; gap: 8px}

.status{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.22);
}
.status--ok{ color: var(--ok); }
.status--warn{ color: var(--warn); }
.status--bad{ color: var(--bad); }
.status--muted{ color: rgba(255,255,255,.80); }

/* Shortcuts */
.shortcutList{display:flex; flex-direction:column; gap: 10px}
.shortcut{
  position: relative;
  overflow: hidden;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.55);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  color: var(--text);
}
:root[data-theme="dark"] .shortcut{ background: rgba(255,255,255,.05); color: rgba(255,255,255,.92); }

/* Fondo fotográfico sutil por tarjeta */
.shortcut::before{
  content:"";
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  opacity: .16;
  transform: scale(1.06);
  pointer-events:none;
}
.shortcut::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.12), rgba(0,0,0,.00));
  pointer-events:none;
}
:root[data-theme="dark"] .shortcut::before{ opacity: .20; }
.shortcut > *{ position:relative; z-index:1; }

.shortcut--docs::before{ background-image: url("../img/bg_docs_card.jpg"); }
.shortcut--tickets::before{ background-image: url("../img/bg_tickets_card.jpg"); }
.shortcut--reports::before{ background-image: url("../img/bg_reports_card.jpg"); }
.shortcut--admin::before{ background-image: url("../img/bg_portal_blur.jpg"); }
.shortcut:hover{ transform: translateY(-1px); background: rgba(255,255,255,.70); text-decoration:none; border-color: rgba(22,199,255,.30) }
:root[data-theme="dark"] .shortcut:hover{ background: rgba(255,255,255,.08); }
.shortcut__icon{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(22,199,255,.22), rgba(27,63,134,.18));
  border: 1px solid rgba(255,255,255,.14);
  font-size: 18px;
}
.shortcut__title{font-weight: 900}
.shortcut__sub{color: var(--muted); font-size: 13px}
.shortcut__go{margin-left:auto; font-weight: 900; opacity:.75}

/* Page head / tabs */
.pageHead{display:flex; align-items:flex-end; justify-content:space-between; gap: var(--space-4); margin: var(--space-5) 0 var(--space-3)}
.pageHead h1{margin:0; font-size: 26px}

.tabs{display:flex; flex-wrap:nowrap; gap: 10px; margin:0; align-items:center; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; padding: 0 2px}
.tabs::-webkit-scrollbar{height:0}
.tab{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.55);
  color: var(--text);
  font-weight: 800;
  font-size: 13px;
}
:root[data-theme="dark"] .tab{ background: rgba(255,255,255,.05); color: rgba(255,255,255,.92) }
.tab--active{ border-color: rgba(22,199,255,.40); box-shadow: 0 0 0 4px rgba(22,199,255,.10) }

/* Forms */
.form{display:flex; flex-direction:column; gap: var(--space-3)}
label span{display:block; font-weight:800; font-size: 13px; margin-bottom: 6px}
input, textarea, select{
  width:100%;
  border-radius: 12px;
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.70);
  padding: 12px 12px;
  outline:none;
  color: var(--text);
}
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}
input:focus, textarea:focus, select:focus{border-color: rgba(22,199,255,.40); box-shadow: 0 0 0 4px rgba(22,199,255,.12)}
textarea{resize: vertical}

/* Dropzone */
.dropzone{
  position:relative;
  border-radius: var(--radius);
  border: 1px dashed rgba(22,199,255,.35);
  background: rgba(22,199,255,.06);
  padding: 16px;
  display:flex;
  align-items:center;
  gap: 12px;
  overflow:hidden;
}
.dropzone--over{ background: rgba(22,199,255,.10); border-color: rgba(22,199,255,.55); }
.dropzone__icon{font-size: 22px}
.dropzone__title{font-weight: 900}
.dropzone__sub{color: var(--muted); font-size: 13px}
.dropzone input[type="file"]{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}

/* Tables */
.tableWrap{overflow:auto; border-radius: var(--radius); border:1px solid var(--card-border)}
.table{width:100%; border-collapse:collapse; min-width: 720px; background: rgba(255,255,255,.45)}
:root[data-theme="dark"] .table{ background: rgba(255,255,255,.03); }
.table th, .table td{padding: 12px 12px; border-bottom: 1px solid var(--card-border); text-align:left; font-size: 13px}
.table th{font-size: 12px; text-transform: uppercase; letter-spacing:.5px; color: var(--muted)}
.table tr:hover td{ background: rgba(22,199,255,.06) }

.file{display:flex; align-items:flex-start; gap: 10px}
.file__icon{width: 34px; height:34px; border-radius: 12px; background: rgba(22,199,255,.10); display:flex; align-items:center; justify-content:center}
.file__name{font-weight:900}
.file__sub{font-size: 12px}

.pill{
  display:inline-flex;
  align-items:center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.60);
}
:root[data-theme="dark"] .pill{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }

/* Auth */
body.auth{
  --bg-photo: url("../img/bg_login_ems.png");
  --bg-photo-opacity: .76;
  min-height:100vh;
  display:block;
  padding: 0;
}
.auth__wrap{ width: 100%; max-width: 520px; }
.authCard{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(900px 520px at 12% 0%, rgba(22,199,255,.16), transparent 55%),
              radial-gradient(800px 520px at 85% 30%, rgba(27,63,134,.26), transparent 55%),
              linear-gradient(160deg, var(--navy-900), var(--navy-950));
  padding: 26px;
  color: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.authCover{
  height: 96px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(165deg, rgba(8,17,37,.70), rgba(8,17,37,.35)),
    url("../img/bg_login_ems.png");
  background-size: cover;
  background-position: center;
  margin-bottom: 14px;
  box-shadow: 0 14px 28px rgba(0,0,0,.22);
}
.authBrand{display:flex; align-items:center; gap: 12px; margin-bottom: 10px}
.authBrand__mascot{width:48px; height:48px}
.authBrand__title{font-weight: 1000; letter-spacing:.2px}
.authBrand__sub{color: rgba(255,255,255,.66); font-size: 13px}
.authCard h1{margin: 14px 0 6px}
.authCard .muted{color: rgba(255,255,255,.72)}
.authCard input, .authCard textarea, .authCard select{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.92) }
.authCard input::placeholder{color: rgba(255,255,255,.55)}
.authFooter{display:flex; align-items:center; justify-content:center; gap: 10px; margin-top: 18px; color: rgba(255,255,255,.68); font-size: 12px}
.authFooter .link{color: rgba(255,255,255,.84)}

/* Home (selector de módulos) */
.homeHero{position: relative; border-radius: 26px; overflow:hidden; border:1px solid rgba(255,255,255,.10); padding: 34px; margin-bottom: 18px;}
.homeHero__bg{position:absolute; inset:0;
  background:
    radial-gradient(800px 420px at 12% 20%, rgba(22,199,255,.16), transparent 55%),
    radial-gradient(900px 520px at 90% 50%, rgba(105,160,255,.18), transparent 60%),
    linear-gradient(165deg, rgba(10,18,36,.82), rgba(10,18,36,.65)),
    url("../img/bg_portal_blur.jpg");
  background-size: cover;
  background-position:center;
  filter: saturate(1.08) contrast(1.04);
}
.homeHero__content{position:relative}
.homeHero h1{font-size: 38px; margin: 0 0 6px; letter-spacing: -.6px}
.homeHero p{margin:0; color: rgba(255,255,255,.78)}

.moduleGrid{display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px}
@media (max-width: 1100px){.moduleGrid{grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 560px){.moduleGrid{grid-template-columns: 1fr;}}

.moduleCard{display:block; border-radius: 22px; padding: 22px; border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  transition: transform .14s ease, border-color .14s ease;
  min-height: 210px;
  position: relative;
  overflow:hidden;
}
.moduleCard:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.18)}
.moduleCard__icon{font-size: 34px; margin-bottom: 8px}
.moduleCard__title{font-weight: 900; font-size: 18px; margin-bottom: 6px}
.moduleCard__desc{color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.35}
.moduleCard__cta{margin-top: 18px; display:inline-flex; align-items:center; justify-content:center; padding: 10px 14px; border-radius: 12px;
  font-weight: 800; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08);
  width: max-content;
}

.moduleCard--blue{background:
  radial-gradient(600px 280px at 20% 0%, rgba(40,150,255,.25), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));}
.moduleCard--orange{background:
  radial-gradient(600px 280px at 20% 0%, rgba(255,140,40,.22), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));}
.moduleCard--green{background:
  radial-gradient(600px 280px at 20% 0%, rgba(40,220,140,.18), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));}
.moduleCard--purple{background:
  radial-gradient(600px 280px at 20% 0%, rgba(180,120,255,.20), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));}
.moduleCard--slate{background:
  radial-gradient(600px 280px at 20% 0%, rgba(200,210,255,.10), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));}

/* Operación y soporte */
.hero--hr .hero__bg{
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(40,220,140,.22), transparent 55%),
    radial-gradient(900px 520px at 85% 30%, rgba(22,199,255,.10), transparent 55%),
    linear-gradient(160deg, rgba(10,56,54,.90), rgba(10,18,36,.72)),
    url("../img/bg_portal_blur.jpg");
  background-size: cover;
  background-position:center;
}
.hrGrid{display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;}
@media (max-width: 1100px){.hrGrid{grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 560px){.hrGrid{grid-template-columns: 1fr;}}
.hrCard{border-radius: 18px; padding: 16px; border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: transform .14s ease, border-color .14s ease;
}
.hrCard:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.18)}
.hrCard__icon{font-size: 26px; margin-bottom: 8px}
.hrCard__title{font-weight: 900; margin-bottom: 6px}
.hrCard__desc{color: rgba(255,255,255,.72); font-size: 12.5px; min-height: 32px}
.hrCard__go{margin-top: 10px; color: rgba(22,199,255,.92); font-weight: 800; font-size: 12.5px}

/* Admin check grid */
.checkGrid{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
.check{display:flex; align-items:center; gap: 10px; padding: 10px 12px; border-radius: 14px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03)}
.check input{width: 18px; height: 18px}


/* ===== v4 Premium UI: ContaLive-style menu + module cards with images ===== */
.modulesNav{display:flex;align-items:center;gap:10px;margin-left:14px}
.modulesBtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--text);padding:8px 10px;border-radius:12px;cursor:pointer}
.modulesBtn .icon{opacity:.9}
.navLink{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:10px;border:1px solid transparent}
.navLink:hover{background:rgba(255,255,255,.06);border-color:var(--border)}
.modulesDrop{position:fixed;top:64px;right:18px;left:18px;max-width:1100px;margin:0 auto;background:rgba(10,14,22,.86);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08);border-radius:18px;box-shadow:0 24px 90px rgba(0,0,0,.45);padding:14px;z-index:60}
[data-theme="light"] .modulesDrop{background:rgba(255,255,255,.86);border-color:rgba(0,0,0,.08)}
.modulesDrop__head{display:flex;align-items:flex-end;justify-content:space-between;padding:6px 6px 10px}
.modulesDrop__title{font-weight:700}
.modulesDrop__hint{color:var(--muted);font-size:.92rem}
.modulesGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:900px){.modulesGrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.modulesGrid{grid-template-columns:1fr;}.modulesDrop{top:72px}}

.moduleCard{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid var(--border);border-radius:18px;padding:16px;position:relative;overflow:hidden;min-height:120px}
.moduleCard::before{content:"";position:absolute;inset:-2px;background:var(--card-bg);background-size:cover;background-position:center;filter:blur(10px);transform:scale(1.08);opacity:.42}
.moduleCard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,14,22,.12), rgba(10,14,22,.72));}
[data-theme="light"] .moduleCard::after{background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.78));}
.moduleCard > *{position:relative;z-index:1}
.moduleCard__icon{font-size:26px;margin-bottom:10px}
.moduleCard__title{font-weight:800;font-size:1.05rem}
.moduleCard__desc{color:var(--muted);margin-top:6px;max-width:46ch}
.moduleCard__cta{margin-top:10px;font-weight:700;opacity:.95}
.moduleCard:hover{transform:translateY(-1px);box-shadow:0 18px 60px rgba(0,0,0,.22)}
.moduleCard:active{transform:translateY(0)}

.moduleCard.moduleCard--blue,.moduleCard.moduleCard--orange,.moduleCard.moduleCard--green,.moduleCard.moduleCard--purple,.moduleCard.moduleCard--slate{background:transparent}

/* Dropdown cards */
.moduleCard{display:block;color:inherit;text-decoration:none}
.modulesDrop .moduleCard{min-height:92px;padding:14px}

/* ===== Command Palette (Ctrl+K) ===== */
.cmdk{position:fixed;inset:0;z-index:80}
.cmdk__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.58)}
.cmdk__panel{position:relative;max-width:780px;margin:10vh auto 0;background:rgba(15,20,32,.92);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.10);border-radius:18px;overflow:hidden;box-shadow:0 28px 110px rgba(0,0,0,.55)}
[data-theme="light"] .cmdk__panel{background:rgba(255,255,255,.92);border-color:rgba(0,0,0,.10)}
.cmdk__inputWrap{display:flex;align-items:center;gap:10px;padding:14px;border-bottom:1px solid rgba(255,255,255,.08)}
[data-theme="light"] .cmdk__inputWrap{border-bottom:1px solid rgba(0,0,0,.08)}
.cmdk__inputWrap input{flex:1;border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--text);padding:10px 12px;border-radius:12px}
[data-theme="light"] .cmdk__inputWrap input{background:rgba(0,0,0,.04)}
.cmdk__kbd kbd{padding:3px 7px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--muted);font-size:.85rem}
.cmdk__results{max-height:52vh;overflow:auto;padding:10px}
.cmdkEmpty{color:var(--muted);padding:18px}
.cmdkItem{display:block;text-decoration:none;color:inherit;border:1px solid transparent;border-radius:14px;padding:10px 12px;margin:6px 0}
.cmdkItem:hover{background:rgba(255,255,255,.06);border-color:var(--border)}
.cmdkItem--active{background:rgba(255,255,255,.10);border-color:var(--border)}
[data-theme="light"] .cmdkItem:hover{background:rgba(0,0,0,.04)}
[data-theme="light"] .cmdkItem--active{background:rgba(0,0,0,.06)}
.cmdkTitle{font-weight:800}
.cmdkDesc{color:var(--muted);font-size:.92rem;display:flex;gap:10px;align-items:center}
.cmdkMeta{padding:2px 8px;border-radius:999px;border:1px solid var(--border);font-size:.78rem;color:var(--muted)}

/* ===== Timeline + faltantes ===== */
.processList{display:flex;flex-direction:column;gap:12px}
.processCard{border:1px solid var(--border);border-radius:16px;padding:12px;background:rgba(255,255,255,.03)}
.processCard__top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.processCard__title{font-weight:900}
.processCard--ok{border-color:rgba(60,220,150,.28)}
.processCard--warn{border-color:rgba(255,200,90,.26)}
.processCard--bad{border-color:rgba(255,110,110,.26)}

/* Compact resumen (Solución 1) */
.procSummary{display:flex;flex-direction:column;gap:10px}
.procRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.03);text-decoration:none;color:inherit}
.procRow:hover{background:rgba(255,255,255,.05)}
.procRow.is-active{border-color:rgba(22,199,255,.34);box-shadow:0 0 0 4px rgba(22,199,255,.08) inset}
.procRow__title{font-weight:900}
.procRow__meta{margin-top:2px;font-size:.92rem}
.procRow__right{display:flex;align-items:center;gap:8px}

.procDetail{padding-top:4px}
.procDetail__head{margin-bottom:12px}
.procDetail__title{font-size:18px;font-weight:900}
.procDetail__meta{margin-top:6px}
.procDetail__quick{display:flex;gap:10px;flex-wrap:wrap}
.timeline--wide{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){
  .timeline--wide{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.callout{margin-top:12px;padding:12px 14px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text)}
.callout--ok{border-color:rgba(60,220,150,.26);background:rgba(60,220,150,.08)}

.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px}
.timeline__step{position:relative;padding:10px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.03)}
.timeline__dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.35);margin-bottom:8px}
.timeline__label{font-size:.92rem;font-weight:700}
.timeline__step.is-done{background:rgba(60,220,150,.10);border-color:rgba(60,220,150,.28)}
.timeline__step.is-done .timeline__dot{background:rgba(60,220,150,.9)}
.timeline__step.is-active{background:rgba(120,200,255,.10);border-color:rgba(120,200,255,.30)}
.timeline__step.is-active .timeline__dot{background:rgba(120,200,255,.95)}

.missing{margin-top:10px;border-top:1px solid rgba(255,255,255,.08);padding-top:10px}
[data-theme="light"] .missing{border-top:1px solid rgba(0,0,0,.08)}
.missing__title{font-weight:800;margin-bottom:8px}
.missing__items{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;gap:6px;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--text);font-size:.9rem}
.missing__cta{margin-top:10px}

/* Hero blur variant */
.hero__bg--blur{background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.60)), url('../img/bg_portal_blur.jpg');background-size:cover;background-position:center;filter:blur(0px)}
.hero--compact .hero__content{padding:26px 22px}

/* ===== Monthly calendar view ===== */
.calMonth{padding:14px}
.calMonth__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.calMonth__title{display:flex;flex-direction:column;gap:2px}
.calMonth__nav{display:flex;gap:8px;align-items:center}

.calGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.calGrid--head{gap:10px;margin-bottom:10px}
.calCell{border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.03);min-height:110px;padding:10px;position:relative;overflow:hidden}
.calCell--head{min-height:auto;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);color:var(--muted);font-weight:800;font-size:.9rem;text-transform:uppercase;letter-spacing:.4px}
.calCell.is-out{opacity:.55}
.calCell.is-today{border-color:rgba(22,199,255,.36);box-shadow:0 0 0 4px rgba(22,199,255,.10) inset}
.calCell__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.calDay{font-weight:900}
.calCell__events{display:flex;flex-direction:column;gap:6px}
.calEv{display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.06);padding:6px 8px;border-radius:12px;cursor:default}
[data-theme="light"] .calEv{background:rgba(0,0,0,.03)}
.calEv__dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5)}
.calEv__txt{font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calEv--tax{border-color:rgba(22,199,255,.22)}
.calEv--tax .calEv__dot{background:rgba(22,199,255,.95)}
.calEv--hr{border-color:rgba(60,220,150,.22)}
.calEv--hr .calEv__dot{background:rgba(60,220,150,.95)}

@media(max-width:900px){
  .calGrid{gap:8px}
  .calCell{min-height:100px}
}
@media(max-width:680px){
  .calGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calGrid--head{display:none}
  .calCell{min-height:120px}
}


/* ====== Topbar v4.1 — Tabs estilo ContaLive ====== */
.topbar{justify-content:space-between;}
.topbar__center{flex:1; display:flex; justify-content:center; padding:0 var(--space-4); overflow:hidden;}
.tabs{display:flex; gap:10px; align-items:center; padding:6px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); overflow:auto; max-width: 860px;}
[data-theme="light"] .tabs{border-color:rgba(0,0,0,.08); background:rgba(255,255,255,.65);}
.tabs::-webkit-scrollbar{height:6px;}
.tabs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12); border-radius:999px;}
[data-theme="light"] .tabs::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);}
.tab{display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:999px; text-decoration:none; color:var(--topbar-text); font-size:13px; border:1px solid transparent; white-space:nowrap; transition: background .12s ease, border-color .12s ease, transform .12s ease;}
.tab:hover{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.10); transform:translateY(-1px);}
[data-theme="light"] .tab:hover{background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.08);}
.tab.is-active{background:rgba(22,199,255,.12); border-color:rgba(22,199,255,.35);}
.tab--more{cursor:pointer; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.10);}
[data-theme="light"] .tab--more{background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.08);}
@media (max-width: 980px){
  .topbar__center{display:none;}
}

/* Profile dropdown */
.profileMenuWrap{position:relative;}
.profileBtn{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:var(--topbar-text);padding:8px 10px;border-radius:999px;cursor:pointer;}
.profileBtn .avatar{width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(22,199,255,.12);border:1px solid rgba(22,199,255,.25);font-weight:800;}
.profileBtn__name{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:13px;}
.profileMenu{position:absolute;top:52px;right:0;width:280px;background:rgba(10,14,22,.92);border:1px solid rgba(255,255,255,.10);border-radius:16px;box-shadow:0 18px 70px rgba(0,0,0,.45);overflow:hidden;z-index:70;}
[data-theme="light"] .profileMenu{background:rgba(255,255,255,.92);border-color:rgba(0,0,0,.10);}
.profileMenu__head{padding:12px 12px;border-bottom:1px solid rgba(255,255,255,.08);}
[data-theme="light"] .profileMenu__head{border-bottom-color:rgba(0,0,0,.08);}
.profileMenu__title{font-weight:800;}
.profileMenu__sub{font-size:12px;opacity:.75;margin-top:2px;}
.profileMenu__body{padding:8px;}
.profileMenu__link{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:12px;color:var(--text);text-decoration:none;border:1px solid transparent;background:transparent;width:100%;text-align:left;cursor:pointer;}
.profileMenu__link:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10);}
[data-theme="light"] .profileMenu__link:hover{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.08);}
.profileMenu__logout{color:#ffb3b3;}


/* v4.1.2 — Tabs + Más dropdown (ContaLive style) */
.tabs{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;overflow:visible}
.tab{white-space:nowrap}
.moreDrop{position:fixed;top:72px;left:50%;transform:translateX(-50%);z-index:60}
.moreDrop__panel{min-width:280px;max-width:520px;background:var(--card);border:1px solid var(--card-border);border-radius:16px;box-shadow:var(--shadow);padding:10px;backdrop-filter: blur(14px)}
.moreDrop__item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--text);text-decoration:none}
.moreDrop__item:hover{background:rgba(255,255,255,.06)}
.moreDrop__icon{width:24px;text-align:center;opacity:.9}
.moreDrop__label{font-weight:650}
@media (max-width: 980px){
  .moreDrop{left:auto;right:14px;transform:none}
}

/* Lighter dark a bit more */
[data-theme="dark"]{
  --bg: #0c2746;
  --bg-photo-opacity: .44;
}

/* Widget vencimientos (dashboard) */
.miniCal{margin-top:18px;padding:14px;border:1px solid var(--card-border);border-radius:16px;background:rgba(255,255,255,.04)}
.miniCal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.miniCal__title{font-weight:750}
.miniCal__link{color:var(--link);text-decoration:none;font-weight:650}
.miniCal__list{display:flex;flex-direction:column;gap:10px}
.miniCal__item{display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px;background:rgba(0,0,0,.12);border:1px solid rgba(255,255,255,.06)}
[data-theme="light"] .miniCal__item{background:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.06)}
.miniCal__day{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;background:rgba(255,255,255,.06)}
[data-theme="light"] .miniCal__day{background:rgba(0,0,0,.06)}
.miniCal__name{font-weight:700}
.miniCal__cat{font-size:12px;color:var(--muted)}
.miniCal__empty{color:var(--muted);padding:8px 2px}


/* ---- Addons v5 (Pendientes, Notifs, FAB, Pricing, Skeleton) ---- */
.homeActions{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media (max-width: 920px){.homeActions{grid-template-columns:1fr}}

.card__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.list__item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.list__icon{width:28px;height:28px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.06)}
.list__text{flex:1;color:var(--text)}
.pill{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);color:var(--text-muted)}

/* Badges (categorías calendario) */
.badge{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);color:var(--text)}
.badge--tax{ background: rgba(22,119,255,.14); border-color: rgba(22,119,255,.25); color: #d7e8ff; }
.badge--hr{ background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.25); color: #dff7ea; }

/* En tema claro, mantener contraste */
:root[data-theme="light"] .badge--tax{ color:#0b3b7a; }
:root[data-theme="light"] .badge--hr{ color:#0f3a23; }

.notifPanel{position:absolute;top:56px;right:8px;width:320px;max-width:90vw;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);padding:10px;z-index:50}
.notifItem{display:block;padding:10px;border-radius:12px;color:var(--text);text-decoration:none}
.notifItem:hover{background:var(--surface-2)}
.notifItem__title{font-weight:700;font-size:13px}
.notifItem__body{font-size:12px;color:var(--text-muted);margin-top:2px}

.fab{position:fixed;right:18px;bottom:18px;width:52px;height:52px;border-radius:999px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));color:var(--text);font-size:28px;line-height:1;display:grid;place-items:center;box-shadow:var(--shadow-sm);z-index:60;cursor:pointer}
.fab--open{transform:rotate(45deg)}
.fabMenu{position:fixed;right:18px;bottom:78px;display:flex;flex-direction:column;gap:10px;z-index:60}
.fabMenu__item{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);text-decoration:none;min-width:220px}
.fabMenu__item:hover{background:var(--surface-2)}
.fabMenu__btn{width:100%;text-align:left;padding:10px 12px;border:0;background:transparent;color:inherit;cursor:pointer}

.pricing__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width: 980px){.pricing__grid{grid-template-columns:1fr}}
.pricing__card ul{margin:12px 0 18px 18px;color:var(--text-muted)}
.pricing__card--highlight{outline:2px solid rgba(64,170,255,.25);box-shadow:0 16px 40px rgba(0,0,0,.25)}

[data-skeleton].is-loading{position:relative;overflow:hidden}
[data-skeleton].is-loading:after{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.10), rgba(255,255,255,.04));
  transform:translateX(-100%);animation:skeleton 1.2s infinite;
}
@keyframes skeleton{to{transform:translateX(100%)}}


.watermark{position:absolute;top:12px;right:12px;z-index:3;font-size:12px;color:rgba(255,255,255,.55);background:rgba(0,0,0,.35);border:1px solid var(--border);padding:6px 10px;border-radius:999px;pointer-events:none}
.pdfFrame{background:rgba(255,255,255,.02)}
.comments{display:flex;flex-direction:column;gap:10px;margin-top:10px;max-height:360px;overflow:auto}
.comment{padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.comment__meta{font-size:12px}
.comment__body{margin-top:6px;color:var(--text)}

/* Admin actions */
.pill--ok{ background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.25); color:#d9ffe6; }
:root[data-theme="light"] .pill--ok{ color:#0b5a2a; }
.pill--muted{ background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.22); color:#cbd5e1; }
:root[data-theme="light"] .pill--muted{ color:#334155; }

.btn--danger{ background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.25); color:#ffd6d6; }
.btn--danger:hover{ background: rgba(239,68,68,.20); }
:root[data-theme="light"] .btn--danger{ color:#7a0b0b; }

.actionsRow{ display:flex; gap:10px; flex-wrap:wrap; }
.list{ display:flex; flex-direction:column; gap:10px; }
.list__row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--card-border); background: var(--card); border-radius: 14px; }
.list__title{ flex:1; font-weight:600; }
.list__meta{ color: var(--muted); font-size: 13px; }
.badge{ display:inline-flex; align-items:center; justify-content:center; padding:4px 10px; border:1px solid var(--card-border); background: rgba(255,255,255,.06); border-radius: 999px; font-size: 12px; }

:root{--table-head: rgba(15,23,42,.06)}
:root[data-theme="dark"]{--table-head: rgba(255,255,255,.06)}
.table thead th{background: var(--table-head);}


/* === NAV FIX (tabs + empresa no se pisan) === */
.topbar{gap: 12px;}
.topbar__left{flex: 0 0 auto;}
.topbar__center{flex: 1 1 auto; min-width: 0; overflow: visible;}
.topbar__right{flex: 0 0 auto; min-width: 0;}

.tabs{
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar{height:6px}
.tabs::-webkit-scrollbar-thumb{background: rgba(255,255,255,.12); border-radius:999px}
body[data-theme="light"] .tabs::-webkit-scrollbar-thumb{background: rgba(15,23,42,.14);}

.company{max-width: 320px;}
.company select{max-width: 320px; text-overflow: ellipsis;}

@media (max-width: 1100px){
  .company{max-width: 240px;}
  .topbar__left .brand__text{display:none;}
}
@media (max-width: 860px){
  .tabs{gap:8px;}
  .company{display:none;} /* en móvil mejor ocultar selector (se mantiene en menú perfil) */
}

/* === MOBILE HOTFIX: iPhone SE necesita ver/cambiar empresa rápido === */
@media (max-width: 420px){
  /* re-habilita selector de empresa en topbar (app.css lo ocultaba a 860px) */
  .topbar .company{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 6px !important;
  }
  .topbar .company select{
    width: 100% !important;
    max-width: none !important;
  }
}




/* ===== FIX: Topbar siempre visible (sin auto-hide) ===== */
.topbar{
  transform: translateY(0) !important;
  opacity: 1 !important;
  z-index: 999 !important;
  will-change: transform;
}

/* FIX definitivo: iOS a veces ignora sticky si el parent tiene overflow/transform.
   Dejamos la topbar FIXED para que nunca desaparezca al hacer scroll. */
:root{ --topbar-fixed-h: 78px; }
.topbar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* iOS safe-area */
.topbar{
  padding-top: env(safe-area-inset-top);
  height: auto;
  min-height: 68px;
}
.topbar__left, .topbar__right{flex-wrap: wrap}

/* Ajuste de padding del contenido para topbar fijo */
.main{
  /* La altura ya incluye safe-area porque el topbar lo incorpora en su offsetHeight */
  padding-top: calc(var(--topbar-fixed-h) + 10px);
}
@media (max-width: 420px){
  :root{ --topbar-fixed-h: 128px; }
  .main{ padding-top: calc(var(--topbar-fixed-h) + 10px); }
}

/* Sidebar: asegurar scroll siempre (desktop + mobile drawer) */
.sidebar{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}