/*
 * Tablas: celdas y bordes de la forma, capa de selección de celdas, cuadrícula
 * de inserción y galería de estilos.
 *
 * Todas las clases propias llevan el prefijo `tbl-` (o `tbl__` dentro de la
 * forma). La geometría la escribe `tables/tableedit.js` en píxeles de
 * diapositiva: aquí solo viven el posicionamiento, los colores fijos de la
 * interfaz y el aspecto de los menús.
 */

/* ---------- Tabla dentro de la diapositiva ---------- */

.shape--table {
    /* Una celda no debe pintar fuera del marco al arrastrar sus bordes. */
    overflow: hidden;
}

.tbl {
    position: absolute;
    inset: 0;
}

.tbl__cell {
    position: absolute;
    overflow: hidden;
}

.tbl__text {
    position: absolute;
    white-space: pre;
}

/* Los bordes van encima de las celdas: cada arista la comparten dos y debe
   verse entera, sin que el sombreado de la siguiente la tape a medias. */
.tbl__border {
    position: absolute;
    pointer-events: none;
}

/* ---------- Selección de celdas ---------- */

.layer.tbl-layer {
    pointer-events: none;
    z-index: 4;
}

.tbl-sel {
    position: absolute;
    background: rgba(43, 87, 154, 0.25);
    outline: 1px solid #2B579A;
}

/* Guía del borde de columna o de fila que se arrastra. */
.tbl-guide {
    position: absolute;
    background: #2B579A;
}

.tbl-guide--col {
    width: 1px;
}

.tbl-guide--row {
    height: 1px;
}

/* ---------- Cuadrícula de inserción ---------- */

.tbl-grid {
    padding: 6px;
}

.tbl-grid__caption {
    text-align: center;
}

.tbl-grid__cells {
    display: grid;
    grid-template-columns: repeat(var(--tbl-grid-cols, 10), 18px);
    gap: 2px;
    padding: 4px 2px;
}

.tbl-grid__cell {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid #B3B0AD;
    background: #FFFFFF;
    cursor: pointer;
}

.tbl-grid__cell.is-on {
    border-color: #2B579A;
    background: #C7D8F0;
}

/* ---------- Galería de estilos ---------- */

.tbl-styles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 380px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
}

/* Los títulos de grupo ocupan la fila completa dentro del envoltorio flexible. */
.tbl-styles .rbn-flyout__title {
    flex: 0 0 100%;
}

.tbl-styles__item {
    padding: 2px;
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
}

.tbl-styles__item:hover {
    border-color: #2B579A;
    background: #EAF1FB;
}

.tbl-styles__item.is-checked {
    border-color: #2B579A;
    background: #C7D8F0;
}

.tbl-styles__preview {
    display: grid;
    grid-template-columns: repeat(var(--tbl-preview-cols, 4), 1fr);
    width: 68px;
    height: 44px;
    border: 1px solid var(--tbl-preview-border, #B3B0AD);
    background: #FFFFFF;
}

.tbl-styles__cell {
    border-right: 1px solid var(--tbl-preview-border, transparent);
    border-bottom: 1px solid var(--tbl-preview-border, transparent);
}

.tbl-styles__cell:nth-child(4n) {
    border-right: 0;
}

/* ---------- Diálogos de tabla ---------- */

.dialog--table {
    min-width: 320px;
}

.dialog--table .field__control .input--num {
    width: 6em;
}