/* ============================================================
   Konecta — Login PREMIUM oscuro (efecto NET de fondo).
   Aditivo: solo afecta #acceso. No toca el panel ni el tema.
   ============================================================ */

/* ---- Fondo: navy profundo + glows de marca + viñeta ---- */
#acceso.visible{display:flex;align-items:flex-start;justify-content:center;min-height:100vh;min-height:100dvh;padding:4vh 12px 52px}
#acceso{
  position:relative;overflow-y:auto;overflow-x:hidden;
  background:
    radial-gradient(1100px 700px at 85% -15%, rgba(108,194,74,.20), transparent 55%),
    radial-gradient(900px 600px at -10% 115%, rgba(108,194,74,.14), transparent 55%),
    linear-gradient(180deg,#0b1a2d,#081320) !important;
}
#acceso::after{ /* viñeta sutil para enfocar la tarjeta */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(125% 90% at 50% 32%, transparent 52%, rgba(0,0,0,.4));
}
#acceso canvas{opacity:.22 !important}

/* ---- Tarjeta: glass + borde de luz + glow verde ---- */
#acceso .caja-acceso{
  position:relative;z-index:2;
  width:min(424px, 92vw);
  padding:38px 34px 28px !important;
  border-radius:22px !important;
  background:linear-gradient(180deg, rgba(18,40,62,.92), rgba(12,27,44,.8)) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 40px 90px -20px rgba(0,0,0,.7),
    0 0 90px -34px rgba(108,194,74,.45) !important;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  color:#eaf2f8;
  animation:acc-in .55s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes acc-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ #acceso .caja-acceso{animation:none} }
/* línea de luz superior */
#acceso .caja-acceso::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;border-radius:22px 22px 0 0;
  background:linear-gradient(90deg,transparent,rgba(108,194,74,.75),rgba(108,194,74,.5),transparent);
}

/* ---- Marca / logo ---- */
#acceso .caja-acceso .marca{
  display:flex;align-items:center;justify-content:center;gap:12px;margin:2px 0 6px;
}
#acceso .caja-acceso .marca img{
  width:42px;height:42px;border-radius:12px;
  filter:drop-shadow(0 4px 14px rgba(108,194,74,.5));
}
#acceso .caja-acceso .marca h1{
  margin:0;font-size:23px;font-weight:800;letter-spacing:.2px;color:#fff;
}
#acceso .caja-acceso .lema{
  text-align:center;margin:0 0 22px;font-size:13.5px;color:#9fb1c2 !important;
}

/* ---- Tabs segmentadas ---- */
#acceso .tabs{
  display:flex;gap:4px;padding:5px;margin-bottom:22px;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.08) !important;border-radius:13px;
}
#acceso .tabs .tab{
  flex:1;padding:11px 10px;border:0;border-radius:9px;cursor:pointer;
  background:transparent;font-size:14px;font-weight:600;font-family:inherit;
  color:#c2d0db !important;transition:color .2s ease, background .2s ease;
}
#acceso .tabs .tab:not(.activa):hover{color:#fff !important;background:rgba(255,255,255,.04)}
#acceso .tabs .tab.activa{
  color:#08240c !important;
  background:linear-gradient(135deg,#7ed957,#5bbf3a) !important;
  box-shadow:0 6px 16px -7px rgba(108,194,74,.7), 0 1px 0 rgba(255,255,255,.3) inset;
}

/* ---- Labels ---- */
#acceso .caja-acceso label{
  display:block;margin:0 0 7px;font-size:12.5px;font-weight:600;
  letter-spacing:.3px;color:#9fb1c2 !important;
}

/* ---- Campos (icono + input) ---- */
#acceso .campo{position:relative;margin-bottom:16px}
#acceso .campo .ico{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:#6c8197;pointer-events:none;transition:color .18s ease;
}
#acceso input,#acceso select{
  width:100%;height:50px;padding:0 14px 0 40px !important;
  border-radius:12px !important;font-size:15px;font-family:inherit;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  color:#fff !important;outline:none;box-sizing:border-box;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#acceso select{padding-right:14px !important;color-scheme:dark !important;cursor:pointer}
#acceso input:focus,#acceso select:focus{
  border-color:rgba(108,194,74,.75) !important;
  background:rgba(255,255,255,.06) !important;
  box-shadow:0 0 0 3.5px rgba(108,194,74,.16) !important;
}
#acceso .campo:focus-within .ico{color:#7ed957}
#acceso input::placeholder{color:#5f7286 !important}
#acceso select option{background:#11253a !important;color:#fff !important}

/* Desplegable de rubro propio (resaltado verde de marca, no el azul del navegador) */
.rubro-cd{position:relative;width:100%}
.rubro-cd-btn{width:100%;height:50px;padding:0 14px 0 40px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.11);
  color:#fff;font-size:15px;font-family:inherit;text-align:left;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease}
.rubro-cd-btn:hover,.rubro-cd.open .rubro-cd-btn{border-color:rgba(108,194,74,.75);
  background:rgba(255,255,255,.06);box-shadow:0 0 0 3.5px rgba(108,194,74,.16)}
.rubro-cd-arrow{width:16px;height:16px;flex:0 0 16px;color:#6c8197;transition:transform .2s ease}
.rubro-cd.open .rubro-cd-arrow{transform:rotate(180deg)}
.rubro-cd-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;
  background:#11253a;border:1px solid rgba(108,194,74,.35);border-radius:12px;
  padding:6px;margin:0;list-style:none;max-height:290px;overflow:auto;
  box-shadow:0 14px 34px rgba(0,0,0,.45);display:none}
.rubro-cd.open .rubro-cd-list{display:block}
.rubro-cd-opt{padding:11px 12px;border-radius:9px;color:#dfe8ee;font-size:14.5px;cursor:pointer;
  border:1.5px solid transparent;transition:border-color .15s ease, background .15s ease}
.rubro-cd-opt:hover,.rubro-cd-opt.sel{border-color:var(--verde);background:rgba(108,194,74,.08)}

/* ojo mostrar/ocultar contraseña */
#acceso .ojo{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:#6c8197;cursor:pointer;border-radius:8px;
  transition:color .15s ease, background .15s ease;
}
#acceso .ojo:hover{color:#cfe0ee;background:rgba(255,255,255,.05)}
#acceso .ojo svg{width:19px;height:19px}
#acceso .ojo .ojo-off{display:none}
#acceso .ojo.visible .ojo-on{display:none}
#acceso .ojo.visible .ojo-off{display:block}

/* el autocompletar del navegador pinta el campo claro: lo forzamos oscuro */
#acceso input:-webkit-autofill,#acceso input:-webkit-autofill:hover,#acceso input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff !important;
  -webkit-box-shadow:0 0 0 1000px #11253a inset !important;
  caret-color:#fff !important;
}

/* ---- Botón principal ---- */
#acceso .caja-acceso .btn.bloque{
  width:100%;height:51px;margin-top:6px;border:0 !important;border-radius:12px !important;cursor:pointer;
  font-size:15.5px;font-weight:700;font-family:inherit;color:#08240c !important;
  background:linear-gradient(135deg,#7ed957,#56bd37) !important;
  box-shadow:0 10px 26px -8px rgba(108,194,74,.6), 0 1px 0 rgba(255,255,255,.35) inset;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
#acceso .caja-acceso .btn.bloque:hover{
  transform:translateY(-1px);filter:brightness(1.04);
  box-shadow:0 14px 32px -8px rgba(108,194,74,.72), 0 1px 0 rgba(255,255,255,.35) inset;
}
#acceso .caja-acceso .btn.bloque:active{transform:translateY(0)}

/* ---- Links / aviso / pie ---- */
#acceso .caja-acceso .texto-2,#acceso #ac-pie{color:#9fb1c2 !important}
#acceso a{color:#7ed957 !important;text-decoration:none}
#acceso a:hover{text-decoration:underline}
#acceso .aviso{margin-top:12px}
#acceso #ac-pie{
  margin-top:18px !important;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.07);font-size:12.5px;
}
#acceso #ac-pie svg{vertical-align:-2px;margin-right:5px}