/*
============================================================
SOORYON-JI URUGUAY
USER.CSS
Personalización visual de Joomla Cassiopeia
Versión depurada
============================================================
*/

:root {
    --sj-blue: #142f63;
    --sj-blue-dark: #0d234d;
    --sj-blue-light: #214a91;
    --sj-yellow: #f2c400;
    --sj-yellow-light: #ffd83d;
    --sj-white: #ffffff;
    --sj-bg: #f4f6f9;
    --sj-text: #172033;
    --sj-muted: #657084;
    --sj-border: #dce1e8;

    /* Compatibilidad con reglas anteriores */
    --sj-azul: var(--sj-blue);
    --sj-azul-oscuro: var(--sj-blue-dark);
    --sj-amarillo: var(--sj-yellow);
    --sj-gris: var(--sj-bg);
}

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

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #ffffff !important;
    color: var(--sj-text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
}

main {
    background: #ffffff;
}

a {
    color: var(--sj-blue-light);
    text-decoration: none;
}

a:hover {
    color: var(--sj-blue-dark);
}

img,
svg,
video {
    box-sizing: border-box;
}

/* ==========================================================
   ENCABEZADO
   ========================================================== */

.container-header {
    background: var(--sj-blue) !important;
    background-image: none !important;
    border-bottom: 4px solid var(--sj-yellow);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.container-header .grid-child {
    padding-top: 18px;
    padding-bottom: 12px;
}

/* ==========================================================
   LOGO Y DESCRIPCIÓN
   ========================================================== */

.container-header .navbar-brand {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.container-header .navbar-brand .brand-logo {
    display: flex !important;
    flex: 0 0 100px !important;
    width: 100px !important;
    height: 100px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.container-header .navbar-brand .brand-logo img,
.container-header .brand-logo img {
    display: block !important;
    width: 100px !important;
    height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
    object-fit: contain !important;
}

.container-header .site-title {
    color: var(--sj-white) !important;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
}

.container-header .navbar-brand .site-description,
.container-header .site-description {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--sj-white) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
}

/* ==========================================================
   MENÚ PRINCIPAL
   ========================================================== */

.container-header .mod-menu {
    gap: 7px !important;
}

.container-header .mod-menu > li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    flex: 0 0 auto !important;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
    display: block !important;
    padding: 9px 12px !important;
    color: #ffffff !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.30) !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    transform: none !important;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease !important;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > span:hover {
    color: var(--sj-blue-dark) !important;
    background: var(--sj-yellow) !important;
    border-color: var(--sj-yellow) !important;
}

.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a,
.container-header .mod-menu > li.active > span,
.container-header .mod-menu > li.current > span {
    color: var(--sj-blue-dark) !important;
    background: var(--sj-yellow) !important;
    border-color: var(--sj-yellow) !important;
    font-weight: 700 !important;
}

.container-header .mod-menu > li.parent > a::after,
.container-header .mod-menu > li.parent > span::after,
.container-header .mod-menu > li.deeper > a::after,
.container-header .mod-menu > li.deeper > span::after {
    content: " ▾" !important;
    color: var(--sj-yellow) !important;
    font-size: 11px !important;
    margin-left: 4px !important;
}

/* ==========================================================
   SUBMENÚ / METISMENU
   ========================================================== */

.container-header .mod-menu ul,
.container-header .mod-menu .dropdown-menu,
.container-header .mod-menu ul.mod-menu__sub,
.container-header .mod-menu ul.mm-collapse,
.container-header .mod-menu .mod-menu__submenu {
    background: var(--sj-blue-dark) !important;
    border: 1px solid rgba(255,255,255,0.20) !important;
    border-top: 3px solid var(--sj-yellow) !important;
    border-radius: 0 0 6px 6px !important;
    padding: 6px !important;
    margin: 0 !important;
    min-width: 230px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.25) !important;
    list-style: none !important;
}

.container-header .mod-menu ul li,
.container-header .mod-menu .dropdown-menu li,
.container-header .mod-menu ul.mod-menu__sub li,
.container-header .mod-menu ul.mm-collapse li,
.container-header .mod-menu .mod-menu__submenu > li {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    list-style: none !important;
}

.container-header .mod-menu ul li > a,
.container-header .mod-menu ul li > span,
.container-header .mod-menu .dropdown-menu li > a,
.container-header .mod-menu .dropdown-menu li > span,
.container-header .mod-menu ul.mod-menu__sub li > a,
.container-header .mod-menu ul.mod-menu__sub li > span,
.container-header .mod-menu ul.mm-collapse li > a,
.container-header .mod-menu ul.mm-collapse li > span,
.container-header .mod-menu .mod-menu__submenu > li > a,
.container-header .mod-menu .mod-menu__submenu > li > span {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 13px !important;
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transform: none !important;
}

.container-header .mod-menu ul li > a:hover,
.container-header .mod-menu ul li > span:hover,
.container-header .mod-menu .dropdown-menu li > a:hover,
.container-header .mod-menu .dropdown-menu li > span:hover,
.container-header .mod-menu ul.mod-menu__sub li > a:hover,
.container-header .mod-menu ul.mod-menu__sub li > span:hover,
.container-header .mod-menu ul.mm-collapse li > a:hover,
.container-header .mod-menu ul.mm-collapse li > span:hover,
.container-header .mod-menu .mod-menu__submenu > li > a:hover,
.container-header .mod-menu .mod-menu__submenu > li > span:hover {
    color: var(--sj-blue-dark) !important;
    background: var(--sj-yellow) !important;
}

.container-header .mod-menu ul li.active > a,
.container-header .mod-menu ul li.current > a,
.container-header .mod-menu .dropdown-menu li.active > a,
.container-header .mod-menu .dropdown-menu li.current > a,
.container-header .mod-menu ul.mod-menu__sub li.active > a,
.container-header .mod-menu ul.mod-menu__sub li.current > a {
    color: var(--sj-blue-dark) !important;
    background: var(--sj-yellow) !important;
}

.container-header .mod-menu ul li + li {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}

.container-header .mod-menu ul,
.container-header .mod-menu li,
.container-header .mod-menu li::before {
    list-style: none !important;
}

.container-header .metismenu-item > button,
.container-header .metismenu-item > .mm-toggler {
    color: var(--sj-yellow) !important;
}

/* ==========================================================
   CONTENIDO Y TÍTULOS
   ========================================================== */

.container-component {
    padding-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--sj-blue);
}

h1,
h2,
h3 {
    font-weight: 700;
}

.item-title {
    color: var(--sj-blue) !important;
    border-left: 5px solid var(--sj-yellow);
    padding-left: 14px;
}

.breadcrumb {
    background: var(--sj-bg);
    border: 1px solid var(--sj-border);
    border-left: 4px solid var(--sj-yellow);
    border-radius: 5px;
    padding: 9px 14px;
}

.item-page,
.blog-item,
.blog-featured {
    color: var(--sj-text);
}

/* ==========================================================
   IMAGEN PRINCIPAL DE ARTÍCULO
   ========================================================== */

/*
   Joomla/Cassiopeia genera la imagen principal como:

   <figure class="left item-image">
       <img ...>
   </figure>

   Se fija el CONTENEDOR en 25%.
   La imagen ocupa el 100% de ese contenedor.

   Esto evita que template.min.css / Bootstrap hagan
   crecer la imagen hasta su tamaño natural.
*/

.item-page figure.left.item-image,
.com-content-article figure.left.item-image {
    display: block !important;
    float: left !important;
    width: 25% !important;
    max-width: 25% !important;
    box-sizing: border-box !important;
    margin: 0 25px 15px 0 !important;
    padding: 0 !important;
}

.item-page figure.left.item-image img,
.com-content-article figure.left.item-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Joomla puede usar float-start */

.item-page figure.float-start.item-image,
.com-content-article figure.float-start.item-image {
    display: block !important;
    float: left !important;
    width: 25% !important;
    max-width: 25% !important;
    margin: 0 25px 15px 0 !important;
    padding: 0 !important;
}

.item-page figure.float-start.item-image img,
.com-content-article figure.float-start.item-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* ==========================================================
   IMÁGENES DIRECTAS DENTRO DEL ARTÍCULO
   ========================================================== */

.com-content-article .com-content-article__body img,
.com-content-article .item-page img {
    max-width: 100%;
    height: auto;
}

.com-content-article .com-content-article__body img.float-start,
.com-content-article .item-page img.float-start {
    float: left !important;
    margin-left: 0 !important;
    margin-right: 1rem !important;
    margin-bottom: 0.5rem !important;
}

.com-content-article .com-content-article__body img.float-end,
.com-content-article .item-page img.float-end {
    float: right !important;
    margin-left: 1rem !important;
    margin-right: 0 !important;
    margin-bottom: 0.5rem !important;
}

/* ==========================================================
   TAMAÑOS EXPLÍCITOS DE IMÁGENES
   ========================================================== */

.com-content-article .com-content-article__body img.w-25,
.com-content-article .item-page img.w-25 {
    width: 25% !important;
    max-width: 25% !important;
    height: auto !important;
}

.com-content-article .com-content-article__body img.w-40,
.com-content-article .item-page img.w-40 {
    width: 40% !important;
    max-width: 40% !important;
    height: auto !important;
}

.com-content-article .com-content-article__body img.w-50,
.com-content-article .item-page img.w-50 {
    width: 50% !important;
    max-width: 50% !important;
    height: auto !important;
}

.com-content-article .com-content-article__body img.w-75,
.com-content-article .item-page img.w-75 {
    width: 75% !important;
    max-width: 75% !important;
    height: auto !important;
}

.com-content-article .com-content-article__body img.w-100,
.com-content-article .item-page img.w-100 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

.com-content-article .com-content-article__body img.mx-auto,
.com-content-article .item-page img.mx-auto {
    display: block !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.com-content-article .com-content-article__body img.d-block,
.com-content-article .item-page img.d-block {
    display: block !important;
}

/* ==========================================================
   SLIDER / BANNERS
   ========================================================== */

.moduletable.banner,
.moduletable[class*="slider"],
.slideshowck,
.slideshowck-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.moduletable.banner img,
.moduletable[class*="slider"] img,
.slideshowck img,
.slideshowck-container img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
}

/* ==========================================================
   TARJETAS Y MÓDULOS
   ========================================================== */

.card {
    background: #ffffff;
    border: 1px solid var(--sj-border);
    border-radius: 7px;
    box-shadow: 0 4px 18px rgba(13, 35, 77, 0.10);
}

.card-header {
    background: var(--sj-blue) !important;
    color: #ffffff !important;
    border-bottom: 3px solid var(--sj-yellow);
    font-weight: 700;
}

.moduletable {
    background: #ffffff;
    border: 1px solid var(--sj-border);
    border-radius: 7px;
    box-shadow: 0 4px 18px rgba(13, 35, 77, 0.10);
    overflow: hidden;
    margin-bottom: 24px;
}

.moduletable > h3,
.moduletable > h4 {
    margin: 0;
    padding: 12px 16px;
    background: var(--sj-blue);
    color: #ffffff;
    border-bottom: 3px solid var(--sj-yellow);
    font-size: 1.1rem;
}

/* ==========================================================
   BOTONES Y FORMULARIOS
   ========================================================== */

.btn {
    border-radius: 6px;
    font-weight: 600;
}

.btn-primary {
    background: var(--sj-blue) !important;
    border-color: var(--sj-blue) !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background: var(--sj-yellow) !important;
    border-color: var(--sj-yellow) !important;
    color: var(--sj-blue-dark) !important;
}

.sj-button {
    display: inline-block;
    padding: 11px 20px;
    background: var(--sj-blue);
    color: #ffffff !important;
    border-radius: 6px;
    font-weight: 700;
}

.sj-button:hover {
    background: var(--sj-yellow);
    color: var(--sj-blue-dark) !important;
}

.form-control,
.form-select,
input,
select,
textarea {
    border-color: var(--sj-border);
    border-radius: 5px;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--sj-blue-light);
    box-shadow: 0 0 0 0.15rem rgba(33, 74, 145, 0.15);
}

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

table {
    width: 100%;
    border-collapse: collapse;
}

table th {
    background: var(--sj-blue);
    color: #ffffff;
    font-weight: 700;
}

table th,
table td {
    padding: 9px 11px;
    border: 1px solid var(--sj-border);
}

table tr:nth-child(even) {
    background: var(--sj-bg);
}

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

.footer {
    background: var(--sj-blue-dark) !important;
    color: #ffffff !important;
    border-top: 4px solid var(--sj-yellow);
}

.footer a {
    color: #ffffff !important;
}

.footer a:hover {
    color: var(--sj-yellow) !important;
}

.sooryon-footer {
    color: #ffffff;
}

/* ==========================================================
   COMPONENTES PROPIOS SOORYON-JI
   ========================================================== */

.sj-highlight {
    margin: 25px 0;
    padding: 22px 24px;
    background: var(--sj-bg);
    border-left: 5px solid var(--sj-yellow);
    border-radius: 6px;
    box-shadow: 0 4px 18px rgba(13, 35, 77, 0.10);
}

.sj-blue-box {
    margin: 25px 0;
    padding: 24px;
    background: var(--sj-blue);
    color: #ffffff;
    border-radius: 6px;
}

.sj-blue-box h2,
.sj-blue-box h3,
.sj-blue-box h4 {
    color: #ffffff;
}

.sj-blue-box a {
    color: var(--sj-yellow-light);
}

.sj-label {
    display: inline-block;
    padding: 4px 10px;
    background: var(--sj-yellow);
    color: #101820;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

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

@media (max-width: 1199px) {
    .container-header .mod-menu {
        gap: 4px !important;
    }

    .container-header .mod-menu > li > a,
    .container-header .mod-menu > li > span {
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 991px) {
    .container-header .grid-child:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        min-height: 0 !important;
        padding: 10px 20px !important;
    }

    .container-header .brand-logo,
    .container-header .navbar-brand .brand-logo {
        width: 80px !important;
        height: 80px !important;
        max-width: 80px !important;
        max-height: 80px !important;
    }

    .container-header .brand-logo img,
    .container-header .navbar-brand .brand-logo img {
        width: 80px !important;
        height: 80px !important;
        max-width: 80px !important;
        max-height: 80px !important;
    }

    .container-header .site-title {
        font-size: 24px !important;
    }

    .container-header .site-description {
        font-size: 14px !important;
    }

    .container-header .navbar {
        padding-top: 8px !important;
        padding-bottom: 12px !important;
    }

    .container-header .mod-menu > li > a,
    .container-header .mod-menu > li > span {
        margin-bottom: 4px !important;
    }
}

/* ==========================================================
   CELULARES PEQUEÑOS
   ========================================================== */

@media (max-width: 600px) {
    .container-header .grid-child:first-child {
        padding: 10px 15px !important;
        gap: 6px !important;
    }

    .container-header .brand-logo,
    .container-header .navbar-brand .brand-logo {
        width: 60px !important;
        height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
    }

    .container-header .brand-logo img,
    .container-header .navbar-brand .brand-logo img {
        width: 60px !important;
        height: 60px !important;
        max-width: 60px !important;
        max-height: 60px !important;
    }

    .container-header .site-title {
        font-size: 18px !important;
        line-height: 1.1 !important;
    }

    .container-header .site-description {
        font-size: 12px !important;
        margin-top: 3px !important;
    }

    .container-header .mod-menu > li > a,
    .container-header .mod-menu > li > span {
        padding: 9px 12px !important;
    }
}

/* ==========================================================
   IMÁGENES DE ARTÍCULO EN MÓVIL
   ========================================================== */

@media (max-width: 767px) {
    .item-page figure.left.item-image,
    .item-page figure.float-start.item-image,
    .com-content-article figure.left.item-image,
    .com-content-article figure.float-start.item-image {
        width: 25% !important;
        max-width: 25% !important;
        float: left !important;
        margin-right: 12px !important;
        margin-bottom: 8px !important;
    }

    .item-page figure.left.item-image img,
    .item-page figure.float-start.item-image img,
    .com-content-article figure.left.item-image img,
    .com-content-article figure.float-start.item-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .com-content-article .com-content-article__body img.w-25,
    .com-content-article .item-page img.w-25 {
        width: 25% !important;
        max-width: 25% !important;
    }

    .com-content-article .com-content-article__body img.w-40,
    .com-content-article .item-page img.w-40 {
        width: 40% !important;
        max-width: 40% !important;
    }

    .com-content-article .com-content-article__body img.w-50,
    .com-content-article .item-page img.w-50 {
        width: 50% !important;
        max-width: 50% !important;
    }

    .com-content-article .com-content-article__body img.w-75,
    .com-content-article .item-page img.w-75 {
        width: 75% !important;
        max-width: 75% !important;
    }

    .com-content-article .com-content-article__body img.w-100,
    .com-content-article .item-page img.w-100 {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================
   FIN USER.CSS
   ========================================================== */