:root{
    --as-green:#198754;
    --as-green2:#28a745;
    --as-orange:#ff6b00;
    --as-dark:#1f2a37;
    --as-muted:#6b7280;
    --as-bg:#f6f8fb;
}
*{box-sizing:border-box}
body{font-family:'Inter','Segoe UI',Arial,sans-serif;background:var(--as-bg);color:var(--as-dark);}
a{text-decoration:none}
.navbar-brand img,.brand-logo{height:52px;object-fit:contain}
.btn-orange{background:linear-gradient(135deg,#ff6b00,#ff8a1f);border:0;color:#fff}
.btn-orange:hover{color:#fff;filter:brightness(.96)}
.btn-green{background:linear-gradient(135deg,#198754,#29a943);border:0;color:#fff}
.btn-green:hover{color:#fff;filter:brightness(.96)}
.text-orange{color:var(--as-orange)!important}
.text-green{color:var(--as-green)!important}
.hero{min-height:calc(100vh - 80px);display:flex;align-items:center;background:radial-gradient(circle at 85% 20%,rgba(25,135,84,.11),transparent 28%),radial-gradient(circle at 5% 80%,rgba(255,107,0,.10),transparent 28%),#fff}
.hero-title{font-size:clamp(2.1rem,5vw,4.7rem);line-height:1.03;font-weight:900}
.hero-logo{max-width:520px;width:100%;filter:drop-shadow(0 18px 35px rgba(0,0,0,.10))}
.feature-card,.stat-card,.device-card,.panel-card{background:#fff;border:1px solid rgba(31,42,55,.08);border-radius:22px;box-shadow:0 14px 32px rgba(31,42,55,.06)}
.feature-icon{width:68px;height:68px;border-radius:20px;display:grid;place-items:center;font-size:2rem}
.whatsapp-float{position:fixed;right:20px;bottom:20px;z-index:1030;background:#25D366;color:#fff;border-radius:999px;padding:12px 20px;display:flex;align-items:center;gap:10px;box-shadow:0 16px 36px rgba(37,211,102,.35);font-weight:800}
.whatsapp-float i{font-size:2rem}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,107,0,.09),rgba(25,135,84,.10)),#fff;padding:22px}
.auth-card{width:100%;max-width:480px;background:#fff;border-radius:28px;padding:30px;box-shadow:0 20px 55px rgba(31,42,55,.14);border:1px solid rgba(31,42,55,.07)}
.sidebar{position:fixed;top:0;left:0;width:270px;height:100vh;background:#fff;border-right:1px solid rgba(31,42,55,.08);padding:20px 14px;z-index:1000}
.sidebar .nav-link{border-radius:14px;color:#243041;font-weight:650;padding:13px 16px;margin-bottom:6px}
.sidebar .nav-link.active,.sidebar .nav-link:hover{background:linear-gradient(135deg,#198754,#27a844);color:#fff}
.main{margin-left:270px;min-height:100vh}
.topbar{height:74px;background:#fff;border-bottom:1px solid rgba(31,42,55,.08);display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:900}
.content{padding:26px}
.status-pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:7px 12px;font-weight:700;font-size:.85rem}
.status-ok{background:#e8f8ed;color:#16833a}
.status-off{background:#eef0f3;color:#5f6773}
.status-exp{background:#fff0ed;color:#d83c18}
.pulse{position:relative}
.pulse:after{content:'';position:absolute;inset:-8px;border-radius:999px;border:2px solid rgba(25,135,84,.28);animation:pulse 1.35s infinite}
@keyframes pulse{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.device-icon{width:68px;height:68px;border-radius:22px;display:grid;place-items:center;font-size:2rem}
.icon-puerta{background:#e9f9ef;color:#198754}
.icon-motor{background:#fff3e8;color:#ff6b00}
.icon-foco{background:#fff7dd;color:#c68b00}
.icon-otro{background:#eef2ff;color:#3758d6}
.table thead th{white-space:nowrap}
.password-text{font-family:ui-monospace,Consolas,monospace;background:#f5f7fb;border:1px solid #e3e7ef;border-radius:8px;padding:4px 8px}
.public-open{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#198754,#116b40);padding:16px}
.open-card{max-width:430px;width:100%;background:#fff;border-radius:30px;box-shadow:0 18px 45px rgba(0,0,0,.24);overflow:hidden}
.open-header{text-align:center;padding:28px 24px 10px}
.code-input{font-size:1.65rem;text-align:center;font-weight:800;letter-spacing:5px}
.toast-box{position:fixed;top:20px;right:20px;z-index:2000;min-width:280px;border-radius:16px;padding:14px 18px;background:#fff;box-shadow:0 12px 35px rgba(0,0,0,.15);display:none}
@media(max-width:991px){
    .sidebar{transform:translateX(-100%);transition:.2s}
    .sidebar.show{transform:none}
    .main{margin-left:0}
    .content{padding:18px}
}


/* Ajuste avatar usuario sidebar */
.user-mini .device-icon,
.sidebar .user-mini .device-icon,
.sidebar .rounded-circle,
.sidebar .user-avatar,
.sidebar .avatar-circle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
}

.user-mini .device-icon i,
.sidebar .user-mini .device-icon i,
.sidebar .rounded-circle i,
.sidebar .user-avatar i,
.sidebar .avatar-circle i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}


/* V14 dark sidebar + bordes verdes difuminados */
body{
  background:
    radial-gradient(circle at 90% 10%, rgba(25,135,84,.10), transparent 26%),
    radial-gradient(circle at 5% 90%, rgba(255,107,0,.06), transparent 28%),
    #eef4f1 !important;
}
.sidebar{
  background:linear-gradient(180deg,#0f1f1a,#111827) !important;
  border-right:1px solid rgba(46,204,113,.22) !important;
  box-shadow:14px 0 35px rgba(0,0,0,.18) !important;
}
.sidebar .nav-link{
  color:#d7f5df !important;
}
.sidebar .nav-link.active,
.sidebar .nav-link:hover{
  background:linear-gradient(135deg,#198754,#2ecc71) !important;
  color:#fff !important;
}
.sidebar .text-muted,
.sidebar small{
  color:#9fb7a8 !important;
}
.sidebar .user-mini,
.sidebar .card-soft{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(46,204,113,.18) !important;
  color:#fff !important;
}
.sidebar .logo-panel,
.sidebar .logo{
  filter:drop-shadow(0 10px 22px rgba(46,204,113,.16));
}
.card-soft,
.stat-card,
.device-card,
.table-card,
.panel-card,
.auth-card,
.modal-content{
  border:1px solid rgba(25,135,84,.18) !important;
  box-shadow:
    0 12px 32px rgba(31,41,55,.07),
    0 0 0 1px rgba(46,204,113,.06),
    0 0 28px rgba(25,135,84,.08) !important;
}
.table-card,
.panel-card{
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(248,255,251,.94)) !important;
}
.stat-card:before,
.device-card:before,
.panel-card:before,
.table-card:before{
  content:"";
  display:block;
  height:3px;
  margin:-1px -1px 12px -1px;
  border-radius:24px 24px 0 0;
  background:linear-gradient(90deg,rgba(25,135,84,.05),rgba(25,135,84,.55),rgba(255,107,0,.35),rgba(25,135,84,.05));
}


.toast-box.danger{
  background:#dc3545!important;
  color:#fff!important;
  border-left-color:#7f1d1d!important;
}
.toast-box.danger .text-danger{
  color:#fff!important;
}


/* V20: asegurar que los íconos Font Awesome no queden ocultos */
.fa-solid, .fa-regular, .fa-brands, .fas, .far, .fab{
  display:inline-block!important;
  line-height:1!important;
}


/* V21 restaurar botones con íconos en panel */
.device-card .btn-sm i,
.table-card .btn-sm i{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
}
.device-card .btn-sm{
  min-height:32px;
}


/* V27 front + logo horizontal + menos blanco */
.logo-horizontal{
  height:58px!important;
  width:auto!important;
  max-width:310px!important;
  object-fit:contain!important;
}
.navbar{
  background:rgba(255,255,255,.92)!important;
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(25,135,84,.16)!important;
  box-shadow:0 14px 35px rgba(25,135,84,.08)!important;
}
.hero{
  background:
    radial-gradient(circle at 85% 15%,rgba(25,135,84,.18),transparent 28%),
    radial-gradient(circle at 4% 80%,rgba(255,107,0,.13),transparent 30%),
    linear-gradient(180deg,#f8fffb,#eef7f2)!important;
}
.hero .card-soft,
.front-card,
.front-features .card-soft{
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(248,255,251,.94))!important;
  border:1px solid rgba(25,135,84,.20)!important;
  box-shadow:
    0 14px 36px rgba(31,41,55,.07),
    0 0 0 1px rgba(46,204,113,.08),
    0 0 30px rgba(25,135,84,.10)!important;
}
.front-card{
  border-radius:24px;
  position:relative;
  overflow:hidden;
}
.front-card:before{
  content:"";
  display:block;
  height:4px;
  margin:-24px -24px 18px -24px;
  background:linear-gradient(90deg,rgba(25,135,84,.08),rgba(25,135,84,.55),rgba(255,107,0,.40),rgba(25,135,84,.08));
}
.front-features{
  background:
    radial-gradient(circle at 15% 20%,rgba(255,107,0,.08),transparent 28%),
    radial-gradient(circle at 90% 70%,rgba(25,135,84,.12),transparent 28%),
    #eef7f2;
}
.open-logo{
  max-width:100%;
  height:92px;
  object-fit:contain;
}
.open-card{
  border:1px solid rgba(25,135,84,.22)!important;
  box-shadow:
    0 20px 55px rgba(0,0,0,.25),
    0 0 38px rgba(46,204,113,.16)!important;
}
@media(max-width:576px){
  .logo-horizontal{height:48px!important;max-width:240px!important}
  .open-logo{height:78px}
}


/* V28 logo horizontal en navbar */
.navbar-brand img,
.navbar-brand .logo-horizontal{
  height:58px!important;
  width:auto!important;
  max-width:320px!important;
  object-fit:contain!important;
}
@media(max-width:576px){
  .navbar-brand img,
  .navbar-brand .logo-horizontal{
    height:46px!important;
    max-width:245px!important;
  }
}


/* V30 logo horizontal con manos */
.logo-horizontal,
.navbar-brand img{
  height:56px!important;
  width:auto!important;
  max-width:340px!important;
  object-fit:contain!important;
}
.open-logo{
  height:86px!important;
  width:auto!important;
  max-width:100%!important;
  object-fit:contain!important;
}
@media(max-width:576px){
  .logo-horizontal,
  .navbar-brand img{
    height:46px!important;
    max-width:260px!important;
  }
  .open-logo{
    height:72px!important;
  }
}


/* V31: logo del sidebar dentro del ancho del menú */
.sidebar .logo-panel,
.sidebar .logo,
.sidebar img[src*="logo"],
.sidebar img[src*="logo-horizontal"],
.sidebar img[src*="logo.png"]{
  max-width:100%!important;
  width:100%!important;
  height:auto!important;
  max-height:92px!important;
  object-fit:contain!important;
  display:block!important;
  margin:0 auto!important;
}

.sidebar .text-center.mb-3{
  width:100%!important;
  overflow:hidden!important;
  padding:0 6px!important;
}

.sidebar{
  overflow-x:hidden!important;
}


/* V34: historial filtros y logo con manos */
.table-card .form-label{
  font-weight:700;
  color:#334155;
}
.logo-horizontal,
.navbar-brand img{
  object-fit:contain!important;
}


/* V35 logo primer estilo con manitos y popup centrado */
.logo-horizontal,
.navbar-brand img{
  height:56px!important;
  width:auto!important;
  max-width:340px!important;
  object-fit:contain!important;
}
.open-logo{
  height:86px!important;
  width:auto!important;
  max-width:100%!important;
  object-fit:contain!important;
}
.sidebar .logo-panel,
.sidebar .logo,
.sidebar img[src*="logo"]{
  max-width:100%!important;
  width:100%!important;
  height:auto!important;
  max-height:92px!important;
  object-fit:contain!important;
  display:block!important;
  margin:0 auto!important;
}
@media(max-width:576px){
  .logo-horizontal,
  .navbar-brand img{height:46px!important;max-width:260px!important;}
  .open-logo{height:72px!important;}
}


/* V37 logo horizontal generado */
.logo-horizontal,
.navbar-brand img{
  height:56px!important;
  width:auto!important;
  max-width:360px!important;
  object-fit:contain!important;
}
.open-logo{
  height:86px!important;
  width:auto!important;
  max-width:100%!important;
  object-fit:contain!important;
}
.sidebar .logo-panel,
.sidebar .logo,
.sidebar img[src*="logo"]{
  max-width:100%!important;
  width:100%!important;
  height:auto!important;
  max-height:92px!important;
  object-fit:contain!important;
  display:block!important;
  margin:0 auto!important;
}
@media(max-width:576px){
  .logo-horizontal,
  .navbar-brand img{height:46px!important;max-width:270px!important;}
  .open-logo{height:72px!important;}
}

/* V39 accesos por día */
#boxDiasHorarios table td,#boxDiasHorarios table th{vertical-align:middle}#boxDiasHorarios .form-switch{display:flex;align-items:center;justify-content:center}