@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/* normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} */

/* ===================================================== */
/* ================= RESET BASE ========================= */
/* ===================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

/* ===================================================== */
/* ================= LAYOUT GENERAL ===================== */
/* ===================================================== */

.bodyUser,
.bodyAdmin {
    min-height: 100vh;
}

.bodyAdmin {
    padding-top: 70px;
}

.layout-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.layout-content {
    flex: 1;
}


/*BOTON DE WAHATSAP*/
.whatsapp-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.25);
    z-index: 9999;
    text-decoration: none;
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background: #1ebe5d;
}

/* ===================================================== */
/* ==================== TOPBAR ADMIN =================== */
/* ===================================================== */

.topbar-admin{
    position:fixed;

    top:0;
    left:280px;
    right:0;

    height:72px;

    background:#222A3F;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 30px;

    border-bottom:1px solid #e5e7eb;

    z-index:1100;

    transition:.3s ease;
}

/* SI SIDEBAR MINIMIZADO */
.sidebar-admin.collapsed ~ .topbar-admin{
    left:90px;
}

/* DERECHA */
.topbar-right{
    display:flex;
    align-items:center;
    gap:18px;
}

.user-name{
    font-size:14px;
    font-weight:600;
    color:#111827;
}

.user-info small{
    color:#6b7280;
}

/* BOTON LOGOUT */
.topbar-logout{
    display:flex;
    align-items:center;
    gap:10px;

    padding:11px 16px;

    border-radius:12px;

    background:#f3f4f6;

    color:#374151;
    text-decoration:none !important;

    transition:.25s ease;
}

/* HOVER */
.topbar-logout:hover{
    background:#dc2626;
    color:#fff;

    transform:translateY(-2px);
}

/* ICONO */
.topbar-logout i{
    font-size:14px;
}

/* CONTENIDO */
.main-admin{
    padding-top:100px;
}

.topbar-admin.expanded{
    left:110px;
}

/* RESPONSIVE */
@media(max-width:992px){

    .topbar-admin{
        left:0;
        padding:0 18px;
    }

    .topbar-title{
        font-size:18px;
    }

    .user-info{
        display:none;
    }

}

/* ===================================================== */
/* ================= ADMIN SIDEBAR ===================== */
/* ===================================================== */

.admin-layout{
    display:flex;
    min-height:100vh;
    background:#f5f7fb;
}

/* SIDEBAR */
.sidebar-admin{
    width:280px;
    background:#222A3F;
    color:#fff;

    position:fixed;
    top:0;
    left:0;
    height:100vh;

    display:flex;
    flex-direction:column;

    transition:
    width .3s ease,
    transform .3s ease,
    background .3s ease;
    z-index:1200;

    overflow:hidden;
}

/* MINIMIZADO */
.sidebar-admin.collapsed{
    width:110px;
}

/* TOP */
.sidebar-top{

    position:relative;

    min-height:110px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:20px;

    border-bottom:1px solid rgba(255,255,255,.08);

    flex-shrink:0;
}

/* LOGO */
.sidebar-logo{

    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
}

/* IMAGENES */
.logo-full,
.logo-mini{

    object-fit:contain;

    transition:
        opacity .25s ease,
        transform .25s ease;

    filter:
        drop-shadow(0 10px 22px rgba(0,0,0,.25));
}

/* LOGO GRANDE */
.logo-full{
    width:140px;

    opacity:1;
    transform:scale(1);
}

/* MINI */
.logo-mini{

    width:54px;

    opacity:0;

    transform:
        scale(.6)
        rotate(-90deg);

    pointer-events:none;

    transition:
        opacity .35s ease,
        transform .38s cubic-bezier(.4,0,.2,1);

    background:
        rgba(255,255,255,.08);

    padding:8px;

    border-radius:16px;

    backdrop-filter:blur(10px);

    position:absolute;
}

/* OCULTAR GRANDE */
.sidebar-admin.collapsed .logo-full{
    display:none;
}

/* MOSTRAR MINI */
.sidebar-admin.collapsed .logo-mini{

    opacity:1;

    transform:
        scale(1)
        rotate(0deg);
}

/* HOVER */
.sidebar-logo img:hover{
    transform:scale(1.03);
}

.sidebar-admin{
    flex-shrink:0;
}

/* MENU */
.sidebar-menu{
    flex:1;
    padding:20px 12px;
    overflow-y:auto;
}

/* TITULO */
.sidebar-title{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1px;
    opacity:.6;
    margin:18px 12px 10px;
}

/* LINKS */
.sidebar-link{
    display:flex;
    align-items:center;

    padding:13px 16px;

    border-radius:14px;

    font-size:15px;
    font-weight:500;

    margin-bottom:6px;

    transition:.25s;
    color: #fff;
}

/* IZQUIERDA */
.sidebar-link div{
    display:flex;
    align-items:center;
}

/* ICONO */
.sidebar-link i{
    min-width:22px;
    font-size:16px;
}

/* TEXTO */
.sidebar-link span{
    margin-left:14px;
    white-space:nowrap;
}

/* HOVER */
.sidebar-link:hover{
    background:linear-gradient(
        135deg,
        rgba(30,90,165,.9),
        rgba(37,99,235,.9)
    );

    color: #fff;

    box-shadow:0 8px 18px rgba(0,0,0,.18);
}

/* ACTIVO */
.sidebar-link.active{
    background:linear-gradient(135deg,#1e5aa5,#2563eb);
    color:#fff;
}

/* SUBMENU */
.sidebar-submenu{
    display:none;
    padding-left:18px;
    margin-top:6px;
}

/* OPEN */
.sidebar-dropdown.open .sidebar-submenu{
    display:block;
}

/* SUBLINK */
.sidebar-sublink{
    display:flex;
    align-items:center;

    padding:10px 14px;
    margin-bottom:5px;

    color:#cbd5e1;
    text-decoration:none !important;

    border-radius:10px;

    transition:.2s;
}

.sidebar-sublink:hover{
    background:rgba(255,255,255,.08);
    color:#fff;
}

/* FOOTER */
.sidebar-footer{
    padding:16px 12px;
    border-top:1px solid rgba(255,255,255,.08);
}

/* CONTENIDO */
.main-admin{
    margin-left:280px;
    width:100%;

    padding:30px;

    transition:all .3s ease;
}

/* EXPANDIDO */
.main-admin.expanded{
    margin-left:110px;
}

/* MINIMIZADO */
.sidebar-admin.collapsed .sidebar-link span,
.sidebar-admin.collapsed .sidebar-title,
.sidebar-admin.collapsed .arrow,
.sidebar-admin.collapsed .sidebar-sublink span{
    display:none;
}

/* CENTRAR ICONOS */
.sidebar-admin.collapsed .sidebar-link,
.sidebar-admin.collapsed .sidebar-sublink{

    justify-content:center;

    padding-left:0;
    padding-right:0;
}

.sidebar-admin.collapsed .sidebar-link i,
.sidebar-admin.collapsed .sidebar-sublink i{
    margin:0;
}

/* RESPONSIVE */
@media(max-width:992px){

    .sidebar-admin{
        transform:translateX(-100%);
    }

    .sidebar-admin.collapsed{
        transform:translateX(0);
        width:280px;
    }

    .main-admin{
        margin-left:0 !important;
        padding:20px;
    }

}

/* ===================================================== */
/* ===================== NAVBAR ======================== */
/* ===================================================== */

/* ================= NAVBAR GLOBAL ================= */

.navbar,
.navbar-ayuda {
    background-color: #222A3F !important;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.logo-navbar {
    height: 40px;
}

/* ICONO LOGIN */
.icon-login {
    width: 40px;    height: 40px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255,255,255,0.1); /* 👈 fondo suave */
    border: 1px solid rgba(255,255,255,0.3);

    color: #ffffff;
    text-decoration: none;

    transition: all 0.3s ease;
}

/* ICONO */
.icon-login i {
    font-size: 15px;
}

/* HOVER */
.icon-login:hover {
    background: #ffffff;
    color: #1e5aa5;

    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* CONTENEDOR */
.tooltip-login {
    position: relative;
}

/* TOOLTIP */
.tooltip-box {
    position: absolute;
    top: 50px;
    right: -10px;

    background: #ffffff;
    color: #1f2937;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 12px;

    box-shadow: 0 12px 30px rgba(0,0,0,0.12);

    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;

    white-space: nowrap;
}

/* TEXTO SECUNDARIO */
.tooltip-box small {
    display: block;
    font-size: 11px;
    color: #6b7280;
}

/* FLECHA */
.tooltip-box::after {
    content: "";
    position: absolute;
    top: -6px;
    right: 18px;

    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #ffffff transparent;
}

/* HOVER */
.tooltip-login:hover .tooltip-box {
    opacity: 1;
    transform: translateY(5px);
}

/* header modulo sticky */
.header-modulo-sticky{
    position: sticky;
    top: 60px; /* altura del navbar */
    background: #fff;
    z-index: 900;
    padding-top:10px;
    padding-bottom:5px;
}

/* rediseño para las opciones de menú navbar */
.mega-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(10px);

    width: 100%;
    max-width: 1510px;
    background: #fff;
    border-radius: 10px;

    padding: 30px 40px;

    box-shadow: 0 20px 50px rgba(0,0,0,0.15);

    opacity: 0;
    visibility: hidden;

    transition: all 0.25s ease;

    border: 1px solid #e5e7eb;
}

.mega-menu h6 {
    font-weight: 600;
    margin-bottom: 10px;
    color: #111827;
    font-size: 14px;
}

.mega-menu .dropdown-item {
    display: block;
    padding: 8px 10px;
    font-size: 14px;
    color: #374151;

    border-radius: 6px;
    transition: all 0.2s ease;
}

.mega-menu .col-md-3 {
    border-right: 1px solid #f1f1f1;
}

.mega-menu .col-md-3:last-child {
    border-right: none;
}

.mega-menu .dropdown-item:hover {
    background: #f3f4f6;
    color: #111827;
    transform: translateX(4px);
}

@media (max-width: 768px) {
    .mega-menu {
        position: static;
        transform: none;
        max-width: 100%;
    }
}

/* ITEM DEL MEGA MENÚ */
.mega-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    transition: all 0.25s ease;
}

/* HOVER */
.mega-item:hover {
    background-color: #f1f5ff;
    color: #1e5aa5;
    transform: translateX(3px);
}

/* ICONOS */
.icon-menu {
    font-size: 14px;
    color: #1e5aa5;
    min-width: 18px;
}

.navbar-nav .nav-item {
    margin-left: 20px;
}

.navbar-nav .menu-item {
    margin-left: 20px;
}

/* activo */
.mega-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}


/* puente invisible */
.mega-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 50%;
    height: 10px;
}


/* Evita salto raro */
.dropdown-menu {
    margin-top: 0!important;
    top: 100%;
}


/* SOLO el mega menú ocupa todo */
.navbar .mega-dropdown {
    position: static;
}


/* Dropdown normales (Nosotros) */
.navbar .dropdown:not(.mega-dropdown) .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    min-width: 200px;
}

/* links iguales en todos */
.navbar .nav-link,
.navbar-dark .nav-link {
    color: #fff !important;
    font-weight: bold;
    font-size: 0.8rem;
    opacity: 1 !important;
}

/* active */
.navbar .nav-link.active {
    color: #9FC4D5 !important;
}

/* hover */
.navbar .nav-link:hover {
    color: #9FC4D5 !important;
}

.navbar-dark .navbar-nav .nav-link.active {
    color: #fff !important;
    font-weight: bold;
}

/* IZQUIERDA HEADER */
.topbar-left{
    display:flex;
    align-items:center;
}

/* BOTON TOGGLE */
.topbar-toggle{

    width:40px;
    height:40px;

    border:none;
    outline:none;

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.05)
        );

    backdrop-filter:blur(12px);

    color:#ffffff;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    transition:all .25s ease;

    box-shadow:
        0 10px 25px rgba(0,0,0,.22);
}

/* ICONO */
.topbar-toggle i{

    font-size:18px;

    transition:
        transform .3s ease,
        opacity .25s ease;
}

/* HOVER */
.topbar-toggle:hover{

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    transform:
        translateY(-2px)
        scale(1.03);

    box-shadow:
        0 16px 30px rgba(0,0,0,.28);
}

/* HOVER */
.topbar-toggle:hover{

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    transform:
        translateY(-2px)
        scale(1.03);

    box-shadow:
        0 16px 30px rgba(0,0,0,.28);
}

/* ICONO */
.topbar-toggle:hover i{
    transform:rotate(-8deg);
}

/* ROTACION CUANDO MINIMIZA */
.topbar-toggle.active i{

    transform:rotate(180deg);
}

/* ===================================================== */
/* ======================= HERO ======================== */
/* ===================================================== */

.ayuda-hero {
    margin-top: 66px;
    position: relative;
    min-height: 40vh;
    display: flex;
    align-items: center;
    padding: 0 8vw;

    background-image: url('/img/AYUDA.jpg'); /* cambia imagen */
    background-size: cover;
    background-position: center;

    overflow: hidden;
}

.hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(223, 230, 238, 0.85);
}

.hero-bg .container {
    position: relative;
    z-index: 2;
}

.hero-bg h1 {
    font-size: 2.3rem;
    font-weight: 700;
}

.hero-bg p {
    font-size: 1.3rem;
    color: #444;
}

/* ===================================================== */
/* ============ HERO GLOBAL DE LAS PAGINAS ============= */
/* ===================================================== */

/* contenido */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

/* título */
.hero-content h1 {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

/* palabra destacada */
.hero-content h1 strong {
    color: #4FD1C5;
}

/* texto */
.hero-content p {
    margin-top: 20px;
    font-size: 16px;
    color: #d1d5db;
    line-height: 1.6;
}

/* ===================================================== */
/* ==================== BUSCADOR ======================= */
/* ===================================================== */

.explorar-modulo {
    padding: 30px 0;
}

.buscador-modulo {
    max-width: 480px;
    margin: auto;
}

.buscador-modulo .form-control {
    height: 42px;
    border-right: none;
}

.buscador-modulo .input-group-text {
    background: #fff;
    border-left: none;
    cursor: pointer;
}

.hr-busc {
    margin-right: 0;
    max-width: 1120px;
}


/* ===================================================== */
/* ========== BOTÓN DE LEVANTAR TICKET ================= */
/* ===================================================== */

.btn-ticket {
    background-color: #9FC4D5; /* azul Giro */
    color: black;
    font-weight: 500;
    padding: 0.45rem 1rem;
    border-radius: 0.35rem;
    transition: background 0.3s, transform 0.2s;
}

.btn-ticket i {
    font-size: 1rem;
}

.btn-ticket:hover {
    background-color: #222A3F;
    text-decoration: none;
    transform: translateY(-2px);
    color: #ffffff;
}

/* ===================================================== */
/* ================== CARD MÓDULOS ===================== */
/* ===================================================== */

.modulo-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.25s ease;
}

.modulo-card:hover {
    transform: translateY(-3px);
}

.modulo-icon i {
    font-size: 22px;
    color: #222A3F;
}

.modulo-text p {
    font-size: 0.85rem;
    color: #6c757d;
}

.modulo-text a {
    font-size: 0.85rem;
    font-weight: 600;
    color: #222A3F;
    text-decoration: none;
}

.modulo-icon-box {
    width: 55px;
    height: 55px;
    background: #f1f3f5;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.modulo-icon-box .v-icon {
    font-size: 22px;
    color: #222A3F;
}

/* ===================================================== */
/* ================= TABLAS ============================= */
/* ===================================================== */

.table-responsive {
    overflow-x: auto;
}

/* Ajuste Vuetify */
.v-data-table {
    width: 100%;
}

/* ===================================================== */
/* ================ CARD CAPACITACIÓN ================== */
/* ===================================================== */

.card-capacit {
    background: linear-gradient(135deg, #222A3F, #111827);
    border-radius: 12px;
    border: none;
    min-height: 260px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    transition: transform 0.3s ease;
}

.sticky-capacit {
    top: 30px;
    align-self: flex-start; /* CLAVE */
}

.card-capacit:hover {
    transform: translateY(-4px);
}

.logo-card {
    max-width: 100px;
}

.card-text-content {
    background: #9FC4D5;
    padding: 5%;
    border-radius: 8px;
}

.btn-play {
    background: linear-gradient(135deg, #222A3F, #2e3a5c);
    color: #fff;
    padding: 10px 28px;
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: 0.5px;

    transition: all 0.25s ease;
}

/* hover elegante */
.btn-play:hover {
    background: #fff;
    color: #222A3F;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

/* efecto click */
.btn-play:active {
    transform: scale(0.97);
}

/* MODAL DE CAPACITACION */
.modal-header-blue {
    background: linear-gradient(135deg, #222A3F, #42a5f5);
    padding: 16px 20px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* ===================================================== */
/* ====================== FOOTER ======================= */
/* ===================================================== */

footer {
    background-color: #D9D9D9;
    color: #000;
    padding: 1px 0;
    background:#D9D9D9;
}

/* contenedor principal */
.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1500px;
    margin: 0 auto;
    flex-wrap: wrap;
    padding: 0 15px;
}

/* secciones */
.footer-section {
    flex: 1;
}

/* izquierda */
.footer-left {
    text-align: left;
}

/* derecha */
.footer-right {
    text-align: right;
}

/* links */
.footer-section a {
    color: #000;
    text-decoration: none;
}

.footer-section p {
    margin: 4px 0;
    font-size: 14px;
}

.footer-section h6 {
    margin-bottom: 10px;
    font-size: 14px;
}

.footer-section a:hover {
    text-decoration: underline;
}

/* copyright */
.footer-copyright {
    text-align: center;
    font-size: 13px;
    margin-top: 73px;
    margin-bottom: 4px;
}

.redes-sociales {
    display: flex;
    gap: 12px;
}

.redes-sociales a {
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f2f2f2;
    transition: 0.2s;
}

.redes-sociales a:hover {
    background: #e0e0e0;
    transform: scale(1.1);
}


/* ===================================================== */
/* ================= PANEL DE AYUDA ==================== */
/* ===================================================== */

.breadcrumb {
    background-color: transparent;
    padding-left: 0;
    margin-bottom: 1.5rem;
    padding: 5px;
}

.breadcrumb-item + .breadcrumb-item::before {
    padding: 0 8px;
    color: #6c757d;
}

.buscador-ayuda {
    max-width: 400px;
    margin-left: auto;
    padding: 5px;
}

.buscador-ayuda .form-control {
    height: 42px;
    border-right: none;
}

.buscador-ayuda .input-group-text {
    background: #fff;
    border-left: none;
    cursor: pointer;
}

.navmenu-title {
    background:#9ec3d1;
    padding:10px;
    border-radius:6px;
    text-align:center;
    font-weight:600;
    margin-bottom:15px;
}

.card-list-menu {
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}


/* ===================================================== */
/* =================== SIDEBAR DOCS ==================== */
/* ===================================================== */

/* quitar bullets */
.docs-indibar ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* módulo */
.menu-toggle {
    padding: 10px 8px;
    border-radius: 8px;
    transition: all .2s;
}

.menu-toggle:hover {
    background: #f1f5ff;
}



/* links del árbol */
.tree-link {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
}


/* hover */
.tree-link:hover{
    background:#f3f4f6;
}

/* elemento activo */
.tree-link.active {
    background: linear-gradient(90deg, #e8f0fe, #f0f6ff);
    color: #1e5aa5;
    border-left: 3px solid #1e5aa5;
}


/* SUBMENU MÁS VISUAL */
.submenu {
    border-left: 2px solid #eef2f7;
    margin-left: 10px;
    padding-left: 10px;
}

/* flecha */
.arrow{
    transition:transform .2s;
    font-size:14px;
    transition:.3s;
}

/* sidebar sticky */
.sticky-list-menu{
    position:sticky;
    top:40px;
    max-height:calc(100vh - 120px);
    overflow-y:auto;
}

.sidebar-wrapper{
    margin-top: 35px;
}

/* sidebar fijo */

.sticky-sidebar{
    position: sticky;
    top: 120px; /* navbar + buscador */
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.sticky-sidebar::-webkit-scrollbar {
    width: 6px;
}
.sticky-sidebar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}


/* ===================================================== */
/* =================== CONTENIDO DOC =================== */
/* ===================================================== */

.subtitulo {
    font-size:16px;
    font-weight:600;
    margin-top:15px;
}

.lista-requisitos {
    padding-left: 20px;
}

.lista-requisitos li {
    margin-bottom: 6px;
}


/* imágenes */
.img-captura {
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/* videos */
.video-doc {
    max-width: 800px;
    margin: 0 auto;
}

[id^="contenido-"]{
    scroll-margin-top:140px;
}

.contenido-doc{
    padding-left:30px;
    margin-top: 47px;
}

.contenido-modulo{
    max-width:1400px;
    margin:auto;
}


/* TITULO PRINCIPAL */
.contenido-doc h1 {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 10px;
}

/* SECCIONES */
.titulo-seccion {
    font-size: 20px;
    margin-top: 30px;
    font-weight: 600;
    padding-left: 10px;
    border-left: 4px solid #1e5aa5;
}

/* SUBCONTENIDO */
.titulo-contenido {
    font-size: 15px;
    font-weight: 600;
    color: #374151;
}

/* BLOQUES */
.bloque-contenido {
    padding: 12px 16px;    
    transition: all .2s;
}


/* ===================================================== */
/* =================== RESPONSIVE ====================== */
/* ===================================================== */

@media (min-width: 992px) {
    .col-lg-9 {
        flex: 1 0 75%;
        max-width: 100%;
    }
}

.row-modulo { 
    display: flex;
    flex-wrap: wrap;
    margin-right: 0px;
    margin-left: 0px;
}


/* ===================================================== */
/* ================= EDITOR CONTENIDO ================== */
/* ===================================================== */

.contenido-doc .resizable-image-wrapper {
    width: 100%;
    display: flex !important;
}

.contenido-doc .resizable-image-wrapper img {
    max-width: 100%;
    height: auto;
}

/* izquierda */
.contenido-doc .resizable-image-wrapper img[data-align="left"] {
    margin-right: auto !important;
}

/* centro */
.contenido-doc .resizable-image-wrapper img[data-align="center"] {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* derecha */
.contenido-doc .resizable-image-wrapper img[data-align="right"] {
    margin-left: auto !important;
}


/* ===================================================== */
/* ================= YOUTUBE PREVIEW =================== */
/* ===================================================== */

.contenido-doc iframe[src*="youtube"] {
    display: block;
    border-radius: 10px;
    aspect-ratio: 16 / 9;
}

.contenido-doc iframe[textalign="left"] {
    margin-right: auto;
}

.contenido-doc iframe[textalign="center"] {
    margin-left: auto;
    margin-right: auto;
}

.contenido-doc iframe[textalign="right"] {
    margin-left: auto;
}

.contenido-doc [data-text-align="left"] {
    text-align: left;
}

.contenido-doc [data-text-align="center"] {
    text-align: center;
}

.contenido-doc [data-text-align="right"] {
    text-align: right;
}

/* ===================================================== */
/* ================= VISTA PREVIEW ===================== */
/* ===================================================== */

.preview-wrapper{
    max-width:1400px;
    margin:30px auto;
    padding:0 20px;
}

.preview-header{
    border-bottom:1px solid #e5e5e5;
    margin-bottom:30px;
}

.preview-badge{
    display:inline-block;
    background:#ff9800;
    color:white;
    font-size:12px;
    padding:4px 10px;
    border-radius:20px;
    margin-bottom:10px;
}

.preview-container{
    display:flex;
    gap:40px;
}

.preview-sidebar{
    width:260px;
    border-right:1px solid #eee;
    padding-right:20px;
}

.sidebar-title{
    font-weight:bold;
    margin-bottom:15px;
}

.sidebar-list{
    list-style:none;
    padding:0;
}

.sidebar-list li{
    padding:6px 0;
    color:#444;
}

.preview-content{
    flex:1;
}

.bloque-contenido{
    margin-top:10px;
    line-height:1.7;
}

/* ===================================================== */
/* ================= AUTH PROFESSIONAL ================= */
/* ===================================================== */

/* WRAPPER SPLIT */
.auth-wrapper-split {
    display: flex;
    height: 100vh;
}

/* LADO IZQUIERDO */
.auth-left {
    flex: 1;
    background: #222A3F;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* LOGO */
.logo-auth {
    width: 60%;
    max-width: 350px;
}

/* LADO DERECHO */
.auth-right {
    flex: 1;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CARD */
.auth-card-split {
    width: 100%;
    max-width: 400px;
    padding: 40px;
}

/* TITULO */
.auth-title {
    text-align: center;
    font-weight: 700;
    margin-bottom: 30px;
}

/* INPUT GROUP */
.input-group-auth {
    margin-bottom: 20px;
}

/* LABEL */
.input-group-auth label {
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
}

/* INPUT */
.auth-input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    outline: none;
    transition: 0.3s;
}

.auth-input:focus {
    border: 1px solid #222A3F;
}

/* BOTÓN */
.auth-btn {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    background: #222A3F;
    color: white;
    transition: 0.3s;
}

.auth-btn:hover {
    background: #222A3F;
}

/* LINK */
.auth-link {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
}

/* ERROR */
.input-error {
    border: 1px solid #dc3545 !important;
}

.error-text {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
}

/* ===================================================== */
/* =============== MENÚ MÓDULOS AYUDA ================= */
/* ===================================================== */

.modulo-header {
    background: linear-gradient(135deg, #1e5aa5, #2563eb);
    padding:10px;
    border-radius:6px;
    text-align:center;
    font-weight:600;
    margin-bottom:15px;
    color: #ffff;
}


.seccion-titulo {
    display:flex;
    justify-content:space-between;
    cursor:pointer;
    padding:5px 0;
    color:#444;
}

.submenu li {
    padding:4px 0;
    font-size:14px;
    cursor:pointer;
    color:#666;
}

.submenu li:hover {
    color:#000;
}

.submenu li.active {
    color:#0d6efd;
    font-weight:600;
}

.rotate {
    transform:rotate(180deg);
}

.titulo-contenido {
    font-size:16px;
    font-weight:600;
    margin-top:15px;
}

.bloque-contenido {
    margin-bottom:25px;
}

.modulo-link {
    cursor:pointer;
    flex:1;
}

.docs-indibar ul,
.submenu {
    list-style: none;
    padding-left: 0;
    margin: 0;
}


.titulo-subseccion{
font-size:18px;
margin-top:20px;
color:#444;
}

.titulo-contenido{
font-size:15px;
font-weight:600;
margin-top:15px;
}


/* ===================================================== */
/* =============== RESULTADO DE BUSQUEDA ================= */
/* ===================================================== */
.buscador-modulo{
    position:relative;
}

.buscador-wrapper{
    position:relative;
    max-width:420px;
    margin-left:auto;
}

.resultados-busqueda{
    position:absolute;
    top:45px;
    width:93%;
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:8px;
    box-shadow:0 6px 18px rgba(0,0,0,0.08);
    max-height:280px;
    overflow-y:auto;
    z-index:1000;
}

.resultado-item{
    padding:10px 14px;
    cursor:pointer;
    border-bottom:1px solid #f2f2f2;
}

.resultado-item:last-child{
    border-bottom:none;
}

.resultado-item:hover{
    background:#f7f7f7;
}

.titulo-resultado{
    font-size:14px;
    font-weight:600;
}

.ruta{
    font-size:12px;
    color:#888;
}

.resultado-item.activo{
    background:#f2f4f8;
}

.btn-buscar{
    cursor:pointer;
}

.btn-buscar:hover{
    background:#f5f6f8;
}

/* ===================================================== */
/* ============ TABLA ADMIN SISTEMAS =================== */
/* ===================================================== */

.tabla-sistema {
    font-size: 15px;
}

.tabla-sistema .v-data-table-header th {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
}

.tabla-sistema td {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* títulos */

.titulo-modulo {
    font-size: 16px;
    font-weight: bold;
}

.titulo-seccion-admin {
    font-size: 15px;
    padding: auto;
    margin: 10px;
    padding-left: 10px;
    border-left: 4px solid #1e5aa5;
}

/* acciones */
.action-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

/* chips estado */
.v-chip {
    font-size: 12px;
}

/* iconos expandir */
.group-row .v-icon {
    opacity: .7;
}

.group-row v-icon:hover {
    opacity: 1;
}

/* columnas centradas */
.tabla-sistema th {
    text-align: center !important;
}

/* creador */
.col-creador {
    font-size: 16px;
    color: #555;
    font-weight: 500;
}

/* fecha */
.col-fecha {
    font-size: 16px;
    color: #666;
}

/* ===================================================== */
/* ============= BUSCADOR PAGINA RESULTADOS ============ */
/* ===================================================== */

.search-page-wrapper{
    max-width:700px;
    margin:80px auto 40px auto;
    position:relative;
}

.search-page-input{
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    border-radius:8px;
    overflow:hidden;
    border:1px solid #e5e7eb;
}

.search-page-input input{
    height:48px;
    font-size:16px;
    border:none !important;
    outline:none !important;
}

.search-page-input .input-group-text{
    background:#fff;
    border:none;
    cursor:pointer;
    padding:0 18px;
    font-size:18px;
}

.search-page-input:focus-within{
    border:1px solid #cbd5e1;
}

/* AUTOCOMPLETADO */

.search-page-autocomplete{
    position:absolute;
    width:100%;
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:6px;
    box-shadow:0 6px 20px rgba(0,0,0,0.08);
    z-index:100;
    max-height:260px;
    overflow-y:auto;
}

.search-page-suggestion{
    padding:10px 14px;
    cursor:pointer;
    border-bottom:1px solid #f0f0f0;
}

.search-page-suggestion:hover{
    background:#f7f7f7;
}

.search-page-suggestion.active{
    background:#f2f4f8;
}

/* RESULTADOS */

.search-page-title{
    margin-top:30px;
    margin-bottom:20px;
}

.search-page-count{
    font-size:14px;
    color:#777;
    font-weight:400;
}

.search-result-item{
    padding:20px 0;
    margin:0 8px;
    border-bottom:1px solid #e5e7eb;
}

.search-result-module{
    font-size:13px;
    text-transform:uppercase;
    font-weight:700;
    color:#7a7a7a;
}

.search-result-section{
    font-size:16px;
    font-weight:700;
    color:#222A3F;
}

.search-result-title{
    font-size:18px;
    font-weight:600;
    margin:6px 0;
}

.search-result-btn{
    margin-top:10px;
    font-size:14px;
    font-weight:600;
    color:#1a73e8;
    background:none;
    border:none;
    cursor:pointer;
}

.search-result-btn:hover{
    text-decoration:underline;
}

.search-no-results{
    margin-top:40px;
    color:#777;
}

/* highlight */

.search-page-wrapper mark{
    background:#fff3cd;
    color:#222;
    padding:2px 5px;
    border-radius:4px;
    font-weight:600;
}

/* ===================================================== */
/* ============= PAGINA DE INICIO GIRO WEB ============= */
/* ===================================================== */
/* HERO PORTADA PRO */
.hero-portada {
    margin-top: 66px;
    position: relative;
    min-height: 35vh;
    display: flex;
    align-items: center;
    padding: 60px 0;
    background-image: url('/img/woman-selecting-pictures-people.jpg');
    background-size: cover;
    background-position: right center;
    overflow: hidden;
}

/* degradado lateral (igual que nosotros) */
.hero-portada::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(34, 42, 63, 0.95) 0%,
        rgba(34, 42, 63, 0.85) 40%,
        rgba(34, 42, 63, 0.4) 70%,
        rgba(34, 42, 63, 0) 100%
    );
}

/* contenido encima */
.hero-portada .container {
    position: relative;
    z-index: 2;
}

/* texto */
.hero-title {
    color: #fff;
    font-size: 31px;
    font-weight: 700;
    line-height: 1.2;
}

.hero-title strong  {
    color: #4FD1C5
}

.hero-text {
    color: #d1d5db;
}

/* CONTENEDOR */
.encabezado-sistemas {
    max-width: 700px;
    margin: auto;
}

/* BADGE SUPERIOR */
.badge-seccion {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #1e5aa5;
    background: rgba(30, 90, 165, 0.1);
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.titulo-principal {
    font-size: 38px;
    font-weight: 700;
    color: #222A3F;
    margin-bottom: 15px;
    line-height: 1.2;
}

.titulo-principal::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: #1e5aa5;
    margin: 10px auto 0;
    border-radius: 2px;
}

.subtitulo {
    font-size: 16px;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 0;
}

/* TEXTO SOFTWARES */
.categoria-titulo {
    font-size: 14px;
    letter-spacing: 2px;
    color: #9ca3af;
    font-weight: 600;
    margin-bottom: 25px;
}

/*TABS DE PRODUCTOS*/
/* CONTENEDOR */
.tabs-giro {
    gap: 10px;
}

/* LINKS BASE */
.tabs-giro .nav-link {
    border: none;
    border-radius: 30px;
    padding: 10px 18px;
    font-weight: 500;
    font-size: 14px;
    color: #6b7280;
    background: transparent;

    display: flex;
    align-items: center;
    gap: 8px;

    transition: all 0.3s ease;
}

/* ICONOS */
.tabs-giro .nav-link i {
    font-size: 13px;
}

/* HOVER */
.tabs-giro .nav-link:hover {
    background: #f1f5ff;
    color: #1e5aa5;
}

/* ACTIVO */
.tabs-giro .nav-link.active {
    background: linear-gradient(135deg, #1e5aa5, #2563eb);
    color: #fff;
    box-shadow: 0 4px 12px rgba(30, 90, 165, 0.25);
}

/* ACTIVO ICONO */
.tabs-giro .nav-link.active i {
    color: #fff;
}

/*cards de secciones de productos*/
.seccion-cards {
    background: linear-gradient(180deg, #eef2f7, #ffffff);
}

.icon-card {
    width: 70px;
    height: 70px;
    object-fit: contain;
    margin: 0 auto 15px;

    border-radius: 50%;
    background: linear-gradient(135deg, #e8f0ff, #f5f9ff);
}

.custom-card {
    border-radius: 18px;
    border: 1px solid #e6eaf0;
    background: #ffffff;
    padding: 30px 20px;
    transition: all 0.35s ease;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

.custom-card h5 {
    font-weight: 600;
    margin-bottom: 10px;
}

.custom-card p {
    color: #6b7280;
    font-size: 14px;
    flex-grow: 1;
}

.custom-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.08);
    border-color: #dce3ec;
}

.custom-card .btn-soft {
    border-radius: 20px;
}

.btn-soft {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;

    background: linear-gradient(135deg, #1e5aa5, #2d7be5);
    color: #fff;
    text-decoration: none;

    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(30, 90, 165, 0.25);
}

/* HOVER BOTÓN */
.btn-soft:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(30, 90, 165, 0.35);
    background: linear-gradient(135deg, #174a8a, #2563eb);
}

/* Quitar línea de links */
a {
    text-decoration: none !important;
}

/*ENCABEZADO DE CARRUSEL*/
.seccion-industria {
    border-radius: 20px;
}

/* CONTENEDOR */
.encabezado-industria {
    max-width: 650px;
    margin: auto;
}

/* BADGE SUPERIOR */
.badge-industria {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #1e5aa5;
    background: rgba(30, 90, 165, 0.1);
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

/* TITULO */
.titulo-industria {
    font-size: 32px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
}

.titulo-industria::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: #1e5aa5;
    margin: 10px auto 0;
    border-radius: 2px;
}

/* SUBTITULO */
.subtitulo-industria {
    font-size: 15px;
    color: #6b7280;
    line-height: 1.6;
}

/* Slide */
.slide-industria {
    height: 320px;
    width: 100%;
    border-radius: 24px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* CONTENEDOR */
#carouselIndustria {
    max-width: 950px;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

/* Overlay del carrusel*/
.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(15, 23, 42, 0.85) 0%,
        rgba(15, 23, 42, 0.6) 40%,
        rgba(15, 23, 42, 0.2) 100%
    );
    backdrop-filter: blur(2px);
}

/* CONTENIDO */
.contenido {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    color: white;
    max-width: 420px;
    text-align: left;
}

/* ICONO EN CÍRCULO */
.icon {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(6px);
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 22px;
    margin-bottom: 15px;
}

/* TITULO */
.contenido h3 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* TEXTO */
.contenido p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
}

/* FLECHAS MÁS LIMPIAS */
.carousel-control-prev,
.carousel-control-next {
    width: 5%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1);
    opacity: 0.7;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}

/*CLIENTES IMAGENES*/
/* SECCIÓN */
.clientes-section {
    background: #f9fafb;
}

/* HEADER */
.encabezado-clientes {
    max-width: 600px;
    margin: auto;
}

.badge-clientes {
    font-size: 12px;
    font-weight: 600;
    color: #1e5aa5;
    background: rgba(30, 90, 165, 0.1);
    padding: 6px 14px;
    border-radius: 20px;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 10px;
}

.titulo-clientes {
    font-size: 24px;
    font-weight: 600;
    color: #1f2937;
}

.titulo-clientes span {
    color: #1e5aa5;
}

/* SLIDER */
.logos-slider {
    overflow: hidden;
    position: relative;
}

/* TRACK */
.logos-track {
    display: flex;
    gap: 50px;
    animation: scroll 40s linear infinite;
}

/* HOVER LOGOS */
.logos-track img:hover {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.05);
}

/* ANIMACIÓN */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}


/* ========================= */
/* SECCIÓN */
/* ========================= */
.faq-giro {
    padding: 80px 8vw;
    background: #f9fafb;
}

/* ========================= */
/* TEXTO */
/* ========================= */
.faq-title-giro {
    font-size: 32px;
    font-weight: 700;
    color: #1f2937;
}

.faq-subtitle {
    color: #6b7280;
    font-size: 15px;
    max-width: 500px;
}

/* ========================= */
/* ITEMS */
/* ========================= */
.faq-item {
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    transform: translateX(5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}

/* Header */
.faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 18px;
    cursor: pointer;
    font-weight: 500;
    color: #1e5aa5;
}

/* Icono */
.faq-header i {
    transition: transform 0.3s ease;
}

/* ========================= */
/* ANIMACIÓN SUAVE (CLAVE) */
/* ========================= */
.faq-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 18px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
    transition: all 0.3s ease;
}

/* Activo */
.faq-item.active .faq-body {
    max-height: 200px;
    padding: 10px 18px 18px;
}

/* Rotación icono */
.faq-item.active i {
    transform: rotate(180deg);
}

/* ========================= */
/* IMAGEN */
/* ========================= */
.faq-img-giro {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* Logo encima */
.faq-logo {
    position: absolute;
    top: 20px;
    left: 60px;
    width: 70px;
    background: white;
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* ========================= */
/* LAYOUT */
/* ========================= */
.faq-giro .row {
    margin: 0;
}

.faq-giro .col-md-6 {
    padding: 0 40px;
}

/* Contenedor */
.logos-slider {
    overflow: hidden;
    position: relative;
}

/* Track que se mueve */
.logos-track {
    display: flex;
    width: max-content;
    animation: scroll 40s linear infinite;
}

/* Logos */
.logos-track img {
    height: 60px;
    margin: 0 40px;
    object-fit: contain;
    opacity: 0.8;
    transition: 0.3s;
}

/* Hover */
.logos-track img:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Animación */
@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* ===================================================== */
/* ============= PESTAÑA DE NOSOTROS GIRO WEB ============= */
/* ===================================================== */
/* CONTENIDO */
.nosotros-content {
    display: flex;
    gap: 60px;
    margin-top: 60px;
    align-items: center;
}

/* CONTAINER FLEXIBLE PRO */
.container-giro {
    width: 100%;
    max-width: 1400px; /* AJUSTABLE */
    margin: 0 auto;
    padding: 0 40px;   /* separación lateral */
}

/* IMAGEN UNA SOLA PIEZA */
.nosotros-img {
    width: 40%;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.nosotros-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* efecto zoom elegante */
.nosotros-img:hover img {
    transform: scale(1.08);
}

/* overlay moderno */
.nosotros-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        rgba(34, 42, 63, 0.2),
        rgba(34, 42, 63, 0.4)
    );
    opacity: 0;
    transition: 0.4s;
}

.nosotros-img:hover::after {
    opacity: 1;
}

/* TEXTO */
.nosotros-text {
    width: 50%;
    text-align: justify; /* importante */
}

.nosotros-text h2 {
    font-size: 28px;
    margin-bottom: 10px;
}

/* listas */
.nosotros-text ul {
    padding-left: 18px;
}

/* SECCIÓN INFERIOR */
.nosotros-info {
    display: flex;
    margin-top: 50px;
    border-top: 1px solid #ddd;
    padding-top: 40px;
    text-align: left; /* todo a la izquierda */
}

/* cada bloque */
.info-item {
    width: 33%;
    padding: 0 20px;
    position: relative;
}

/* línea divisora */
.info-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 10%;
    width: 1px;
    height: 80%;
    background: #ddd;
}

.info-item h3 {
    display: flex;
    align-items: center;
    justify-content: center; /* centra icono + texto */
    gap: 10px;
    text-align: center;
    margin-bottom: 10px;
    color: #1F7A7A;
}

.valores {
    list-style: none;
    padding: 0;
}

.valores li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
    font-weight: 500;
    text-align: center;
}

/* viñeta personalizada */
.valores li::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1F7A7A, #4FD1C5);
    box-shadow: 0 0 6px rgba(79, 209, 197, 0.6);
}

/* VALORES EN 2 COLUMNAS */
.valores {
    list-style: none;
    padding: 0;
    columns: 2; /* clave */
}

/*Header nosotros*/
.nosotros-header {
    margin-top: 66px;
    position: relative;
    min-height: 40vh;
    display: flex;
    align-items: center;
    padding: 0 8vw;
    background-image: url('/img/close-up-young-business-person-doing-internship.jpg');
    background-size: cover;
    background-position: right center;
    overflow: hidden;
}

/* degradado oscuro hacia la izquierda */
.header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(30, 40, 60, 0.95) 0%,
        rgba(30, 40, 60, 0.85) 40%,
        rgba(30, 40, 60, 0.4) 70%,
        rgba(30, 40, 60, 0) 100%
    );
}

/* icono */
.info-icon {
    width: 65px;
    height: 65px;
    margin-bottom: 12px;
    object-fit: contain;
}

/* opcional: estilo más pro tipo círculo */
.info-icon {
    padding: 10px;
    border-radius: 50%;
}

/* alineación */
.info-item {
    text-align: justify;
    line-height: 1.5;
    color: #555;
}

/* ===================================================== */
/* ============= PESTAÑA DE BLOG DE GIRO WEB ============= */
/* ===================================================== */
.blog-section {
    padding: 60px 40px; /* margen lateral */
    background: #f5f7fb;
}

/* header centrado */
.blog-header {
    text-align: center;
    margin-bottom: 40px;
}

/* contenedor del feed */
.blog-feed {
    display: flex;
    justify-content: flex-start; /* izquierda */
}

/* tamaño del embed */
.fb-page,
.fb-page iframe {
    width: 100% !important;
}

.fb-page,
.fb-page span,
.fb-page iframe {
    width: 500px !important;
}

/* HEADER HERO BLOG */

/* HERO */
.blog-hero {
    margin-top: 66px;
    position: relative;
    min-height: 40vh;
    display: flex;
    align-items: center;
    padding: 0 8vw;

    background-image: url('/img/young-friends-having-videoconference.jpg'); /* cambia imagen */
    background-size: cover;
    background-position: center;

    overflow: hidden;
}

/* overlay oscuro degradado */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(34, 42, 63, 0.95) 0%,
        rgba(34, 42, 63, 0.85) 40%,
        rgba(34, 42, 63, 0.4) 70%,
        rgba(34, 42, 63, 0) 100%
    );
}

/* BLOG CONTENIDO */
.blog-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* IZQUIERDA */
.blog-left {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* DERECHA */
.blog-right {
    flex: 1;
    position: sticky;
    top: 100px;
    width: 100%;
    max-width: 380px; /* mismo ancho que Facebook */
}

/* CARD */
.blog-card {
    display: flex;
    height: 350px; /* tamaño estándar */
    overflow: hidden;
}

/* CONTENIDO INTERNO */
.blog-content-card {
    display: flex;
    width: 100%;
    height: 100%;
}

/* TEXTO (2/3) */
.blog-text {
    flex: 2;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
}

.btn-card{
    margin-top: auto; /* 👈 empuja el botón hacia abajo */
}

/* IMAGEN (1/3) */
.blog-image-container {
    flex: 1;
    height: 100%;
    display: flex;
}


/* IMAGEN */
.blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* TAG */
.blog-tag {
    font-size: 12px;
    color: #4FD1C5;
    font-weight: 600;
}

/* TITULO */
.blog-title {
    font-size: 24px;
    font-weight: 700;
    color: #1E3A8A;
    margin-bottom: 10px;
}

/* DESCRIPCIÓN */
.blog-desc {
    color: #555;
    font-size: 15px;
    line-height: 1.5;
}


/* BARRA DE BUSQUEDA DE BLOG */
.buscador-wrapper {
    position: relative;
}

.resultados-busqueda {
    position: absolute;
    width: 100%;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 10;
    margin-top: 5px;
}

.resultado-item {
    padding: 10px 15px;
    cursor: pointer;
    transition: 0.2s;
}

.resultado-item:hover,
.resultado-item.activo {
    background: #f5f5f5;
}

.titulo-resultado {
    font-weight: 600;
}

.ruta {
    color: gray;
    font-size: 12px;
}

/* DETALLE BLOG */

.blog-hero-detalle {
    position: relative;
}

.blog-hero-detalle .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}

.hero-content-detalle {
    position: absolute;
    bottom: 40px;
    left: 40px;
    color: white;
    max-width: 800px;
}

.hero-content-detalle h1 {
    font-size: 40px;
    font-weight: bold;
}

.blog-content {
    padding: 40px 0;
}

.breadcrumb-blog {
    color: #777;
    margin-bottom: 10px;
}

.autor {
    color: #555;
    margin-bottom: 20px;
}

/*API DE FACEBOOK**/
.facebook-box {
    background: #f0f2f5;
    border-radius: 12px;
    width: 100%;
    max-width: 380px;
    height: 600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* HEADER */
.facebook-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border-bottom: 1px solid #ddd;
}

.fb-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.fb-info strong {
    font-size: 15px;
}

.fb-info span {
    font-size: 12px;
    color: #65676b;
}

/* SCROLL */
.facebook-scroll {
    overflow-y: auto;
    padding: 10px;
    flex: 1;
}

/* SCROLL BONITO */
.facebook-scroll::-webkit-scrollbar {
    width: 6px;
}

.facebook-scroll::-webkit-scrollbar-thumb {
    background: #ccd0d5;
    border-radius: 10px;
}

/* HEADER DEL POST */
.post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* AVATAR DEL POST */
.post-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

/* INFO USUARIO */
.post-user-info {
    display: flex;
    flex-direction: column;
}

.post-user-info strong {
    font-size: 14px;
}

.post-user-info span {
    font-size: 11px;
    color: #65676b;
}

/* POST */
.post {
    background: white;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    transition: transform 0.2s ease;
}

.post:hover {
    transform: translateY(-2px);
}

.post p {
    font-size: 14px;
    color: #050505;
}

/* IMAGEN */
.post-img {
    width: 100%;
    border-radius: 10px;
    margin-top: 10px;
}

/* BOTÓN FACEBOOK */
.fb-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 10px;
    background: #1877f2;
    color: white;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
}

.fb-link:hover {
    background: #166fe5;
}

/* ICONO */
.fb-link i {
    font-size: 14px;
}

/* ===================================================== */
/* FIX GLOBAL PARA HTML DINÁMICO (BLOG + AYUDA) */
/* ===================================================== */


/* ===================================================== */
/* =========== PAGINA VISTA DE HERRAMIENTA ============= */
/* ===================================================== */
.hero-herramientas {
    margin-top: 66px;
    position: relative;
    min-height: 40vh;

    display: flex;
    align-items: center;      /* centra vertical */
    justify-content: flex-start; /* pega a la izquierda */

    padding: 0 8vw; /* espacio lateral como tu diseño */

    text-align: left;
    color: white;

    background-image: url('/img/HERRAMIENTAS.jpg');
    background-size: cover;
    background-position: right center;

    overflow: hidden;
}


/* overlay degradado */
.overlay-herramienta {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(34, 42, 63, 0.95) 0%,
        rgba(34, 42, 63, 0.85) 40%,
        rgba(34, 42, 63, 0.4) 70%,
        rgba(34, 42, 63, 0) 100%
    );
}

.tag {
    background: rgba(255,255,255,0.2);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
}

/* TITULOS */
.section-title {
    font-size: 28px;
    font-weight: bold;
    color: #4FD1C5;
    margin-bottom: 20px;
}

/* DOCUMENTOS */
.doc-list {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

/* encabezado */
.doc-header {
    display: grid;
    grid-template-columns: 2fr 3fr 1fr;
    padding: 12px 16px;
    background: #f3f4f6;
    font-weight: 600;
    font-size: 14px;
    color: #374151;
}

/* fila */
.doc-row {
    display: grid;
    grid-template-columns: 2fr 3fr 1fr;
    align-items: center;

    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;

    transition: all 0.2s ease;
}

/* hover elegante */
.doc-row:hover {
    background: #f9fafb;
}

/* columnas */
.doc-col {
    display: flex;
    align-items: center;
}

/* documento */
.doc-main {
    gap: 10px;
    font-weight: 500;
}

/* descripción */
.doc-desc {
    color: #6b7280;
    font-size: 14px;
}

/* acción */
.doc-action {
    justify-content: flex-end;
}

/* botón hover */
.doc-action .v-btn:hover {
    background: rgba(0,0,0,0.05);
}

/* titulo */
.doc-title {
    font-weight: 600;
    font-size: 14px;
    color: #222A3F;
}

/* LINKS */
.link-row {
    display: flex;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid #e5e7eb;
    transition: background 0.2s ease;
}

.link-row:hover {
    background: #f5f7fb;
}

.link-title-clean {
    text-decoration: none;
    color: #1f2937;
    font-weight: 500;
    transition: color 0.2s;
}

.link-title-clean:hover {
    color: #3b82f6;
}

/* ===================================================== */
/* =========== PAGINA VISTA DE CONTACTO ================ */
/* ===================================================== */

.contacto-hero {
    margin-top: 66px;
    position: relative;
    min-height: 40vh;
    display: flex;
    align-items: center;
    padding: 0 8vw;

    background-image: url('/img/CONTACTO.jpg');
    background-size: cover;
    background-position: right center;

    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(34, 42, 63, 0.95) 0%,
        rgba(34, 42, 63, 0.85) 40%,
        rgba(34, 42, 63, 0.4) 70%,
        rgba(34, 42, 63, 0) 100%
    );
}

.contact-layout {
    display: flex;
    min-height: 80vh;
    align-items: flex-start; 
}

/* IZQUIERDA */
.form-section {
    width: 55%;
    padding: 40px 60px;
    background: #fff;

    position: sticky;
    top: 90px; /* altura del header/navbar */
    height: fit-content;
}

.custom-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #6b7280;
}

.map-section {
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
}

/* TARJETA */
.map-card {
    width: 90%;
    height: 350px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* MAPA */
.map-card iframe {
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 900px) {
    .contact-layout {
        flex-direction: column;
    }

    .form-section {
        width: 100%;
        top: unset;
        position: relative;
        padding: 30px;
    }

    .map-section {
        width: 100%;
        height: auto;
    }

    .map-card {
        width: 100%;
        height: 300px;
    }
}

/* ===================================================== */
/* =========== PAGINA VISTA DE PRODUCTOS =============== */
/* ===================================================== */

.hero-productos {
    margin-top: 66px;
    position: relative;
    min-height: 40vh;
    display: flex;
    align-items: center;
    padding: 0 8vw; /* responsive */

    background-image: url('/img/hombre-que-habla-con-los-companeros-de-trabajo-en-la-oficina.jpg');
    background-size: cover;
    background-position: right center;

    overflow: hidden;
}

.overlay-productos {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(34, 42, 63, 0.95) 0%,
        rgba(34, 42, 63, 0.85) 40%,
        rgba(34, 42, 63, 0.4) 70%,
        rgba(34, 42, 63, 0) 100%
    );
}

.hero-productos .hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.hero-productos h1 {
    font-size: 48px;
    font-weight: 700;
    color: #fff;
}

.hero-productos p {
    color: #d1d5db;
}


/* ===================================================== */
/* =================== CONTENEDOR ======================= */
/* ===================================================== */

.productos-container {
    padding: 60px 0; /* sin laterales */
    width: 100%;
    max-width: none; /* elimina container */
}


/* ===================================================== */
/* ===================== BLOQUES ======================== */
/* ===================================================== */

.producto-block {
    width: 100%;
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s ease;
    position: relative;
    scroll-margin-top: 90px; 
}

/* separación limpia */
.producto-block + .producto-block {
    margin-top: 120px;
}

/* visible */
.producto-block.show,
.producto-block:first-child {
    opacity: 1;
    transform: translateY(0);
}


/* ===================================================== */
/* ===================== CONTENIDO ====================== */
/* ===================================================== */

.producto-block .row {
    width: 100%;
    margin: 0;
}

/* columnas FULL */
.producto-block .col-md-6 {
    padding: 0;
}

/* TEXTO */
.producto-block .col-md-6:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 8vw; /* clave */
    max-width: none; /* elimina restricción */
}

/* IMAGEN */
.producto-img-wrapper {
    width: 100%;
    min-height: 350px;
}

.img-producto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5%;
}


/* ===================================================== */
/* ===================== BLOQUE ALT ===================== */
/* ===================================================== */

.producto-block.alt {
    position: relative;
}

.producto-block.alt::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    background: #f1f1f2;
    z-index: -1;
}


/* ===================================================== */
/* ===================== TEXTO ========================== */
/* ===================================================== */

.producto-block h2 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 15px;
}

.producto-block p {
    font-size: 15px;
    color: #6b7280;
    line-height: 1.7;
}


/* ===================================================== */
/* ===================== LISTAS ========================= */
/* ===================================================== */

.lista-pro {
    margin-top: 20px;
    padding-left: 0;
}

.lista-pro li {
    list-style: none;
    margin-bottom: 10px;
    padding-left: 28px;
    position: relative;
}

.lista-pro li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #1e5aa5;
}


/* ===================================================== */
/* =================== ANIMACIONES ====================== */
/* ===================================================== */

.producto-block:hover .img-producto {
    transform: scale(1.03);
}


/* ===================================================== */
/* =================== SCROLL =========================== */
/* ===================================================== */

html {
    scroll-behavior: smooth;
}

/* ===================================================== */
/* ================= RESPONSIVE FIX GLOBAL ============== */
/* ===================================================== */

@media (max-width: 768px) {

    /* ===== HERO ===== */
    .ayuda-hero,
    .blog-hero,
    .nosotros-header,
    .contacto-hero,
    .hero-productos,
    .hero-herramientas {
        padding: 40px 20px !important;
        height: auto !important;
        min-height: 50vh;
    }

    .hero-content h1,
    .hero-title {
        font-size: 26px !important;
    }

    .hero-content p {
        font-size: 14px !important;
    }

    /* ===== NAVBAR ===== */
    .navbar-nav .nav-item {
        margin: 10px 0 !important;
    }

    .logo-navbar {
        height: 30px;
    }

    /* ===== NOSOTROS ===== */
    .nosotros-content {
        flex-direction: column;
    }

    .nosotros-img,
    .nosotros-text {
        width: 100% !important;
    }

    .nosotros-info {
        flex-direction: column;
    }

    .info-item {
        width: 100% !important;
        margin-bottom: 20px;
    }

    /* ===== BLOG ===== */
    .blog-container {
        flex-direction: column;
    }

    .blog-right {
        position: relative;
        max-width: 100%;
    }

    .blog-card {
        height: auto;
    }

    .blog-content-card {
        flex-direction: column;
    }

    .blog-content {
        flex-direction: column;
    }

    .blog-image-container {
        height: 180px;
    }

    .blog-text {
        flex: unset;
    }

    /* ===== CONTACTO ===== */
    .contact-layout {
        flex-direction: column;
    }

    .form-section,
    .map-section {
        width: 100%;
    }

    /* ===== PRODUCTOS ===== */
    .producto-block .row {
        flex-direction: column;
    }

    .producto-block .col-md-6 {
        width: 100%;
    }

    .producto-block .col-md-6:first-child {
        padding: 30px;
    }

    .producto-img-wrapper {
        min-height: 250px;
    }

    /* ===== TABLAS ===== */
    .v-data-table {
        font-size: 12px;
    }

    .action-buttons {
        flex-direction: column;
    }

    /* ===== FOOTER ===== */
    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .auth-wrapper-split {
        flex-direction: column;
    }

    .auth-left {
        height: 200px;
    }

}