/* Paneles gráficos: tarjetas de gráfica, bloque de texto, tarjeta de valor y aviso de acceso. */

/* --- Listado de paneles (panels-list): caja con título enlazado y acciones al hover --- */

/* La caja reserva sitio abajo para la barra de acciones absoluta y ancla su posición. */
.panel-list-card {
    position: relative;
}

.panel-list-card .card-body {
    padding-bottom: 2.75rem;
}

/* Título como enlace al detalle: hereda color y solo se subraya al pasar por encima. */
.panel-list-title-link {
    color: inherit;
    text-decoration: none;
}

.panel-list-title-link:hover {
    color: var(--bs-primary, #0d6efd);
    text-decoration: underline;
}

/* Barra de acciones abajo a la derecha: oculta por defecto, se revela al posicionarse sobre la
   caja (o al enfocar con teclado), igual que las filas de los cuadrantes del análisis estratégico. */
.panel-list-actions {
    position: absolute;
    right: 0.75rem;
    bottom: 0.6rem;
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity .12s ease;
    pointer-events: none;
}

.panel-list-card:hover .panel-list-actions,
.panel-list-card:focus-within .panel-list-actions {
    opacity: 1;
    pointer-events: auto;
}

.panel-list-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #9aa2b1;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.panel-list-btn:hover {
    background: #eef2f7;
    color: var(--bs-primary, #2f6fdb);
}

.panel-list-btn.panel-list-btn-danger:hover {
    background: #fdebef;
    color: #d6455d;
}

.panel-chart-card {
    min-height: 280px;
    display: flex;
    flex-direction: column;
}

.panel-chart-card .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Cabecera de la gráfica: título centrado y sin borde inferior (fondo transparente para que
   se funda con el cuerpo de la tarjeta). Se fuerza el centrado también en caso de que el tema
   pinte el .card-header como flex (justify-content) además del text-align. */
.panel-chart-card .panel-chart-header {
    border-bottom: 0;
    background-color: transparent;
    padding-bottom: 0.25rem;
    text-align: center;
    justify-content: center;
}

.panel-chart-card .panel-chart-header h5 {
    width: 100%;
    margin: 0;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
}

/* Título enlazable de la gráfica: hereda el color del texto y solo se subraya al pasar por
   encima, para que el enlace al detalle del elemento (indicador/proyecto) no distraiga. */
.panel-chart-card .panel-chart-title-link {
    color: inherit;
    text-decoration: none;
}

.panel-chart-card .panel-chart-title-link:hover {
    color: var(--bs-primary, #0d6efd);
    text-decoration: underline;
}

/* Secciones del panel: un bloque de texto de tipo título abre una sección que agrupa
   visualmente las gráficas que le siguen hasta el próximo título. */
.panel-section {
    margin-bottom: 1.5rem;
}

/* Cabecera de sección: más compacta que la antigua tarjeta de texto (menos alto), con la
   fuente mayor y en mayúsculas para que actúe como separador de sección. */
.panel-section-header {
    text-transform: uppercase;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.2;
    margin: 0 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--bs-primary, #0d6efd);
    color: var(--bs-emphasis-color, #1a1a1a);
}

/* Recuadro gris POR CONTENEDOR: cada contenedor (fila) del panel se enmarca en su propio fondo
   gris, con o sin título. El título comparte recuadro con su primer contenedor (ver PanelSurface). */
.panel-container {
    padding: 1rem;
    background-color: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.025));
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.panel-text-block {
    padding: 0.5rem 0.25rem;
}

.panel-text-block h4 {
    margin-bottom: 0;
    font-weight: 600;
}

/* El tema (Inspinia) baja b/strong a semibold (~500), casi indistinguible del
   normal. En el HTML enriquecido del bloque de texto restauramos negrita real. */
.panel-text-block strong,
.panel-text-block b {
    font-weight: 700;
}

.panel-value-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 200px;
    padding: 1.5rem 1rem;
}

/* Semaforo + numero en la misma linea, centrados como bloque. */
.panel-value-card .panel-value-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.panel-value-card .panel-value-number {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.panel-value-card .panel-value-deviation {
    margin-top: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.panel-chart-noaccess {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 160px;
    color: #adb5bd;
    text-align: center;
    padding: 1rem;
}

.panel-chart-noaccess i {
    font-size: 1.75rem;
}

.panel-compact-charts .panel-compact-chart-item {
    margin-bottom: 0.25rem;
}

/* Las compactas apilan un bullet por indicador, así que cada píxel de más se multiplica por N.
   Se recorta el py-2 que ThresholdBandsPreview trae para su uso en el detalle del indicador
   (16px por elemento) sin tocar el componente, que es compartido. */
.panel-compact-charts .threshold-preview {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Título de cada mini-gráfica compacta: enlace al detalle del indicador, en tono atenuado. */
.panel-compact-charts .panel-compact-title-link {
    color: var(--ins-body-color, #6c757d);
    text-decoration: none;
}

.panel-compact-charts .panel-compact-title-link:hover {
    color: var(--bs-primary, #0d6efd);
    text-decoration: underline;
}

/* ===================================================================================
   Editor del panel (modo edición): filas → columnas → gráficas + zonas de "añadir".
   Diseñado para ser sencillo y descubrible: barra de acciones de cada gráfica solo al
   pasar el ratón, y zonas dashed explícitas para añadir columna / apilar gráfica.
   =================================================================================== */

/* Cada gráfica del editor: enmarcada, con su barra de acciones (nombre + editar/borrar)
   oculta hasta el hover/foco para reducir el ruido visual. */
.panel-edit-chart {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.panel-edit-chart-preview {
    min-height: 120px;
}

.panel-edit-chart-actions {
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
}

.panel-edit-chart:hover .panel-edit-chart-actions,
.panel-edit-chart:focus-within .panel-edit-chart-actions {
    opacity: 1;
}

/* Zonas dashed de "añadir": apilar una gráfica debajo de la columna, y crear columna nueva
   (placeholder del hueco libre de la fila). Ambas clicables y con feedback en hover. */
.panel-edit-stack-add,
.panel-edit-placeholder-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.75rem;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    transition: border-color 0.12s ease-in-out, color 0.12s ease-in-out;
}

.panel-edit-stack-add {
    margin-top: 0.5rem;
}

.panel-edit-placeholder-inner {
    min-height: 60px;
}

.panel-edit-stack-add:hover,
.panel-edit-placeholder-inner:hover {
    border-color: var(--bs-primary, #0d6efd);
    color: var(--bs-primary, #0d6efd);
}

/* Estados de arrastrar y soltar (drag&drop) de filas y columnas. */
.panel-edit-row.is-dragging {
    opacity: 0.6;
    border-style: dashed !important;
    border-color: var(--bs-primary, #0d6efd) !important;
}

.panel-edit-col.is-dragging {
    opacity: 0.5;
}

.panel-edit-col.is-drop-target,
.panel-edit-placeholder.is-drop-target .panel-edit-placeholder-inner {
    background-color: var(--bs-primary-bg-subtle, #cfe2ff);
    border-color: var(--bs-primary, #0d6efd);
    border-radius: 0.5rem;
}

/* Mango de arrastre del contenedor: el drag&drop lo inicia SOLO este grip (no toda la tarjeta),
   para que el campo de nombre inline se pueda editar sin arrancar un arrastre. */
.panel-edit-drag-handle {
    cursor: grab;
}

.panel-edit-drag-handle:active {
    cursor: grabbing;
}

/* Permite que el input de nombre encoja dentro de la cabecera flex sin desbordar (truncado). */
.min-w-0 {
    min-width: 0;
}

/* Nombre del contenedor editable inline: se ve como un título (grande, semibold) pero es un input.
   El borde y el fondo solo aparecen al pasar el ratón o enfocar, para que en reposo parezca un
   rótulo y no un formulario. El placeholder muestra el nombre posicional "Contenedor N". */
.panel-edit-container-name {
    font-size: 1.4rem;
    font-weight: 600;
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}

.panel-edit-container-name:hover {
    border-color: var(--bs-border-color);
}

.panel-edit-container-name:focus {
    border-color: var(--bs-primary, #0d6efd);
    background-color: var(--bs-body-bg);
    box-shadow: none;
}

/* ===================================================================================
   Selector de tipo de gráfica (modal): pestañas por grupo + rejilla de tarjetas
   icono + nombre, para elegir de forma amigable en lugar de un desplegable plano.
   =================================================================================== */

.panel-type-tabs {
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Cabecera de subgrupo (Directas / Procesadas) dentro de la pestaña Individual. */
.panel-type-subheader {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color, #6c757d);
    margin: 0.25rem 0 0.4rem;
}

.panel-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.5rem;
}

/* Tarjeta de un tipo: icono grande arriba, nombre debajo. Botón a ancho completo de su celda. */
.panel-type-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 90px;
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background-color: transparent;
    color: var(--bs-body-color);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.12s ease-in-out, background-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out;
}

.panel-type-card:hover {
    border-color: var(--bs-primary, #0d6efd);
    background-color: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.025));
}

.panel-type-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--bs-primary-bg-subtle, #cfe2ff);
}

.panel-type-card.selected {
    border-color: var(--bs-primary, #0d6efd);
    background-color: var(--bs-primary-bg-subtle, #cfe2ff);
    box-shadow: inset 0 0 0 1px var(--bs-primary, #0d6efd);
}

.panel-type-card-icon {
    font-size: 1.75rem;
    line-height: 1;
    color: var(--bs-primary, #0d6efd);
}

.panel-type-card-name {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.15;
}

.panel-type-card-desc {
    font-size: 0.72rem;
    line-height: 1.2;
    color: var(--bs-secondary-color, #6c757d);
}

.panel-type-card-check {
    position: absolute;
    top: 0.35rem;
    right: 0.4rem;
    font-size: 0.85rem;
    color: var(--bs-primary, #0d6efd);
}

/* ===================================================================================
   Altura por celda ("altura en bloques"). El bloque mide la caja EXTERIOR (bloques*200),
   que es lo que fija en línea PanelChartRenderer: así N bloques son exactamente el doble
   de altos que N/2, y todas las celdas de una fila coinciden aunque unas tengan cabecera
   y otras no (widgets). El contenido se adapta al hueco que le queda; NUNCA saca barra de
   scroll ni estira la tarjeta, porque cualquiera de las dos cosas rompe la alineación de
   la fila, que es justo el problema que esta opción viene a resolver.
   =================================================================================== */

/* Anula el min-height genérico de .panel-chart-card (280px), que si no impediría bajar
   a 1 bloque (200px). */
.panel-chart-card.panel-cell-sized {
    min-height: 0;
    overflow: hidden;
}

.panel-chart-card.panel-cell-sized > .card-body {
    min-height: 0;
    overflow: hidden;
}

/* La cabecera nunca se encoge: es el cuerpo quien absorbe el alto restante. */
.panel-chart-card.panel-cell-sized > .panel-chart-header {
    flex: 0 0 auto;
}

/* Estados no-Apex del cuerpo: dejan de imponer alto mínimo propio y se estiran (siguen
   centrando su contenido) dentro del alto ya fijado por la celda. */
.panel-chart-card.panel-cell-sized .panel-value-card,
.panel-chart-card.panel-cell-sized .panel-chart-noaccess {
    min-height: 0;
    flex: 1 1 auto;
}

/* Excepción: texto libre y series compactas SÍ pueden desbordar de forma legítima (un
   texto largo no se puede "encoger"), así que ahí el scroll es preferible a recortar. */
.panel-chart-card.panel-cell-sized > .card-body.panel-cell-scrollable {
    overflow-y: auto;
}

/* Celda de tipo Widget: el widget trae su propia tarjeta envuelta en un <a>, así que hay
   que estirar los dos niveles (selector de descendencia, no de hijo directo) y anular el
   margen inferior de .card, que si no desborda el envoltorio. */
.panel-widget-cell {
    overflow: hidden;
}

.panel-widget-cell > a {
    display: block;
    height: 100%;
}

.panel-widget-cell .card {
    height: 100%;
    min-height: 0;
    margin-bottom: 0;
}

/* El cuerpo del widget reparte el alto entre título y gráfica sin desbordar la tarjeta. */
.panel-widget-cell .card-body {
    min-height: 0;
    overflow: hidden;
}

/* ===================================================================================
   Listado de paneles (vista Listado / PanelGridTemplate). Layout de tabla fijo: la
   columna de acciones reserva un ancho propio y el resto de columnas (sin ancho
   explícito) se reparten el espacio restante a partes iguales, en vez del ancho "auto"
   por defecto que dejaba muy descompensadas la última columna de datos y la de botones.
   =================================================================================== */
.panel-grid-table {
    table-layout: fixed;
}

.panel-grid-table .panel-col-actions {
    width: 170px;
}

/* Recorta con "…" el contenido largo/variable (descripción, lista de usuarios) para que
   no rompa el ancho fijo de su columna. */
.panel-grid-table .panel-col-truncate {
    overflow: hidden;
}

.panel-grid-table .panel-col-truncate > * {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}