body {
    margin: 0px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--surface-b);
    font-family: var(--font-family);
    font-weight: normal;
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.baner {
    max-height: 95px;
    width: 100%;
    background: -webkit-linear-gradient(90deg, #0277BD, #0277BD, #ECECEC, #ECECEC, #0277BD, #0277BD);
    background: linear-gradient(90deg, #0277BD, #0277BD, #ECECEC, #ECECEC, #0277BD, #0277BD);
}

.panelGeneral {
    background-color: var(--surface-b);
}

/* .footer { */
/* 	float: left; */
/* 	width: 100%; */
/* 	height: 60px; */
/* 	bottom: 0; */
/* 	background-color: #0277BD; */
/* 	color: white; */
/* 	background-color: #0277BD; */
/* 	-webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1); */
/* 	-moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1); */
/* 	box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1); */
/* 	-webkit-font-smoothing: antialiased; */
/* 	-moz-osx-font-smoothing: grayscale; */
/* 	font-weight: 500; */
/* 	color: grayligth; */
/*    	font-size: 1.3em; */
/* } */

.ui-layout-unit {
    background-color: var(--surface-b) !important;
}

.ui-button {
    /*max-height: 30px !important;*/
}

body .ui-button.ui-button-icon-only .ui-button-text {
    padding: 0.3rem !important;
}


.ui-selectonemenu {
    max-height: 30px !important;
    min-height: 30px !important;
}

.ui-selectonemenu .ui-selectonemenu-label {
    color: #77797d;;
    font-size: 12px !important;
}

li.ui-selectonemenu-item.ui-selectonemenu-list-item.ui-corner-all {
    color: #495057;
    font-size: 12px !important;
}

body .ui-menu.ui-menubar > .ui-menu-list > .ui-menuitem {
    width: 100% !important;
}

body .ui-selectcheckboxmenu .ui-selectcheckboxmenu-label-container {
    min-height: 28px !important;
    max-height: 28px !important;
    margin: 0px !important;
    color: #495057;
    font-size: 12px !important;
}

.hasDatepicker {
    min-height: 30px !important;
    max-height: 30px !important;
    color: #495057;
    font-size: 12px !important;
}

body .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-items .ui-selectcheckboxmenu-item {
    font-size: 12px !important;
    padding: 1px !important;
}

.ui-selectcheckboxmenu-label {
    font-size: 12px !important;
    color: #77797d;
}

body .ui-panelgrid .ui-panelgrid-cell {
    padding: 0 !important;
}

/* Que todos los campos ocupen el ancho completo */
.ui-inputtext,
.ui-password,
.ui-password input,
.ui-commandbutton,
.g-recaptcha {
    width: 100%;
    box-sizing: border-box;
    max-height: 30px !important;
    min-height: 30px !important;
    font-size: 13px !important;
}

/* Ajusta el texto al inicio */
span.ui-button-text {
    order: 1;
    margin-top: -2px !important;
}

body .ui-button.ui-button-text-icon-left .ui-button-text,
body .ui-button.ui-button-text-icon-right .ui-button-text {
    padding: 5px 12px 4px 25px;
}

/*ui-button-icon-left*/


/* BOTONERA */
.botonera {
    display: block;
    /*     margin: 10px 0 20px; */
    margin-top: 15px !important;
    text-align: center;
    /*     padding: 10px 10px; */
}

.botoneraVertical {
    display: block;
    margin: 10px 0 20px;
    text-align: center;
    padding: 10px 10px;
}

.inputModalVertical {
    width: 100% !important;
    margin-bottom: 10px !important;
    border-radius: 2px;
    font-size: 15px !important;
    font-weight: normal !important;
}

.botonera * {
    display: inline-block;
    margin: 0 3px;
}

/* Aumenta el ancho mínimo de los submenús desplegables */
.ui-menu-child {
    min-width: max-content; /* Puedes ajustar este valor */
    white-space: nowrap; /* Previene que el texto se corte en 2 líneas */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    line-height: 0.8 !important;
}

.ui-menu .ui-menuitem-link {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 12px;
    padding-right: 12px;
    line-height: 0.8 !important;
}


/* Quita flecha solo a los submenús marcados con no-arrow */
.primerMenu > a > span.ui-icon-triangle-1-e {
    display: none !important;
}

.primerMenu > a > span.ui-icon-triangle-1-e {
    display: none !important;
}

/* para que no se vea tan alto el encabezaxdo de los panel */
.ui-panel-titlebar {
    padding: 6px !important;
}

/* para que no tenga tanta separación entre los campos con las filas inferiores */
.field {
    margin-bottom: 5px !important;
}


.user-section {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
}

.flex.baner {
    justify-content: space-between;
    align-items: center;
}

.footer-icon {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: right;
    font-family: 'socialicoregular';
    font-size: 40px;
    height: 40px !important;
    line-height: 40px;
    float: right;
    opacity: 0.5;
    cursor: pointer;
    float: right;
    color: white;
    opacity: 1;
    padding-top: 2px;
    width: 30px !important;
    max-width: 30px !important;
}

.footer-shadow {
    box-shadow: 0 -8px 4px rgba(0, 0, 0, 0.1);
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Tamaño de letra general de la app (selector junto al de tema, en el panel
   de configuración del header). Escala todo lo que use rem/em: textos e
   iconos de PrimeFaces/PrimeIcons incluidos. */
html.font-size-sm {
    font-size: 13px;
}

html.font-size-md {
    font-size: 15px;
}

html.font-size-lg {
    font-size: 17px;
}

/* overflow:hidden evita el doble scroll: solo .app-content debe scrollear */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* fallback para navegadores sin soporte de dvh */
    height: 100dvh; /* En mobile, 100vh se calcula contra el viewport más grande posible (barra de
        direcciones oculta), más alto que lo que realmente se ve con la barra visible: el contenido
        del final (ej. el input del chat) queda recortado por el overflow:hidden de acá sin forma de
        llegar a él. 100dvh sí se ajusta al viewport visible real. */
    overflow: hidden;
}

.app-header {
    /*     background: #1976d2; */
    color: black;
    /*     flex-shrink: 0; */
    max-width: 100% !important;
}

/* Únicos dos accesos que quedan fuera del dashboard (ver template.xhtml): Inicio y Salir. */
.header-nav-link {
    color: var(--primary-color);
    font-size: 1.4rem;
    text-decoration: none;
}

.header-nav-link:hover {
    opacity: 0.75;
}

.app-content {
    flex: 1; /* ocupa todo el espacio disponible */
    overflow-y: auto; /* solo aquí se hace scroll si el contenido crece */
    background: var(--surface-b) !important;;
    box-sizing: border-box;
}

.app-footer {
    color: #222;
    flex-shrink: 0;
    transition: box-shadow 0.1s ease;
    box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.08), 0px -2px 4px rgba(0, 0, 0, 0.1), 0px -2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

.app-footer:hover {
    box-shadow: 0px -1px 8px rgba(0, 0, 0, 0.08), 0px -7px 4px rgba(0, 0, 0, 0.1), 0px -4px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}


/* Fuerza que las columnas source y target sean iguales */
.ui-picklist .ui-picklist-list {
    width: 100% !important;
    box-sizing: border-box;
}

/* Ajusta la tabla general del PickList */
.ui-picklist table {
    width: 100% !important;
}

/* Alinea los filtros y listas */
.ui-picklist .ui-picklist-filter-container {
    width: 100% !important;
    display: block;
    box-sizing: border-box;
}

/* Asegura que el target y source tengan la misma altura */
.ui-picklist .ui-picklist-source,
.ui-picklist .ui-picklist-target {
    flex: 1; /* cada lado ocupa la misma cantidad de espacio */
    min-width: 200px;
}

/* Ajusta el área de botones del centro */
.ui-picklist .ui-picklist-buttons {
    width: 50px; /* o lo que necesites */
    text-align: center;
}


/*corrige los labels flotantes para que se centren en el input*/
.ui-float-label > label {
    margin-top: -12px !important;
}

/*
INPUTMODAL
*/
.ui-selectonemenu.inputModal {
    width: 100% !important;
}

input.hasDatepicker.inputModal {
    width: 50% !important;
}

.inputForm,
.inputModal {
    margin-bottom: 10px !important;

    font-size: 14px !important;
    font-weight: bold !important;
}

.buttonForm {
    margin-bottom: 10px !important;
    margin-left: 10px !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.selectForm {
    font-size: 14px !important;
    font-weight: bold !important;
    height: 30px;
}

.ui-state-default.inputForm,
.ui-state-default.inputModal {
    height: 30px;
    font-weight: normal !important;
}

input.inputModal {
    border: 1px solid #a39b9ba6 !important;
}

.ui-selectbooleanbutton.inputModal,
input.inputModal {
    width: 100% !important;
}

select.inputModal,
input.inputModal {
    width: 100% !important;
    height: 30px !important;
    border: 1px solid lightgrey !important;
    border-radius: 2px;
}

/* Fuente más pequeña en toda la tabla */
.dt-compact.ui-datatable {
    font-size: 12px !important;
}

/* el contenedor puede scrollear horizontal */
.dt-compact .p-datatable-wrapper {
    overflow-x: auto;
}

/* Encabezados */
.dt-compact.ui-datatable .ui-datatable-thead > tr > th {
    padding: 7px 0px !important;
    white-space: nowrap;
    /*   line-height: 1.2 !important; */
}

/* Celdas del cuerpo */
.dt-compact.ui-datatable .ui-datatable-data > tr > td {
    padding: 0px 0px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    vertical-align: top !important;
}

/* Filtros en header (si usas filterBy) */
.dt-compact.ui-datatable .ui-column-filter,
.dt-compact.ui-datatable .ui-inputfield {
    height: 30px !important;
    padding: 0px 0px !important;
    font-size: 12px !important;
    width: 99.9% !important;
}

.ui-calendar > .ui-inputfield {
    padding: 5px 5px !important;
}


.ui-fluid .ui-calendar {
    display: inline;
}

input.hasDatepicker.inputModal {
    width: 100% !important;
}

body .ui-datepicker .ui-datepicker-calendar td {
    padding: 0px !important;
}

.ui-datepicker-calendar > * {
    padding: 1px !important;
}


body .ui-fluid .p-datepicker .ui-datepicker-trigger.ui-button {
    max-height: 30px !important;
}

body .ui-fluid .ui-trigger-calendar input.hasDatepicker {
    width: 95% !important;
}

select {
    background: var(--surface-0);
    min-height: 30px !important;
    max-height: 30px !important;
    border-color: var(--gray-500);
    border-radius: 4px !important;
}

select > * {
    background: var(--surface-b);
}

/* Paginador compacto */
.dt-compact.ui-datatable .ui-paginator .ui-paginator-page,
.dt-compact.ui-datatable .ui-paginator .ui-paginator-next,
.dt-compact.ui-datatable .ui-paginator .ui-paginator-prev,
.dt-compact.ui-datatable .ui-paginator .ui-paginator-first,
.dt-compact.ui-datatable .ui-paginator .ui-paginator-last {
    min-width: 26px !important;
    height: 26px !important;
    line-height: 26px !important;
    padding: 1px 2px !important;
    margin-top: 4px !important;
    font-size: 12px !important;
}

.dt-compact.ui-datatable .ui-paginator {
    padding: 0 !important;
}

body .ui-paginator .ui-paginator-rpp-options {
    padding: 6px !important;
}

.ui-datatable thead th {
    text-align: center !important;
}

/* Alinear arriba todas las celdas del datatable: con columnas "wrap-column" (texto
   largo que hace wrap a varias líneas) la altura de la fila la define la celda más
   larga, y sin esto el resto de columnas quedaba centrada verticalmente "flotando"
   en medio de la fila (se veía roto/desalineado). Selector real de PrimeFaces en
   modo clásico (temas ui-* como saga-blue/vela-blue) es .ui-datatable, no .p-datatable. */
.ui-datatable .ui-datatable-data > tr > td {
    vertical-align: top !important;
}

/* Evitar márgenes y asegurar ancho dentro del editor */
.p-cell-editor .p-cell-editor-input > * {
    margin: 0 !important;
    width: 100%;
    padding: 0 !important;
}


/* Ajustar altura del selectOneMenu */
.dt-compact .ui-selectonemenu {

    font-size: 12px !important;
    height: 30px !important;
    /*     line-height: 22px !important; */
    width: 100% !important;
}

.dt-compact .ui-selectonemenu .ui-selectonemenu-label {
    margin-top: 5px !important;
    /*     margin-bottom: 4px !important; */
}

/* Ajustar el botón desplegable */
.dt-compact .ui-selectonemenu-trigger {
    height: 30px !important;
}

/* Ajustar altura de opciones del menú desplegable */
.dt-compact .ui-selectonemenu-items .ui-selectonemenu-item {
    font-size: 11px !important;
    padding: 6px 4px !important;
}

.dt-compact .ui-inputgroup-addon {
    height: 30px !important;
}

/* Compactar el selectBooleanButton */
.dt-compact .ui-selectbooleanbutton {
    font-size: 13px !important;
    /*     padding: 4px 10px !important; */
    margin-top: 0px !important;
    height: 30px !important;
    line-height: 20px !important;
}

.dt-compact .ui-selectbooleanbutton .ui-selectonemenu-label {
    margin-top: 5px !important;
    /*     margin-bottom: 4px !important; */
}


/* Con PrimeFlex o Bootstrap */
@media (max-width: 768px) {
    .btn-responsive .ui-button-text, /* PF <= 8 */
    .btn-responsive .p-button-label { /* PF 9+ */
        display: none;
    }

    /* Opcional: hacer botón cuadrado */
    .btn-responsive {
        padding: 0.5rem;
        width: 40px !important;
        min-width: 40px !important;
        justify-content: center;
    }
}

.ui-layout-resizer-north-open {
    display: none !important;
}
.ui-layout-resizer-south-open {
    display: none !important;
}

.map {width: 100%; height: 100%; position: relative !important; left: 0; z-index: 1; top:0;} 

.layout-container {
    height: 100%;       /* ← CLAVE */
    overflow: hidden;    /* evita doble scroll */
}

.firstCol {
    background: pink !important;
}

.ret {
    background-color: pink !important;
}

.ui-datatable .ui-datatable-data .styleRetraso {
   	background-color: pink !important;
}

.ui-datatable .ui-datatable-data .styleRetraso2 {
   	background-color: #F6FFB4 !important;
}  

.ui-datatable .ui-datatable-data .stylePedidoMovil {
   	background-color: pink !important;
}

.firstColColored .firstCol {
    background: pink !important;
}

.ui-chip.custom-chip {
    background: var(--primary-color);
    color: var(--primary-color-text);
}

body .ui-panel .ui-panel-content {
    padding: 6px !important;
}

.btnCrp {
    height:29px;
}
.ui-selectonemenu-label  {
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    max-width: 100%; /* ajusta según tu diseño */
    display: block !important;
}



.chat-message{
    display:grid;
    grid-template-columns:40px 1fr;
    gap:12px;
    margin-bottom:20px;
}

.chat-header{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    color:#1565C0;
}

.chat-header .pi{
    font-size:1.1rem;
}

.chat-body{
    line-height:1.6;
}

.app-chat-layout{
    gap:16px;
    align-items:flex-start;
    width:100%;
    height:100%;
}

.app-chat-sidebar{
    width:260px;
    min-width:260px;
    max-height:600px;
    overflow-y:auto;
    padding:8px;
    flex-shrink:0;
    background-color:var(--surface-card);
    border-radius:6px;
}

/* Estas dos reglas acotan la altura del panel del chat y lo convierten en columna flex,
   lo que le da a .chat-history-wrap (flex:1 1 auto más abajo) una altura real contra la
   cual medirse: sin esto, el panel crece con el contenido en vez de scrollear internamente,
   y el input queda al final de una página larga en vez de fijo abajo. Sin escopar a
   .app-chat-layout porque .chat-window también se usa en capacitacion_chat.xhtml (chat del
   alumno), que no tiene ese wrapper de sidebar. */
.chat-window{
    height: 100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.chat-window .ui-panel-content{
    width:100%;
    height: 100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

/* Dentro del layout de dos columnas (sidebar + chat) del chat de prueba del admin
   (agente_ia.xhtml), el panel debe repartirse el ancho de la fila con la sidebar. */
.app-chat-layout .chat-window{
    flex:1 1 0%;
    min-width:0;
}

/* Historial de mensajes: ocupa todo el espacio disponible arriba del input
   y scrollea internamente (el input nunca se mueve de la parte inferior). */
.chat-history-wrap{
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
    display:flex;
}

/* Bloque del input + botón "Enviar": siempre pegado abajo del chat,
   como en Claude, en vez de arriba del historial. */
.chat-input-area{
    flex-shrink:0;
    border-top:1px solid rgba(0,0,0,0.08);
    padding:12px 16px;
    margin-top:8px;
}

/* Opciones seleccionables que el mentor puede ofrecer en vez de texto libre (ver
   CapacitacionStreamController / capacitacion-chat.js). Botones planos (no PrimeFaces),
   generados dentro del HTML persistido del mensaje. */
.chat-options{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}

.chat-option-btn{
    padding:8px 16px;
    border-radius:20px;
    border:1px solid var(--primary-color);
    background:transparent;
    color:var(--primary-color);
    cursor:pointer;
    font-size:0.9rem;
    font-family:inherit;
}

.chat-option-btn:hover:not(:disabled){
    background:var(--primary-color);
    color:#fff;
}

/* La opción "Continuar" que el mentor ofrece tras corregir una respuesta se destaca como
   acción sugerida por defecto. */
.chat-option-btn.chat-option-default{
    background:var(--primary-color);
    color:#fff;
}

.chat-option-btn:disabled{
    opacity:0.5;
    cursor:default;
}

#chatShowFreeText{
    cursor:pointer;
    text-decoration:underline;
}

/* El input y el botón "Enviar" van en la misma fila, centrados con un ancho
   máximo (igual que el historial), en vez del botón debajo del input. */
.chat-input-row{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    max-width:80%;
    margin:0 auto;
}

.chat-input-text{
    flex:1 1 auto;
    min-width:300px;
}

.chat-send-btn{
    flex-shrink:0;
}

/* El ui-inputgroup que envuelve el input + botón "Enviar" debe ocupar todo
   el ancho de .chat-input-row (80%, igual que el scrollpanel del historial),
   y el botón debe medir lo mismo de alto que el input en vez del alto por
   defecto (más grande) que trae un ui-button de PrimeFaces. */
.chat-input-row .ui-inputgroup{
    display:flex;
    width:100%;
}

.chat-input-row .ui-inputgroup .ui-inputtext{
    flex:1 1 auto;
    min-width:0;
}

.chat-input-row .ui-inputgroup .ui-button{
    flex-shrink:0;
    position:relative;
    width:36px;
    min-width:36px;
    min-height:30px;
    max-height:30px;
    padding:0;
    box-sizing:border-box;
}

.conversation-list{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.conversation-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-radius:6px;
    padding:4px 8px;
}

.conversation-item.active{
    background-color:rgba(21,101,192,0.12);
}

.conversation-title{
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    cursor:pointer;
}

.conversation-menu-btn.ui-button{
    flex-shrink:0;
    opacity:0;
    transition:opacity 0.15s ease;
    position:relative;
    width:24px;
    height:24px;
    min-width:24px;
    padding:0 !important;
    border:none;
    background:transparent;
    box-shadow:none;
}

.conversation-menu-btn.ui-button .ui-button-icon-left{
    font-size:0.8rem;
}

.conversation-menu-btn.ui-button:enabled:hover{
    background:rgba(0,0,0,0.06);
}

.conversation-item:hover .conversation-menu-btn,
.conversation-item.active .conversation-menu-btn{
    opacity:1;
}

.conversation-menu-delete .ui-menuitem-link,
.conversation-menu-delete .ui-menuitem-text,
.conversation-menu-delete .ui-menuitem-icon{
    color:#d32f2f !important;
}

.chat-feedback{
    display:flex;
    align-items:center;
    gap:4px;
    margin-top:8px;
}

.chat-feedback .feedback-btn.voted{
    color:#1565C0;
}

.typing-dots{
    display:inline-flex;
    align-items:center;
    gap:4px;
}

.typing-dots span{
    width:6px;
    height:6px;
    border-radius:50%;
    background-color:currentColor;
    opacity:0.4;
    animation:typing-dot-bounce 1.2s infinite ease-in-out;
}

.typing-dots span:nth-child(2){
    animation-delay:0.2s;
}

.typing-dots span:nth-child(3){
    animation-delay:0.4s;
}

@keyframes typing-dot-bounce{
    0%, 60%, 100%{
        opacity:0.4;
        transform:translateY(0);
    }
    30%{
        opacity:1;
        transform:translateY(-3px);
    }
}

.login-card{
    background-color:#fff;
    /* Sin esto, el padding de p-5 (3rem) se suma al width:360px fijo en vez de
       repartirse dentro de él, y la tarjeta termina más ancha que el viewport
       en celulares (los inputs quedan cortados contra el borde derecho). */
    box-sizing:border-box;
}

.login-message{
    display:block;
    margin-bottom:12px;
    padding:8px 12px;
    border-radius:6px;
    font-size:0.9rem;
}

.login-message-error{
    background-color:#fdecea;
    color:#b71c1c;
}

.login-message-info{
    background-color:#e8f5e9;
    color:#1b5e20;
}

/* Botón "mostrar/ocultar contraseña" (login.xhtml): el input.inputModal ya tiene
   width:100% !important, así que el botón va superpuesto encima vía position:absolute
   dentro de un wrapper relative, en vez de competir por el ancho del input. */
.password-field{
    position:relative;
}

.password-field input.inputModal{
    padding-right:2.2rem !important;
}

.password-toggle{
    position:absolute;
    top:0;
    right:0;
    height:30px;
    width:2.2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    cursor:pointer;
    color:#6b7280;
    padding:0;
}

.password-toggle:hover{
    color:#374151;
}

.table-scroll-wrapper{
    width:100%;
    overflow-x:auto;
}

/* La tabla, dentro del wrapper con scroll, necesita un ancho mínimo propio
   para que las columnas no se compriman a casi nada en pantallas angostas;
   el que se desplace es el wrapper, no las columnas individuales. */
.table-scroll-wrapper .ui-datatable-tablewrapper{
    min-width:640px;
}

/* PrimeFaces no oculta el texto de fallback ("ui-button") en botones que
   solo tienen ícono y ningún value (el pencil de editar, los íconos del
   footer); el tema solo le agrega padding, no display:none. Sin esto el
   texto queda invisible-ish superpuesto al ícono en desktop, pero se nota
   apenas el layout tiene más espacio (como pasó en mobile con el footer). */
.ui-button-icon-only .ui-button-text{
    display:none !important;
}

/* El ícono de estos botones va con position:absolute (así lo centra el tema),
   por lo que NO aporta ancho al botón; al ocultar el texto de arriba no
   quedaba nada dándole tamaño y el botón colapsaba a una línea. Se fuerza
   un tamaño cuadrado explícito para que no dependa de eso. */
.ui-button-icon-only{
    width:2.357rem !important;
    height:2.357rem !important;
    min-width:2.357rem !important;
    min-height:2.357rem !important;
    position:relative !important;
}

.ui-button-icon-only .ui-icon{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    margin-top:-0.5rem !important;
    margin-left:-0.5rem !important;
}

/* --- Responsivo: tablet/celular ------------------------------------------ */
@media (max-width: 768px){

    /* El sidebar de conversaciones pasa a apilarse arriba del chat en vez
       de ir al costado, y deja de tener ancho fijo. */
    .app-chat-layout{
        flex-direction:column;
    }

    .app-chat-sidebar{
        width:100%;
        min-width:0;
        max-height:220px;
    }

    /* En mobile el input+botón ocupan todo el ancho disponible en vez del
       80% centrado que se usa en pantallas grandes. */
    .chat-input-row{
        max-width:100%;
    }

    /* El historial de mensajes usaba 80% de ancho para verse centrado en
       pantallas grandes; en mobile conviene aprovechar todo el ancho.
       .app-chat-layout es el chat de prueba del admin (agente_ia.xhtml);
       .chat-history-wrap es el chat real de capacitación del alumno
       (capacitacion_chat.xhtml), que no comparte ese wrapper. */
    .app-chat-layout .ui-scrollpanel,
    .chat-history-wrap .ui-scrollpanel{
        width:100% !important;
    }

    /* Los diálogos (renombrar, voto, nuevo usuario) tienen ancho fijo en
       píxeles que puede superar el ancho de un celular. */
    .ui-dialog{
        width:92vw !important;
        max-width:92vw !important;
    }

    /* Footer: las dos mitades (copyright / redes sociales) se apilan. */
    .app-footer .flex.footer{
        flex-direction:column;
        text-align:center;
        gap:8px;
    }

    .app-footer .col-6{
        width:100% !important;
        justify-content:center !important;
    }

    /* Panel de configuración (correo/perfil/ambiente/tema) del header: tenía
       ancho fijo en rem que puede superar el ancho del celular. */
    .ui-overlaypanel .formgrid.w-20rem{
        width:85vw !important;
        max-width:320px;
    }

    /* Mantenedor de usuarios: en celular se ocultan las columnas menos
       críticas para que la tabla quepa mejor y el scroll horizontal sea
       más corto (Correo/Perfil/Activo/editar/eliminar siguen visibles). */
    .col-hide-mobile{
        display:none !important;
    }
}

.wrap-column {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Dashboard de inicio: botones cuadrados grandes con ícono al medio.
   El centrado y el layout flex se resuelven con utilidades de PrimeFlex
   directamente en la vista (flex, justify-content-center, gap-4, etc). */
.home-hero {
    min-height: 60vh;
}

/* Tiles del dashboard (home.xhtml): hasta 4 por fila en PC, 2 en celular. Antes el
   flex-wrap ocupaba todo el ancho disponible y en pantallas grandes entraban 5 o 6 por
   fila, lo que hacía que el menú se leyera como una franja larga.

   El tope de 4 sale de acotar el ancho del contenedor: 952px = 4 × 220 + 3 × 24, o sea
   justo lo que ocupan 4 tiles con su gap, y una quinta ya no entra. Sigue siendo flex y
   no grid a propósito: con grid habría que declarar 4 columnas fijas y el dashboard del
   participante (1 a 3 tiles) quedaría alineado a la izquierda contra columnas vacías,
   mientras que flex-wrap + justify-content:center centra cualquier cantidad. */
.dashboard-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
    max-width: 952px;
    margin: 0 auto;
    padding: 24px 0;
}

/* Celular: gap más chico, y tope de 2 tiles de ancho para que en tablet chico tampoco
   entre una tercera. El ancho de la tile se ajusta más abajo, junto a su regla base. */
@media (max-width: 768px) {
    .dashboard-tiles {
        gap: 16px;
        max-width: 460px;
    }
}

.dashboard-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    /* aspect-ratio en vez de height fijo: en celular el ancho es porcentual y así la tile
       se mantiene cuadrada al achicarse. */
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    background-color: var(--surface-card);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: var(--text-color);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    overflow: hidden;
}

/* Celular: exactamente 2 por fila. La tile deja los 220px fijos y pasa a ocupar la mitad
   del ancho disponible; se descuentan 10px y no los 8px justos del medio gap para dejar
   holgura a los anchos fraccionarios, que si no hacen saltar la segunda tile de fila.
   Va después de la regla base porque tiene la misma especificidad: un media query no
   suma especificidad, gana la que se declara al final. */
@media (max-width: 768px) {
    .dashboard-tile {
        width: calc(50% - 10px);
    }
}

.dashboard-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: var(--text-color);
}

/* !important necesario: el tema PrimeFaces define "body .pi{font-size:1rem}",
   más específico que una sola clase, y gana sobre este selector si no se fuerza.
   El clamp reemplaza al 10rem fijo: ese tamaño solo calzaba con la tile de 220px, y
   ahora la tile se achica en pantallas intermedias (el ícono se desbordaba y quedaba
   recortado por el overflow:hidden). 10rem sigue siendo el máximo, o sea que en PC
   con la tile a tamaño completo se ve igual que antes. */
.dashboard-tile-icon {
    font-size: clamp(4rem, 13vw, 10rem) !important;
    line-height: 1;
    color: var(--primary-color);
    margin-top: 10px;
}

.dashboard-tile-label {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    padding: 0 2px 2px 2px;
}

/* En celular la tile mide cerca de la mitad del ancho de pantalla, así que el ícono se
   mide contra el viewport para no comerse el label. */
@media (max-width: 768px) {
    .dashboard-tile-icon {
        font-size: clamp(3rem, 22vw, 7rem) !important;
    }
}

.dashboard-tile-disabled {
    opacity: 0.65;
    cursor: default;
    pointer-events: none;
}

.dashboard-tile-disabled .dashboard-tile-icon {
    color: #16a34a;
}

/* La tile de "Capacitaciones Habilitadas/Finalizadas" es un p:commandButton (dispara una
   acción, no navega): PrimeFaces le agrega sus propias clases de botón (borde/fondo del
   tema) que hay que resetear para que se vea igual que el resto de las tiles, que son
   h:outputLink. */
/* Tile "Capacitaciones Habilitadas/Finalizadas" (p:commandLink, no h:outputLink como el
   resto): icono en verde mientras está habilitada (todo activo, como el candado abierto) y
   en rojo cuando el admin las finalizó (candado cerrado) — mismos colores ya usados en el
   resto del admin (#16a34a en dashboard-tile-disabled, #dc2626 en evaluaciones.xhtml). */
.dashboard-tile-icon.pi-lock-open {
    color: #16a34a !important;
}

.dashboard-tile-icon.pi-lock {
    color: #dc2626 !important;
}

/* Caja de aviso bajo el grid de tiles (home.xhtml): reemplaza el texto largo que antes
   se forzaba dentro del tile de 220px (quedaba apretado/desbordado con font-size:12px). */
.dashboard-info-warning {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 480px;
    margin: 8px auto 0;
    padding: 12px 16px;
    border-radius: 8px;
    background-color: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #f59e0b;
    font-size: 14px;
    text-align: left;
}

.dashboard-info-warning .pi {
    font-size: 1.3rem !important;
    flex-shrink: 0;
}

/* Pre-Test: opciones de respuesta con más aire para que se vean como tarjetas. */
.pretest-opciones .ui-radiobutton-label {
    font-size: 1rem;
    padding: 4px 0;
}

/* Hub de Capacitación (capacitacion.xhtml): fila por modelo, resaltando cuál está activo. */
.capacitacion-modulo {
    border: 1px solid var(--surface-border);
}

.capacitacion-modulo-actual {
    border-color: var(--primary-color);
    border-width: 2px;
}

.capacitacion-modulo-completado {
    opacity: 0.75;
}

.capacitacion-modulo-bloqueado {
    opacity: 0.55;
}

.pretest-opciones tr {
    display: block;
    margin-bottom: 8px;
}

/* Encuesta TAM (encuesta_tam.xhtml): cada afirmación con sus 5 opciones (1-5) en una fila,
   separadas por un divisor sutil. selectOneRadio layout="lineDirection" genera una única
   fila <tr> con un <td> por opción; se fuerza a flex-wrap para que en mobile las opciones
   bajen de línea en vez de desbordar. */
.tam-pregunta {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--surface-border, rgba(0, 0, 0, 0.08));
}

.tam-opciones tr {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.tam-opciones .ui-radiobutton-label {
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .tam-opciones tr {
        gap: 8px 14px;
    }
}

/* Pre-Test: card con el doughnut de progreso, arriba a la derecha del panel. */
.pretest-panel {
    position: relative;
}

.pretest-progreso-card {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Ancho de lectura cómodo, centrado dentro del panel (antes ocupaba el 100% del ancho
   disponible y quedaba pegado a la izquierda, sobre todo en pantallas anchas). Se
   reusa en pretest.xhtml, postest.xhtml y postest_capitulo.xhtml. */
.pretest-contenido {
    max-width: 640px;
    margin: 0 auto;
}

/* Solo pretest.xhtml tiene el card de progreso (doughnut) arriba a la derecha del
   panel: deja espacio para que el texto de la pregunta no quede debajo. postest.xhtml
   y postest_capitulo.xhtml no lo tienen, por eso es una clase aparte y no parte de
   .pretest-contenido: aplicarles el mismo padding-right los desbalanceaba del centro. */
.pretest-contenido-con-progreso {
    padding-right: 190px;
}

@media (max-width: 768px) {
    .pretest-progreso-card {
        position: static;
        justify-content: flex-end;
        margin-bottom: 12px;
    }

    .pretest-contenido-con-progreso {
        padding-right: 0;
    }
}

/* Navegación del Pre-Test/Post-Test: "Volver" y "Siguiente/Finalizar" juntos y
   centrados (antes iban en las puntas, con el contador "Pregunta X de X" forzado al
   medio entre ambos), y el contador debajo de los botones en vez de al lado. */
.pretest-navegacion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pretest-navegacion-botones {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.pretest-progreso-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--text-color-secondary);
    white-space: nowrap;
}

.pretest-progreso-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

.pretest-progreso-dot-verde {
    background-color: #16a34a;
}

.pretest-progreso-dot-roja {
    background-color: #dc2626;
}

/* El tema Saga deja el texto pegado (o superpuesto) al ícono en los botones normales
   (no icon-only): el ícono viene con position:absolute puesto por el tema, así que un
   simple "gap" en el contenedor flex no alcanza —un elemento en absoluto no participa
   del layout flex, el gap no le aplica—. Se lo pasa a position:static para que sí
   cuente como flex item, y se usa "order" (no left/right) para mantenerlo a la derecha
   en los botones iconPos="right" (Siguiente/Finalizar), ya que el DOM no cambia de
   orden según iconPos, solo la posición CSS. */
.ui-button.ui-button-text-icon-left,
.ui-button.ui-button-text-icon-right {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ui-button.ui-button-text-icon-left .ui-icon,
.ui-button.ui-button-text-icon-right .ui-icon {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    margin-top: 0;
}

.ui-button .ui-button-icon-right {
    order: 2;
}

/* Botones de acción de Progreso de Usuarios (progreso_usuarios.xhtml): fondo blanco
   con borde suave, y SOLO el ícono lleva el color de la acción (rojo bloquear,
   azul resetear, verde reabrir). !important necesario para ganarle al fondo/borde
   que el tema Saga le pone a todo ui-button. */
.ui-button.boton-blanco {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
}

.ui-button.boton-blanco.icono-rojo .ui-icon {
    color: #dc2626 !important;
}

.ui-button.boton-blanco.icono-azul .ui-icon {
    color: #2563eb !important;
}

.ui-button.boton-blanco.icono-verde .ui-icon {
    color: #16a34a !important;
}

/* Ícono de estado de cada etapa (celdas de progreso_usuarios.xhtml): solo ícono,
   el texto va en tooltip. */
.estado-etapa-icono {
    font-size: 1.4rem !important;
    line-height: 1;
}

/* Tarjeta genérica para las secciones del tab Indicadores (evaluaciones.xhtml):
   mismo lenguaje visual que .dashboard-tile pero de alto/ancho variable. */
.indicador-card {
    background-color: var(--surface-card);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 1.25rem;
    height: 100%;
    box-sizing: border-box;
    position: relative; /* ancla el botón de pantalla completa y sirve de base al modo .fullscreen */
}

/* Título + botón de pantalla completa de cada .indicador-card (ver metricas.xhtml). */
.indicador-card-header {
    position: relative;
}

/* Tarjetas "Estado del sistema" (ver metricas.xhtml): valor actual + barra opcional, mismo
   lenguaje visual que .indicador-card pero más compactas. */
.kpi-card {
    background-color: var(--surface-card);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 1rem 1.25rem;
    height: 100%;
    box-sizing: border-box;
    position: relative; /* ancla el popover de info, ver .indicador-info-popover */
}

.kpi-card-title {
    font-weight: 700;
    color: var(--text-color-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Botón ⓘ de cada tarjeta KPI — mismo popover que los gráficos (.indicador-info-popover),
   solo que se probó primero como ícono con tooltip nativo (title=) y no era descubrible al
   tacto/clic, así que se cambió al mismo botón+popover clickeable de los gráficos. */
.kpi-info-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-color-secondary);
    font-size: 0.85rem;
    padding: 0.1rem 0.25rem;
    line-height: 1;
    opacity: 0.7;
}

.kpi-info-btn:hover {
    opacity: 1;
    color: var(--primary-color);
}

.kpi-card-valor {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}

.kpi-card-barra {
    margin-top: 0.6rem;
    height: 6px;
    border-radius: 3px;
    background-color: var(--surface-300);
    overflow: hidden;
}

.kpi-card-barra-fill {
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 3px;
    max-width: 100%;
}

/* Contenedor de los botones de acción de cada tarjeta (info + pantalla completa), arriba a
   la derecha, uno al lado del otro. */
.indicador-card-actions {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 0.15rem;
}

.indicador-card-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-color-secondary);
    font-size: 1.1rem;
    padding: 0.25rem 0.5rem;
    line-height: 1;
}

.indicador-card-btn:hover {
    color: var(--primary-color);
}

/* Popover de "¿qué muestra este gráfico?" (ver toggleInfoPopover en metricas.xhtml). Se
   probó primero con p:overlayPanel + PF(widgetVar).show(event), pero no abría de forma
   confiable; este popover es CSS/JS puro, sin depender del ciclo de vida de un widget
   PrimeFaces — mismo enfoque ya usado para el botón de pantalla completa. Anclado a
   .indicador-card-header (position:relative), oculto con display:none hasta que JS le
   agrega .visible. */
.indicador-info-popover {
    display: none;
    position: absolute;
    top: 2.1rem;
    right: 0;
    z-index: 60;
    max-width: 320px;
    background-color: var(--surface-overlay, var(--surface-card));
    border: 1px solid var(--surface-border, rgba(0, 0, 0, 0.1));
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    padding: 0.85rem 2rem 0.85rem 1rem;
    line-height: 1.5;
    font-size: 0.9rem;
    font-weight: 400;
    text-align: left;
    color: var(--text-color);
}

.indicador-info-popover.visible {
    display: block;
}

.indicador-info-popover-close {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-color-secondary);
    padding: 0.15rem;
    line-height: 1;
}

.indicador-info-popover-close:hover {
    color: var(--primary-color);
}

/* Toggleado por JS (toggleFullscreenCard en metricas.xhtml): la tarjeta pasa a cubrir todo
   el viewport. body.indicador-fullscreen-activo bloquea el scroll de fondo mientras tanto. */
.indicador-card.fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1100;
    border-radius: 0;
    overflow: auto;
    width: 100vw;
    height: 100vh;
}

body.indicador-fullscreen-activo {
    overflow: hidden;
}

/* p:datePicker del filtro de metricas.xhtml (primer uso en el proyecto): el tema
   saga-blue es de una generación de PrimeFaces anterior a este componente rediseñado y no
   lo termina de estilar, dejando el input y el botón de calendario visualmente
   desconectados (distinta altura, gap). Se fuerzan a la misma altura y se pegan sin gap
   para que se vean como un solo control, igual que el resto de los inputs de la app. */
.metricas-filtro .p-datepicker {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.metricas-filtro .p-datepicker .p-inputtext {
    height: 2.5rem;
    box-sizing: border-box;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.metricas-filtro .p-datepicker-trigger.p-button {
    height: 2.5rem;
    width: 2.5rem;
    flex: 0 0 auto;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}
/* ---------------------------------------------------------------------------
   Visor de documentación (/private/admin/documentacion.xhtml)
   Mismo esquema de dos columnas que agente_ia.xhtml (sidebar + panel), pero el
   panel derecho scrollea el .md renderizado en vez de un historial de chat.
   --------------------------------------------------------------------------- */
.app-docs-layout{
    gap:16px;
    align-items:flex-start;
    width:100%;
    height:100%;
}

.app-docs-sidebar{
    width:280px;
    min-width:280px;
    max-height:calc(100vh - 220px);
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    padding:8px;
    flex-shrink:0;
    background-color:var(--surface-card);
    border-radius:6px;
    transition:width 0.2s ease, min-width 0.2s ease, padding 0.2s ease, opacity 0.15s ease;
}

/* Sidebar colapsado (botón hamburguesa, estilo Claude Desktop): en PC se
   achica a 0 en vez de desaparecer, para animar la transición. */
.app-docs-layout.sidebar-collapsed .app-docs-sidebar{
    width:0;
    min-width:0;
    padding:0;
    opacity:0;
    overflow:hidden;
    border:none;
}

/* Encabezado del sidebar: título + botón de cerrar (el botón solo se ve en mobile). */
.doc-sidebar-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:4px 4px 8px 4px;
}

.doc-sidebar-title{
    font-weight:600;
    font-size:0.9rem;
    opacity:0.8;
}

.doc-sidebar-close{
    display:none;
    background:transparent;
    border:none;
    cursor:pointer;
    font-size:1.1rem;
    padding:6px;
    border-radius:6px;
    color:inherit;
}

.doc-sidebar-close:hover{
    background-color:rgba(127,127,127,0.12);
}

/* Botón hamburguesa que abre/cierra el sidebar, siempre visible junto al título. */
.doc-sidebar-toggle{
    background:transparent;
    border:none;
    cursor:pointer;
    font-size:1.1rem;
    padding:8px;
    margin-right:4px;
    border-radius:6px;
    color:inherit;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.doc-sidebar-toggle:hover{
    background-color:rgba(127,127,127,0.12);
}

.app-docs-layout .chat-window{
    flex:1 1 0%;
    min-width:0;
}

.doc-list{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.doc-item{
    border-radius:6px;
    padding:6px 8px;
}

.doc-item:hover{
    background-color:rgba(21,101,192,0.06);
}

.doc-item.active{
    background-color:rgba(21,101,192,0.12);
}

.doc-item-link{
    display:flex;
    flex-direction:column;
    cursor:pointer;
    text-decoration:none;
}

.doc-item-title{
    font-weight:600;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.doc-item-file{
    font-size:0.78rem;
    opacity:0.7;
}

.doc-item-vacio,
.doc-origen{
    padding:8px;
    font-size:0.8rem;
    opacity:0.8;
}

/* Nombre de archivo + fecha de modificación, sobre el contenido */
.doc-header{
    flex-shrink:0;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    padding:0 16px 8px 16px;
    font-size:0.85rem;
    opacity:0.75;
}

/* Área scrolleable con el markdown renderizado */
.doc-content{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    padding:0 24px 24px 24px;
    line-height:1.6;
}

.doc-content-vacio{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:100%;
    opacity:0.6;
}

.doc-content-vacio .pi{
    font-size:2.5rem;
}

/* Tipografía del markdown. Se acota a .doc-content para no tocar el resto de la app. */
.doc-content h1,
.doc-content h2,
.doc-content h3,
.doc-content h4{
    line-height:1.3;
    margin:1.4em 0 0.6em 0;
}

.doc-content h1{ font-size:1.7rem; }
.doc-content h2{
    font-size:1.35rem;
    border-bottom:1px solid var(--surface-border, rgba(0,0,0,0.12));
    padding-bottom:4px;
}
.doc-content h3{ font-size:1.15rem; }
.doc-content h4{ font-size:1rem; }

.doc-content p{ margin:0.7em 0; }

.doc-content ul,
.doc-content ol{
    margin:0.7em 0;
    padding-left:1.6em;
    list-style:revert;
}

.doc-content li{ margin:0.25em 0; }

.doc-content a{
    color:var(--primary-color, #1565c0);
    text-decoration:underline;
}

.doc-content code{
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:0.88em;
    background-color:rgba(127,127,127,0.15);
    border-radius:4px;
    padding:1px 5px;
}

.doc-content pre{
    background-color:rgba(127,127,127,0.12);
    border-radius:6px;
    padding:12px 14px;
    overflow-x:auto;
    margin:0.9em 0;
}

.doc-content pre code{
    background:none;
    padding:0;
}

.doc-content blockquote{
    margin:0.9em 0;
    padding:2px 14px;
    border-left:4px solid var(--primary-color, #1565c0);
    opacity:0.9;
}

.doc-content table{
    border-collapse:collapse;
    width:100%;
    margin:0.9em 0;
    display:block;
    overflow-x:auto;
}

.doc-content th,
.doc-content td{
    border:1px solid var(--surface-border, rgba(0,0,0,0.15));
    padding:6px 10px;
    text-align:left;
}

.doc-content th{
    background-color:rgba(127,127,127,0.12);
    font-weight:600;
}

.doc-content hr{
    border:none;
    border-top:1px solid var(--surface-border, rgba(0,0,0,0.12));
    margin:1.5em 0;
}

.doc-content img{
    max-width:100%;
}

/* Diagramas Mermaid ya renderizados (ver documentacion.js) */
.doc-mermaid{
    display:flex;
    justify-content:center;
    margin:1.2em 0;
}

.doc-mermaid svg{
    max-width:100%;
    height:auto;
}

/* Mobile: el sidebar deja de ir al costado y pasa a ser un panel a pantalla
   completa que se abre/cierra con el botón hamburguesa (estilo Claude
   Desktop), en vez del "apilado con max-height" que usan otros layouts de
   dos columnas del proyecto (ver .app-chat-sidebar) — con una lista de
   documentos no acotamos su alto, se necesita el espacio completo. */
@media (max-width: 768px){
    .app-docs-sidebar{
        position:fixed;
        inset:0;
        z-index:1100;
        width:100%;
        min-width:0;
        max-height:none;
        padding:16px;
        border-radius:0;
        transition:none;
    }

    .app-docs-layout.sidebar-collapsed .app-docs-sidebar{
        display:none;
    }

    .doc-sidebar-close{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    /* Título y nombre de archivo de cada documento: en PC se cortan con
       ellipsis porque el sidebar es angosto, pero en mobile (pantalla
       completa) el texto largo debe bajar de línea en vez de cortarse. */
    .doc-item-title,
    .doc-item-file{
        white-space:normal;
        overflow-wrap:break-word;
        word-break:break-word;
    }

    /* Encabezado del documento (nombre de archivo + fecha) y el contenido
       ocupan todo el ancho disponible sin desbordar. */
    .doc-header-file{
        overflow-wrap:break-word;
        word-break:break-word;
    }

    .doc-content{
        padding:0 16px 16px 16px;
    }
}

/* ---------------------------------------------------------------------------
   Banner de mantención programada (lo inyecta mantencion-aviso.js como primer hijo
   del body, que es el contenedor flex de la app: por eso flex-shrink:0 y nada de
   position:fixed — así empuja header/contenido/footer en vez de taparlos).
   --------------------------------------------------------------------------- */
.mantencion-banner {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background-color: #f59e0b;
    color: #1f2937;
    font-size: 0.9rem;
    line-height: 1.35;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.mantencion-banner .pi {
    font-size: 1.3rem !important;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .mantencion-banner {
        font-size: 0.8rem;
        padding: 8px 12px;
    }
}