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

:root{
  /* ===== Global Design Tokens (SaaS Dashboard) ===== */
  /* Colors */
  --bg:#F7F8FB;
  --surface:#FFFFFF;
  --surface2:#F9FAFB;
  --surface3:#F3F4F6;

  --border:#E5E7EB;
  --borderStrong:#D1D5DB;

  --text:#0F172A;
  --textSub:#1F2937;
  --muted:#64748B;

  --primary:#2563EB;
  --primaryHover:#1D4ED8;
  --primarySoft:#DBEAFE;
  --primaryBorder:#BFDBFE;

  --accent:#16A34A;
  --accentHover:#15803D;
  --accentSoft:#DCFCE7;
  --accentBorder:#86EFAC;

  --danger:#DC2626;
  --dangerHover:#B91C1C;
  --dangerSoft:#FEE2E2;
  --dangerBorder:#FECACA;

  --dangerRing: 0 0 0 4px rgba(220,38,38,0.16);

  --focusRing: 0 0 0 4px rgba(37,99,235,0.18);

  /* Shadows */
  --shadowSm: 0 1px 2px rgba(15,23,42,0.06);
  --shadowMd: 0 10px 30px rgba(15,23,42,0.10);
  --shadowCard: 0 6px 18px rgba(15,23,42,0.08);

  /* Radii */
  --radius8: 8px;
  --radius10: 10px;
  --radius12: 12px;
  --radius14: 14px;
  --radiusPill: 999px;

  /* Heights & layout */
  --hTopbar:56px;
  --hControl:40px;
  --hControlSm:36px;

  --logoSize:40px;
  --logoSizeDesktop:52px;

  --wNavExpanded:260px;
  --wNavCollapsed:76px;

  --pagePad:24px;

  /* Timing */
  --tFast:140ms;
  --tMed:220ms;
  --ease:cubic-bezier(.2,.8,.2,1);

  /* Back-compat aliases */
  --card: var(--surface);
  --secondary: var(--surface3);
  --secondaryText: var(--textSub);
  --shadow: var(--shadowSm);
}

/* Settings / Config feedback */
.flash-saved{
  animation: flashSavedPulse 0.9s ease-out 1;
}
@keyframes flashSavedPulse{
  0%{ box-shadow: 0 0 0 0 rgba(11,122,34,0.55); }
  100%{ box-shadow: 0 0 0 10px rgba(11,122,34,0); }
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:var(--text);
  background:var(--bg);
  font-size:14px;
}

/* =========================
   PROFESSIONAL POLISH LAYER
   (visual-only; keeps existing markup)
   ========================= */

/* Subtle background texture */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(37,99,235,0.10), transparent 55%),
    radial-gradient(800px 520px at 85% 15%, rgba(22,163,74,0.08), transparent 50%),
    radial-gradient(700px 500px at 50% 95%, rgba(99,102,241,0.06), transparent 50%);
  opacity:1;
  z-index:-1;
}

/* Better page rhythm */
.page{max-width: 1400px; margin:0 auto; padding: var(--pagePad);}
.module-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:8px 0 16px;}
.module-title{font-size:22px; font-weight:800; letter-spacing:-0.2px; color:var(--text);}
.module-subtitle{font-size:13px; color:var(--muted); margin-top:4px;}

/* Cards: more depth + clearer header spacing */
.card{
  border-radius: var(--radius14);
  box-shadow: var(--shadowCard);
  border: 1px solid rgba(229,231,235,0.9);
}
.card + .card{margin-top:16px;}

/* Buttons: more premium */
.btn{
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .1px;
}
.btn.primary{box-shadow: 0 10px 20px rgba(37,99,235,0.18);}
.btn.danger{box-shadow: 0 10px 20px rgba(220,38,38,0.12);}
.btn.ghost{border-color: transparent; background: transparent;}

/* Inputs: cleaner */
.input,.select,select.select,input.input,textarea.input{
  border-radius: 12px;
  border-color: rgba(209,213,219,0.95);
  background: rgba(255,255,255,0.92);
}
.input:focus,.select:focus,select.select:focus,input.input:focus,textarea.input:focus{
  box-shadow: var(--focusRing);
  border-color: rgba(37,99,235,0.55);
}

/* Tables: modern grid */
.table-wrap{border-radius: var(--radius14); overflow:hidden; border:1px solid var(--border); background:var(--surface);}
table.grid{border-collapse:separate; border-spacing:0; width:100%;}
table.grid thead th{
  position:sticky;
  top:0;
  z-index:5;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface2) 100%);
  color: var(--textSub);
  font-size:12px;
  letter-spacing:.02em;
  text-transform:none;
}
table.grid tbody tr:nth-child(even){background: rgba(249,250,251,0.65);}
table.grid tbody tr:hover{background: rgba(219,234,254,0.35);}
table.grid td, table.grid th{border-bottom:1px solid rgba(229,231,235,0.85);}

/* Status badges */
.badge{border-radius: 999px; font-weight: 900; padding:6px 10px; border:1px solid var(--border); background: var(--surface2);}
.badge.success{background: var(--accentSoft); border-color: var(--accentBorder); color: var(--accentHover);}
.badge.danger{background: var(--dangerSoft); border-color: var(--dangerBorder); color: var(--dangerHover);}
.badge.primary{background: var(--primarySoft); border-color: var(--primaryBorder); color: var(--primaryHover);}

/* Sidebar: clearer active state */
.app-nav-link{border-radius: 14px;}
.app-nav-link.active{
  background: linear-gradient(180deg, rgba(37,99,235,0.16), rgba(37,99,235,0.10));
  border: 1px solid rgba(37,99,235,0.18);
  box-shadow: 0 10px 22px rgba(37,99,235,0.10);
}

/* Topbar: nicer separation */
.app-topbar{backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);}

/* Auth page polish */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.auth-card{max-width: 440px; width:100%;}
.auth-title{letter-spacing:-0.4px;}

.hidden{display:none !important;}
.muted{color:var(--muted);}

/* =========================
   HEADER GLOBAL (64px)
   ========================= */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  height:var(--hTopbar);
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.topbar-row{
  height:var(--hTopbar);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 var(--pagePad);
}
/* Back-compat: no tools row in header */
.topbar-row.tools{display:none !important;}

.brand{display:flex; align-items:center; gap:12px; min-width:220px;}
.brand a{color:inherit; text-decoration:none;}

.logo{
  width:var(--logoSize);
  height:var(--logoSize);
  border-radius:8px;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface);
  overflow:hidden;
}
.logo.has-img{width:160px; border-color:transparent;}
.logo-img{width:100%; height:100%; object-fit:contain;}

.title{font-size:14px; font-weight:600; color:var(--textSub); line-height:1.1;}

.main-nav{display:flex; align-items:center; gap:6px; flex:1; flex-wrap:wrap;}
.nav-link{
  text-decoration:none;
  color:var(--textSub);
  font-weight:600;
  font-size:13px;
  padding:8px 10px;
  border-radius:6px;
}
.nav-link:hover{background:var(--surface3);}
.nav-link.active{background:#DBEAFE; color:#1D4ED8;}

.topbar-right{display:flex; align-items:center; gap:10px; white-space:nowrap;}
.userchip{
  display:flex;
  align-items:center;
  gap:8px;
  height:var(--hControlSm);
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:var(--radiusPill);
  background:var(--surface2);
  font-size:12px;
  font-weight:800;
}
.userchip-role{color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase;}
/* ===== Profile (top-right) ===== */
.profile-menu{position:relative;}
.profile-btn{
  display:flex;
  align-items:center;
  gap:10px;
  height:var(--hControlSm);
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:var(--radiusPill);
  background:var(--surface2);
  font-size:12px;
  font-weight:900;
  color:var(--text);
  cursor:pointer;
  transition: background var(--tFast) var(--ease), border-color var(--tFast) var(--ease);
}
.profile-btn:hover{background:var(--surface3); border-color:var(--borderStrong);}
.profile-name{max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.profile-chev{opacity:.65; font-size:12px; margin-left:2px;}

.avatar{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
  flex:0 0 auto;
}
.avatar-img{width:100%; height:100%; object-fit:cover;}
.avatar-img.hidden{display:none;}
.avatar-fallback{
  font-size:11px;
  font-weight:900;
  color:var(--textSub);
  letter-spacing:.2px;
  line-height:1;
}
.avatar.has-img .avatar-fallback{display:none;}
.avatar.no-img .avatar-fallback{display:block;}

.profile-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  width:220px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius14);
  box-shadow:var(--shadowMd);
  padding:8px;
  display:none;
  z-index:90;
}
.profile-menu.open .profile-dropdown{display:block; animation:dropdownIn var(--tMed) var(--ease);}
@keyframes dropdownIn{from{opacity:0; transform:translateY(-6px);}to{opacity:1; transform:translateY(0);}}
#account, #password, #avatar{scroll-margin-top:84px;}


.menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:var(--radius12);
  text-decoration:none;
  color:var(--text);
  font-weight:800;
  font-size:13px;
}
.menu-item:hover{background:var(--surface2);}
.menu-item.danger{color:#B91C1C;}
.menu-item.danger:hover{background:#FEE2E2;}
.menu-sep{height:1px; background:var(--border); margin:8px 0;}


/* =========================
   PAGE LAYOUT
   ========================= */

/* ===== Global App Shell (Vertical menu) ===== */
.app-shell{display:flex; min-height:100vh; width:100%;}
.app-nav{
  width:var(--wNavExpanded);
  background:var(--surface);
  border-right:1px solid var(--border);
  padding:14px 12px;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
  z-index:50;
  transition: width var(--tMed) var(--ease);
}
.app-nav-brand{margin-bottom:12px;}
.app-nav-brand-link{display:flex; align-items:center; gap:10px; text-decoration:none;}
.app-nav-logo{
  width:var(--logoSize);
  height:var(--logoSize);
  border-radius:var(--radius12);
  border:1px solid var(--border);
  background:var(--surface2);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.app-nav-logo-img{width:100%; height:100%; object-fit:contain;}
.app-nav-title{font-size:13px; font-weight:700; color:var(--textSub); line-height:1.1;}

.app-nav-links{display:flex; flex-direction:column; gap:6px; margin-top:10px;}
.app-nav-link{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:var(--radius12);
  text-decoration:none;
  color:var(--textSub);
  font-weight:800;
  font-size:13px;
  border:1px solid transparent;
  transition:
    background var(--tFast) var(--ease),
    color var(--tFast) var(--ease),
    border-color var(--tFast) var(--ease);
}
.app-nav-link:hover{background:var(--surface2); border-color:var(--border);}
.app-nav-link.active{background:var(--accentSoft); border-color:var(--accentBorder); color:var(--text);}
.app-nav-link.active::before{
  content:"";
  position:absolute;
  left:-1px;
  top:8px;
  bottom:8px;
  width:4px;
  border-radius:0 6px 6px 0;
  background:var(--accent);
}


/* Desktop logo sizing */
@media (min-width: 981px){
  .app-nav-logo{width:var(--logoSizeDesktop); height:var(--logoSizeDesktop);}
  .logo{width:var(--logoSizeDesktop); height:var(--logoSizeDesktop);}
}
/* Nav icons + collapse (desktop) */
.nav-ico{width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 18px;}
.nav-text{
  display:inline-flex;
  white-space:nowrap;
  opacity:1;
  transform:translateX(0);
  transition: opacity var(--tMed) var(--ease), transform var(--tMed) var(--ease);
}

.app-nav-title,
.app-user-name,
.app-user-role{
  transition: opacity var(--tMed) var(--ease), transform var(--tMed) var(--ease);
}

body.nav-collapsed .app-nav{width:var(--wNavCollapsed);}
body.nav-collapsed .app-nav-brand-link{justify-content:center; gap:0;}
body.nav-collapsed .app-nav-links{align-items:center;}
body.nav-collapsed .app-nav-link{justify-content:center; padding:10px; gap:0;}
body.nav-collapsed .nav-text{
  opacity:0;
  transform:translateX(-8px);
  width:0;
  max-width:0;
  overflow:hidden;
  pointer-events:none;
}
body.nav-collapsed .app-nav-title{
  opacity:0;
  transform:translateX(-8px);
  width:0;
  max-width:0;
  overflow:hidden;
}
body.nav-collapsed .app-user-name,
body.nav-collapsed .app-user-role{
  opacity:0;
  transform:translateX(-8px);
  height:0;
  overflow:hidden;
  pointer-events:none;
  margin:0;
}
body.nav-collapsed .app-user{display:flex; justify-content:center;}

/* Tooltips when collapsed (icons only) */
@media (hover:hover){
  body.nav-collapsed .app-nav-link::after{
    content: attr(title);
    position:absolute;
    left:calc(100% + 12px);
    top:50%;
    transform:translateY(-50%) translateX(-6px);
    background:var(--surface);
    border:1px solid var(--border);
    box-shadow:var(--shadowMd);
    padding:8px 10px;
    border-radius:var(--radius12);
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition: opacity var(--tFast) var(--ease), transform var(--tFast) var(--ease);
  }
  body.nav-collapsed .app-nav-link:hover::after{
    opacity:1;
    transform:translateY(-50%) translateX(0);
  }
}

/* Keep nav open on mobile only */
@media (max-width: 980px){
  body.nav-collapsed .app-nav{width:var(--wNavExpanded);}
  body.nav-collapsed .nav-text{display:inline-flex;}
  body.nav-collapsed .app-user-name,
  body.nav-collapsed .app-user-role{display:block;}
  body.nav-collapsed .app-nav-link{justify-content:flex-start; padding:10px 12px;}
  body.nav-collapsed .app-nav-links{align-items:stretch;}
}

.app-nav-footer{margin-top:14px; padding-top:12px; border-top:1px dashed var(--border);}
.app-user-name{font-size:12px; font-weight:800; color:var(--textSub);}
.app-user-role{font-size:11px; font-weight:800; color:var(--muted); text-transform:uppercase; margin-top:2px;}

/* System label (instead of username under the sidebar menu) */
.app-system .app-user-name{
  color:var(--text);
  white-space:normal;
  line-height:1.15;
}
.app-system .app-user-role{
  text-transform:none;
  letter-spacing:0;
  font-weight:700;
  margin-top:4px;
}

.app-content{flex:1; min-width:0; display:flex; flex-direction:column;}
.app-topbar{
  height:var(--hTopbar);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 18px;
  position:sticky;
  top:0;
  z-index:40;
}
.app-topbar-spacer{flex:1;}
.app-top-actions{display:flex; align-items:center; gap:10px;}
.app-top-actions .btn{height:var(--hControlSm);}
.app-top-actions .btn{border-radius:var(--radiusPill);}

.app-main{flex:1; min-width:0;}

.app-burger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--hControl);
  width:var(--hControl);
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--radius12);
  cursor:pointer;
  font-size:16px;
  line-height:1;
  transition: background var(--tFast) var(--ease), border-color var(--tFast) var(--ease);
}
.app-burger:hover{background:var(--surface2);}

.app-backdrop{display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:45;}

@media (max-width: 980px){
  .app-burger{display:inline-flex; align-items:center; justify-content:center;}
  .app-nav{position:fixed; left:0; top:0; transform:translateX(-102%); transition:transform var(--tMed) var(--ease); box-shadow:0 10px 30px rgba(0,0,0,.18);}
  body.nav-open .app-nav{transform:translateX(0);}
  body.nav-open .app-backdrop{display:block;}
  .app-backdrop{display:none;}
}
.page{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:24px;
}

.module-title{
  font-size:20px;
  font-weight:600;
  color:var(--textSub);
  margin:0 0 16px 0;
}
.module-head{margin:0; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.module-head > *{min-width:0;}

.container{padding:24px; display:flex; flex-direction:column; gap:24px;}

/* Legacy layout wrappers */
/*
  NOTE: These wrappers are used inside some modules (e.g., Settings) that
  include wide tables. Without min-width:0 on flex children, tables can force
  the whole page to overflow instead of scrolling inside .table-wrap.
*/
.layout{padding:24px; min-width:0;}
.layout > .main{flex:1 1 auto; min-width:0;}
.main{display:flex; flex-direction:column; gap:24px; min-width:0;}
.turn-header{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px;}
.turn-title{font-size:16px; font-weight:600; color:var(--textSub);}
.turn-sub{font-size:13px; color:var(--muted);}

.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap;}

/* =========================
   FORMS / FILTERS
   ========================= */
.field{display:flex; flex-direction:column; gap:6px; min-width:180px;}
.field.inline{flex-direction:row; align-items:center; gap:8px;}
.field span{font-size:12px; color:var(--muted); font-weight:600;}

.input, .select, input[type='date'], input[type='text'], input[type='number'], select{
  height:var(--hControl);
  padding:8px 10px;
  border-radius:var(--radius10);
  border:1px solid var(--borderStrong);
  background:var(--surface);
  font-size:14px;
  color:var(--text);
  transition: border-color var(--tFast) var(--ease), box-shadow var(--tFast) var(--ease), background var(--tFast) var(--ease);
}

.select[multiple], select[multiple]{
  height:auto;
  min-height:114px;
  padding:6px;
}
.select[multiple] option, select[multiple] option{padding:6px;}

/* =========================
   MULTISELECT (dropdown + chips)
   ========================= */
.ms-wrap{position:relative; width:100%;}
.ms-native{position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important;}
.ms-control{
  width:100%;
  height:var(--hControl);
  padding:6px 10px;
  border-radius:var(--radius10);
  border:1px solid var(--borderStrong);
  background:var(--surface);
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  font-size:13px;
  color:var(--text);
  overflow:hidden;
}
.ms-control:focus-visible{outline:none; box-shadow:var(--focusRing); border-color:var(--primary);}
.ms-placeholder{font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ms-chips{display:flex; gap:6px; align-items:center; flex:1; overflow:hidden;}
.ms-chips{white-space:nowrap;}
.ms-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:3px 8px;
  background:var(--surface);
  border:1px solid var(--border);
  font-size:12px;
  font-weight:600;
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ms-chip button{
  border:none;
  background:transparent;
  cursor:pointer;
  font-weight:800;
  color:var(--muted);
  padding:0;
  line-height:1;
}
.ms-caret{margin-left:auto; color:var(--muted);}
.ms-panel{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  padding:8px;
  max-height:260px;
  overflow:auto;
  display:none;
  z-index:60;
}
.ms-wrap.open .ms-panel{display:block;}
.ms-opt{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:6px;
  cursor:pointer;
  user-select:none;
}
.ms-opt:hover{background:var(--surface3);}
.ms-opt input{width:16px; height:16px;}
.ms-opt-label{font-size:13px; color:var(--textSub);}
.ms-empty{padding:10px; color:var(--muted); font-size:13px;}

/* =========================
   FILTERS (3 blocks)
   ========================= */
.filters{display:flex; flex-direction:column; gap:16px;}
.filters-block{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end;}
.filters-actions{margin-left:auto; display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;}
.filters-divider{height:1px; background:var(--border); margin:0;}
.filters-adv-toggle{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.filters-adv-panel{margin-top:12px; display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-end;}

.btn.ghost{background:transparent; border-color:transparent; color:var(--textSub);}
.btn.ghost:hover{background:var(--surface2); border-color:var(--border);}

.input:focus-visible, .select:focus-visible, input:focus-visible, select:focus-visible, .btn:focus-visible{outline:none; box-shadow:var(--focusRing); border-color:var(--primary);}

/* Input validation (used in Configuración > Usuarios) */
input.err, .input.err, select.err, .select.err{
  border-color:var(--dangerBorder) !important;
  box-shadow:var(--dangerRing) !important;
}
tr.row-err td{background:rgba(220,38,38,0.04);}

/* Filters card helpers */
.filter-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap:12px;
}
@media (max-width: 1100px){
  .filter-grid{grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;}
}
@media (max-width: 560px){
  .filter-grid{grid-template-columns: 1fr !important;}
}

/* Chips */
.chipbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px;}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--border);
  font-weight:600;
  font-size:12px;
}
.chip button{
  border:none;
  background:transparent;
  cursor:pointer;
  font-weight:700;
  color:var(--muted);
  padding:0;
}

/* =========================
   BUTTONS
   ========================= */
.btn{
  height:var(--hControl);
  padding:0 14px;
  border-radius:var(--radius10);
  border:1px solid var(--border);
  background:var(--surface3);
  color:var(--textSub);
  cursor:pointer;
  font-weight:700;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  transition:
    background var(--tFast) var(--ease),
    border-color var(--tFast) var(--ease),
    color var(--tFast) var(--ease),
    box-shadow var(--tFast) var(--ease);
}
.btn:hover{background:var(--surface2); border-color:var(--borderStrong);}
.btn.primary{background:var(--primary); border-color:var(--primary); color:#FFFFFF;}
.btn.primary:hover{background:var(--primaryHover); border-color:var(--primaryHover);}
.btn.danger{background:var(--danger); border-color:var(--danger); color:#FFFFFF;}
.btn.danger:hover{background:var(--dangerHover); border-color:var(--dangerHover);}
.btn.mini{height:var(--hControlSm); padding:0 12px; font-size:12px;}

.btn.secondary{background:var(--surface3); border-color:var(--border); color:var(--textSub);}
.btn.secondary:hover{background:var(--surface2); border-color:var(--borderStrong);}
.btn.ghost{background:transparent; border-color:transparent; color:var(--textSub);}
.btn.ghost:hover{background:var(--surface2); border-color:var(--border);}
.btn.pill{border-radius:var(--radiusPill); padding:0 12px;}

/* =========================
   CARDS / PANELS
   ========================= */
.card, .turn, .filter-panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius14);
  padding:16px 20px;
  box-shadow: var(--shadowCard);
  min-width:0;
}

.card .h2, .turn .turn-title, .h2{
  margin:0;
  font-size:16px;
  font-weight:600;
  color:var(--textSub);
}

.card-header{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px;}

/* KPIs */
.kpi-grid{display:grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap:24px;}
@media (max-width: 1100px){
  .kpi-grid{grid-template-columns: repeat(2, minmax(200px, 1fr));}
}
@media (max-width: 560px){
  .kpi-grid{grid-template-columns: 1fr;}
}
.kpi-card{
  min-height:90px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius14);
  padding:16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  box-shadow: var(--shadowCard);
}
.kpi-card .label{font-size:12px; color:var(--muted); font-weight:600;}
.kpi-card .value{font-size:24px; font-weight:700; color:var(--text);}

/* Make old summary-circle look like KPI */
#summary.summary-circle{border-radius:10px; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow); width:auto; height:auto; padding:16px; min-height:90px; display:flex; align-items:flex-start; justify-content:center;}
#summary.summary-circle .big{font-size:24px; font-weight:700;}
#summary.summary-circle .small{font-size:12px; font-weight:600; color:var(--muted);}

/* =========================
   TABLES
   ========================= */
.table-wrap{
  /* Keep wide tables contained; allow horizontal scroll without breaking layout */
  overflow:auto;
  max-width:100%;
  min-width:0;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter: stable;
}

/* Special case: black synthesis table wants clean rounded corners */
.synth-wrap{overflow:hidden; border-radius:16px; border:1px solid #1f2937; background:#0b0f14;}
.synth-wrap .table-synth{border-radius:16px; overflow:hidden;}

/* Make form controls inside grid tables fill their cells (but keep checkboxes small) */
table.grid input:not([type='checkbox']):not([type='radio']),
table.grid select,
table.grid textarea{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}

/* Reception: long values */
.rec-ellipsis{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
td.rec-equipos, td.rec-name, td.rec-comments, td.rec-hotel{min-width:0;}

/* ===== Generic .table (used by Rentas dashboard) ===== */
.table{width:100%; border-collapse:separate; border-spacing:0;}
.table thead th{
  background:var(--surface2);
  color:#374151;
  height:44px;
  font-size:13px;
  font-weight:600;
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.table tbody td{
  height:42px;
  font-size:13px;
  padding:10px 12px;
  border-bottom:1px solid var(--surface3);
  vertical-align:top;
}
.table tbody tr:hover{background:var(--surface3);}

/* ===== Rentas: validación y mensajes ===== */
.input.invalid{
  border-color:#ef4444 !important;
  box-shadow:0 0 0 3px rgba(239,68,68,0.15) !important;
}
.error-box{
  border:1px solid #ef4444;
  background:rgba(239,68,68,0.08);
  color:#991b1b;
  border-radius:10px;
  padding:10px 12px;
  white-space:pre-line;
  font-weight:700;
}
.btn.disabled{opacity:0.65; cursor:not-allowed;}

/* ===== Síntesis de Pagos (estilo tipo hoja negra) ===== */
.table-synth thead th{
  background:#0b0f14;
  color:#ffffff;
  border-bottom:1px solid #1f2937;
}
.table-synth tbody td{
  background:#0b0f14;
  color:#ffffff;
  border-bottom:1px solid #1f2937;
}
.table-synth tbody tr:hover{background:#0b0f14;}
.table-synth .syn-paid{color:#22c55e; font-weight:800;}
.table-synth .syn-pending{color:#ef4444; font-weight:800;}
.table-synth .synth-total td{border-top:2px solid #374151;}

/* Bordes redondeados consistentes en ambos lados */
.table-synth{
  border-radius:16px;
  overflow:hidden;
}
.table-synth thead th:first-child{border-top-left-radius:16px;}
.table-synth thead th:last-child{border-top-right-radius:16px;}
.table-synth tbody tr:last-child td:first-child{border-bottom-left-radius:16px;}
.table-synth tbody tr:last-child td:last-child{border-bottom-right-radius:16px;}

/* =========================
   ASIGNACIÓN DE GUÍAS — RESPONSIVE FIX
   Evita overflow horizontal del layout (flex min-width)
   ========================= */
.asignacion-page .layout{min-width:0;}
.asignacion-page .sidebar{min-width:0;}
.asignacion-page .main{flex:1 1 auto; min-width:0;}
.asignacion-page .turn{min-width:0;}
.asignacion-page .table-wrap{max-width:100%;}

/* Inputs/Selects en tabla: ocupar la celda */
.asignacion-page table.grid input,
.asignacion-page table.grid select{width:100%; min-width:0;}

/* Input + copiar: no permitir que el botón se vaya abajo */
.asignacion-page .hotel-cell{flex-wrap:nowrap;}
.asignacion-page .hotel-cell .copy-btn{height:38px; padding:0 10px;}

/* Columna MOVER: controles alineados y compactos */
.asignacion-page .row-actions{display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:nowrap;}
.asignacion-page .drag-handle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:36px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--muted);
  font-weight:800;
  cursor:grab;
  user-select:none;
}
.asignacion-page .row-actions .btn.mini{width:36px; padding:0;}


/* Asignación: input + botón copiar alineados */
.hotel-cell{display:flex; align-items:center; gap:6px;}
.hotel-cell input{flex:1 1 auto; min-width:0;}
.hotel-cell .copy-btn{flex:0 0 auto;}


/* Reservas: mostrar columna Fecha solo en modo rango */
.reservas-page #resTable .col-date{display:none;}
.reservas-page #resTable.range-mode .col-date{display:table-cell;}

table.grid{width:100%; border-collapse:separate; border-spacing:0;}

table.grid thead th{
  background:var(--surface2);
  color:#374151;
  height:44px;
  font-size:13px;
  font-weight:600;
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}

table.grid tbody td{
  height:42px;
  font-size:13px;
  padding:10px 12px;
  border-bottom:1px solid var(--surface3);
  vertical-align:top;
}

table.grid tbody tr:hover{background:var(--surface3);}

table.grid tbody tr.is-selected{background:var(--primarySoft);}

/* Right align for amounts */
.td-amount, td.amount, th.amount{text-align:right;}

/* Totals */
.total{font-weight:700; color:var(--text);}

/* =========================
   BADGES / STATES
   ========================= */
.badge, .status, .pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  font-weight:600;
  border:1px solid transparent;
  background:var(--surface3);
  color:#374151;
}

.badge.ok, .pill.paid{background:#DCFCE7; color:#166534;}
.badge.warn, .pill.pending, .pill.review{background:#FEF3C7; color:#92400E;}
.badge.bad, .pill.error{background:#FEE2E2; color:#991B1B;}
.badge.muted{background:var(--surface3); color:#6B7280;}

/* =========================
   TABS
   ========================= */
.tabs{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.tab{
  height:40px;
  padding:0 14px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--surface);
  cursor:pointer;
  font-weight:600;
  font-size:13px;
}
.tab.active{background:var(--primarySoft); border-color:var(--primaryBorder); color:var(--primaryHover);}
/* Panels should behave like module stacks (consistent vertical rhythm) */
.tab-panel{
  display:flex;
  flex-direction:column;
  gap:24px;
  min-width:0;
}

/* =========================
   MODALS
   ========================= */
.modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.35); z-index:80; padding:16px;}
.modal.hidden{display:none;}
.modal-card{
  background:var(--surface);
  border-radius:var(--radius14);
  border:1px solid var(--border);
  box-shadow: var(--shadowMd);
  padding:16px;
  width:420px;
  max-width:100%;
  max-height:calc(100vh - 32px);
  overflow:auto;
  overscroll-behavior: contain;
}
.modal-card.wide{width:980px;}
.modal-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px;}
.modal-card h3{margin:0 0 10px; font-size:16px; font-weight:600;}

/* Print */


/* =========================
   SIDEBARS / LISTS (Settings & Asignación)
   ========================= */
.layout{display:flex; gap:24px; align-items:flex-start;}
.sidebar{width:320px; min-width:280px; flex:0 0 auto; display:flex; flex-direction:column; gap:24px;}
@media (max-width: 1100px){
  .layout{flex-direction:column;}
  .sidebar{width:100%; min-width:0;}
}
.sidebar-section{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius14);
  padding:16px 20px;
  box-shadow: var(--shadowCard);
}
.sidebar-title{font-size:13px; font-weight:600; color:var(--textSub); margin:0 0 10px 0;}
.list{display:flex; flex-direction:column; gap:8px;}
.list .item{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  cursor:pointer;
}
.list .item:hover{background:var(--surface2);}
.list .item.active{background:var(--primarySoft); border-color:var(--primaryBorder);}
.list .item .t{font-weight:600; font-size:13px; color:var(--textSub);}
.list .item .s{font-size:12px; color:var(--muted); margin-top:2px; line-height:1.2;}

/* Settings helpers */
.divider{height:1px; background:var(--border); margin:12px 0;}
.logo-preview{
  width:180px;
  height:70px;
  border:1px dashed var(--border);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface);
  overflow:hidden;
}
.logo-preview img{max-width:100%; max-height:100%; object-fit:contain;}

/* =========================
   CALENDAR (Asignación)
   ========================= */
.calendar{display:flex; flex-direction:column; gap:10px;}
.calendar-head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.calendar-title{font-size:13px; font-weight:600; color:var(--textSub);}
.calendar-grid{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px;}
.cal-dow{font-size:11px; color:var(--muted); font-weight:600; text-align:center; padding:4px 0;}
.cal-cell{
  position:relative;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  text-align:center;
  padding:8px 0;
  font-size:12px;
  font-weight:600;
  color:var(--textSub);
  cursor:pointer;
  user-select:none;
}
.cal-cell:hover{background:var(--surface3);}
.cal-cell.muted{opacity:0.45;}
.cal-cell.active{background:var(--primarySoft); border-color:var(--primaryBorder); color:var(--primaryHover);}
.cal-dot{width:6px; height:6px; border-radius:999px; background:var(--primary); position:absolute; bottom:6px; left:50%; transform:translateX(-50%);}

/* Asignación - turn meta badges */
.turn-meta{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}
.guide-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  font-weight:600;
  background:var(--surface3);
  color:#374151;
  border:1px solid var(--border);
}
.turn-summary{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  font-weight:600;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--textSub);
}

/* =========================
   SCREENSHOT VIEW (Asignación)
   ========================= */
.ss-modal{max-width:1100px;}
.ss-content{max-height:70vh; overflow:auto;}
.ss-block{display:flex; flex-direction:column; gap:18px;}
.ss-turn h3{margin:0 0 10px 0; font-size:16px; font-weight:700; color:var(--textSub);}
.ss-guide{margin:10px 0 8px 0; font-size:13px; font-weight:800;}
.ss-guide-label{color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:0.02em;}
.ss-guide-name{color:#166534; font-weight:900;}
.ss-table{width:100%; border-collapse:separate; border-spacing:0;}
.ss-table th{
  background:var(--surface2);
  color:#374151;
  height:40px;
  font-size:12px;
  font-weight:700;
  text-align:left;
  padding:8px 10px;
  border-bottom:1px solid var(--border);
}
.ss-table td{
  font-size:12px;
  padding:8px 10px;
  border-bottom:1px solid var(--surface3);
  vertical-align:top;
}
.ss-table tr:hover{background:var(--surface3);}

/* Excel mode: tighten table cells */
body.excel-mode table.grid thead th,
body.excel-mode table.grid tbody td{padding:6px 8px;}




/* =========================
   ORDER INFO BOXES (Choferes)
   ========================= */
.infoGrid{display:grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap:24px;}
@media (max-width: 1100px){
  .infoGrid{grid-template-columns: repeat(2, minmax(200px, 1fr));}
}
@media (max-width: 560px){
  .infoGrid{grid-template-columns: 1fr;}
}
.infoBox{
  min-height:90px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius14);
  padding:16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  box-shadow: var(--shadowCard);
}
.infoBox .k{font-size:12px; color:var(--muted); font-weight:600;}
.infoBox .v{font-size:18px; font-weight:700; color:var(--textSub);}


/* =========================
   ORDER SHEET (Choferes - impresión)
   Formato clásico tipo "orden de servicio"
   ========================= */
.order-sheet{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
.order-header{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:14px;
  padding:14px;
  border-bottom:1px solid #111;
}
.order-brand{display:flex; gap:14px; align-items:center;}
.order-brand-logo{
  width:98px; height:74px;
  border:1px solid #111;
  border-radius:10px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.order-brand-logo.has-img{padding:6px;}
.order-brand-logo img{max-width:100%; max-height:100%; object-fit:contain;}
.order-brand-fallback{font-size:22px; font-weight:900; color:#111; letter-spacing:0.02em;}
.order-brand-meta{display:flex; flex-direction:column; gap:4px;}
.order-brand-title{font-size:18px; font-weight:800; color:#111; line-height:1.1;}
.order-brand-sub{font-size:12px; color:#111; opacity:.8; font-weight:700; text-transform:uppercase; letter-spacing:.06em;}

.order-meta{
  border:1px solid #111;
  border-radius:10px;
  padding:10px 12px;
}
.order-meta-title{
  font-weight:900;
  font-size:14px;
  text-align:right;
  margin-bottom:8px;
  letter-spacing:.02em;
}
.order-meta-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px 12px;
  font-size:12px;
}
.order-meta-grid .k{display:block; font-weight:800; color:#111; opacity:.75;}
.order-meta-grid .v{display:block; font-weight:900; color:#111;}

.order-body{padding:14px;}
.order-note{font-size:12px; color:#111; opacity:.85; margin:0 0 10px 0; font-weight:700;}

.order-turn-title{
  margin:12px 0 6px;
  font-size:14px;
  font-weight:900;
  color:#111;
  letter-spacing:.02em;
}
.order-table{width:100%; border-collapse:collapse; font-size:12px;}
.order-table th,
.order-table td{border:1px solid #111; padding:6px 6px; vertical-align:top;}
.order-table th{background:#f3f4f6; font-weight:900; text-align:left;}
.order-table td{font-weight:600;}
.order-table .num{text-align:right; white-space:nowrap;}

.order-summaries{display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:14px;}
.order-summary{
  border:1px solid #111;
  border-radius:10px;
  overflow:hidden;
}
.order-summary .h{
  background:#f3f4f6;
  border-bottom:1px solid #111;
  padding:8px 10px;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.order-summary .b{padding:10px;}
.order-summary table{width:100%; border-collapse:collapse; font-size:12px;}
.order-summary th,.order-summary td{border:1px solid #111; padding:6px 6px;}
.order-summary th{background:#fafafa; text-align:left; font-weight:900;}
.order-summary td{font-weight:600;}

@media (max-width: 980px){
  .order-header{grid-template-columns: 1fr;}
  .order-summaries{grid-template-columns: 1fr;}
}



/* =========================
   AUTH (Login)
   ========================= */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-card{width:420px; max-width:100%;}
.auth-brand{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.auth-brand .logo{width:56px; height:56px; border-radius:12px; border:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.auth-brand img{max-width:100%; max-height:100%; object-fit:contain;}
.auth-title{font-size:16px; font-weight:600; color:var(--textSub); margin:0;}
.auth-sub{font-size:13px; color:var(--muted); margin:2px 0 0;}
.auth-error{background:#FEE2E2; color:#991B1B; border:1px solid #FECACA; border-radius:8px; padding:10px 12px; font-size:13px; margin-bottom:12px;}

@media print{
  @page{ size: A4 landscape; margin: 10mm; }
  .app-nav, .app-topbar, .app-backdrop{display:none !important;}
  .no-print{display:none !important;}
  .page, .container{padding:0 !important;}
  .card, .turn{box-shadow:none !important;}
  .order-sheet{border:none !important; border-radius:0 !important;}
}

/* ===== Equipos widget (Reservas - modal) ===== */
.eq-widget{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px;
}
.eq-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.eq-qty{width:110px;}
.eq-list{margin-top:10px; display:flex; flex-direction:column; gap:8px;}
.eq-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface2);
}
.eq-text{font-size:13px; color:var(--text);}
.eq-warn{margin-top:10px;}

/* ===== Screenshot modal brand header ===== */
.ss-brand{display:flex; align-items:center; gap:10px; padding:6px 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface);}
.ss-logo{width:36px; height:36px; object-fit:contain;}
.ss-title{font-size:13px; font-weight:700; color:var(--textSub); line-height:1.1;}


/* Dashboard (new layout) */
.dash-kpis{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:10px;}
@media (max-width: 980px){ .dash-kpis{grid-template-columns:1fr;} }

.kpi-hero{display:flex; align-items:stretch; justify-content:space-between; gap:12px; padding:16px; border:1px solid var(--border); border-radius:14px; background:#fff;}
.kpi-hero .kpi-left{display:flex; flex-direction:column; gap:6px;}
.kpi-hero .kpi-label{font-size:13px; font-weight:700; color:var(--textSub);}
.kpi-hero .kpi-value{font-size:28px; font-weight:800; color:var(--text);}
.kpi-hero .kpi-pill{align-self:flex-start; font-size:12px; padding:4px 10px; border:1px solid var(--border); border-radius:999px; background:var(--surface2); color:var(--textSub);}
.kpi-hero .kpi-spark{width:130px; display:flex; align-items:flex-end; justify-content:flex-end;}
.kpi-hero svg{width:120px; height:34px; opacity:.9;}

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

.dash-card{border:1px solid var(--border); border-radius:14px; background:#fff; padding:16px;}
.dash-card .dash-card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;}
.dash-card .dash-card-title{font-size:14px; font-weight:800; color:var(--text);}
.dash-card .dash-card-sub{font-size:12px; color:var(--textSub); display:flex; align-items:center; gap:8px;}
.dot{width:10px; height:10px; border-radius:3px; background:#2563EB; display:inline-block;}

.recent-list{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
.recent-item{padding:12px; border:1px solid var(--border); border-radius:12px; display:flex; justify-content:space-between; gap:10px; background:#fff;}
.recent-meta{display:flex; flex-direction:column; gap:4px; min-width:0;}
.recent-title{font-weight:800; font-size:13px; color:var(--text); display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;}
.recent-sub{font-size:12px; color:var(--textSub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px;}
.recent-sub2{font-size:12px; color:var(--textSub);}
.badge{font-size:12px; padding:4px 10px; border-radius:999px; border:1px solid var(--border); background:var(--surface2); color:var(--textSub); height:fit-content; white-space:nowrap;}
.badge.ok{background:#ECFDF5; border-color:#A7F3D0; color:#065F46;}
.badge.warn{background:#FFFBEB; border-color:#FDE68A; color:#92400E;}
.badge.neutral{background:var(--surface3); border-color:#E5E7EB; color:#374151;}
.badge.bad{background:#FEF2F2; border-color:#FECACA; color:#991B1B;}

.dash-cards-row{margin-top:14px;}
.h-scroll{display:flex; gap:12px; overflow:auto; padding-bottom:6px;}
.h-card{min-width:240px; border:1px solid var(--border); border-radius:14px; padding:14px; background:#fff; display:flex; flex-direction:column; gap:8px;}
.h-card .h-title{font-weight:800; color:var(--text); display:flex; gap:8px; align-items:baseline;}
.h-card .h-sub{font-size:12px; color:var(--textSub);}
.h-card .h-bottom{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.h-pill{font-size:12px; padding:8px 10px; border-radius:10px; background:#1D4ED8; color:#fff; font-weight:800; text-align:center; flex:1;}

/* =========================
   RECEPCIÓN (Resumen Operativo + Filtros compactos)
   ========================= */
.rec-filters-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(180px, 1fr));
  gap:12px 16px;
  align-items:end;
}
@media (max-width: 1100px){
  .rec-filters-grid{grid-template-columns:repeat(2, minmax(180px, 1fr));}
}
@media (max-width: 620px){
  .rec-filters-grid{grid-template-columns:1fr;}
}

.rec-checks{min-width:220px;}
.rec-checks-row{display:flex; flex-wrap:wrap; gap:12px;}

.rec-filter-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  grid-column:1 / -1;
}

.status.err{background:#FEE2E2; color:#991B1B;}

/* Recepción: mejorar lectura de hoteles con nombres largos */
#recTable td.rec-hotel{
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.2;
}

#opSummary{
  border-radius:12px;
  padding:24px;
}

.op-summary{display:flex; flex-direction:column; gap:18px;}

.op-kpis{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
@media (max-width: 980px){
  .op-kpis{grid-template-columns:1fr;}
}

.op-kpi{
  min-height:86px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:16px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}
.op-kpi-label{font-size:14px; color:var(--muted); font-weight:600;}
.op-kpi-value{font-size:28px; font-weight:800; color:var(--primary);}

.op-section{display:flex; flex-direction:column; gap:10px;}
.op-section-title{font-size:14px; font-weight:800; color:var(--text);}

.op-activities{display:flex; flex-direction:column; gap:10px;}
.op-activity-row{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:13px 14px;
}
.op-activity-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.op-activity-ico{width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:var(--primary); background:var(--surface); border:1px solid var(--border); border-radius:10px;}
.op-activity-name{font-weight:800; color:var(--text);}
.op-activity-meta{margin-left:auto; font-size:13px; color:var(--textSub); font-weight:700;}

.op-activity-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.op-chip{border:1px solid var(--border); background:var(--surface); color:var(--textSub);} 

.op-totals-chips{display:flex; flex-wrap:wrap; gap:8px;}

.op-empty{
  padding:18px;
  border:1px dashed var(--border);
  border-radius:12px;
  background:var(--surface2);
  color:var(--textSub);
  font-weight:700;
}

.op-warn{font-size:13px;}


/* ===== Profile page ===== */
.profile-layout{display:flex; gap:18px; align-items:flex-start;}
.profile-side{flex:0 0 240px;}
.profile-main{flex:1 1 auto;}
.profile-avatar-wrap{display:flex; flex-direction:column; align-items:flex-start;}
.avatar-lg{width:88px; height:88px;}
.profile-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
@media (max-width: 860px){
  .profile-layout{flex-direction:column;}
  .profile-side{flex:0 0 auto;}
  .profile-grid{grid-template-columns:1fr;}
}

/* --- Rentas: vista por proveedor (control tipo Excel) --- */
.btn.pulse{ box-shadow: 0 0 0 3px rgba(59,130,246,.25); }

.rentas-tabs{ display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--border); padding-bottom:8px; margin: 6px 0 12px 0; }
.rentas-tab{ border:1px solid var(--border); background: var(--surface); padding:6px 10px; border-radius:10px 10px 0 0; font-weight:700; cursor:pointer; }
.rentas-tab:hover{ filter: brightness(0.98); }
.rentas-tab.active{ border-color: var(--primary); background: rgba(59,130,246,.10); }

.rentas-provider-panel{ min-height: 80px; }
.rentas-provider-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px){ .rentas-provider-grid{ grid-template-columns: 1fr; } }

.rentas-eq-card{ border:1px solid var(--border); border-radius:14px; background: var(--surface); overflow:hidden; box-shadow: var(--shadowSm); }
.rentas-eq-head{ padding:10px 12px; text-align:center; font-weight:900; letter-spacing: .5px; text-transform: uppercase; }
.rentas-eq-head.hdr-cyan{ background: linear-gradient(90deg, #22d3ee, #06b6d4); color:#0b0f14; }
.rentas-eq-head.hdr-green{ background: linear-gradient(90deg, #a3e635, #22c55e); color:#0b0f14; }
.rentas-eq-head.hdr-blue{ background: linear-gradient(90deg, #60a5fa, #2563eb); color:#0b0f14; }

.rentas-mini-table td, .rentas-mini-table th{ font-size:12px; }
.rentas-total-row td{ background: var(--surface2); }


.auth-warn{background:#FEF3C7; color:#92400E; border:1px solid #F59E0B; padding:10px 12px; border-radius:12px; margin:0 0 12px 0; font-size:14px; line-height:1.35;}
.auth-warn code{background:rgba(255,255,255,.55); padding:2px 6px; border-radius:8px;}

/* =========================
   MOBILE ADAPTATION (SYSTEM-WIDE)
   - Responsive tables (stacked cards)
   - Better modal scrolling
   - Tighter spacing on small screens
   ========================= */

/* Prevent iOS text auto-resize quirks */
html{ -webkit-text-size-adjust: 100%; }

/* Responsive tables: rely on JS adding .is-responsive + data-label */
@media (max-width: 720px){
  table.is-responsive{border-collapse:separate; border-spacing:0;}
  table.is-responsive thead{display:none;}

  table.is-responsive,
  table.is-responsive tbody,
  table.is-responsive tr,
  table.is-responsive td{display:block; width:100%;}

  table.is-responsive tbody tr{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius14);
    box-shadow: var(--shadowSm);
    margin:0 0 12px 0;
    overflow:hidden;
  }

  table.is-responsive tbody td{
    height:auto;
    padding:10px 12px;
    border-bottom:1px solid var(--surface3);
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    white-space:normal;
  }
  table.is-responsive tbody td:last-child{border-bottom:none;}

  table.is-responsive tbody td::before{
    content:attr(data-label);
    flex:0 0 42%;
    max-width:42%;
    font-size:12px;
    font-weight:800;
    color:var(--muted);
    padding-right:8px;
  }

  /* If a cell has no label, don't reserve space */
  table.is-responsive tbody td[data-label='']::before{display:none;}

  /* Keep actions compact */
  table.is-responsive tbody td.actions{justify-content:flex-end;}
  table.is-responsive tbody td.actions::before{display:none;}

  /* Inputs inside stacked cells */
  table.is-responsive input,
  table.is-responsive select,
  table.is-responsive textarea{max-width:100%;}

}

/* Very small screens */
@media (max-width: 520px){
  .page{padding:14px 12px;}
  .card, .turn, .filter-panel{padding:14px 14px;}
  .profile-name{display:none;}
  .profile-btn{padding:0 10px;}

  /* Buttons in headers should wrap nicely */
  .app-top-actions{gap:8px;}
}

/* Modals: allow internal scrolling on mobile */
@media (max-width: 720px){
  .modal{padding:10px; align-items:flex-end;}
  .modal-card{
    width:100% !important;
    max-width:100% !important;
    max-height:calc(100vh - 16px);
    overflow:auto;
    border-radius:16px 16px 12px 12px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .modal-card.wide{width:100% !important;}
  .modal-head{align-items:flex-start;}
  .modal-head > div{min-width:0;}
}