/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   CATÁLOGO DIGITAL (TABLETS) — el aspecto, compartido por las DOS pantallas del módulo
   ───────────────────────────────────────────────────────────────────────────────────────────────
   `/catalogo-tablet` (la central: terminales, conexión y actividad) y `/catalogo-tablet/terminal/…`
   (la ficha de un terminal) son dos componentes distintos y enseñan las MISMAS tarjetas, los mismos
   campos, los mismos interruptores y los mismos botones.

   Por eso esto vive aquí y no en un `.razor.css`: el CSS de Blazor tiene ámbito de componente, así
   que con hojas aisladas serían dos copias de las mismas 500 líneas, condenadas a divergir en
   cuanto alguien retoque una. Es el mismo motivo por el que existe `css/ficha-terceros.css`.

   Reparto: aquí el ASPECTO (tarjeta, campo, interruptor, botón, insignia, comandos), y en el
   `.razor.css` de cada pantalla solo cómo reparte SU alto. La marca de entrada es `.ctab-page`, que
   llevan las dos raíces junto a `tienda-web-page` (de la que heredan, esa sí global, los tokens y
   el aspecto de `.tw-card`).

   OJO: esta hoja se enlaza ANTES que el paquete del CSS aislado, así que a igualdad de
   especificidad gana el aislado. Es lo que se quiere: una pantalla puede matizar lo suyo.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.ctab-page,
.ctab-page *,
.ctab-page *::before,
.ctab-page *::after {
    box-sizing: border-box;
}

.ctab-page {
    /* Relleno del hover de TODO lo que se pulsa en el módulo (comandos, botones de la ficha, la
       vuelta al listado). Un token y no un color repetido en cada regla, porque el valor depende de
       la superficie y aquí hubo que apartarse de la referencia:

       la ficha de artículo pinta su hover de #f3f4f6, y funciona porque sus botones se sientan en
       una cabecera BLANCA. Estas pantallas no tienen cromo blanco: sus barras van directamente
       sobre el fondo de `.main-body`, que es exactamente #f3f4f6 —el mismo color—, así que copiado
       al pie de la letra el hover no se veía. Se toma el escalón siguiente del mismo gris; el resto
       del hover (borde #afb8c1, texto #0b1c30) sí es el de la ficha de artículo, literal. */
    --ctab-hover: #e5e7eb;
}

/* LOS BOTONES DEL MÓDULO — el juego de la ficha de artículo (`.cb-ficha`, en
   `wwwroot/css/articulos.css`)
   ──────────────────────────────────────────────────────────────────────────────────────────────
   Contorno gris sobre fondo transparente, icono al lado del texto y NINGÚN relleno de color: ni
   siquiera la acción principal. El énfasis lo pone el orden, no el color; el rojo de una acción
   irreversible aparece solo al pasar por encima, que es cuando avisa de algo.

   Se reescribe aquí y no se comparte el selector porque `.cb-ficha` cuelga de `.articulos-page`: lo
   que se comparte es el aspecto, que es lo que el usuario reconoce de una pantalla a otra. Las
   medidas son las de allí, literales (`clamp`, para que encojan con la ventana).

   Dónde se usa cada juego, que es lo único que hay que recordar:

   · `.ctab-header-cmdbar` — la barra de una CABECERA de pantalla: TODAS las órdenes de la central
     (nuevo terminal, sincronizar, publicar, actualizar) y las de la ficha del terminal (guardar,
     reiniciar). No lleva aspecto propio: usa `cmdbar-inline cmdbar-plain`, el mismo del listado de
     clientes, porque todas las cabeceras del ERP se ven igual. Aquí solo se coloca.
   · `.ctab-cmdbar` (esto) — el juego con contorno, para una barra que vive DENTRO de un panel: sin
     cabecera de pantalla que la sitúe, sin caja se perdería entre los rótulos. Hoy la usa la barra
     de la tarjeta de conexión (guardar y probar), y los botones sueltos de formulario (`.tw-btn`)
     citan estas medidas y estos colores como su referencia (ver más abajo). */
.ctab-page .ctab-cmdbar,
.ctab-page .ctab-header-cmdbar {
    /* Al extremo derecho de su fila, y con su ancho natural: el reparto lo hace el script
       replegando comandos, nunca el encogimiento. */
    flex: 0 0 auto;
    margin-left: auto;
    align-self: center;
}

.ctab-page .ctab-cmdbar .command-bar__btn {
    flex-direction: row;
    height: clamp(30px, 4.4vw, 34px);
    min-width: 0;
    gap: clamp(6px, 0.9vw, 8px);
    padding: 0 clamp(12px, 1.8vw, 16px);
    border-radius: 8px;
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 600;
}

    /* Solo la forma: el color de los botones lo da css/botones.css, el mismo en todo el ERP. */
    .ctab-page .ctab-cmdbar .command-bar__btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

.ctab-page .ctab-cmdbar .command-bar__icon {
    font-size: clamp(15px, 1.8vw, 16px);
}

/* El «···» del desbordamiento a juego con los botones. La ficha de artículo no lo hace —allí la
   barra vive en una cabecera alta y sus 48px no desentonan—; aquí comparte fila con las pestañas,
   así que un botón de 48 la haría crecer justo cuando aparece. */
.ctab-page .ctab-cmdbar .command-bar__more {
    height: clamp(30px, 4.4vw, 34px);
    min-width: 36px;
    border-color: #c1c6d7;
    border-radius: 8px;
    background: transparent;
    color: #414754;
}

    .ctab-page .ctab-cmdbar .command-bar__more:hover {
        background: var(--ctab-hover);
        border-color: #afb8c1;
        color: #0b1c30;
    }


/* ═══════════════ TARJETAS, CAMPOS, INTERRUPTORES Y BOTONES DEL MÓDULO ═══════════════ */

.ctab-page .tw-config-page {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.ctab-page .tw-config-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Sin lateral: una sola columna que se desplaza por dentro. */
.ctab-page .tw-config-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
}

.ctab-page .tw-config-main {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* Toda tarjeta del módulo: contorno gris y sin sombra, esté en el panel de una pestaña o en el
   cuerpo de la ficha. Antes eran dos reglas idénticas colgadas de dos ancestros distintos, y la
   ficha, al mudarse a pantalla propia, se habría quedado sin ninguna de las dos. */
.ctab-page .tw-config-card {
    border: 1px solid #d0d7de;
    box-shadow: none;
}

.ctab-page .tw-config-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: var(--twc-pad, 16px);
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

/* CABECERA DE TARJETA CON BARRA DE COMANDOS (hoy la de «Conexión con el parque»)
   ──────────────────────────────────────────────────────────────────────────────────────────────
   El mismo contrato con `js/commandBar.js` que la cabecera de la central y la de la ficha: el
   script mide el desbordamiento de ESTA fila (el padre de la barra), así que la fila no envuelve y
   el texto no puede encogerse por su cuenta más allá de su mínimo —si lo hiciera, la fila siempre
   «cabría» y la barra no se replegaría nunca—.

   FASES 1-3: el texto conserva un ancho LEGIBLE y quien se estrecha es la barra (pierde los textos
   y repliega botones al «···»). El mínimo no es el ancho natural: el subtítulo es un párrafo, y en
   una sola línea obligaría a replegar la barra en cualquier pantalla. Hasta ese mínimo el subtítulo
   se reparte en líneas; por debajo, cede la barra. */
.ctab-page .tw-config-card-head.ctab-card-head-barra {
    flex-wrap: nowrap;
    min-width: 0;
}

.ctab-page .ctab-card-head-barra .ctab-card-head-texto {
    flex: 0 1 auto;
    min-width: min(22rem, 100%);
}

    /* El título no se parte: es lo que dice de qué es la tarjeta. */
    .ctab-page .ctab-card-head-barra .ctab-card-head-texto .tw-config-card-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* La barra, centrada en vertical —el resto de la cabecera se alinea arriba— para que se lea como
   barra y no como algo colgado del título. El «al extremo derecho, con su ancho natural» ya lo da
   `.ctab-cmdbar`. */
.ctab-page .ctab-card-head-barra > .ctab-cmdbar {
    align-self: center;
}

/* FASE 4: la barra ya está en el hueso («···» y nada más) y aún no cabe. El script marca la fila
   con `command-bar-host-collapsed` y solo ENTONCES el texto cede por debajo de su mínimo; el título
   se recorta con puntos suspensivos. */
.ctab-page .tw-config-card-head.ctab-card-head-barra.command-bar-host-collapsed .ctab-card-head-texto {
    flex: 1 1 auto;
    min-width: 0;
}

    .ctab-page .tw-config-card-head .material-symbols-outlined {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: #f6f8fa;
        border: 1px solid #d0d7de;
        color: #57606a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 19px;
        flex: 0 0 auto;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

.ctab-page .tw-config-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #24292f;
}

.ctab-page .tw-config-card-subtitle {
    margin-top: 3px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.45;
}

.ctab-page .tw-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.ctab-page .tw-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ctab-page .tw-field-span-2 {
    grid-column: span 2;
}

/* La celda del botón «Fijar terminal de la central»: alineado con la caja de al lado, no con su rótulo. */
.ctab-page .tw-field-acciones {
    justify-content: flex-end;
    align-items: flex-start;
}

.ctab-page .tw-field label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}

.ctab-page .tw-field-help {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.ctab-page .tw-input {
    width: 100%;
    height: 36px;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    background: #ffffff;
    padding: 0 12px;
    font-size: 13px;
    color: #24292f;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

    .ctab-page .tw-input::placeholder {
        color: #9ca3af;
    }

    .ctab-page .tw-input:hover:not(:focus):not(:disabled) {
        border-color: #afb8c1;
    }

    .ctab-page .tw-input:focus {
        border-color: #7aa7f0;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .ctab-page .tw-input:disabled {
        background: #f6f8fa;
        color: #8c959f;
        cursor: not-allowed;
    }

/* Un hecho del servidor pintado como campo: misma caja, sin foco, fondo gris. */
.ctab-page .tw-input-solo-lectura {
    display: flex;
    align-items: center;
    background: #f6f8fa;
    color: #57606a;
}

.ctab-page .tw-switch-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.ctab-page .tw-switch-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    padding: 12px;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
}

    .ctab-page .tw-switch-card:hover {
        background: #f6f8fa;
        border-color: #d0d7de;
    }

    .ctab-page .tw-switch-card input {
        display: none;
    }

    .ctab-page .tw-switch-card:has(input:checked) {
        border-color: #c3d9f7;
        background: #f7fafe;
    }

.ctab-page .tw-switch-ui {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.16s ease;
}

    .ctab-page .tw-switch-ui::after {
        content: "";
        position: absolute;
        width: 18px;
        height: 18px;
        left: 2px;
        top: 2px;
        border-radius: 50%;
        background: #ffffff;
        transition: transform 0.16s ease;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
    }

.ctab-page .tw-switch-card input:checked + .tw-switch-ui {
    background: #2563eb;
}

    .ctab-page .tw-switch-card input:checked + .tw-switch-ui::after {
        transform: translateX(16px);
    }

.ctab-page .tw-switch-card strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #24292f;
}

.ctab-page .tw-switch-card small {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.ctab-page .tw-side-note {
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f6f8fa;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.45;
}

/* Ya no hay acciones al PIE de una tarjeta en este módulo: guardar y reiniciar la ficha viven en el
   CommandBar de su cabecera, y guardar y probar la conexión en el CommandBar de la cabecera de su
   tarjeta (`.ctab-card-head-barra`, más arriba). Por eso `.tw-config-actions` no tiene regla aquí.

   Botones sueltos de un formulario (hoy solo «Fijar terminal de la central»): el MISMO juego que los
   comandos de las barras —el de la ficha de artículo—, para que el módulo no tenga dos idiomas de
   botón. Mismas medidas y mismos colores que `.ctab-cmdbar .command-bar__btn`, que sale de la misma
   referencia (`.cb-ficha`, en `wwwroot/css/articulos.css`). */
.ctab-page .tw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: clamp(30px, 4.4vw, 34px);
    gap: clamp(6px, 0.9vw, 8px);
    padding: 0 clamp(12px, 1.8vw, 16px);
    border: 1px solid #c1c6d7;
    border-radius: 8px;
    background: transparent;
    color: #414754;
    font-family: inherit;
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

    .ctab-page .tw-btn:hover:not(:disabled) {
        background: var(--ctab-hover);
        border-color: #afb8c1;
        color: #0b1c30;
    }

    .ctab-page .tw-btn:focus-visible {
        outline: none;
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .ctab-page .tw-btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

    /* Deshabilitado + puntero encima: el botón no reacciona (`:hover` también casa con un botón
       deshabilitado, y las variantes de abajo empatan en especificidad). */
    .ctab-page .tw-btn:disabled:hover {
        background: transparent;
        border-color: #c1c6d7;
        color: #414754;
    }

    /* El icono, del MISMO tamaño que el de los comandos (`.ctab-cmdbar .command-bar__icon`) y del
       color de su botón —de ahí `inherit`, y no un color fijo—: así se pone rojo con «Reiniciar
       terminal» al pasar por encima, sin repetir la paleta en cada estado. */
    .ctab-page .tw-btn .material-symbols-rounded {
        font-size: clamp(15px, 1.8vw, 16px);
        line-height: 1;
        color: inherit;
        font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    }

/* La acción principal ya NO lleva relleno: en este juego todos los botones comparten el mismo
   contorno neutro y el énfasis lo pone el orden —«Guardar» va primero—, no el color. Se declara
   aunque repita el reposo porque la clase se suma a `.tw-btn` y hay que ganarle a lo que hubiera. */
.ctab-page .tw-btn-primary,
.ctab-page .tw-btn-primary:disabled:hover {
    background: transparent;
    border-color: #c1c6d7;
    color: #414754;
}

    .ctab-page .tw-btn-primary:hover:not(:disabled) {
        background: var(--ctab-hover);
        border-color: #afb8c1;
        color: #0b1c30;
    }

/* ── Listado (maestro) ───────────────────────────────────────────────────────────────────────── */

.ctab-page .tw-tiendas-lista {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.ctab-page .tw-tiendas-barra {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ctab-page .tw-tiendas-titulo {
    font-size: 14px;
    font-weight: 700;
    color: #24292f;
}

.ctab-page .tw-tiendas-subtitulo {
    margin-top: 3px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

.ctab-page .tw-tiendas-tabla {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Celdas del listado: las pinta <TablaPaginada>, otro componente. Aquí no hace falta `::deep`:
   esta hoja es GLOBAL y alcanza el DOM de los hijos (es justo por lo que se sacó del CSS aislado). */
.ctab-page .tw-tienda-nombre {
    font-size: 13px;
    font-weight: 600;
    color: #24292f;
}

.ctab-page .tw-order-subtext {
    margin-top: 3px;
    font-size: 11px;
    color: #6b7280;
}

.ctab-page .tw-tienda-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    border: 1px solid transparent;
    white-space: nowrap;
}

    .ctab-page .tw-tienda-badge.ok {
        background: #ecfdf3;
        color: #15803d;
        border-color: #d1fadf;
    }

    .ctab-page .tw-tienda-badge.warn {
        background: #fff7ed;
        color: #c2410c;
        border-color: #fed7aa;
    }

    .ctab-page .tw-tienda-badge.neutral {
        background: #f6f8fa;
        color: #57606a;
        border-color: #d0d7de;
    }

/* ── Piezas de la ficha del terminal (su fila y su reparto viven en TerminalFicha.razor.css) ── */

/* La vuelta al listado: 48px, lo que miden los comandos planos que tiene al otro lado de la fila
   (es la misma medida que usa la vuelta al origen de la central). Una cabecera con dos alturas de
   botón se lee como dos barras distintas. */
.ctab-page .tw-volver-btn {
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

    /* El hover de los comandos de su misma fila (`cmdbar-plain`, y también el de la vuelta al origen
       de la central): en reposo no tiene caja —es una vuelta, no una acción— y al pasar por encima
       coge superficie blanca. Aquí NO vale `--ctab-hover`, que es el gris de los botones con
       contorno: sobre el fondo de la página estos aclaran en vez de oscurecer. */
    .ctab-page .tw-volver-btn:hover {
        background: #ffffff;
        border-color: #e5e7eb;
        color: #111827;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    }

    .ctab-page .tw-volver-btn .material-symbols-outlined {
        font-size: 20px;
        color: inherit;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    .ctab-page .tw-volver-texto {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

.ctab-page .tw-ficha-titulo {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    color: #24292f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

@media (max-width: 1100px) {
    .ctab-page .tw-config-page,
    .ctab-page .tw-config-panel,
    .ctab-page .tw-config-layout,
    .ctab-page .tw-config-main {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .ctab-page .tw-switch-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ctab-page .tw-form-grid {
        grid-template-columns: 1fr;
    }

    .ctab-page .tw-field-span-2 {
        grid-column: auto;
    }

    .ctab-page .tw-tiendas-barra {
        flex-wrap: wrap;
    }
}

/* ═══════════ TECLADO TIPO EXCEL EN LA FICHA DEL TERMINAL (enterCampos.js) ═══════════
   Misma convención que las fichas de tercero (`css/site.css`, contenedores `fcl-`) y que el modal de
   ajustes: el modo lo marca la clase «ff-editing» que pone el módulo de teclado. En NAVEGACIÓN el
   caret va oculto —el campo se ve activo, no «en modo tecleo»— y en EDICIÓN reaparece.

   Va en esta hoja global, y no en el `.razor.css` de la ficha, porque la clase la pone el JAVASCRIPT:
   el CSS aislado de Blazor solo marca los elementos que renderiza el componente, y una clase añadida
   después desde el DOM no lleva esa marca.

   Solo alcanza a los campos ANCLADOS (contenedores `ftt-`), que son los que el módulo gobierna: un
   campo sin anclar nunca recibiría «ff-editing» y se quedaría sin caret para siempre. */
.ctab-page [id^="ftt-"] input:focus {
    caret-color: transparent;
}

    .ctab-page [id^="ftt-"] input.ff-editing {
        caret-color: auto;
    }