/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   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 viviera DENTRO de un panel,
     sobre una lista: sin cabecera que la sitúe, sin caja se perdería entre los rótulos. **Hoy no lo
     usa ninguna barra**: «Nuevo terminal» era la única y subió a la cabecera, donde está el resto de
     lo que se manda sobre el parque. Se conserva porque los botones de la ficha del terminal 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: 1px solid #c1c6d7;
    border-radius: 8px;
    background: transparent;
    color: #414754;
    font-size: clamp(12px, 1.4vw, 13px);
    font-weight: 600;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

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

    .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);
}

/* La principal («Sincronizar ahora») y la de peligro reposan como las demás: el mismo contorno
   neutro. Hay que declararlo aunque repita lo de arriba, porque las reglas `.is-primary` /
   `.is-danger` del propio CommandBar empatan en especificidad con la del botón base. */
.ctab-page .ctab-cmdbar .command-bar__btn.is-primary,
.ctab-page .ctab-cmdbar .command-bar__btn.is-danger {
    background: transparent;
    border-color: #c1c6d7;
    color: #414754;
}

    .ctab-page .ctab-cmdbar .command-bar__btn.is-primary:hover:not(:disabled) {
        background: var(--ctab-hover);
        border-color: #afb8c1;
        color: #0b1c30;
    }

    .ctab-page .ctab-cmdbar .command-bar__btn.is-danger:hover:not(:disabled) {
        background: #fef2f2;
        border-color: #fca5a5;
        color: #dc2626;
    }

/* Deshabilitado + puntero encima: el botón no reacciona. Repetir el reposo es obligatorio, porque
   «:hover» TAMBIÉN casa con un botón deshabilitado y las reglas :hover del CommandBar seguirían
   aplicando. Sin esto, «Sincronizar ahora» sin conexión se pinta de azul al pasar por encima. */
.ctab-page .ctab-cmdbar .command-bar__btn:disabled:hover,
.ctab-page .ctab-cmdbar .command-bar__btn.is-primary:disabled:hover,
.ctab-page .ctab-cmdbar .command-bar__btn.is-danger:disabled:hover {
    background: transparent;
    border-color: #c1c6d7;
    color: #414754;
}

/* 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;
}

/* La acción de la tarjeta, al extremo derecho de su cabecera (hoy «Guardar conexión»). Va aquí y no
   al pie porque un formulario largo deja el pie fuera de la vista justo cuando hace falta pulsarlo.
   Se centra en vertical —el resto de la cabecera se alinea arriba— para que se lea como una barra y
   no como algo colgado del título; y no encoge, porque su rótulo lleva el nombre de lo que guarda. */
.ctab-page .tw-config-card-head .ctab-card-head-accion {
    flex: 0 0 auto;
    margin-left: auto;
    align-self: center;
}

    .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 conexión» en la cabecera de su tarjeta
   (`.ctab-card-head-accion`, más arriba). Por eso `.tw-config-actions` no tiene regla aquí.

   Botones sueltos de un formulario (fijar la central, guardar la conexión): 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;
    }