/* ================================================
   BMS Admin — Hoja de estilos del layout
   Usa variables y utilidades de Bruztrap siempre
   que sea posible. CSS propio solo para lo específico
   del layout admin que no cubre Bruztrap.
   ================================================ */

/* ------------------------------------------------
   LAYOUT RAÍZ
   ------------------------------------------------ */

.admin-body {
    overflow: hidden;
}

.admin-layout {
    display: grid;
    grid-template-rows: var(--admin-topbar-altura) 1fr;
    grid-template-columns: var(--admin-sidebar-ancho) 1fr;
    grid-template-areas:
        "topbar  topbar"
        "sidebar main";
    height: 100vh;
}

/* ------------------------------------------------
   VARIABLES PROPIAS DEL ADMIN
   (complementan las de Bruztrap, no las duplican)
   ------------------------------------------------ */

:root {
    --admin-topbar-altura:      56px;
    --admin-sidebar-ancho:      260px;
    --admin-sidebar-ancho-min:  60px;
    --admin-sidebar-bg:         var(--color-blanco);
    --admin-sidebar-texto:      var(--color-texto-secundario);
    --admin-sidebar-hover-bg:   var(--color-fondo-alt);
    --admin-sidebar-activo-bg:  var(--color-primario-claro);
    --admin-sidebar-activo-txt: var(--color-primario);
    --admin-topbar-bg:          var(--color-blanco);
    --admin-topbar-borde:       var(--color-borde);
    --admin-overlay-bg:         rgb(0 0 0 / 0.5);
    --admin-transicion:         var(--transicion-normal) var(--easing-default);
}

/* ------------------------------------------------
   TOPBAR
   ------------------------------------------------ */

.admin-topbar {
    grid-area: topbar;
    padding: 0 var(--espacio-4);
    background-color: var(--admin-topbar-bg);
    border-bottom: var(--borde-ancho) solid var(--admin-topbar-borde);
    box-shadow: var(--sombra-xs);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.admin-topbar__izquierda,
.admin-topbar__derecha {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
}

/* Logo */
.admin-topbar__logo {
    font-weight: var(--peso-bold);
    font-size: var(--texto-lg);
    color: var(--color-primario);
    text-decoration: none;
    white-space: nowrap;
}

/* Toggle sidebar */
.admin-sidebar-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: var(--espacio-2);
    background: none;
    border: none;
    border-radius: var(--radio-base);
    cursor: pointer;
    color: var(--color-texto);
    transition: background-color var(--admin-transicion);
    flex-shrink: 0;
}

.admin-sidebar-toggle:hover {
    background-color: var(--color-fondo-alt);
}

.admin-sidebar-toggle__linea {
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
    transition: transform var(--admin-transicion), opacity var(--admin-transicion);
}

/* Selector de sitio */
.admin-selector-sitio {
    width: 280px;
}

.admin-selector-sitio__select {
    height: 34px;
    padding: 0 var(--espacio-3);
    border: var(--borde-ancho) solid var(--color-borde);
    border-radius: var(--radio-base);
    background-color: var(--color-fondo);
    font-size: var(--texto-sm);
    color: var(--color-texto);
    cursor: pointer;
    width: auto;
    max-width: 400px;
}

/* Iconos topbar */
.admin-topbar__icono {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    border-radius: var(--radio-base);
    cursor: pointer;
    color: var(--color-texto-secundario);
    transition: background-color var(--admin-transicion), color var(--admin-transicion);
}

.admin-topbar__icono:hover {
    background-color: var(--color-fondo-alt);
    color: var(--color-texto);
}

.admin-topbar__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background-color: var(--color-peligro);
    color: var(--color-blanco);
    font-size: 10px;
    font-weight: var(--peso-bold);
    line-height: 16px;
    text-align: center;
    border-radius: var(--radio-full);
}

/* Menú usuario */
.admin-usuario {
    position: relative;
}

.admin-usuario__boton {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-1) var(--espacio-2);
    background: none;
    border: none;
    border-radius: var(--radio-base);
    cursor: pointer;
    color: var(--color-texto);
    font-size: var(--texto-sm);
    transition: background-color var(--admin-transicion);
}

.admin-usuario__boton:hover {
    background-color: var(--color-fondo-alt);
}

.admin-usuario__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-primario);
    color: var(--color-blanco);
    font-size: var(--texto-xs);
    font-weight: var(--peso-bold);
    flex-shrink: 0;
}

.admin-usuario__nombre {
    white-space: nowrap;
}

.admin-usuario__dropdown {
    position: absolute;
    top: calc(100% + var(--espacio-2));
    right: 0;
    min-width: 180px;
    background-color: var(--color-superficie);
    border: var(--borde-ancho) solid var(--color-borde);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-md);
    padding: var(--espacio-2) 0;
    z-index: var(--z-dropdown);
    display: none;
}

.admin-usuario__dropdown.abierto {
    display: block;
}

.admin-usuario__item {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    padding: var(--espacio-2) var(--espacio-4);
    font-size: var(--texto-sm);
    color: var(--color-texto);
    text-decoration: none;
    transition: background-color var(--admin-transicion);
    white-space: nowrap;
}

.admin-usuario__item:hover {
    background-color: var(--color-fondo-alt);
}

.admin-usuario__item--peligro {
    color: var(--color-peligro);
}

.admin-usuario__item--peligro:hover {
    background-color: var(--color-peligro-claro);
}

.admin-usuario__separador {
    height: var(--borde-ancho);
    background-color: var(--color-borde);
    margin: var(--espacio-2) 0;
}

/* ------------------------------------------------
   SIDEBAR
   ------------------------------------------------ */

.admin-sidebar {
    grid-area: sidebar;
    width: var(--admin-sidebar-ancho);
    background-color: var(--admin-sidebar-bg);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width var(--admin-transicion);
    position: sticky;
    top: var(--admin-topbar-altura);
    height: calc(100vh - var(--admin-topbar-altura));
    flex-shrink: 0;
}

/* Estado colapsado */
.admin-layout--colapsado {
    grid-template-columns: var(--admin-sidebar-ancho-min) 1fr;
}

.admin-layout--colapsado .admin-sidebar {
    width: var(--admin-sidebar-ancho-min);
}

/* Menú lateral: usa .menu-vertical de Bruztrap */

/* Estado colapsado del sidebar: usa .colapsado de Bruztrap (.menu-vertical) */

/* Solo ocultamos el nombre del usuario, que es específico del admin */
.admin-layout--colapsado .admin-usuario__nombre {
    opacity: 0;
    pointer-events: none;
    width: 0;
    overflow: hidden;
}

/* ------------------------------------------------
   MAIN
   ------------------------------------------------ */

.admin-main {
    grid-area: main;
    overflow-y: auto;
    background-color: var(--color-fondo);
    min-width: 0;
}

.admin-page-wrapper {
    padding: var(--espacio-5);
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Cabecera de página */
.admin-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--espacio-5);
    flex-wrap: wrap;
    gap: var(--espacio-3);
}

.admin-page-header__acciones {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    flex-shrink: 0;
}

.admin-page-titulo {
    font-size: var(--texto-2xl);
    font-weight: var(--peso-semibold);
    color: var(--color-texto);
    margin: 0 0 var(--espacio-1);
}

/* Breadcrumb: usa .breadcrumb de Bruztrap */

.admin-content {
    flex: 1;
}

/* ------------------------------------------------
   TARJETAS STAT (dashboard placeholder)
   ------------------------------------------------ */

.admin-tarjeta-stat {
    background-color: var(--color-superficie);
    border: var(--borde-ancho) solid var(--color-borde);
    border-radius: var(--radio-xl);
    padding: var(--espacio-5);
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    box-shadow: var(--sombra-xs);
}

.admin-tarjeta-stat__titulo {
    font-size: var(--texto-sm);
    color: var(--color-texto-secundario);
    font-weight: var(--peso-medio);
}

.admin-tarjeta-stat__valor {
    font-size: var(--texto-3xl);
    font-weight: var(--peso-bold);
    color: var(--color-texto);
    line-height: 1;
}

/* ------------------------------------------------
   OVERLAY (móvil)
   ------------------------------------------------ */

.admin-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: var(--admin-overlay-bg);
    z-index: calc(var(--z-fixed) - 1);
}

.admin-overlay.visible {
    display: block;
}

/* ------------------------------------------------
   RESPONSIVE — móvil
   ------------------------------------------------ */

@media (max-width: 767px) {

    .admin-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "topbar"
            "main";
    }

    .admin-sidebar {
        position: fixed;
        top: var(--admin-topbar-altura);
        left: 0;
        height: calc(100vh - var(--admin-topbar-altura));
        z-index: var(--z-fixed);
        transform: translateX(-100%);
        transition: transform var(--admin-transicion);
        width: var(--admin-sidebar-ancho) !important;
    }

    .admin-sidebar.abierto {
        transform: translateX(0);
    }

    .admin-page-wrapper {
        padding: var(--espacio-4);
    }

    /* En móvil no colapsamos, abrimos/cerramos */
    .admin-layout--colapsado .admin-sidebar {
        width: var(--admin-sidebar-ancho) !important;
    }

    /* En móvil el sidebar nunca colapsa a iconos */
    .admin-layout--colapsado .admin-sidebar .menu-vertical-enlace > span,
    .admin-layout--colapsado .admin-sidebar .menu-vertical-flecha,
    .admin-layout--colapsado .admin-sidebar .menu-vertical-cabecera {
        display: revert;
        opacity: 1;
    }

    .admin-usuario__nombre {
        display: none;
    }
}

/* ------------------------------------------------
   MÓDULO FOROS — estructura categoría/foro
   ------------------------------------------------ */

.foros-categoria {
    border: var(--borde-ancho) solid var(--color-borde);
    border-radius: var(--radio-xl);
    overflow: hidden;
    background-color: var(--color-superficie);
    box-shadow: var(--sombra-xs);
}

.foros-categoria__cabecera {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    background-color: var(--color-primario);
    color: var(--color-blanco);
}

.foros-categoria__nombre {
    font-weight: var(--peso-semibold);
    font-size: var(--texto-base);
    flex: 1;
}

.foros-categoria__acciones {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    flex-shrink: 0;
}

.foros-categoria__acciones .btn {
    background-color: rgb(255 255 255 / 0.15);
    border-color: rgb(255 255 255 / 0.3);
    color: var(--color-blanco);
}

.foros-categoria__acciones .btn:hover {
    background-color: rgb(255 255 255 / 0.25);
}

.foros-categoria__acciones .btn-outline-peligro {
    background-color: transparent;
    border-color: rgb(255 255 255 / 0.3);
    color: rgb(255 200 200);
}

.foros-categoria__acciones .btn-outline-peligro:hover {
    background-color: rgb(255 0 0 / 0.2);
}

.foros-categoria__vacio {
    padding: var(--espacio-4);
    color: var(--color-texto-secundario);
    font-size: var(--texto-sm);
    font-style: italic;
}

.foros-lista {
    display: flex;
    flex-direction: column;
}

.foros-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    padding: var(--espacio-3) var(--espacio-4);
    border-top: var(--borde-ancho) solid var(--color-borde);
    transition: background-color var(--transicion-rapida);
}

.foros-fila:hover {
    background-color: var(--color-fondo-alt);
}

.foros-fila--sub {
    padding-left: calc(var(--espacio-4) + var(--espacio-5));
    background-color: var(--color-fondo);
}

.foros-fila--sub:hover {
    background-color: var(--color-fondo-alt);
}

.foros-fila__contenido {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    flex: 1;
    min-width: 0;
}

.foros-fila__sub-icono {
    color: var(--color-texto-terciario);
    flex-shrink: 0;
}

.foros-fila__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.foros-fila__nombre {
    font-weight: var(--peso-medio);
    color: var(--color-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.foros-fila__desc {
    font-size: var(--texto-sm);
    color: var(--color-texto-secundario);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.foros-fila__badges {
    display: flex;
    gap: var(--espacio-1);
    flex-shrink: 0;
}

.foros-fila__acciones {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    flex-shrink: 0;
}

/* ========================================
   ESTILOS DE DEMO (páginas de componentes)
   ======================================== */

.demo-seccion {
    background-color: var(--color-superficie);
    border: var(--borde-ancho) solid var(--color-borde);
    border-radius: var(--radio-xl);
    padding: var(--espacio-6);
    margin-bottom: var(--espacio-5);
}

.demo-titulo {
    font-size: var(--texto-base);
    font-weight: var(--peso-semibold);
    color: var(--color-texto);
    margin: 0 0 var(--espacio-2);
}

.demo-desc {
    font-size: var(--texto-sm);
    color: var(--color-texto-secundario);
    margin: 0 0 var(--espacio-4);
}

/* Área de muestra: fondo cuadriculado suave para ver bordes y espacios */
.demo-muestra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-5);
    background-color: var(--color-fondo);
    border-radius: var(--radio-lg);
    margin-bottom: var(--espacio-4);
}

.demo-muestra--columna {
    flex-direction: column;
    align-items: stretch;
}

.demo-muestra--alinear-centro {
    align-items: center;
}

.demo-muestra--alinear-inicio {
    align-items: flex-start;
}

/* Bloque de código de ejemplo (el que muestra el HTML de uso) */
.demo-codigo {
    margin: 0;
    padding: var(--espacio-4);
    background-color: var(--gris-900);
    color: var(--gris-200);
    font-family: var(--fuente-mono);
    font-size: var(--texto-sm);
    line-height: var(--linea-relajada);
    border-radius: var(--radio-lg);
    overflow-x: auto;
    tab-size: 4;
}

.demo-codigo code {
    padding: 0;
    background: none;
    color: inherit;
    border: none;
    border-radius: 0;
    font-size: inherit;
}


/* ------------------------------------------------
   MÓDULO BLOG
   ------------------------------------------------ */

.lista-revisiones { max-height: 280px; overflow-y: auto; }
.revision-item { border-bottom: var(--borde-ancho) solid var(--color-borde); }
.revision-item:last-child { border-bottom: none; }
.revision-btn {
    display: block; width: 100%; text-align: left;
    padding: var(--espacio-2) var(--espacio-3);
    background: none; border: none; cursor: pointer;
    transition: background-color var(--transicion-rapida);
}
.revision-btn:hover { background-color: var(--gris-50); }
.revision-titulo { display: block; font-size: var(--texto-sm); font-weight: var(--peso-medio); color: var(--color-texto); }
.revision-meta { display: block; font-size: var(--texto-xs); color: var(--color-texto-secundario); margin-top: 2px; }

.revision-pre {
    background: var(--gris-50); border: var(--borde-ancho) solid var(--color-borde);
    border-radius: var(--radio-md); padding: var(--espacio-3);
    font-size: var(--texto-xs); font-family: monospace;
    white-space: pre-wrap; word-break: break-all;
    max-height: 400px; overflow-y: auto; margin: 0;
}
.diff-leyenda { display: flex; gap: var(--espacio-4); margin-bottom: var(--espacio-2); font-size: var(--texto-xs); }
.diff-add    { color: var(--color-exito-oscuro, #166534); background: var(--color-exito-claro, #dcfce7); padding: 1px 6px; border-radius: 3px; }
.diff-remove { color: var(--color-peligro-oscuro, #991b1b); background: var(--color-peligro-claro, #fee2e2); padding: 1px 6px; border-radius: 3px; }
#revisionDiff .diff-add    { display: block; background: #f0fdf4; color: #166534; }
#revisionDiff .diff-remove { display: block; background: #fef2f2; color: #991b1b; }

.tabs { display: flex; gap: var(--espacio-2); border-bottom: var(--borde-ancho) solid var(--color-borde); }
.tab {
    padding: var(--espacio-2) var(--espacio-3);
    background: none; border: none; border-bottom: 2px solid transparent;
    font-size: var(--texto-sm); cursor: pointer; color: var(--color-texto-secundario);
    margin-bottom: -1px;
}
.tab:hover { color: var(--color-texto); }
.tab-activo { color: var(--color-primario); border-bottom-color: var(--color-primario); font-weight: var(--peso-medio); }

/* ------------------------------------------------
   MÓDULO CHANGELOG
   ------------------------------------------------ */

.cl-registro__badge {
    min-width: 4.5rem;
}

/* ------------------------------------------------
   MÓDULO CHAT
   ------------------------------------------------ */

/* El page-wrapper del chat no necesita padding inferior ni scroll propio:
   el chat gestiona su propio scroll internamente */
.bc-page-chat .admin-page-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
}

.bc-card-modulo {
    flex: 1;
    padding: 0;
    overflow: hidden;
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

/* Lógica de visibilidad para modo completo */
.bc-root--completo .bc-panel-lista.bc-oculto {
    display: flex !important;
}
.bc-root--completo .bc-conversacion:not(.bc-oculto) ~ .bc-vacio {
    display: none !important;
}
.bc-root--completo .bc-btn-volver {
    display: none !important;
}

/* ------------------------------------------------
   MÓDULO SOPORTE — conversación de ticket
   ------------------------------------------------ */

.ticket-conv-mensajes {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3);
    max-height: 55vh;
    overflow-y: auto;
    padding: var(--espacio-4);
    background: var(--gris-50);
    border: var(--borde-ancho) solid var(--color-borde);
    border-radius: var(--radio-lg);
}

.ticket-msg {
    display: flex;
    flex-direction: column;
    max-width: 78%;
    gap: var(--espacio-1);
}

.ticket-msg--admin {
    align-self: flex-end;
    align-items: flex-end;
}

.ticket-msg--usuario {
    align-self: flex-start;
    align-items: flex-start;
}

.ticket-msg__meta {
    font-size: var(--texto-xs);
    color: var(--color-texto-terciario);
    padding: 0 var(--espacio-1);
}

.ticket-msg__burbuja {
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-xl);
    font-size: var(--texto-sm);
    line-height: var(--linea-relajada);
    word-break: break-word;
}

.ticket-msg__burbuja p:first-child { margin-top: 0; }
.ticket-msg__burbuja p:last-child  { margin-bottom: 0; }

.ticket-msg--admin .ticket-msg__burbuja {
    background: var(--color-primario);
    color: var(--color-blanco);
    border-bottom-right-radius: var(--radio-sm);
}

.ticket-msg--usuario .ticket-msg__burbuja {
    background: var(--color-blanco);
    color: var(--color-texto);
    border: var(--borde-ancho) solid var(--color-borde);
    border-bottom-left-radius: var(--radio-sm);
}

/* ------------------------------------------------
   MÓDULO LOG
   ------------------------------------------------ */

.log-contenido {
    white-space: pre-wrap;
    word-break: break-all;
    font-family: var(--fuente-mono);
    font-size: var(--texto-sm);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--color-fondo-alt);
    border: var(--borde-ancho) solid var(--color-borde);
    border-radius: var(--radio-base);
    padding: var(--espacio-3);
    margin: 0;
}

/* ------------------------------------------------
   Etiqueta de clase junto al heading en la demo de tipografía */
.demo-tag {
    display: inline-block;
    font-size: var(--texto-xs);
    font-weight: var(--peso-normal);
    font-family: var(--fuente-mono);
    color: var(--color-texto-terciario);
    background-color: var(--color-fondo-alt);
    border: var(--borde-ancho) solid var(--color-borde);
    border-radius: var(--radio-base);
    padding: 0.1em 0.4em;
    vertical-align: middle;
    margin-left: var(--espacio-2);
}