/* =============================================================================
   TIENDA WEB — sistema de superficie de la pantalla
   =============================================================================

   POR QUÉ ESTE FICHERO EXISTE

   La pantalla tenía TRES niveles de caja redondeada, uno dentro de otro: el panel de pestañas era
   una `.card-panel`, dentro iban las tarjetas de cada pestaña, y dentro de ésas otra tanda de
   recuadros para agrupar cuatro datos. Tres bordes y tres sombras del mismo blanco compitiendo,
   que es lo que hace que una pantalla llena de información parezca sucia.

   LA REGLA: UN SOLO NIVEL DE TARJETA.

   - El fondo del área de contenido es gris (`#f3f4f6`, lo pone `.main-content` del layout).
   - Sobre ese gris flotan las tarjetas: `.tw-card`. Ése es el único nivel.
   - DENTRO de una tarjeta no se dibuja ninguna otra: las secciones se separan con su título y el
     espaciado (`.tw-card-head`, `.tw-rows`), nunca con un marco nuevo.
   - Ni las pestañas ni la cabecera son tarjeta: van sobre el gris, y así se lee de un vistazo qué
     es navegación y qué es contenido.

   Vive en `wwwroot/css/` —y no en un `.razor.css`— porque el CSS aislado de Blazor NO se comparte
   entre componentes: las seis pestañas y la página necesitan la MISMA tarjeta, y con CSS aislado
   eso obliga a copiarla seis veces. Copiada seis veces es como llegó a estar redefinida cuatro
   (`app.css` + tres pestañas). Se enlaza en `Presentation/Host/App.razor`, junto a los demás CSS
   por módulo (`articulos.css`, `remesas-bancarias.css`…).

   OJO CON EL ORDEN: este fichero se enlaza ANTES que `ErpPowergest.styles.css` (el paquete del CSS
   aislado). A igualdad de especificidad gana el aislado, así que una pestaña que quiera dejar de
   pintar su caja tiene que BORRAR su regla, no confiar en que ésta la pise.
   ============================================================================= */

.tienda-web-page {
    /* Superficie */
    --twc-surface: #ffffff;
    --twc-line: #e8edf4;
    --twc-line-soft: #f1f5f9;
    --twc-radius: 14px;
    --twc-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 28px -14px rgba(16, 24, 40, 0.16);

    /* Ritmo. `--twc-pad` es fluido: 14 px en un portátil estrecho, 18 px en un monitor grande. Un
       relleno fijo es lo que hace que una pantalla se vea apretada abajo y vacía arriba. */
    --twc-pad: clamp(14px, 1.15vw, 18px);
    --twc-gap: clamp(12px, 1.1vw, 18px);

    /* Texto */
    --twc-title: #0f172a;
    --twc-muted: #64748b;
}

/* Los iconos (Material Symbols) no se seleccionan NUNCA. Son ligaduras de texto, así que un doble
   clic o un arrastre por encima los pintaba en azul —y en el diseñador del catálogo, donde todo se
   compone arrastrando, eso pasa a cada paso—. Vive aquí y no en un `.razor.css` porque este fichero
   es global: cubre de una vez la cabecera, las pestañas y las seis vistas de la pantalla, que con
   CSS aislado serían ocho copias de la misma regla. */
.tienda-web-page .material-symbols-outlined,
.tienda-web-page .material-symbols-rounded {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* -----------------------------------------------------------------------------
   BARRA DE ACCIONES DE LA COLUMNA «DEFINICIÓN»
   -----------------------------------------------------------------------------
   MISMO aspecto que las acciones de la ficha de artículo (`.cb-ficha`, en `css/articulos.css`):
   contorno gris sobre fondo transparente, icono al lado del texto, sin relleno de color. Se repite
   aquí en vez de compartirse porque aquella cuelga de `.articulos-page`; lo que se comparte es el
   criterio, no el selector.

   Va en este fichero y no en un `.razor.css` porque la raíz `.command-bar` la pinta OTRO componente:
   el CSS con ámbito no le pone su marca y no la alcanza. El propio CommandBar lo advierte en su CSS,
   y por eso `.cb-ficha` también vive en una hoja global.
   -------------------------------------------------------------------------- */

/* Empuja la barra al extremo derecho de la cabecera y conserva su ancho natural: el reparto lo hace
   el script replegando comandos, nunca el encogimiento. */
.tienda-web-page .command-bar.cw-detalle-cmdbar {
    flex: 0 0 auto;
    margin-left: auto;
    align-self: center;
}

.tienda-web-page .cw-detalle-cmdbar .command-bar__btn {
    flex-direction: row;
    height: 30px;
    min-width: 0;
    gap: 6px;
    padding: 0 11px;
    border: 1px solid #c1c6d7;
    border-radius: 8px;
    background: transparent;
    color: #414754;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

    .tienda-web-page .cw-detalle-cmdbar .command-bar__btn:hover:not(:disabled) {
        background: #f3f4f6;
        border-color: #afb8c1;
        color: #0b1c30;
    }

    .tienda-web-page .cw-detalle-cmdbar .command-bar__btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

/* El icono SIGUE al color de su botón —de ahí `inherit`, y no un color fijo—: así se pone rojo con
   «Eliminar» al pasar por encima, sin repetir la paleta en cada estado.
   Hay que decirlo, y con este selector tan largo, porque la cabecera de tarjeta pinta TODOS sus
   material symbols del gris apagado (`.tienda-web-page .tw-card-head .material-symbols-*`, más abajo
   en este mismo fichero). Esa regla vale para los iconos decorativos de la cabecera, pero desde que
   la barra vive DENTRO de ella también alcanzaba a los suyos: les fijaba color y tamaño, y el
   `color` del botón dejaba de llegar. Empatar no basta —gana la que va después—, así que este
   selector suma una clase más para pasarle por encima. */
.tienda-web-page .tw-card-head .cw-detalle-cmdbar .command-bar__icon {
    color: inherit;
    font-size: 16px;
}

/* La misma barra FUERA de una cabecera de tarjeta (la de la tienda de trabajo, en la pestaña
   Pedidos): ahí no hay ninguna regla que le robe el color, pero el icono se quedaría en los 20 px
   del CommandBar y en un botón de 30 px se come el texto. Es una regla aparte y no una relajación
   de la de arriba: quitarle `.tw-card-head` a aquella la dejaría empatada con la que apaga los
   iconos de la cabecera, y quién gana pasaría a depender del orden del fichero. */
.tienda-web-page .cw-detalle-cmdbar .command-bar__icon {
    color: inherit;
    font-size: 16px;
}

/* El primario NO lleva relleno azul: aquí todos comparten el mismo contorno neutro. Hay que
   declararlo aunque repita lo de arriba, porque la regla `.is-primary` del propio CommandBar empata
   en especificidad con la del botón base y se carga después. */
.tienda-web-page .cw-detalle-cmdbar .command-bar__btn.is-primary {
    background: transparent;
    border-color: #c1c6d7;
    color: #414754;
}

    .tienda-web-page .cw-detalle-cmdbar .command-bar__btn.is-primary:hover:not(:disabled) {
        background: #f3f4f6;
        border-color: #afb8c1;
        color: #0b1c30;
    }

/* «Eliminar» reposa igual que los demás y solo se tiñe de rojo al pasar por encima: ese hover es la
   única señal de que la acción no es reversible. */
.tienda-web-page .cw-detalle-cmdbar .command-bar__btn.is-danger {
    background: transparent;
    border-color: #c1c6d7;
    color: #414754;
}

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

/* Deshabilitado + puntero encima: el botón no reacciona. Hay que declararlo aunque repita el estado
   de reposo, porque «:hover» TAMBIÉN casa con un botón deshabilitado. */
.tienda-web-page .cw-detalle-cmdbar .command-bar__btn:disabled:hover,
.tienda-web-page .cw-detalle-cmdbar .command-bar__btn.is-primary:disabled:hover,
.tienda-web-page .cw-detalle-cmdbar .command-bar__btn.is-danger:disabled:hover {
    background: transparent;
    border-color: #c1c6d7;
    color: #414754;
}

/* -----------------------------------------------------------------------------
   CAMPOS DE FORMULARIO DEL DISEÑADOR — un solo juego de tokens
   -----------------------------------------------------------------------------
   La columna de definición y su ficha de contenido publicable son componentes DISTINTOS, y el CSS
   de Blazor está aislado por componente: cada uno declaraba su propio `.cw-input`, su `.cw-label` y
   su `.cw-ayuda`, con valores que ya habían divergido (11 px contra 12, gris 475569 contra 94a3b8).
   Son el MISMO formulario para quien lo mira, así que los tokens viven aquí, como la tarjeta.

   Las medidas son las de los modales de alta (`tw-modal-input`), solo que un punto más bajas: esto
   es una columna de ~330 px, no un diálogo de 560.

   OJO: este fichero se enlaza ANTES que el paquete del CSS aislado, así que a igualdad de
   especificidad gana el aislado. Un componente que quiera OTRO campo tiene que declararlo en su
   `.razor.css` —como hace la pestaña con su caja de búsqueda—, y uno que quiera ESTE tiene que NO
   declarar nada.
   -------------------------------------------------------------------------- */

.tienda-web-page .cw-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tienda-web-page .cw-label {
    font-size: 12px;
    font-weight: 800;
    color: #334155;
}

.tienda-web-page .cw-input {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    border: 1px solid #dde5ee;
    border-radius: 12px;
    background: #ffffff;
    padding: 9px 12px;
    font-size: 13px;
    font-family: inherit;
    color: #0f172a;
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

    .tienda-web-page .cw-input::placeholder {
        color: #9aa6b2;
    }

    .tienda-web-page .cw-input:focus {
        border-color: #bfdbfe;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        background: #fbfdff;
    }

    .tienda-web-page .cw-input:disabled {
        background: #f8fafc;
        color: #94a3b8;
        cursor: not-allowed;
    }

.tienda-web-page .cw-textarea {
    resize: vertical;
    line-height: 1.45;
}

/* Explicación bajo un campo. Del gris de texto secundario, no del gris de deshabilitado: se lee. */
.tienda-web-page .cw-ayuda {
    font-size: 11px;
    color: #64748b;
    line-height: 1.4;
}

/* -----------------------------------------------------------------------------
   LA TARJETA — el único nivel de caja
   -------------------------------------------------------------------------- */

.tienda-web-page .tw-card {
    min-width: 0;
    background: var(--twc-surface);
    border: 1px solid var(--twc-line);
    border-radius: var(--twc-radius);
    box-shadow: var(--twc-shadow);
    padding: var(--twc-pad);
}

/* Variante en columna: la tarjeta reparte su alto entre cabecera fija y cuerpo que desplaza. La
   usan las pestañas que llenan la pantalla (Catálogo, Muestrarios, Configuración, Pedidos). */
.tienda-web-page .tw-card--col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* -----------------------------------------------------------------------------
   CABECERA DE TARJETA — lo que sustituye al marco interior
   -------------------------------------------------------------------------- */

.tienda-web-page .tw-card-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin-bottom: var(--twc-pad);
    padding-bottom: 11px;
    border-bottom: 1px solid var(--twc-line-soft);
    font-size: 14px;
    font-weight: 850;
    color: var(--twc-title);
    line-height: 1.25;
}

    .tienda-web-page .tw-card-head .material-symbols-outlined,
    .tienda-web-page .tw-card-head .material-symbols-rounded {
        flex: 0 0 auto;
        font-size: 18px;
        color: var(--twc-muted);
    }

/* Subtítulo bajo el título de una tarjeta. */
.tienda-web-page .tw-card-subtitle {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 500;
    color: var(--twc-muted);
    line-height: 1.4;
}

/* -----------------------------------------------------------------------------
   SECCIONES DENTRO DE UNA TARJETA — planas, SIN marco
   -------------------------------------------------------------------------- */

/* Bloque de pares etiqueta/valor. Antes cada uno de estos era un recuadro con su borde; son datos
   de una ficha, y una ficha se lee mejor como filas alineadas que como una cuadrícula de cajas. */
.tienda-web-page .tw-rows {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--twc-line-soft);
}

.tienda-web-page .tw-rows > * {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--twc-line-soft);
    font-size: 13px;
}

    .tienda-web-page .tw-rows > * > span {
        flex: 0 1 auto;
        min-width: 0;
        color: var(--twc-muted);
        font-weight: 700;
    }

    .tienda-web-page .tw-rows > * > strong {
        flex: 0 1 auto;
        min-width: 0;
        color: var(--twc-title);
        font-weight: 850;
        text-align: right;
        overflow-wrap: anywhere;
    }

/* -----------------------------------------------------------------------------
   AVISOS — el acento, y por qué se dibuja distinto SEGÚN DÓNDE ESTÉ
   -------------------------------------------------------------------------- */

/* Un aviso SUELTO sobre el gris necesita su caja: si no, flota sin apoyo. Pero el MISMO aviso
   dentro de una tarjeta no la necesita —ya está apoyado— y ponérsela devuelve el problema que este
   fichero viene a quitar: una caja dentro de otra. Se le deja el fondo, que es lo que dice «esto es
   un aviso», y se le quitan borde y esquina. */
.tienda-web-page .tw-card .tw-side-note,
.tienda-web-page .tw-card .tw-detail-note {
    border: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
    color: var(--twc-muted);
}

/* -----------------------------------------------------------------------------
   REJILLAS DE LA PANTALLA
   -------------------------------------------------------------------------- */

/* Espacio de trabajo de varias columnas (el diseñador de catálogo, listado + detalle…). El hueco
   es el mismo en las seis pestañas: sin eso, cada pestaña parece de una aplicación distinta. */
.tienda-web-page .tw-grid {
    display: grid;
    gap: var(--twc-gap);
    align-items: stretch;
    min-height: 0;
}

/* Secciones apiladas una debajo de otra, con el mismo hueco. */
.tienda-web-page .tw-stack {
    display: flex;
    flex-direction: column;
    gap: var(--twc-gap);
    min-height: 0;
}