/* LOS PINCHOS DE VITRINA EN LA CENTRAL (C-web de docs/tpv/plan-pinchos-de-vitrina-2026-11-06.md; bocetos aprobados el 2026-11-06 en
   reports/tpv/bocetos-pinchos-2026-11-06/central/): el área Carta › Vitrina con sus cuatro pestañas (Vitrinas · Palillos · Pinchos · Plan de
   producción) y la zona «Vitrina» de la ficha de producto. Solo consume las fichas --limpia-* y las de densidad: el claro y el oscuro salen
   solos de hoja-limpia.css. Va antes de la hoja limpia, como plano-club.css. Los campos los mide densidad.css (40 px con la etiqueta de 12 px
   encima); desde la tableta (menos de 1280 px) todo lo que se toca, también los campos, mide 44 px. El ámbar es el color de la producción
   (la sugerida del plan); el rojo, solo para lo que está mal. */

.vit-area { margin-bottom: 14px; }

/* ---- Vitrinas: la lista a la izquierda y la ficha a la derecha ------------------------------------------------------------- */
.vit-md { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.vit-lista { display: flex; flex-direction: column; background: var(--limpia-hoja); border: 1px solid var(--limpia-borde); border-radius: var(--limpia-radio); overflow: hidden; min-width: 0; }
.vit-item {
    display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 12px; border: 0; border-top: 1px solid var(--limpia-borde-fino); background: none;
    color: var(--limpia-tinta); font: inherit; text-align: left; cursor: pointer; min-width: 0; width: 100%;
}
.vit-item:first-child { border-top: 0; }
.vit-item:hover { background: var(--limpia-hover); }
.vit-item[aria-current="true"] { background: var(--limpia-morado-aguada); box-shadow: inset 3px 0 0 var(--limpia-morado); }
.vit-item-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.vit-item-texto b { font-size: .875rem; font-weight: 600; }
.vit-item-texto small { font-size: .75rem; color: var(--limpia-tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vit-item-nueva { color: var(--limpia-morado); font-weight: 600; font-size: .875rem; }
.vit-mas { display: inline-grid; place-items: center; width: 20px; font-weight: 700; }
.vit-ficha { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-bottom: 8px; }
.vit-volver { align-self: flex-start; display: none; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--limpia-morado); font: inherit; font-weight: 600; cursor: pointer; }
.vit-dato { display: flex; flex-direction: column; min-width: 0; }
.vit-dato-valor { display: flex; align-items: center; min-height: var(--densidad-campo, 40px); padding: 0 12px; border-radius: var(--limpia-radio-control); background: var(--limpia-neutro-fondo);
    color: var(--limpia-neutro-tinta); font-size: .875rem; line-height: 1.3; }
.vit-pie-nota { color: var(--limpia-tinta-3); }
.vit-pie { flex-wrap: wrap; }
.vit-confirmar { display: inline-flex; gap: 8px; margin-left: 8px; vertical-align: middle; }
.club-pie.vit-pie { z-index: 3; }

/* ---- Las herramientas de las listas (buscador, filtros, añadir) -------------------------------------------------------------- */
.vit-herramientas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin-bottom: 12px; }
.vit-buscar { flex: 0 1 280px; min-width: 200px; }
.vit-espacio { flex: 1 1 auto; }
.vit-frases { margin: 0 0 12px; padding-left: 28px; }
.vit-mal { color: var(--limpia-error-tinta); }

/* ---- El palillo: el trazo de color del tipo (el color de la paleta cerrada), en las listas y en las celdas ------------------------- */
.vit-palo { display: inline-block; width: 22px; height: 7px; border-radius: 4px; margin-right: 8px; vertical-align: 2px; flex: none; }
.vit-palo-alto { width: 8px; height: 28px; border-radius: 3px; margin-right: 0; vertical-align: baseline; }
.vit-celda-palo { display: inline-flex; align-items: center; white-space: nowrap; }
.vit-fila-elegida td { background: var(--limpia-morado-aguada); }
.vit-zona-palillo { margin-top: 14px; }
.vit-muestras { display: flex; flex-wrap: wrap; gap: 6px; }
.vit-muestra {
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: 7px; background: var(--c); cursor: pointer; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.vit-muestra[aria-checked="true"] { box-shadow: 0 0 0 2px var(--limpia-hoja), 0 0 0 4px var(--limpia-morado); }
.vit-muestra:focus-visible { outline: 2px solid var(--limpia-morado); outline-offset: 3px; }

/* ---- La zona «Vitrina» de la ficha de producto -------------------------------------------------------------------------------- */
.vit-vits { display: flex; flex-wrap: wrap; gap: 6px; }
.vit-vit {
    display: inline-flex; align-items: center; gap: 6px; min-height: var(--densidad-boton, 36px); padding: 0 12px; border: 1px solid var(--limpia-borde-control); border-radius: var(--limpia-radio-control);
    background: var(--limpia-hoja); color: var(--limpia-tinta); font: inherit; font-size: .8125rem; cursor: pointer;
}
.vit-vit-on { background: var(--limpia-morado-aguada); border-color: var(--limpia-morado); color: var(--limpia-morado); font-weight: 600; }

/* ---- «Cómo se cobra»: tres modos y, con «Por encargo», lo que hace falta para que funcione (boceto e1/e2 de docs/tpv/plan-pinchos-por-encargo-2026-11-14.md) ---- */
.vit-modo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vit-segmento { display: flex; flex-wrap: wrap; width: max-content; max-width: 100%; border: 1px solid var(--limpia-borde-control); border-radius: var(--limpia-radio-control); overflow: hidden; }
.vit-segmento-opcion {
    min-height: var(--densidad-boton, 36px); padding: 0 14px; border: 0; border-left: 1px solid var(--limpia-borde-control); background: var(--limpia-hoja); color: var(--limpia-tinta);
    font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
}
.vit-segmento-opcion:first-child { border-left: 0; }
.vit-segmento-opcion:hover:not([aria-pressed="true"]) { background: var(--limpia-hover); }
.vit-segmento-opcion[aria-pressed="true"] { background: var(--limpia-morado-aguada); color: var(--limpia-morado); }
.vit-segmento-opcion[aria-pressed="true"]::before { content: "✓ "; }
.vit-segmento-opcion:focus-visible { outline: 2px solid var(--limpia-morado); outline-offset: -2px; }
.vit-requisitos { margin-top: 8px; border: 1px solid var(--limpia-borde); border-radius: var(--limpia-radio); overflow: hidden; }
.vit-requisitos > b { display: block; padding: 8px 12px; background: var(--limpia-cabecera); font-size: .8125rem; border-bottom: 1px solid var(--limpia-borde-fino); }
.vit-req { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--limpia-borde-fino); font-size: .8125rem; min-width: 0; }
.vit-requisitos > b + .vit-req { border-top: 0; }
.vit-req-marca { flex: none; width: 18px; height: 18px; display: inline-grid; place-items: center; margin-top: 1px; border-radius: 50%; font-size: .6875rem; font-weight: 700; }
.vit-req-que { flex: none; width: 104px; color: var(--limpia-tinta-2); font-weight: 600; }
.vit-req-dice { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.vit-req--bien .vit-req-marca { background: var(--limpia-bien-fondo); color: var(--limpia-bien-tinta); }
.vit-req--aviso { background: var(--limpia-aviso-fondo); }
.vit-req--aviso .vit-req-marca, .vit-req--aviso .vit-req-dice { color: var(--limpia-aviso-tinta); }
.vit-escondidos { margin: 8px 0 0; font-size: .8125rem; color: var(--limpia-tinta-3); }

/* ---- El plan: por tanda con su hora ---------------------------------------------------------------------------------------------- */
.vit-plan-vitrina { flex: 0 0 200px; max-width: 100%; }
.vit-dias .club-segmento { min-width: 36px; min-height: 36px; justify-content: center; }
.vit-copiar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 12px; border-radius: var(--limpia-radio-control); background: var(--limpia-neutro-fondo); }
.vit-copiar .club-etiqueta { margin: 0; }
.vit-plan-tabla { margin-bottom: 8px; }
.vit-plan th, .vit-plan td { vertical-align: top; }
.vit-plan thead th { white-space: nowrap; }
/* La franja bajo la hora de la tanda («08:30» y debajo «Desayuno»), con el mismo tono que lo demás de segundo orden. */
.vit-franja { display: block; margin-top: 2px; font-size: .75rem; font-weight: 500; color: var(--limpia-tinta-2); }
.vit-franja-en-linea { font-size: .8125rem; color: var(--limpia-tinta-2); }
.vit-plan tfoot td { font-weight: 700; background: var(--limpia-cabecera); }
.vit-plan td:first-child { min-width: 150px; }
.vit-celda { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.vit-celda-pie { display: flex; align-items: center; gap: 6px; }
.vit-num {
    box-sizing: border-box; width: 76px; height: var(--densidad-campo, 40px); padding: 0 10px; border: 1px solid var(--limpia-borde-control); border-radius: var(--limpia-radio-control);
    background: var(--limpia-hoja); color: var(--limpia-tinta); font: inherit; font-size: .875rem; text-align: right; font-variant-numeric: tabular-nums;
}
.vit-num::-webkit-inner-spin-button, .vit-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.vit-num { -moz-appearance: textfield; appearance: textfield; }
.vit-num:focus-visible { outline: 2px solid var(--limpia-morado); outline-offset: 1px; }
.vit-num-minimo { width: 56px; height: 32px; font-size: .8125rem; color: var(--limpia-tinta-2); }
.vit-num-sug { border-color: var(--limpia-aviso-tinta); background: var(--limpia-aviso-fondo); }
.vit-sug { color: var(--limpia-aviso-tinta); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.vit-hora {
    box-sizing: border-box; height: 32px; width: 92px; padding: 0 6px; border: 1px solid var(--limpia-borde-control); border-radius: var(--limpia-radio-control);
    background: var(--limpia-hoja); color: var(--limpia-tinta); font: inherit; font-size: .8125rem;
}
.vit-boton-corto { min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--limpia-radio-control); background: none; color: var(--limpia-morado); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.vit-nueva-tanda { white-space: nowrap; }
.vit-plan-tarjetas { display: none; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.vit-tanda { border: 1px solid var(--limpia-borde); border-radius: var(--limpia-radio); background: var(--limpia-hoja); overflow: hidden; }
.vit-tanda > header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--limpia-borde-fino); background: var(--limpia-cabecera); }
.vit-tanda-fila { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--limpia-borde-fino); min-height: 56px; }
.vit-tanda > header + .vit-tanda-fila { border-top: 0; }
.vit-tanda-texto { flex: 1 1 auto; min-width: 0; font-size: .875rem; }
.vit-tanda-fila .vit-celda { align-items: flex-end; }

/* ---- Lo que se toca: 36 px en el escritorio (compacto, con ratón) y 44 desde la tableta; los campos de MudBlazor salen de --densidad-* ------------------------ */
.vit-pantalla .club-segmento, .vit-pantalla .club-pastilla, .vit-pantalla .vit-vit, .vit-pantalla .club-area-pestana, .vit-pantalla .vit-boton-corto,
.vit-pantalla .vit-hora, .vit-pantalla .club-interruptor, .vit-pantalla .vit-item { min-height: var(--densidad-boton, 36px); }
.vit-pantalla .vit-hora, .vit-pantalla .vit-boton-corto, .vit-pantalla .vit-num-minimo { height: var(--densidad-boton, 36px); }
.vit-pantalla .club-segmento { min-width: var(--densidad-boton, 36px); justify-content: center; }
.vit-pantalla .vit-item { min-height: 52px; }
.vit-pantalla .vit-muestra { width: var(--densidad-boton, 36px); height: var(--densidad-boton, 36px); }

/* ---- Tableta y teléfono: todo lo que se toca mide 44 px; los campos también ------------------------------------------------------------------- */
@media (max-width: 1279px) {
    .vit-pantalla { --densidad-campo: 44px; --densidad-boton: 44px; --densidad-boton-pequeno: 44px; }
    .vit-md { grid-template-columns: minmax(0, 1fr); }
    .vit-md:not(.vit-md-abierta) .vit-ficha { display: none; }
    .vit-md.vit-md-abierta .vit-lista { display: none; }
    .vit-md.vit-md-abierta .vit-volver { display: inline-flex; }
    .vit-pantalla .vit-item { min-height: 56px; }
    .vit-pantalla .club-pie .mud-button-root { min-height: 44px; }
}
@media (max-width: 719px) {
    /* «Cómo se cobra»: los tres modos uno bajo otro (el tercero es largo) y los requisitos con su frase debajo de la etiqueta. */
    .vit-segmento { width: 100%; flex-direction: column; }
    .vit-segmento-opcion { min-height: 44px; border-left: 0; border-top: 1px solid var(--limpia-borde-control); text-align: left; }
    .vit-segmento-opcion:first-child { border-top: 0; }
    .vit-req { flex-wrap: wrap; gap: 4px 10px; }
    .vit-req-que { width: auto; }
    .vit-req-dice { flex-basis: 100%; padding-left: 28px; }
    .vit-pie-nota { display: none; }
    .vit-plan-tabla { display: none; }
    .vit-plan-tarjetas { display: flex; }
    .vit-buscar { flex: 1 1 100%; }
    .vit-plan-vitrina { flex: 1 1 100%; }
    .vit-herramientas .mud-button-root { flex: 1 1 auto; }
    /* Con el dedo, 44 px por día (punta a punta de la integración: a 390 salían de 23): los ocho no caben en una fila y pasan a dos. */
    .vit-dias { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; }
    .vit-dias .club-segmento { flex: 1 0 44px; min-width: 44px; min-height: 44px; padding: 0 6px; }
    .vit-dias .club-segmento:last-child { flex: 2 0 88px; }
    .vit-num { width: 72px; }
    .vit-num-minimo { width: 60px; }
}

/* ---- F2: el asistente de palillos y la sobreproducción del plan (2026-11-08) ------------------------------------------------------------------- */
.vit-zona-asistente { margin-bottom: 14px; }
.vit-col-marca { width: 44px; }
.vit-marca { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: var(--densidad-boton, 36px); min-height: var(--densidad-boton, 36px); cursor: pointer; }
.vit-marca input { width: 18px; height: 18px; margin: 0; accent-color: var(--limpia-morado); cursor: pointer; }
.vit-marca--texto { justify-content: flex-start; margin: 10px 0 0; font-size: .875rem; }
.vit-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vit-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.vit-recom { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: var(--limpia-radio-control); font-size: .75rem; font-weight: 600; vertical-align: 1px; white-space: nowrap;
    color: var(--limpia-aviso-tinta); background: var(--limpia-aviso-fondo); }
.vit-reduce { display: inline-block; padding: 1px 6px; border-radius: 4px; color: var(--limpia-aviso-tinta); background: var(--limpia-aviso-fondo); font-size: .75rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 1279px) {
    .vit-pantalla .vit-marca { min-width: 44px; min-height: 44px; }
}
@media (max-width: 719px) {
    .vit-acciones .mud-button-root { flex: 1 1 auto; }
}