/* AUSAPE V8.1 · UI Funcional Pro
   Capa final de contraste, anti-solape y animación segura. No bloquea inputs ni login. */
:root{
  --v81-ink:#062b45;
  --v81-ink-2:#0b4164;
  --v81-muted:#5f7288;
  --v81-blue:#009fe3;
  --v81-blue-dark:#006da1;
  --v81-cyan:#61c7ee;
  --v81-gold:#f0b040;
  --v81-card:#ffffff;
  --v81-line:rgba(0,113,170,.16);
  --v81-soft:#edf8ff;
  --v81-radius:22px;
  --v81-shadow:0 18px 45px rgba(0,68,105,.10);
  --v81-shadow-strong:0 28px 78px rgba(0,68,105,.16);
  --v81-ease:cubic-bezier(.22,1,.36,1);
}

/* Corrección crítica de legibilidad del menú lateral */
.sidebar{
  background:
    radial-gradient(circle at 0% 0%,rgba(97,199,238,.36),transparent 30%),
    linear-gradient(180deg,#f7fcff 0%,#eef8ff 52%,#e8f4fb 100%)!important;
  color:var(--v81-ink)!important;
  border-right:1px solid rgba(0,113,170,.18)!important;
  box-shadow:20px 0 55px rgba(0,68,105,.10)!important;
}
.brand-logo-wrap{
  background:linear-gradient(135deg,#ffffff 0%,#f3fbff 100%)!important;
  border:1px solid rgba(0,159,227,.18)!important;
  box-shadow:0 18px 45px rgba(0,85,132,.14)!important;
  border-radius:24px!important;
  padding:16px!important;
  overflow:hidden!important;
}
.sidebar-logo{width:190px!important;max-width:100%!important;height:auto!important;object-fit:contain!important;display:block!important;filter:drop-shadow(0 8px 18px rgba(0,159,227,.20))!important;}
.brand-logo-wrap h1,.brand h1{color:var(--v81-ink)!important;text-shadow:none!important;line-height:1.05!important;}
.brand-logo-wrap p,.brand p{color:var(--v81-muted)!important;text-shadow:none!important;font-weight:800!important;}

.nav{gap:9px!important;padding:6px 2px 20px!important;}
.nav button{
  color:var(--v81-ink)!important;
  text-shadow:none!important;
  font-weight:900!important;
  letter-spacing:-.015em!important;
  background:rgba(255,255,255,.58)!important;
  border:1px solid rgba(0,113,170,.10)!important;
  box-shadow:0 8px 22px rgba(0,77,120,.045)!important;
  opacity:1!important;
  min-height:46px!important;
  padding:11px 12px!important;
  white-space:normal!important;
  line-height:1.18!important;
  isolation:isolate!important;
}
.nav button::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(120deg,rgba(255,255,255,.0),rgba(255,255,255,.72),rgba(255,255,255,.0));
  transform:translateX(-135%);
  transition:transform .65s var(--v81-ease);
  z-index:-1;
}
.nav button:hover::before{transform:translateX(135%)}
.nav button:hover{
  color:#003d61!important;
  background:#ffffff!important;
  border-color:rgba(0,159,227,.34)!important;
  transform:translateX(5px)!important;
  box-shadow:0 15px 34px rgba(0,113,170,.12)!important;
}
.nav button.active{
  color:#ffffff!important;
  background:linear-gradient(135deg,var(--v81-blue),var(--v81-blue-dark))!important;
  border-color:rgba(255,255,255,.42)!important;
  box-shadow:0 18px 38px rgba(0,159,227,.24)!important;
}
.nav button.active::after{
  content:""!important;
  position:absolute!important;
  right:12px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  background:var(--v81-gold)!important;
  box-shadow:0 0 0 6px rgba(240,176,64,.20)!important;
}
.nav button[data-view="forum"]::after,
.nav button[data-view="secrets"]::after,
.nav button[data-view="landing"]::after,
.nav button[data-view="techcalendar"]::after,
.nav button[data-view="incidents"]::after,
.nav button[data-view="sponsorpack"]::after,
.nav button[data-view="screens"]::after{
  margin-left:auto!important;
  position:static!important;
  transform:none!important;
  width:auto!important;height:auto!important;
  content:attr(data-badge)!important;
  background:rgba(0,159,227,.12)!important;
  color:#0076ad!important;
  border-radius:999px!important;
  padding:3px 7px!important;
  font-size:10px!important;
  font-weight:950!important;
  box-shadow:none!important;
}
.nav button.active[data-view]::after{background:rgba(255,255,255,.20)!important;color:#fff!important;}
.sidebox{
  color:var(--v81-ink-2)!important;
  background:rgba(255,255,255,.62)!important;
  border:1px solid rgba(0,113,170,.13)!important;
  box-shadow:0 12px 28px rgba(0,77,120,.06)!important;
}
.sidebox span{color:#274e68!important;}

/* Header y topbar */
.topbar{
  background:linear-gradient(135deg,rgba(255,255,255,.90),rgba(239,250,255,.82))!important;
  border:1px solid rgba(0,113,170,.12)!important;
  box-shadow:0 16px 42px rgba(0,68,105,.09)!important;
}
.topbar h2{color:var(--v81-ink)!important;letter-spacing:-.04em!important;}
.topbar p{color:#5f7288!important;}
.session-card{background:#ffffff!important;border:1px solid rgba(0,159,227,.18)!important;border-radius:18px!important;box-shadow:0 12px 32px rgba(0,86,132,.10)!important;}

/* Estructura global anti-solape */
.main,.section,.card,.panel,.module-card,.tablewrap,.tablebox,.formgrid,.filters,.actions{box-sizing:border-box!important;min-width:0!important;}
.section.active{animation:v81ModuleIn .34s var(--v81-ease) both!important;}
.section-title{margin-bottom:clamp(14px,1.7vw,24px)!important;}
.section-title h3{color:var(--v81-ink)!important;font-size:clamp(22px,2.2vw,34px)!important;line-height:1.05!important;letter-spacing:-.05em!important;}
.section-title p{color:var(--v81-muted)!important;font-weight:650!important;}
.card,.panel,.module-card,.hotel-card,.forum-card,.screen-card,.ratio-card{
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(247,252,255,.91))!important;
  border:1px solid var(--v81-line)!important;
  box-shadow:var(--v81-shadow)!important;
  overflow:hidden!important;
  position:relative;
}
.card::before,.panel::before,.module-card::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;height:3px;
  background:linear-gradient(90deg,var(--v81-blue),var(--v81-cyan),transparent 78%);
  opacity:.85;
}
.card:hover,.panel:hover,.module-card:hover{box-shadow:var(--v81-shadow-strong)!important;}
.card.v81-enter{animation:v81CardIn .38s var(--v81-ease) both;}

/* KPI y presupuestos: evita tarjetas montadas */
.kpis,.mini-kpis,.budget-kpis,.forum-flex-kpis,.sponsor-summary-grid,.ratio-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;
  gap:clamp(12px,1.4vw,20px)!important;
  align-items:stretch!important;
}
.kpi,.card.kpi,.budget-card,.ratio-card{
  min-height:128px!important;
  overflow:hidden!important;
}
.kpi b,.card.kpi b,.budget-card b,.ratio-card b{
  font-size:clamp(24px,2.6vw,42px)!important;
  line-height:1!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
}
.kpi span,.card.kpi span{color:#5f7288!important;font-weight:800!important;}

/* Formularios: todos modificables y legibles */
.formgrid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;gap:14px!important;}
.formgrid label,.filters label{min-width:0!important;color:#31506a!important;font-weight:900!important;}
input,select,textarea,.input{
  color:#0f2537!important;
  background:#ffffff!important;
  border:1px solid rgba(0,113,170,.20)!important;
  box-shadow:0 7px 18px rgba(0,77,120,.04)!important;
}
input::placeholder,textarea::placeholder{color:#8aa0b3!important;}
select option{color:#0f2537!important;background:#fff!important;}
textarea{line-height:1.45!important;}

/* Botones: animación bonita y segura */
.btn,.mini,button.btn,label.btn{
  font-weight:900!important;
  letter-spacing:.01em!important;
  box-shadow:0 12px 24px rgba(0,99,154,.10)!important;
}
.btn.primary,.btn:not(.secondary):not(.ghost):not(.warn):not(.danger),.mini.primary{
  background:linear-gradient(135deg,var(--v81-blue),#0073b4)!important;
  color:#fff!important;
}
.btn.secondary,.mini.secondary{background:#e9f7ff!important;color:#005f8f!important;border:1px solid rgba(0,159,227,.22)!important;}
.btn.ghost,.mini.ghost{background:#ffffff!important;color:#0b4164!important;border:1px solid rgba(0,113,170,.16)!important;}
.btn.warn,.mini.warn{background:linear-gradient(135deg,#f59e0b,#f0b040)!important;color:#fff!important;}
.btn.danger,.mini.danger{background:linear-gradient(135deg,#ef4444,#dc2626)!important;color:#fff!important;}

/* Tablas: contenido grande sin romper pantalla */
.tablewrap,.tablebox,.compact,.matrix-wrap,.forum-matrix-wrap{
  overflow:auto!important;
  max-width:100%!important;
  background:#fff!important;
  border:1px solid rgba(0,113,170,.13)!important;
  box-shadow:0 14px 32px rgba(0,77,120,.06)!important;
}
table{border-collapse:separate!important;border-spacing:0!important;}
thead th{color:#07496f!important;background:linear-gradient(180deg,#f6fcff,#e8f6ff)!important;font-weight:950!important;}
tbody td{color:#23384a!important;}
tbody tr:hover td{background:#f4fbff!important;}

/* Dashboard/mapas/previews: no solapar */
.main-dash,.dashboard-grid,.landing-grid,.hotel-agency-layout,.forum-preview-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:clamp(16px,1.8vw,24px)!important;
}
@media(min-width:1280px){
  .main-dash{grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr)!important;}
  .landing-grid,.hotel-agency-layout{grid-template-columns:minmax(0,1fr) minmax(360px,.55fr)!important;}
}
.map-card,.room-screen-preview,.forum-preview-stage,.landing-preview,.certificate,.rating-card-preview{max-width:100%!important;}
.room-screen-preview{aspect-ratio:16/9!important;width:100%!important;}
.screen-stage{font-size:clamp(12px,1.2vw,18px)!important;}

/* Módulos específicos: estética homogénea sin invadir lógica */
.rating-studio,.justificantes-pro,.budget-pro,.incident-pro,.forum-flex-card,.hotel-agency-pro,.guides-pro{
  isolation:isolate;
}
.rating-studio .star,.rating-stars svg{filter:drop-shadow(0 4px 8px rgba(240,176,64,.24));}
.incident-tag,.tag,.badge{font-weight:900!important;border-radius:999px!important;}
.calendar-grid,.calendar-shell{min-width:0!important;max-width:100%!important;}

/* Overlay/transiciones: bonitas pero jamás bloqueantes */
#v80Transition,.v80-transition,.v81-transition{pointer-events:none!important;}
.v80-transition{background:rgba(237,248,255,.50)!important;}
.v80-transition-card{
  border-radius:28px!important;
  border:1px solid rgba(0,159,227,.22)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(238,250,255,.92))!important;
  box-shadow:0 24px 70px rgba(0,68,105,.18)!important;
}
.v80-transition-card::before{
  content:"";position:absolute;width:92px;height:92px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--v81-blue),var(--v81-cyan),var(--v81-gold),var(--v81-blue));
  opacity:.14;animation:v81Spin 1.4s linear infinite;z-index:-1;
}

/* Modo mobile/tablet */
@media(max-width:980px){
  .app{display:block!important;overflow:auto!important;}
  .sidebar{min-height:auto!important;position:relative!important;}
  .brand-logo-wrap{display:flex!important;align-items:center!important;gap:12px!important;}
  .sidebar-logo{width:170px!important;}
  .sidebar .nav{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(165px,1fr))!important;max-height:48vh!important;overflow:auto!important;}
  .nav button{min-height:44px!important;}
  .sidebox{display:none!important;}
  .main{padding:14px!important;}
  .topbar{position:relative!important;display:block!important;}
  .top-actions{margin-top:12px!important;justify-content:flex-start!important;}
}
@media(max-width:620px){
  .sidebar .nav{grid-template-columns:1fr!important;max-height:52vh!important;}
  .sidebar-logo{width:150px!important;}
  .section-title{display:block!important;}
  .actions,.filters,.top-actions{display:grid!important;grid-template-columns:1fr!important;}
  .btn,.mini,button.btn{width:100%!important;}
  .kpis,.mini-kpis,.budget-kpis{grid-template-columns:1fr!important;}
}

/* Accesibilidad y rendimiento */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body.v81-no-motion *, body.v81-no-motion *::before, body.v81-no-motion *::after{animation:none!important;transition:none!important;}
body.v81-compact .card,body.v81-compact .panel{padding:14px!important;border-radius:18px!important;}
body.v81-compact .nav button{min-height:40px!important;padding:9px 10px!important;}

@keyframes v81ModuleIn{from{opacity:0;transform:translateY(12px) scale(.995);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes v81CardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes v81Spin{to{transform:rotate(360deg)}}
