/* ============================================================
   AVOTECH / MUÑELOCOS — capa visual local (glass + neu + clay)
   Se carga DESPUES de avotech-modern.css para complementarlo,
   nunca reemplazarlo. Solo CSS: no toca controllers, rutas,
   appsettings ni cadenas de conexion.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root{
    /* Reutiliza la paleta ya establecida en avotech-modern.css y la extiende */
    --mrf-blue: var(--av-blue, #1e63d3);
    --mrf-blue-2: var(--av-blue-2, #2d8cff);
    --mrf-violet: var(--av-accent-2, #a855f7);
    --mrf-magenta: #ec4899;
    --mrf-cyan: #06b6d4;
    --mrf-amber: #f59e0b;

    --mrf-glass-bg: rgba(255,255,255,0.55);
    --mrf-glass-bg-strong: rgba(255,255,255,0.72);
    --mrf-glass-border: rgba(255,255,255,0.65);
    --mrf-glass-blur: 16px;

    --mrf-neu-light: rgba(255,255,255,0.85);
    --mrf-neu-shadow: rgba(30,60,120,0.16);

    --mrf-clay-shadow: 0 8px 0 rgba(30,60,140,0.18), 0 16px 28px rgba(30,99,211,0.30);

    --mrf-radius-lg: 26px;
    --mrf-radius-md: 18px;
    --mrf-radius-sm: 12px;
}

/* ---------- Fondo: degradado animado tipo aurora suave ---------- */
body{
    font-family: 'Plus Jakarta Sans', sans-serif;
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(1100px 700px at 10% -10%, rgba(30,99,211,0.16), transparent 60%),
        radial-gradient(900px 650px at 105% 5%, rgba(168,85,247,0.14), transparent 55%),
        radial-gradient(850px 850px at 50% 115%, rgba(6,182,212,0.12), transparent 60%),
        linear-gradient(160deg, #f6f8fb 0%, #eef2ff 45%, #f3f6fb 100%);
    background-attachment: fixed;
    animation: mrf-aurora-drift 24s ease-in-out infinite alternate;
}
@keyframes mrf-aurora-drift{
    0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
    100% { background-position: 6% 5%, 94% 6%, 47% 92%, 0 0; }
}

body::before, body::after{
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .38;
    pointer-events: none;
}
body::before{
    width: 460px; height: 460px;
    top: -140px; left: -110px;
    background: radial-gradient(circle at 30% 30%, var(--mrf-violet), transparent 70%);
    animation: mrf-float-a 17s ease-in-out infinite;
}
body::after{
    width: 560px; height: 560px;
    bottom: -180px; right: -150px;
    background: radial-gradient(circle at 60% 60%, var(--mrf-cyan), transparent 70%);
    animation: mrf-float-b 20s ease-in-out infinite;
}
@keyframes mrf-float-a{
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(50px, 35px) scale(1.1); }
}
@keyframes mrf-float-b{
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(-45px,-25px) scale(1.06); }
}

/* watermark decorativo, muy tenue */
/* Watermark de fondo eliminado: usaba el logo de "Avotech", inconsistente
   con la identidad de marca Muñelocos ya establecida en toda la app. */

h1,h2,h3,h4,h5,h6, .brand-logo, .card-header h1, .card-header h4{
    font-family: 'Sora', sans-serif;
}

/* ---------- Navbar: glassmorfismo (no toca el login, que la oculta aparte) ---------- */
.horizontal-menu .top-navbar,
.horizontal-menu .bottom-navbar{
    background: var(--mrf-glass-bg) !important;
    backdrop-filter: blur(var(--mrf-glass-blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--mrf-glass-blur)) saturate(160%);
    border-bottom: 1px solid var(--mrf-glass-border);
    box-shadow: 0 8px 28px rgba(30,60,120,0.10);
}
.bottom-navbar .nav-link{
    position: relative;
    transition: color .25s ease;
}
.bottom-navbar .nav-link::after{
    content:"";
    position:absolute; left:50%; bottom:-2px;
    width:0; height:2px;
    background: linear-gradient(90deg, var(--mrf-violet), var(--mrf-cyan));
    transition: all .3s ease;
    transform: translateX(-50%);
}
.bottom-navbar .nav-link:hover::after{ width: 80%; }

.navbar-brand-wrapper img{
    filter: drop-shadow(0 4px 12px rgba(30,99,211,.35));
}

/* ---------- Contenido: panel glass + tarjetas neumorficas ---------- */
.content-wrapper > .container{
    background: var(--mrf-glass-bg);
    backdrop-filter: blur(var(--mrf-glass-blur)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--mrf-glass-blur)) saturate(140%);
    border: 1px solid var(--mrf-glass-border);
    border-radius: var(--mrf-radius-lg);
    box-shadow: 0 20px 50px rgba(30,60,120,0.12);
    padding: 2rem !important;
    margin-top: .5rem;
    animation: mrf-rise-in .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes mrf-rise-in{
    from{ opacity:0; transform: translateY(16px); }
    to{ opacity:1; transform: translateY(0); }
}

.card{
    background: linear-gradient(145deg, #ffffff, #eef1fb);
    border: none;
    border-radius: var(--mrf-radius-md);
    box-shadow: 9px 9px 20px var(--mrf-neu-shadow), -9px -9px 20px var(--mrf-neu-light);
    transition: box-shadow .3s ease;
}
.card:hover{
    box-shadow: 13px 13px 26px var(--mrf-neu-shadow), -13px -13px 26px var(--mrf-neu-light);
}
.card-header{
    background: transparent;
}
/* Título de gradiente arcoíris eliminado por inconsistencia visual: aparecía
   solo donde un card-header usaba <h1>/<h4>/<b>, sin relación con el resto
   de encabezados de la app (planos, color de texto normal). */

/* ---------- Tablas ---------- */
.table{
    border-radius: var(--mrf-radius-sm);
    overflow: hidden;
}
.table thead th{
    background: linear-gradient(90deg, rgba(30,99,211,.12), rgba(168,85,247,.10));
    border-bottom: none !important;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .06em;
}
.table tbody tr{
    transition: background .2s ease;
}
.table tbody tr:hover{
    background: linear-gradient(90deg, rgba(30,99,211,.08), rgba(236,72,153,.06)) !important;
}

/* ---------- Botones: claymorfismo (solo botones solidos; los btn-outline-* conservan su estilo) ---------- */
.btn{
    border-radius: 999px;
    font-weight: 600;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:not([class*="btn-outline"]):not(.btn-link){
    border: none;
}
.btn-primary{
    background: linear-gradient(135deg, var(--mrf-blue), var(--mrf-violet) 55%, var(--mrf-magenta));
    background-size: 200% 200%;
    box-shadow: var(--mrf-clay-shadow);
    color: #fff !important;
    animation: mrf-clay-sheen 7s ease infinite;
}
@keyframes mrf-clay-sheen{
    0%,100%{ background-position: 0% 50%; }
    50%    { background-position: 100% 50%; }
}
.btn-primary:hover{
    transform: translateY(-3px);
    filter: brightness(1.06);
    box-shadow: 0 5px 0 rgba(30,60,140,.20), 0 20px 30px rgba(30,99,211,.32);
    color:#fff !important;
}
.btn-primary:active{
    transform: translateY(1px);
    box-shadow: 0 2px 0 rgba(30,60,140,.20), 0 8px 16px rgba(30,99,211,.24);
}

/* ---------- Formularios: neumorfico "hundido" ----------
   Sin !important en border/box-shadow: asi las clases .is-invalid/.is-valid
   de Bootstrap (mayor especificidad) siguen pudiendo pintar su borde/aro
   de color y no se pierde la retroalimentacion de validacion. */
.form-control, .input-group-text{
    background: #f2f4fb !important;
    border: 1px solid transparent;
    box-shadow: inset 4px 4px 9px var(--mrf-neu-shadow), inset -4px -4px 9px var(--mrf-neu-light);
    border-radius: var(--mrf-radius-sm) !important;
}
.form-control.is-invalid, .form-control.is-valid{
    box-shadow: inset 4px 4px 9px var(--mrf-neu-shadow), inset -4px -4px 9px var(--mrf-neu-light);
}
.input-group.border{
    border: none !important;
    border-radius: var(--mrf-radius-md) !important;
    box-shadow: inset 4px 4px 10px var(--mrf-neu-shadow), inset -4px -4px 10px var(--mrf-neu-light);
    overflow: hidden;
}
.input-group.border .form-control{ box-shadow: none; }

/* ---------- Login: vidrio + resplandor animado (se suma al fail-safe existente, no lo pelea) ---------- */
.login-card, .full-page-wrapper .card{
    background: var(--mrf-glass-bg-strong) !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--mrf-glass-border) !important;
    border-radius: var(--mrf-radius-lg) !important;
    box-shadow: 0 25px 70px rgba(30,60,120,0.20), 0 0 0 1px rgba(255,255,255,.4) inset !important;
    animation: mrf-login-pop .6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes mrf-login-pop{
    from{ opacity:0; transform: scale(.94) translateY(16px);}
    to{ opacity:1; transform: scale(1) translateY(0);}
}
.brand-logo img{
    filter: drop-shadow(0 6px 16px rgba(30,99,211,.35));
    animation: mrf-logo-breathe 4s ease-in-out infinite;
}
/* Texto del login en negro solido: sobre el vidrio claro necesita contraste fuerte, no heredar grises/blancos */
.login-card, .full-page-wrapper .card{
    color: #12162b;
}
.login-card h1, .login-card h2, .login-card h3, .login-card h4, .login-card h5, .login-card h6,
.full-page-wrapper h1, .full-page-wrapper h2, .full-page-wrapper h3,
.full-page-wrapper h4, .full-page-wrapper h5, .full-page-wrapper h6,
.login-card label, .full-page-wrapper label,
.login-card .form-control, .full-page-wrapper .form-control{
    color: #12162b !important;
}
.login-card ::placeholder, .full-page-wrapper ::placeholder{
    color: #5b6478 !important;
    opacity: 1;
}
/* doLogin.style.css cambia --login-text a blanco cuando el SO/navegador esta en modo oscuro
   (pensado para una tarjeta de login oscura). Nuestra tarjeta de vidrio se queda clara siempre,
   asi que anulamos ese swap para que el texto (incluido el de los campos .is-valid/.is-invalid)
   se mantenga oscuro y legible sin importar el tema del sistema. */
@media (prefers-color-scheme: dark){
    :root{
        --login-bg-surface: rgba(255, 255, 255, 0.78);
        --login-border: rgba(255, 255, 255, 0.40);
        --login-text: #0a2445;
        --login-muted: #4a5f76;
        --login-field-bg: rgba(255, 255, 255, 0.92);
        --login-field-border: rgba(213, 225, 238, 0.95);
        --login-accent: #1e6fd6;
        --login-accent-2: #0f3f87;
    }
}
@keyframes mrf-logo-breathe{
    0%,100%{ transform: scale(1); }
    50%    { transform: scale(1.04); }
}
/* Espacio reservado para el widget de reCAPTCHA v2 ("No soy un robot") en el login */
.recaptcha-v2-slot{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 78px;
    margin: 0.9rem 0;
}
#recaptchaFeedback{
    text-align: center;
    margin-top: -0.4rem;
    margin-bottom: 0.4rem;
}

.panel-login, .full-page-wrapper{
    background:
        radial-gradient(1100px 700px at 12% -10%, rgba(30,99,211,0.18), transparent 60%),
        radial-gradient(900px 650px at 100% 10%, rgba(168,85,247,0.16), transparent 55%),
        radial-gradient(800px 800px at 50% 120%, rgba(6,182,212,0.14), transparent 60%),
        linear-gradient(160deg, #f6f8fb 0%, #eef2ff 45%, #f3f6fb 100%) !important;
}

/* ---------- Scrollbar a juego ---------- */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: rgba(30,60,120,.05); }
::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, var(--mrf-blue), var(--mrf-violet));
    border-radius: 999px;
}

@media (prefers-reduced-motion: reduce){
    *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}