/* =====================================================================
   ACCESO DE LOS CLIENTES DE LA PLATAFORMA CON LA CARA DE MANGORA (11/11/2026)

   Pedido del usuario: el inicio de sesión de admin.tecscom.pe «debe ser de
   MANGORA, no de TECOMSER». Lo inyecta cmd/admin/empresa_instancia.go solo
   cuando EMPRESA_CLAVE no es tecomser y la página es de acceso
   (<body class="auth-body">). La intro es la de admin.mangora.pe, copiada
   de su página: el trazo del emblema, el halo y «Iniciando servicios».
   ===================================================================== */

/* --- Piel MANGORA sobre el login del panel --- */
body.auth-body{
  background:radial-gradient(1100px 700px at 25% -10%, #0d4537 0%, #072f26 50%, #03140f 100%) fixed !important;
  min-height:100vh;
}
:root{ background:#03140f !important; }
:root .auth-page{ border-radius:28px !important; box-shadow:0 30px 90px rgba(0,0,0,.42) !important; }
:root .auth-marca-titulo{ color:#0d4537 !important; }
.auth-button{ background:#072f26 !important; border-color:#072f26 !important; color:#fff !important; }
.auth-button:hover{ background:#0d4537 !important; }
.auth-form input:focus{ border-color:#0d4537 !important; box-shadow:0 0 0 4px rgba(7,47,38,.14) !important; }
.tc-acceso-enlaces a:hover{ color:#072f26 !important; }
.auth-register a.tc-acceso-registro{ border-color:#072f26 !important; color:#072f26 !important; }
.auth-register a.tc-acceso-registro:hover{ background:#072f26 !important; color:#fff !important; }
.auth-footer{ color:#6e6e73 !important; }
/* La entrada de TECOMSER no se usa aquí. */
.te-entrada{ display:none !important; }
.entrando .auth-page{ animation:salir .5s cubic-bezier(.4,0,.2,1) forwards; }

/* --- La intro de MANGORA (de admin.mangora.pe) --- */
:root{
    --base:#072f26;
    --base-2:#0d4537;
    --tarjeta:#ffffff;
    --tinta:#1d1d1f;
    --tinta-2:#424245;
    --suave:#6e6e73;
    --tenue:#86868b;
    --linea:#e8e8ed;
    --campo:#f2f2f5;
    --campo-hover:#ececf0;
    --marca:#072f26;
    --marca-hover:#0d4537;
    --marca-anillo:rgba(7,47,38,.14);
    --verde:#1f9d55;
    --rojo:#c4302b;
}
@keyframes entrar{
    from{ opacity:0; transform:translateY(10px) scale(.99) }
    to{ opacity:1; transform:none }
}
.escudo{
    width:16px;
    height:16px;
    flex:none;
    color:#34d399;
    filter:drop-shadow(0 0 6px rgba(52,211,153,.45));
}
.entrando .login,
.entrando .pie{
    animation:salir .5s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes salir{
    to{ opacity:0; transform:scale(.96); filter:blur(8px) }
}
.entrada{
    position:fixed;
    inset:0;
    z-index:50;
    display:grid;
    place-items:center;
    background:var(--entrada-fondo, #03140f);
    opacity:0;
    visibility:hidden;
    transition:opacity .5s ease, visibility 0s linear .5s;
}
.entrando .entrada{
    opacity:1;
    visibility:visible;
    transition:opacity .5s ease;
}
.entrada-centro{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 24px;
}
.entrada-halo{
    position:absolute;
    top:-40px;
    left:50%;
    width:680px;
    height:300px;
    margin-left:-340px;
    background:radial-gradient(closest-side, rgba(52,211,153,.13), transparent);
    opacity:0;
    transform:scale(.6);
    pointer-events:none;
}
.entrando .entrada-halo{ animation:florecer 2.4s cubic-bezier(.16,1,.3,1) .9s forwards }
.entrada-marca{ position:relative; width:min(420px, 80vw) }
.trazo{ display:block; width:100%; height:auto; overflow:visible }
.entrada-imagen{
    display:block;
    width:100%;
    height:auto;
    max-height:120px;
    object-fit:contain;
    opacity:0;
    transform:scale(.94);
    filter:blur(8px);
}
.entrando .entrada-imagen{
    transform-origin:50% 100%;
    animation:
        letra 1.2s cubic-bezier(.16,1,.3,1) .3s forwards,
        rebotar 1.3s cubic-bezier(.3,0,.3,1) 2.6s infinite;
}
.trazo-emblema{
    fill:#fff;
    fill-opacity:0;
    stroke:#fff;
    stroke-width:6;
    stroke-linejoin:round;
    stroke-dasharray:1;
    stroke-dashoffset:1;
}
.entrando .trazo-emblema{
    transform-box:fill-box;
    transform-origin:50% 100%;
    animation:
        dibujar 1.2s cubic-bezier(.65,0,.35,1) .25s forwards,
        rellenar .6s cubic-bezier(.4,0,.2,1) 1.25s forwards,
        rebotar 1.3s cubic-bezier(.3,0,.3,1) 2.6s infinite;
}
.trazo-letra{
    fill:#fff;
    opacity:0;
    transform-box:fill-box;
    transform-origin:50% 100%;
    transform:translateY(14px);
    filter:blur(6px);
}
.entrando .trazo-letra{
    animation:letra .8s cubic-bezier(.16,1,.3,1) 1.15s forwards;
}
.trazo-raya{
    fill:#fff;
    transform-box:fill-box;
    transform:scaleX(0);
}
.trazo-raya--izq{ transform-origin:100% 50% }
.trazo-raya--der{ transform-origin:0 50% }
.entrando .trazo-raya{ animation:abrir .7s cubic-bezier(.16,1,.3,1) 1.9s forwards }
.trazo-chica{ fill:#fff; opacity:0 }
.entrando .trazo-chica{
    animation:encender .5s ease 2s forwards;
}
.entrando .trazo-letra:nth-of-type(2){ animation-delay:1.15s }
.entrando .trazo-letra:nth-of-type(3){ animation-delay:1.22s }
.entrando .trazo-letra:nth-of-type(4){ animation-delay:1.29s }
.entrando .trazo-letra:nth-of-type(5){ animation-delay:1.36s }
.entrando .trazo-letra:nth-of-type(6){ animation-delay:1.43s }
.entrando .trazo-letra:nth-of-type(7){ animation-delay:1.50s }
.entrando .trazo-letra:nth-of-type(8){ animation-delay:1.57s }
.entrando .trazo-chica:nth-of-type(11){ animation-delay:2.000s }
.entrando .trazo-chica:nth-of-type(12){ animation-delay:2.045s }
.entrando .trazo-chica:nth-of-type(13){ animation-delay:2.090s }
.entrando .trazo-chica:nth-of-type(14){ animation-delay:2.135s }
.entrando .trazo-chica:nth-of-type(15){ animation-delay:2.180s }
.entrando .trazo-chica:nth-of-type(16){ animation-delay:2.225s }
.entrando .trazo-chica:nth-of-type(17){ animation-delay:2.270s }
.entrando .trazo-chica:nth-of-type(18){ animation-delay:2.315s }
.entrada-estado{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-top:44px;
    opacity:0;
    transform:translateY(6px);
}
.entrando .entrada-estado{ animation:aparecer .7s cubic-bezier(.16,1,.3,1) 2.35s forwards }
.entrada-texto{
    margin:0;
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.38em;
    text-indent:.38em;
    text-transform:uppercase;
    color:rgba(255,255,255,.9);
}
.puntos span{ animation:punto 1.4s ease-in-out infinite both }
.puntos span:nth-child(2){ animation-delay:.2s }
.puntos span:nth-child(3){ animation-delay:.4s }
.entrada-circulo{
    order:-1;
    width:46px;
    height:46px;
    margin-bottom:20px;
    border-radius:50%;
    background:conic-gradient(from 0deg,
        rgba(16,185,129,0) 0deg,
        rgba(16,185,129,.15) 60deg,
        #10b981 170deg,
        #34d399 240deg,
        #5eead4 300deg,
        #e0fff4 345deg,
        #ffffff 360deg);
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
    mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
    filter:drop-shadow(0 0 6px rgba(52,211,153,.55)) drop-shadow(0 0 14px rgba(94,234,212,.25));
    animation:girar 1.1s cubic-bezier(.5,.15,.5,.85) infinite;
}
.entrada-circulo circle{ display:none }
.entrada-sub{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin:14px 0 0;
    font-size:12px;
    letter-spacing:.02em;
    color:rgba(255,255,255,.5);
}
.entrada-sub .escudo{ width:14px; height:14px }
@keyframes dibujar{ to{ stroke-dashoffset:0 } }
@keyframes rellenar{ to{ fill-opacity:1; stroke-opacity:0 } }
@keyframes letra{ to{ opacity:1; transform:none; filter:blur(0) } }
@keyframes abrir{ to{ transform:none } }
@keyframes encender{ to{ opacity:1 } }
@keyframes aparecer{ to{ opacity:1; transform:none } }
@keyframes florecer{ 50%{ opacity:1 } to{ opacity:.7; transform:scale(1) } }
@keyframes girar{ to{ transform:rotate(360deg) } }
@keyframes arco{
    0%{ stroke-dasharray:1 100; stroke-dashoffset:0 }
    50%{ stroke-dasharray:60 100; stroke-dashoffset:-15 }
    100%{ stroke-dasharray:1 100; stroke-dashoffset:-99 }
}
@keyframes rebotar{
    0%,100%{ transform:translateY(0) scale(1,1) }
    10%{ transform:translateY(0) scale(1.06,.94) }
    40%{ transform:translateY(-16%) scale(.97,1.04) }
    60%{ transform:translateY(-16%) scale(1,1) }
    88%{ transform:translateY(0) scale(1.07,.93) }
}
@keyframes punto{ 0%,80%,100%{ opacity:.15 } 40%{ opacity:1 } }
@media (prefers-reduced-motion:reduce){
    .entrando .trazo-emblema{ animation:none; stroke-dashoffset:0; fill-opacity:1; stroke-opacity:0 }
    .entrando .trazo-letra,
    .entrando .trazo-chica,
    .entrando .trazo-raya,
    .entrando .entrada-estado,
    .entrando .entrada-halo{ animation:none; opacity:1; transform:none; filter:none }
    .puntos span,
    .entrada-circulo,
    .entrada-circulo__arco{ animation:none }
}.tc-acceso-enlaces a{ color:#0d4537 !important; }