:root{
  --bg:#FFFFFF;
  --bg-soft:#F6F5F1;
  --bg-card:#FFFFFF;
  --line:#E8E5DD;
  --line-strong:#D6D1C4;
  --ink:#1C1A17;
  --ink-soft:#6B6459;
  --ink-faint:#A39C8E;
  --accent:#80412A;
  --accent-soft:#F3E4DC;
  --accent-hover:#6C371F;
  --header-bg:#FFFFFF;
  --header-fg:#1C1A17;
  --header-border:#E8E5DD;
  --danger:#B23B3B;
  --danger-soft:#F7E4E1;
  --ok:#2F7D5D;
  --ok-soft:#E3F1EB;
  --cal-produccion-bg:#E3EAF3;
  --cal-produccion-fg:#3F5E82;
  --cal-creacion-bg:#EDE3F3;
  --cal-creacion-fg:#6E4B8C;
  --cal-contenido-bg:#F5E3EC;
  --cal-contenido-fg:#96406B;
  --cal-tarea-bg:#F5EDDD;
  --cal-tarea-fg:#93701F;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(28,26,23,0.05), 0 2px 10px rgba(28,26,23,0.04);
  --font-heading:'Manrope', -apple-system, sans-serif;
  --font-body:'Manrope', -apple-system, sans-serif;
}
:root[data-theme="dark"]{
  --bg:#15130F;
  --bg-soft:#1D1A15;
  --bg-card:#1D1A15;
  --line:rgba(231,227,214,0.12);
  --line-strong:rgba(231,227,214,0.22);
  --ink:#F2EFE9;
  --ink-soft:#B8AEA5;
  --ink-faint:rgba(184,174,165,0.6);
  --accent:#C87A52;
  --accent-soft:rgba(200,122,82,0.16);
  --accent-hover:#DA906A;
  --header-bg:#1D1A15;
  --header-fg:#F2EFE9;
  --header-border:rgba(231,227,214,0.12);
  --danger:#E08E8E;
  --danger-soft:rgba(224,142,142,0.14);
  --ok:#66CBA0;
  --ok-soft:rgba(102,203,160,0.14);
  --cal-produccion-bg:rgba(139,168,214,0.16);
  --cal-produccion-fg:#9DBBE0;
  --cal-creacion-bg:rgba(184,140,214,0.16);
  --cal-creacion-fg:#C6A0E0;
  --cal-contenido-bg:rgba(214,140,175,0.16);
  --cal-contenido-fg:#E0A0BF;
  --cal-tarea-bg:rgba(214,178,110,0.16);
  --cal-tarea-fg:#E0BE84;
  --shadow:0 1px 2px rgba(0,0,0,0.35), 0 2px 12px rgba(0,0,0,0.3);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg);
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-weight:500;
  font-size:14.5px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}

/* ---------- TOP BAR ---------- */
.topbar{
  display:flex;
  align-items:center;
  height:60px;
  padding:0 28px;
  background:var(--header-bg);
  border-bottom:1px solid var(--header-border);
  position:sticky; top:0; z-index:10;
}
.brand-block{
  display:flex; align-items:center; gap:10px;
  padding-right:28px; margin-right:28px; border-right:1px solid var(--header-border);
  text-decoration:none; white-space:nowrap; flex-shrink:0;
}
.brand-text{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:15px;
  letter-spacing:0.02em;
  color:var(--header-fg);
}
.brand-logo{
  display:block; height:32px; width:auto; max-width:120px; object-fit:contain;
}
.menu-toggle{
  display:none;
  background:none; border:1px solid var(--line-strong); color:var(--ink-soft);
  width:36px; height:36px; border-radius:8px; cursor:pointer;
  align-items:center; justify-content:center; font-size:17px; flex-shrink:0;
  margin-left:auto;
}
.menu-toggle:hover{border-color:var(--accent); color:var(--accent);}
.topbar-menu{display:flex; align-items:center; flex:1; min-width:0;}
.topbar-menu-footer{display:flex; align-items:center; margin-left:auto;}
nav#nav{display:flex; gap:2px; overflow-x:auto;}
.nav-item{
  display:flex; align-items:center; gap:7px;
  padding:0 16px;
  height:60px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.01em;
  color:var(--ink-faint);
  cursor:pointer;
  border-bottom:2px solid transparent;
  white-space:nowrap;
  text-decoration:none;
  transition:color .12s ease, border-color .12s ease;
}
.nav-item:hover{color:var(--ink);}
.nav-item.active{color:var(--ink); border-bottom:2px solid var(--accent);}
.nav-item.inactive{color:var(--ink-faint); opacity:.45; cursor:not-allowed;}
.nav-item.inactive:hover{color:var(--ink-faint);}

.status{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; color:var(--ink-faint);
  white-space:nowrap; padding-left:18px;
}
.status-dot{width:6px; height:6px; border-radius:50%; background:var(--ok); border:1px solid var(--ok);}
.status-dot.warn{background:var(--danger); border-color:var(--danger);}
.logout-link{
  background:none; border:none; color:var(--ink-faint); text-decoration:underline;
  cursor:pointer; font-size:12px; font-weight:600;
  font-family:var(--font-body); margin-left:6px;
}
.logout-link:hover{color:var(--ink);}

.theme-toggle{
  background:none;
  border:1px solid var(--line-strong);
  color:var(--ink-soft);
  width:30px; height:30px;
  border-radius:50%;
  cursor:pointer;
  font-size:13px;
  display:flex; align-items:center; justify-content:center;
  margin-left:16px;
  flex-shrink:0;
}
.theme-toggle:hover{border-color:var(--accent); color:var(--accent);}

/* ---------- MAIN ---------- */
main{padding:44px 56px 80px; max-width:1180px; margin:0 auto;}

.eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:10px;
}
h1{font-family:var(--font-heading); font-weight:800; font-size:30px; color:var(--ink); margin-bottom:10px; letter-spacing:-0.015em;}
.lede{
  font-size:14.5px; color:var(--ink-soft); max-width:640px;
  margin-bottom:36px; line-height:1.6;
}

.back-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; color:var(--ink-soft);
  text-decoration:none; margin-bottom:18px;
}
.back-link:hover{color:var(--accent);}

.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px;}
.card-grid.cols-2{grid-template-columns:1fr 1fr;}
.card-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 20px 18px;}
.card h3{font-family:var(--font-heading); font-weight:700; font-size:14.5px; color:var(--ink); margin-bottom:7px;}
.card p{font-size:12.5px; line-height:1.55; color:var(--ink-soft);}
.card .stat{font-size:22px; font-weight:800; color:var(--ink); font-family:var(--font-heading); margin:4px 0;}
.card .tag{
  display:inline-block; margin-top:14px; font-size:10px; font-weight:700;
  letter-spacing:0.05em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--bg-soft); padding:4px 9px; border-radius:20px;
}
.card .tag.auto{color:var(--accent); background:var(--accent-soft);}

.dash-stats .card{border-top:3px solid var(--accent);}
.dash-stats .stat{color:var(--accent);}

/* ---------- TEMPORADAS (catálogo) ---------- */
/* Grilla de apps estilo Odoo — íconos grandes para navegar entre módulos */
.app-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:18px; margin:24px 0 8px;}
.app-tile{display:flex; flex-direction:column; align-items:center; gap:12px; padding:24px 10px; border-radius:22px; background:var(--bg-card); border:1px solid var(--line); text-decoration:none; transition:all .15s ease;}
.app-tile:hover{border-color:var(--accent); box-shadow:0 4px 14px rgba(0,0,0,.08); transform:translateY(-2px);}
.app-tile-icon{width:76px; height:76px; border-radius:20px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center;}
.app-tile-label{font-size:12.5px; font-weight:700; color:var(--ink); text-align:center; letter-spacing:.01em;}
.app-tile.inactive{opacity:.4; cursor:default; pointer-events:none;}
.app-tile.inactive .app-tile-icon{background:var(--bg-soft);}

/* Grilla de acciones dentro de un módulo — el "menú" al entrar a cada app */
.action-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; margin:20px 0 8px;}
.action-tile{display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:var(--radius); background:var(--bg-card); border:1px solid var(--line); text-decoration:none; transition:all .15s ease;}
.action-tile:hover{border-color:var(--accent); box-shadow:0 4px 14px rgba(0,0,0,.08);}
.action-tile-icon{width:44px; height:44px; border-radius:12px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.action-tile-icon svg{width:22px; height:22px;}
.action-tile-text b{display:block; font-size:13.5px; color:var(--ink); margin-bottom:2px;}
.action-tile-text span{font-size:11.5px; color:var(--ink-faint); line-height:1.4;}

.season-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px; margin-bottom:8px;}
.season-card{
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:20px; display:flex; flex-direction:column; gap:12px;
  text-decoration:none; color:inherit; transition:border-color .15s ease;
}
.season-card:hover{border-color:var(--accent);}
.season-card .season-name{font-family:var(--font-heading); font-weight:800; font-size:17px; color:var(--ink); letter-spacing:-0.01em;}
.season-card .season-count{font-size:12.5px; font-weight:600; color:var(--ink-soft);}
.season-card .season-enter{font-size:12px; font-weight:700; color:var(--accent); margin-top:auto;}
.season-badge{
  align-self:flex-start; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:4px 10px; border-radius:20px; background:var(--ok-soft); color:var(--ok);
}
.season-badge.inactive{background:var(--bg-soft); color:var(--ink-faint);}
.season-toggle-form{margin-top:-2px; display:inline-block;}

.product-list{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.product-row{
  background:var(--bg-card); padding:16px 20px; display:grid;
  grid-template-columns:2.1fr 0.9fr 0.7fr 1.4fr 0.8fr; gap:16px; align-items:center;
}
.product-row.head{
  background:var(--bg-soft); font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-faint); padding:12px 20px;
}
.product-name{font-family:var(--font-heading); font-weight:700; color:var(--ink); font-size:13.5px;}
.product-name .sub{display:block; font-weight:500; font-size:12px; color:var(--ink-soft); margin-top:2px;}
.sku-chip{
  display:inline-block; font-size:11px; font-weight:700; color:var(--ink-soft);
  background:var(--bg-soft); border:1px solid var(--line); border-radius:6px; padding:3px 8px;
}
.stock-value{font-weight:700; color:var(--ink);}
.stock-value.pending{font-weight:500; color:var(--ink-faint); font-style:italic;}
.insumos-note{font-size:12.5px; color:var(--ink-soft); line-height:1.4;}
.insumos-note.pending{color:var(--ink-faint); font-style:italic;}
.price-value{font-weight:700; color:var(--ink);}
.price-value.pending{font-weight:500; color:var(--ink-faint); font-style:italic;}

/* ---------- CALENDARIO ---------- */
.cal-view-tabs{display:inline-flex; gap:2px; background:var(--bg-soft); border-radius:var(--radius-sm); padding:3px; margin-top:18px;}
.cal-view-tab{
  padding:7px 16px; font-size:12px; font-weight:700; color:var(--ink-soft); text-decoration:none;
  border-radius:6px; transition:all .15s ease;
}
.cal-view-tab:hover{color:var(--ink);}
.cal-view-tab.active{background:var(--bg-card); color:var(--ink); box-shadow:var(--shadow);}
.cal-nav{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:20px 0 14px;}
.cal-nav-label{font-family:var(--font-heading); font-weight:800; font-size:16px; color:var(--ink); display:flex; align-items:center;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.cal-weekday{
  background:var(--bg-soft); padding:9px 10px; font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-faint); text-align:center;
}
.cal-day{background:var(--bg-card); min-height:96px; padding:8px; display:flex; flex-direction:column; gap:6px; position:relative;}
.cal-day.other-month{background:var(--bg-soft);}
.cal-day.other-month .cal-day-num{color:var(--ink-faint);}
.cal-day.today{box-shadow:inset 0 0 0 2px var(--accent);}
.cal-day-head{display:flex; align-items:center; justify-content:space-between;}
.cal-day-num{font-size:12px; font-weight:700; color:var(--ink); text-decoration:none;}
.cal-day-num:hover{color:var(--accent);}

.cal-grid-week .cal-day-week{min-height:220px;}

.cal-detail-list{display:flex; flex-direction:column; gap:12px;}
.cal-detail-card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px;}
.cal-detail-card h3{font-family:var(--font-heading); font-size:16px; font-weight:800; color:var(--ink); margin:10px 0 6px;}
.cal-detail-card p{font-size:13px; color:var(--ink-soft); line-height:1.5;}
.cal-detail-meta{margin-top:8px !important; font-size:11.5px !important; color:var(--ink-faint) !important;}

.cal-year-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.cal-mini-month{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow);}
.cal-mini-month-title{
  display:block; font-family:var(--font-heading); font-size:12.5px; font-weight:800; color:var(--ink);
  text-decoration:none; margin-bottom:10px; text-transform:uppercase; letter-spacing:.03em;
}
.cal-mini-month-title:hover{color:var(--accent);}
.cal-mini-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
.cal-mini-weekday{font-size:9px; font-weight:700; color:var(--ink-faint); text-align:center; padding-bottom:4px;}
.cal-mini-day{
  font-size:10px; text-align:center; padding:4px 0; border-radius:4px; color:var(--ink-soft);
  text-decoration:none; font-weight:600;
}
.cal-mini-day:hover{background:var(--bg-soft);}
.cal-mini-day.other{color:var(--ink-faint); opacity:.4;}
.cal-mini-day.today{background:var(--accent); color:#fff; font-weight:800;}
.cal-mini-day.has-events:not(.today){background:var(--accent-soft); color:var(--accent); font-weight:800;}

/* ---------- FINANZAS ---------- */
.rep-months{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:6px 20px;}
.rep-month-row{display:grid; grid-template-columns:60px 1fr 190px; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid var(--line);}
.rep-month-row:last-child{border-bottom:none;}
.rep-month-label{font-size:11.5px; font-weight:700; color:var(--ink-soft);}
.rep-month-bars{display:flex; flex-direction:column; gap:4px;}
.rep-bar{height:7px; border-radius:4px; min-width:2px;}
.rep-bar.ok{background:var(--ok);}
.rep-bar.danger{background:var(--danger);}
.rep-month-nums{font-size:11.5px; font-weight:700; text-align:right; white-space:nowrap;}
.cal-add{
  font-size:12px; font-weight:800; color:var(--ink-faint); text-decoration:none; line-height:1;
  width:16px; height:16px; display:flex; align-items:center; justify-content:center; border-radius:4px;
}
.cal-add:hover{color:var(--accent); background:var(--accent-soft);}
.cal-events{display:flex; flex-direction:column; gap:3px;}
.cal-event{
  display:block; font-size:10.5px; font-weight:700; padding:3px 6px; border-radius:5px;
  text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cal-event.hecho{opacity:.5; text-decoration:line-through;}
.cal-more{font-size:10px; font-weight:700; color:var(--ink-faint); padding:0 6px;}

.cal-badge{
  display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:4px 9px; border-radius:20px;
}
.cal-event.tipo-lanzamiento, .cal-badge.tipo-lanzamiento{background:var(--accent-soft); color:var(--accent);}
.cal-event.tipo-produccion, .cal-badge.tipo-produccion{background:var(--cal-produccion-bg); color:var(--cal-produccion-fg);}
.cal-event.tipo-creacion, .cal-badge.tipo-creacion{background:var(--cal-creacion-bg); color:var(--cal-creacion-fg);}
.cal-event.tipo-contenido, .cal-badge.tipo-contenido{background:var(--cal-contenido-bg); color:var(--cal-contenido-fg);}
.cal-event.tipo-tarea, .cal-badge.tipo-tarea{background:var(--cal-tarea-bg); color:var(--cal-tarea-fg);}
.cal-event.tipo-otro, .cal-badge.tipo-otro{background:var(--bg-soft); color:var(--ink-soft);}

@media (max-width:760px){
  .cal-day{min-height:44px; padding:6px;}
  .cal-events{display:none;}
  .cal-day.has-events::after{
    content:''; position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
    width:5px; height:5px; border-radius:50%; background:var(--accent);
  }
  .cal-grid-week .cal-day-week{min-height:auto;}
  .cal-grid-week .cal-day-week .cal-events{display:flex;}
  .cal-weekday{font-size:9px; padding:6px 4px;}
  .cal-nav-label{font-size:14px;}
  .cal-year-grid{grid-template-columns:1fr 1fr;}
  .cal-view-tabs{width:100%; overflow-x:auto;}
  .rep-month-row{grid-template-columns:44px 1fr; grid-template-areas:"label nums" "bars bars"; row-gap:4px;}
  .rep-month-label{grid-area:label;}
  .rep-month-nums{grid-area:nums; text-align:right; font-size:10.5px;}
  .rep-month-bars{grid-area:bars;}
}

@media (max-width:860px){
  .product-row, .product-row.head{grid-template-columns:1fr; gap:4px;}
  .product-row.head{display:none;}
  .product-row{border-bottom:1px solid var(--line);}
}

.table-wrap{border:1px solid var(--line); border-radius:var(--radius); margin-top:32px; overflow:hidden; overflow-x:auto; box-shadow:var(--shadow);}
table.skeleton{width:100%; border-collapse:collapse;}
table.skeleton th{
  text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-faint); background:var(--bg-soft); border-bottom:1px solid var(--line); padding:11px 16px;
  white-space:nowrap;
}
table.skeleton td{
  padding:13px 16px; font-size:13px; color:var(--ink-soft);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
table.skeleton tr:last-child td{border-bottom:none;}

.empty-note{
  margin-top:14px; padding:13px 16px; background:var(--bg-soft); border-radius:var(--radius-sm);
  font-size:12px; font-weight:600; color:var(--ink-soft); border-left:3px solid var(--accent);
}
.empty-note.real-note{border-left:3px solid var(--ok); background:var(--ok-soft); color:var(--ink);}

.steps{margin-top:8px; border-top:1px solid var(--line);}
.step{display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line);}
.step .n{font-weight:800; font-size:14px; color:var(--accent); min-width:22px;}
.step .t{font-size:13.5px; line-height:1.5; color:var(--ink-soft); font-weight:500;}

@media (max-width:760px){
  main{padding:32px 20px 60px;}
  .card-grid, .card-grid.cols-2, .card-grid.cols-4{grid-template-columns:1fr;}

  .topbar{display:grid; grid-template-columns:40px 1fr 40px; align-items:center; padding:0 12px; box-shadow:0 1px 4px rgba(0,0,0,.06);}
  :root[data-theme="dark"] .topbar{box-shadow:0 1px 4px rgba(0,0,0,.3);}
  .brand-block{grid-column:2; justify-self:center; padding:0; margin:0; border-right:none; gap:6px;}
  .brand-text{font-size:11.5px;}
  .brand-logo{height:26px; max-width:120px;}
  .menu-toggle{display:flex; grid-column:1; justify-self:start; margin-left:0;}

  .topbar-menu{
    display:none;
    position:fixed; top:60px; left:0; right:0; bottom:0;
    background:var(--bg); z-index:50;
    flex-direction:column; align-items:stretch;
    padding:8px 20px 28px; overflow-y:auto;
    border-top:1px solid var(--line);
  }
  .topbar-menu.open{display:flex;}

  nav#nav{flex-direction:column; overflow-x:visible; gap:0; width:100%;}
  .nav-item{
    height:auto; width:100%; padding:16px 8px;
    border-bottom:1px solid var(--line); border-left:3px solid transparent;
    font-size:14.5px;
  }
  .nav-item.active{border-bottom:1px solid var(--line); border-left:3px solid var(--accent);}
  .nav-item.inactive{border-left:3px solid transparent;}

  .topbar-menu-footer{
    flex-direction:column; align-items:stretch; margin-left:0;
    margin-top:16px; padding-top:20px; border-top:1px solid var(--line); gap:16px;
  }
  .status{padding-left:0; justify-content:space-between;}
  .theme-toggle{margin-left:0;}
}
@media (max-width:980px) and (min-width:761px){
  .card-grid.cols-4, .card-grid:not(.cols-2){grid-template-columns:1fr 1fr;}
}

/* ---------- LOGIN ---------- */
.login-screen{
  position:fixed; inset:0; background:var(--bg); z-index:100;
  display:flex; align-items:center; justify-content:center;
}
.login-box{width:320px;}
.login-brand{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:20px; text-align:center;}
.login-logo{max-height:52px; max-width:220px; object-fit:contain;}
.login-brand-text{font-family:var(--font-heading); font-weight:800; font-size:15px; letter-spacing:0.02em; color:var(--ink);}
.login-box h1{font-size:22px; margin-bottom:28px;}
.login-box label{display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:6px;}
.login-box .field{margin-bottom:18px;}
.login-box input{
  width:100%; border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:10px 12px; font-size:13.5px;
  font-family:var(--font-body); font-weight:500; background:var(--bg-card); color:var(--ink);
}
.login-box input:focus{outline:none; border-color:var(--accent);}
.login-box button{
  width:100%; background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm); padding:12px;
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; cursor:pointer; margin-top:6px;
  font-family:var(--font-body);
}
.login-box button:hover{background:var(--accent-hover);}
.login-note{font-size:11.5px; color:var(--ink-faint); margin-top:16px; line-height:1.5; font-weight:600;}
.login-error{font-size:12.5px; font-weight:700; color:var(--danger); margin-bottom:14px;}

/* ---------- CONFIGURACIÓN / MÓDULOS ---------- */
.integ-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border:1px solid var(--line); border-top:none; background:var(--bg-card);
}
.integ-row:first-child{border-top:1px solid var(--line); border-top-left-radius:var(--radius); border-top-right-radius:var(--radius);}
.integ-row:last-child{border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius);}
.integ-info b{font-family:var(--font-heading); font-weight:700; font-size:14px; color:var(--ink); display:block; margin-bottom:3px;}
.integ-info span{font-size:11.5px; font-weight:600; color:var(--ink-faint);}
.switch{
  width:38px; height:20px; border:1px solid var(--line-strong); border-radius:20px; position:relative; cursor:pointer; flex-shrink:0;
  background:var(--bg-soft); padding:0;
}
.switch::after{
  content:''; position:absolute; width:14px; height:14px; border-radius:50%; background:var(--ink-faint);
  top:2px; left:2px; transition:all .15s ease;
}
.switch.on{background:var(--accent); border-color:var(--accent);}
.switch.on::after{left:20px; background:#fff;}
.integ-status{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-right:14px; white-space:nowrap;}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm); padding:9px 16px;
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; cursor:pointer;
  font-family:var(--font-body); white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  transition:background .15s ease, box-shadow .15s ease, transform .1s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{background:var(--accent-hover); box-shadow:0 4px 12px rgba(0,0,0,.14); transform:translateY(-1px);}
.btn:active{transform:translateY(0); box-shadow:0 1px 2px rgba(0,0,0,.1);}
.btn.danger{background:var(--danger-soft); color:var(--danger); border:1px solid transparent; box-shadow:none;}
.btn.danger:hover{background:var(--danger); color:#fff;}
.btn.ghost{background:var(--bg-card); color:var(--ink-soft); border:1px solid var(--line-strong); box-shadow:none;}
.btn.ghost:hover{color:var(--ink); border-color:var(--accent); background:var(--bg-card); box-shadow:0 2px 8px rgba(0,0,0,.06);}

/* pequeños, para acciones en línea (Editar, Dar de baja, Quitar, etc.) */
.btn-xs{
  display:inline-flex; align-items:center; gap:4px;
  background:var(--bg-soft); color:var(--ink-soft); border:1px solid var(--line-strong);
  border-radius:20px; padding:5px 12px; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; text-decoration:none; cursor:pointer;
  font-family:var(--font-body); white-space:nowrap;
  transition:all .15s ease;
}
.btn-xs:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft);}
.btn-xs.danger{color:var(--danger);}
.btn-xs.danger:hover{border-color:var(--danger); background:var(--danger-soft);}
.btn-xs.ok{color:var(--ok);}
.btn-xs.ok:hover{border-color:var(--ok); background:var(--ok-soft);}

/* ---------- FILTROS ---------- */
.filter-bar{
  display:flex; gap:18px; align-items:flex-end; flex-wrap:wrap;
  margin-bottom:20px; padding:14px 18px;
  background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.filter-field{display:flex; flex-direction:column; gap:6px;}
.filter-field label{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint);}
.filter-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:1px solid var(--line-strong); border-radius:20px;
  padding:7px 30px 7px 14px; font-size:12.5px; font-weight:600; font-family:var(--font-body);
  background-color:var(--bg); color:var(--ink);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0l5 6 5-6z" fill="%23A39C8E"/></svg>');
  background-repeat:no-repeat; background-position:right 12px center;
  cursor:pointer; transition:border-color .15s ease;
}
.filter-select:hover, .filter-select:focus{border-color:var(--accent); outline:none;}
.filter-date{
  border:1px solid var(--line-strong); border-radius:20px;
  padding:7px 14px; font-size:12.5px; font-weight:600; font-family:var(--font-body);
  background-color:var(--bg); color:var(--ink); cursor:pointer; transition:border-color .15s ease;
}
.filter-date:hover, .filter-date:focus{border-color:var(--accent); outline:none;}
.filter-checkbox{
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:600; color:var(--ink-soft);
  padding-bottom:7px; cursor:pointer; white-space:nowrap;
}
.filter-checkbox input{width:16px; height:16px; accent-color:var(--accent); cursor:pointer;}

.user-card{border:1px solid var(--line); border-top:none; padding:16px 20px; background:var(--bg-card);}
.user-card:first-child{border-top:1px solid var(--line); border-top-left-radius:var(--radius); border-top-right-radius:var(--radius);}
.user-card:last-child{border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius);}
.user-card-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.user-card-head b{font-family:var(--font-heading); font-weight:700; font-size:15px; color:var(--ink);}
.user-card-head .email{font-size:12px; font-weight:600; color:var(--ink-faint);}
.role-badge{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:4px 10px; border-radius:20px;
  background:var(--bg-soft); color:var(--ink-soft); margin-left:auto;
}
.role-badge.admin{background:var(--accent-soft); color:var(--accent);}

.movement-badge{
  display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:4px 10px; border-radius:20px;
}
.movement-badge.ingreso{background:var(--accent-soft); color:var(--accent);}
.movement-badge.salida{background:var(--danger-soft); color:var(--danger);}

.doc-card{border:1px solid var(--line); border-radius:var(--radius); padding:24px 28px; max-width:520px; background:var(--bg-soft);}
.doc-card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--line);}
.doc-code{font-family:var(--font-heading); font-weight:800; font-size:20px; color:var(--ink);}
.doc-row{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.doc-row:last-child{border-bottom:none;}
.doc-row .doc-label{color:var(--ink-faint); font-weight:600;}
.doc-row .doc-value{color:var(--ink); font-weight:600; text-align:right;}

.radio-row{display:flex; gap:22px; flex-wrap:wrap; padding-top:6px;}
.radio-row .radio-option{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--ink); text-transform:none; letter-spacing:normal; white-space:nowrap; margin-bottom:0;}
.radio-row .radio-option input{width:16px; height:16px; flex-shrink:0;}

.perm-table{width:100%; max-width:420px; margin:4px 0 14px; border-collapse:collapse; font-size:12px;}
.perm-table th{text-align:left; font-weight:700; color:var(--ink-faint); text-transform:uppercase; font-size:10px; letter-spacing:.04em; padding:4px 10px 6px 0;}
.perm-table td{padding:5px 10px 5px 0; color:var(--ink-soft); font-weight:500;}
.perm-table td input[type="checkbox"]{width:16px; height:16px; accent-color:var(--accent); cursor:pointer;}

.user-actions{display:flex; gap:20px; flex-wrap:wrap;}
.user-actions form{display:flex; align-items:center; gap:8px;}
.user-actions input, .user-actions select{
  border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:6px 8px; font-size:12.5px; font-weight:500; font-family:var(--font-body);
  background:var(--bg); color:var(--ink);
}

.new-user-form{border:1px solid var(--line); border-top:none; border-radius:0 0 var(--radius) var(--radius); padding:20px; background:var(--bg-soft);}
.new-user-form .field{margin-bottom:14px; max-width:320px;}
.new-user-form label{display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:6px;}
.new-user-form input, .new-user-form select, .new-user-form textarea{
  width:100%; max-width:320px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:9px 12px; font-size:13.5px;
  font-family:var(--font-body); font-weight:500; background:var(--bg); color:var(--ink); resize:vertical;
}

/* ---------- SISTEMA (marca y apariencia) ---------- */
.sistema-h3-standalone{margin:36px 0 6px; font-size:15px; font-weight:700; font-family:var(--font-heading); color:var(--ink);}
.sistema-hint{font-size:12px; color:var(--ink-faint);}
.sistema-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; margin-bottom:8px;}
.sistema-form{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px;}
.sistema-section{padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line);}
.sistema-section:last-of-type{border-bottom:none; margin-bottom:20px; padding-bottom:0;}
.sistema-section h3{font-family:var(--font-heading); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:14px;}
.sistema-row{display:flex; gap:14px;}
.sistema-row .field{flex:1;}
.sistema-form .field{margin-bottom:14px; max-width:none;}
.sistema-form select{
  width:100%; border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:9px 12px; font-size:13px;
  font-family:var(--font-body); background:var(--bg); color:var(--ink);
}
.sistema-form input[type="file"]{
  width:100%; font-size:12.5px; color:var(--ink-soft); font-family:var(--font-body);
}
.logo-preview-current{
  padding:16px; background:var(--bg-soft); border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.logo-preview-current img{max-height:44px; max-width:100%;}
.color-pair{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.color-pair label{width:110px; font-size:12.5px; font-weight:600; color:var(--ink-soft); flex-shrink:0;}
.color-pair .color-picker{
  width:38px; height:38px; padding:2px; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--bg); cursor:pointer; flex-shrink:0;
}
.color-pair .color-hex{
  width:100px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:8px 10px;
  font-size:12.5px; font-family:ui-monospace, monospace; text-transform:uppercase;
  background:var(--bg); color:var(--ink);
}
.sistema-preview{position:sticky; top:76px;}
.brand-preview-box{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  transition:background .15s ease;
}
.brand-preview-topbar{
  background:#24201E; color:#E7E3D6; font-size:12px; font-weight:800; letter-spacing:.03em; padding:14px 20px;
}
.brand-preview-body{padding:26px 24px;}
.brand-preview-eyebrow{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.65; margin-bottom:8px;}
.brand-preview-h1{font-size:24px; font-weight:800; margin-bottom:10px;}
.brand-preview-p{font-size:13px; line-height:1.6; opacity:.85; margin-bottom:16px;}
.brand-preview-btn{
  display:inline-block; background:var(--accent); color:#fff; padding:8px 16px; border-radius:var(--radius-sm);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}

.preset-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:14px;}
.preset-card{background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px;}
.preset-swatches{display:flex; gap:6px; margin-bottom:10px;}
.preset-swatches .swatch{width:22px; height:22px; border-radius:50%; border:1px solid var(--line-strong);}
.preset-name{font-family:var(--font-heading); font-weight:700; font-size:14px; color:var(--ink); margin-bottom:2px;}

@media (max-width:900px){
  .sistema-grid{grid-template-columns:1fr;}
  .sistema-preview{position:static;}
}