/* ================================================================
   Catalogo Digital — capa "pro"

   Va DESPUES de estilo.css y detalles.css. Cambia tres cosas:
     1. la tipografia institucional (Montserrat, servida en local)
     2. el menu: de barra superior a barra lateral fija
     3. las listas: herramientas de busqueda y orden

   Se apaga con APP_ESTILO=cool o =clasico en el .env.
   ================================================================ */

/* ---------- Tipografia institucional ----------
   Montserrat variable, servida desde este mismo servidor: la politica
   de seguridad del sistema no permite traerla de un CDN. Licencia SIL
   Open Font License, ver assets/fuentes/LICENCIA.txt */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fuentes/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fuentes/montserrat-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                   U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body.pro {
    font-family: 'Montserrat', "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    /* Montserrat es mas ancha que Segoe: se compensa un pelo el interletrado
       para que las tablas no crezcan de mas. */
    letter-spacing: -.005em;
}

body.pro h1, body.pro h2, body.pro h3 { letter-spacing: -.02em; }

/* ---------- Armazon de dos columnas ---------- */

.armazon { display: flex; min-height: 100vh; align-items: stretch; }

.lateral {
    width: 268px;
    flex: none;
    background: linear-gradient(180deg, var(--guinda-oscuro) 0%, var(--guinda) 62%, #6d1739 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 1.1rem .8rem 1rem;
    gap: .5rem;
    position: sticky;
    top: 0;
    height: 100vh;
    box-shadow: 2px 0 18px rgba(74, 13, 38, .22);
    z-index: 5;
}

/* Hilo dorado vertical en el canto derecho. */
.lateral::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--oro-claro) 22%, #f0d89a 52%, var(--oro-claro) 78%, transparent);
    opacity: .8;
}

.lienzo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Sin tope de ancho: el contenido ocupa todo el lienzo, de la barra
   lateral al borde derecho. El margen que queda es solo el respiro
   minimo para que el texto no toque el filo de la pantalla.
   (Antes habia un max-width que dejaba aire de sobra a los lados.) */
body.pro .envoltura {
    max-width: none;
    width: 100%;
    flex: 1;
    padding: 1.9rem 1.25rem 3rem;
}

/* ---------- La marca dentro de la lateral ---------- */

body.pro .lateral .marca {
    padding: .3rem .55rem 1rem;
    gap: .7rem;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    margin-bottom: .5rem;
}

body.pro .lateral .marca .sello { width: 44px; height: 44px; }
body.pro .lateral .marca-texto { font-size: 1.05rem; }

/* ---------- Menu vertical ---------- */

body.pro .lateral .menu {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    margin: 0;
    flex: 1;
    align-items: stretch;
}

body.pro .lateral .menu a {
    gap: .7rem;
    padding: .62rem .7rem;
    border-radius: 9px;
    font-size: .95rem;
    color: rgba(255, 255, 255, .88);
    position: relative;
}

body.pro .lateral .menu a .ico { width: 21px; height: 21px; flex: none; opacity: .85; }

body.pro .lateral .menu a:hover {
    background: rgba(255, 255, 255, .10);
    color: #fff;
}

body.pro .lateral .menu a.activo {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-weight: 600;
}

body.pro .lateral .menu a.activo .ico { opacity: 1; color: var(--oro-claro); }

/* Marca dorada del renglon activo. */
body.pro .lateral .menu a.activo::before {
    content: "";
    position: absolute;
    left: -.8rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 62%;
    border-radius: 0 3px 3px 0;
    background: var(--oro-claro);
}

/* ---------- Quien esta dentro, al pie de la lateral ---------- */

body.pro .lateral .quien {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: .8rem .55rem 0;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    opacity: 1;
}

body.pro .lateral .quien-datos { flex: 1; min-width: 0; line-height: 1.25; }

body.pro .lateral .quien-datos strong {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.pro .lateral .quien-datos small {
    font-size: .72rem;
    color: var(--oro-claro);
    text-transform: uppercase;
    letter-spacing: .5px;
}

body.pro .lateral .quien button {
    min-height: 38px;
    padding: .35rem .75rem;
    font-size: .82rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    color: #fff;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}

body.pro .lateral .quien button:hover { background: rgba(255, 255, 255, .14); }

/* ---------- Herramientas de una lista ---------- */

.herramientas {
    display: flex;
    gap: .7rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}

.herramientas .filtrar { position: relative; flex: 1; min-width: 260px; }

.herramientas .filtrar input { padding-left: 2.5rem; }

.herramientas .filtrar .ico {
    position: absolute;
    left: .8rem; top: 50%;
    transform: translateY(-50%);
    width: 19px; height: 19px;
    color: var(--tinta-suave);
    pointer-events: none;
}

.conteo {
    font-size: .85rem;
    color: var(--tinta-suave);
    white-space: nowrap;
}

.conteo strong { color: var(--guinda); font-weight: 700; }

/* ---------- Columnas que se ordenan ---------- */

.tabla th[data-ordenar] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    padding-right: 1.4rem;
    position: relative;
}

.tabla th[data-ordenar]:hover { color: var(--guinda); }

.tabla th[data-ordenar]::after {
    content: "↕";
    position: absolute;
    right: .5rem;
    opacity: .32;
    font-size: .8rem;
}

.tabla th[data-orden="asc"]::after  { content: "↑"; opacity: 1; color: var(--oro); }
.tabla th[data-orden="desc"]::after { content: "↓"; opacity: 1; color: var(--oro); }

.sin-resultados td {
    text-align: center;
    color: var(--tinta-suave);
    font-style: italic;
    padding: 2rem 1rem;
}

/* ---------- Pestanas de la ficha ---------- */

.pestanas {
    display: flex;
    gap: .2rem;
    border-bottom: 2px solid var(--linea);
    margin-bottom: 1.3rem;
    overflow-x: auto;
}

.pestanas button {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: .7rem 1.05rem;
    min-height: 46px;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    color: var(--tinta-suave);
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    transition: color .16s ease, border-color .16s ease;
}

.pestanas button:hover { color: var(--guinda); }

.pestanas button[aria-selected="true"] {
    color: var(--guinda);
    border-bottom-color: var(--oro);
}

.pestanas .cuenta {
    font-size: .72rem;
    font-weight: 700;
    background: #eee9e2;
    color: #6b5b3e;
    border-radius: 999px;
    padding: .1rem .45rem;
    min-width: 1.35rem;
    text-align: center;
}

.pestanas button[aria-selected="true"] .cuenta { background: #f6ecd5; color: #7a5c15; }

/* Sin JavaScript se ven todos los bloques, uno tras otro: la ficha
   nunca queda inservible. El JS es quien esconde los que no tocan. */
.panel[hidden] { display: none; }

/* ---------- Pantallas angostas ---------- */

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

    .lateral {
        width: auto;
        height: auto;
        position: static;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: .6rem;
        padding: .7rem 1rem;
    }

    body.pro .lateral .marca { border-bottom: 0; margin: 0; padding: 0; }
    body.pro .lateral .marca-texto small { display: none; }

    body.pro .lateral .menu {
        flex-direction: row;
        flex: 1 1 100%;
        overflow-x: auto;
        gap: .2rem;
    }

    body.pro .lateral .menu a.activo::before { display: none; }

    body.pro .lateral .quien {
        border-top: 0;
        margin: 0 0 0 auto;
        padding: 0;
    }

    body.pro .lateral .quien-datos { display: none; }
    body.pro .envoltura { padding: 1.2rem 1rem 2.5rem; }
}