/*
 * Makinari - Overrides de integracion entre Joomla y Vuexy.
 * Adapta el markup del mod_menu y del toolbar de Joomla al layout de Vuexy.
 */

/* El modulo de menu de Joomla (mod_menu) renderiza un <ul> de primer nivel.
   Vuexy espera .menu-inner. Aplicamos las clases equivalentes por CSS. */
#layout-menu .menu > ul,
#layout-menu ul.mod-menu {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
}

#layout-menu ul.mod-menu li {
    position: relative;
}

#layout-menu ul.mod-menu a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    color: inherit;
    text-decoration: none;
    border-radius: 0.375rem;
    margin: 0.125rem 0.75rem;
}

#layout-menu ul.mod-menu a:hover {
    background-color: rgba(var(--bs-primary-rgb, 105, 108, 255), 0.08);
}

#layout-menu ul.mod-menu .active > a,
#layout-menu ul.mod-menu a.active {
    background-color: rgba(var(--bs-primary-rgb, 105, 108, 255), 0.16);
    font-weight: 600;
}

/* Submenus */
#layout-menu ul.mod-menu ul {
    list-style: none;
    padding-left: 0.75rem;
    margin: 0;
}

/* Iconos del menu de Joomla (usa spans .icon-xxx) alineados */
#layout-menu ul.mod-menu a [class^="icon-"],
#layout-menu ul.mod-menu a [class*=" icon-"] {
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

/* El toolbar de Joomla dentro del subhead de Vuexy */
#subhead .toolbar,
#subhead #toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

#subhead .btn-toolbar {
    gap: 0.5rem;
}

/* El titulo de pagina (mod_title) integrado en el navbar */
#layout-navbar .header-title,
#layout-navbar h1.page-title {
    font-size: 1.125rem;
    margin: 0;
    font-weight: 600;
}

/* Ajuste menor para que los mensajes de Joomla respiren dentro del main */
main .alert {
    margin-bottom: 1rem;
}

/* -----------------------------------------------------------------------------
 * Barra de acciones de los formularios CRUD (Guardar / Guardar y cerrar /
 * Cancelar). Fija al hacer scroll, pegada JUSTO debajo de la navbar fija de
 * Vuexy. Vuexy reserva 72px (padding-top de .layout-page con menu vertical)
 * para la navbar fija; usamos esa misma referencia para no solaparnos.
 * Pensada para uso comodo tambien en movil.
 * -------------------------------------------------------------------------- */
.mk-form-actionbar {
    position: sticky;
    inset-block-start: 74px; /* justo debajo de la navbar fija detached de Vuexy */
    /* Debe quedar POR DEBAJO de la navbar (z-index 1030) para no solaparse con
       ella, y por encima de las cards del formulario. */
    z-index: 1010;
    /* Ensancha el fondo hasta los bordes del contenedor para tapar el scroll. */
    margin-inline: -0.5rem;
    padding-inline: 0.5rem;
}

/* Sin navbar fija, la barra se pega arriba del todo. */
.layout-wrapper:not(.layout-navbar-fixed) .mk-form-actionbar {
    inset-block-start: 0;
}

/* Fila de botones dentro de la barra de acciones (escritorio). */
.mk-form-actionbar .mk-actionbar-buttons {
    display: flex;
    flex-wrap: nowrap;   /* los botones SIEMPRE en una linea */
    gap: 0.5rem;
    align-items: center;
}

/* Botón de opciones (dropdown): en ESCRITORIO se ve el texto "Opciones" y se
   oculta el icono de tres puntos (reservado para móvil). */
.mk-actionbar-options .mk-options-icon {
    display: none;
}

/* Separación icono-texto en los botones principales (escritorio). */
.mk-actionbar-buttons .mk-btn-action .mk-btn-text {
    margin-inline-start: 0.35rem;
}

/* -----------------------------------------------------------------------------
 * MOVIL: los botones bajan a una barra fija al fondo de la pantalla (patron
 * habitual en apps: acciones al alcance del pulgar). En la barra superior solo
 * queda el titulo. Aplica a <768px.
 * -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .mk-actionbar-buttons {
        /* Botones flotando sueltos al fondo, SIN contenedor (ni fondo ni caja). */
        position: fixed;
        inset-inline: 1rem;
        inset-block-end: 1rem;
        z-index: 1030;
        display: flex;
        gap: 0.5rem;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
        /* Colapsado (solo iconos): botones agrupados y CENTRADOS en la fila. */
        justify-content: center;
    }

    /* Con texto (estado inicial): ocupan todo el ancho repartidos. */
    .mk-actionbar-labeled.mk-actionbar-buttons {
        justify-content: stretch;
    }

    /* Cada boton flota por si mismo: redondeado, con fondo solido propio (para
       que los outline no se vean transparentes sobre el contenido) y sombra. */
    .mk-actionbar-buttons .btn {
        border-radius: 0.75rem;
        box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.18);
    }

    /* Los botones outline necesitan fondo sólido propio para no verse
       transparentes al flotar sin contenedor. */
    .mk-actionbar-buttons .btn-outline-success,
    .mk-actionbar-buttons .btn-outline-danger,
    .mk-actionbar-buttons .btn-outline-secondary {
        background-color: var(--bs-body-bg);
    }

    /* En MÓVIL, estado COLAPSADO (por defecto): botones principales solo icono,
       cuadrados y uniformes. El texto se oculta con transición para el efecto
       de "colapso" al quitar la clase .mk-actionbar-labeled. */
    .mk-actionbar-buttons .mk-btn-action {
        flex: 0 1 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.5rem;
        overflow: hidden;
    }

    .mk-actionbar-buttons .mk-btn-action .icon-base {
        font-size: 1.15rem;
        flex: 0 0 auto;
    }

    .mk-actionbar-buttons .mk-btn-action .mk-btn-text {
        max-width: 0;
        opacity: 0;
        margin-inline-start: 0;
        white-space: nowrap;
        overflow: hidden;
        transition: max-width 0.35s ease, opacity 0.35s ease, margin 0.35s ease;
    }

    /* Estado INICIAL (con texto): se muestra el nombre del botón unos segundos.
       El JS quita .mk-actionbar-labeled pasado un tiempo y el texto colapsa. */
    .mk-actionbar-labeled.mk-actionbar-buttons .mk-btn-action .mk-btn-text {
        max-width: 8rem;
        opacity: 1;
        margin-inline-start: 0.35rem;
    }

    /* Mientras hay texto, los botones se reparten el ancho; al colapsar, se
       ajustan al icono y se agrupan. */
    .mk-actionbar-labeled.mk-actionbar-buttons .mk-btn-action {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Botón de opciones en MÓVIL: solo el icono de tres puntos, sin estirarse. */
    .mk-actionbar-options {
        flex: 0 0 auto;
    }

    .mk-actionbar-options .dropdown-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.5rem;
        padding-inline: 0.75rem;
        box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.18);
        background-color: var(--bs-body-bg);
    }

    .mk-actionbar-options .dropdown-toggle .mk-options-icon {
        font-size: 1.15rem;
    }

    .mk-actionbar-options .mk-options-icon {
        display: inline-block;
    }

    .mk-actionbar-options .mk-options-text {
        display: none; /* en móvil, el botón de opciones es solo el icono */
    }

    /* Ocultar el caret del dropdown en móvil (el icono ya indica el menú). */
    .mk-actionbar-options .dropdown-toggle::after {
        display: none;
    }

    /* El menú desplegable flota por encima de la barra de la isla. */
    .mk-actionbar-options .dropdown-menu {
        z-index: 1031;
    }

    /* Espacio al final del formulario para que la isla flotante no tape el
       ultimo campo al hacer scroll hasta abajo. */
    .mk-crud-form {
        padding-block-end: 5.5rem;
    }
}

/* -----------------------------------------------------------------------------
 * Mapa de ubicacion (Google Maps) en los formularios que tienen coordenadas.
 * Bootstrap/Vuexy no cubren el contenedor del mapa; CSS minimo imprescindible.
 * -------------------------------------------------------------------------- */
.mk-map {
    min-height: 320px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

/* Buscador flotante sobre el mapa (Places Autocomplete). */
.mk-map-search {
    position: absolute;
    inset-block-start: 0.625rem;
    inset-inline-start: 0.625rem;
    z-index: 5;
    inline-size: min(320px, 70%);
}

/* -----------------------------------------------------------------------------
 * Iconos de Joomla en formularios de FRONT.
 *
 * Joomla renderiza ciertos controles (subform repetible: añadir/borrar/mover
 * fila; tooltips de descripción de campo) con clases de icono del BACKEND
 * (icon-plus, icon-minus, icon-menu, icon-info-circle). En el template de sitio
 * Vuexy esas clases no tienen glifo (Vuexy usa iconos Tabler vía máscara SVG),
 * así que los botones salían vacíos. Aquí mapeamos esas clases a los mismos
 * SVG Tabler que usa Vuexy, replicando su mecanismo de máscara.
 * -------------------------------------------------------------------------- */
.makinari-front .icon-plus,
.makinari-front .icon-minus,
.makinari-front .icon-menu,
.makinari-front .icon-arrows-alt,
.makinari-front .icon-info-circle {
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    vertical-align: -0.125em;
}

.makinari-front .icon-plus {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 5v14m-7-7h14'/%3E%3C/svg%3E");
}

.makinari-front .icon-minus {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 12h14'/%3E%3C/svg%3E");
}

.makinari-front .icon-menu {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
}

.makinari-front .icon-arrows-alt {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m18 9l3 3l-3 3m-3-3h6M6 9l-3 3l3 3m-3-3h6m0 6l3 3l3-3m-3-3v6m3-15l-3-3l-3 3m3-3v6'/%3E%3C/svg%3E");
}

.makinari-front .icon-info-circle {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m9-3h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/g%3E%3C/svg%3E");
}