/* ── Módulo de piso: vistas móviles del mesero y planos de mesas ── */

.piso-body { background: #f4f3ef; }
.piso-nav { background-color: #3D6B44; }
.piso-main { max-width: 720px; }

/* Plano en cuadrícula (config y monitor) */
.plano {
    display: grid;
    gap: 10px;
    grid-auto-rows: 72px;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    max-width: 640px;
}
.mesa-celda {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 2px solid #3D6B44; border-radius: 10px;
    background: #fff; text-decoration: none; color: #212529;
}
.mesa-celda:hover { background: #e9f3ea; }
.mesa-celda .mesa-num { font-size: 1.2rem; font-weight: 700; }
.mesa-celda .mesa-cap { font-size: .75rem; color: #6c757d; }
.mesa-inactiva { opacity: .4; border-style: dashed; }

/* Plano editable con drag & drop (admin) */
.plano-dnd {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    max-width: 760px;
}
.plano-dnd .plano-celda {
    min-height: 76px;
    border: 1px dashed #d8d4c8;
    border-radius: 10px;
}
.plano-dnd .plano-celda:hover { border-color: #3D6B44; background: #f2f7f3; }
.plano-dnd .mesa-celda { width: 100%; height: 100%; cursor: grab; }
.plano-dnd .mesa-celda:active { cursor: grabbing; }

/* Tarjetas de mesa con estado (mis mesas / monitor) */
.mesa-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.mesa-card {
    border-radius: 12px;
    padding: 10px 12px;
    border: 2px solid transparent;
    color: #212529;
    text-decoration: none;
    display: block;
    background: #fff;
}
a.mesa-card:active { transform: scale(.98); }
.mesa-card { min-height: 96px; }
.mesa-card .mesa-num { font-size: 1.7rem; font-weight: 700; }
.mesa-card .mesero-nombre { color: #495057; }

.estado-libre   { border-color: #adb5bd; background: #f8f9fa; }
.estado-ocupada { border-color: #2C5F8A; background: #e7f0f7; }
.estado-impresa { border-color: #B4682B; background: #f9efe3; }

.badge-libre   { background: #adb5bd; }
.badge-ocupada { background: #2C5F8A; }
.badge-impresa { background: #B4682B; }
.chips .badge { margin-right: 6px; }

/* ── Modo touch: todo presionable, grande y con retroalimentación ── */

.piso-main .btn {
    min-height: 52px;
    border-radius: 12px;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.piso-main .btn:active { transform: scale(.97); }
.piso-main .btn-link { min-height: 44px; }

/* Botones principales, aún más grandes */
.btn-piso {
    font-size: 1.25rem;
    font-weight: 600;
    min-height: 64px;
    padding: .7rem 1rem;
    border-radius: 14px;
}

/* Teclado numérico en pantalla */
.kp-dots {
    text-align: center;
    font-size: 1.9rem;
    letter-spacing: .45rem;
    min-height: 2.6rem;
    color: #3D6B44;
    user-select: none;
}
.teclado {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.teclado button {
    height: 68px;
    font-size: 1.7rem;
    font-weight: 600;
    border: 1px solid #ced4da;
    border-radius: 14px;
    background: #fff;
    color: #212529;
}
.teclado button:active { transform: scale(.93); background: #e9f3ea; }
.teclado .kp-borrar { background: #f8f9fa; color: #b02a37; }
.teclado .kp-ok { background: #3D6B44; border-color: #3D6B44; color: #fff; }
.teclado .kp-ok:active { background: #2e5234; }

/* Stepper −/+ para cantidades */
.stepper { display: flex; align-items: stretch; gap: 8px; }
.stepper button {
    width: 64px;
    min-height: 60px;
    font-size: 1.9rem;
    font-weight: 700;
    border: 1px solid #ced4da;
    border-radius: 14px;
    background: #fff;
    color: #3D6B44;
    flex: none;
}
.stepper button:active { transform: scale(.93); background: #e9f3ea; }
.stepper input {
    flex: 1;
    min-width: 70px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    border: 1px solid #ced4da;
    border-radius: 14px;
    background: #fff;
}
.stepper-sm button { width: 52px; min-height: 50px; font-size: 1.5rem; }
.stepper-sm input { font-size: 1.2rem; min-width: 56px; }

/* Mesa con asientos numerados (posición fija: 1 arriba, manecillas) */
.mesa-visual { position: relative; width: 250px; height: 250px; margin: 0 auto 10px; }
.mesa-visual .mesa-centro {
    position: absolute; inset: 58px;
    border-radius: 50%;
    background: #e9f3ea; border: 2px solid #3D6B44;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-weight: 700; color: #2e5234; text-align: center;
}
.mesa-visual .mesa-centro small { font-weight: 400; color: #5c7561; }
.asiento-chip {
    position: absolute; width: 42px; height: 42px; border-radius: 50%;
    background: #2C5F8A; color: #fff; font-weight: 700; font-size: 1.15rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    user-select: none;
}

/* Badge de comensal en líneas de cuenta y ticket */
.asiento-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 6px;
    border-radius: 50rem; background: #2C5F8A; color: #fff;
    font-weight: 700; font-size: .9rem;
}

/* Selector de comensal al capturar */
.comensal-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.comensal-chip { position: relative; margin: 0; }
.comensal-chip input { position: absolute; opacity: 0; pointer-events: none; }
.comensal-chip span {
    display: flex; align-items: center; justify-content: center;
    min-width: 58px; height: 58px; border-radius: 50%;
    border: 2px solid #ced4da; background: #fff;
    font-size: 1.3rem; font-weight: 700;
}
.comensal-chip.mesa-toda span { border-radius: 14px; padding: 0 16px; font-size: 1rem; font-weight: 600; }
.comensal-chip input:checked + span { border-color: #2C5F8A; background: #e7f0f7; color: #2C5F8A; }
.comensal-chip span:active { transform: scale(.95); }

/* Dividir cuenta: unidades que se pasan tocando */
.unidad {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    width: 100%; min-height: 58px; padding: .5rem .9rem; margin-bottom: 8px;
    background: #fff; border: 1px solid #dee2e6; border-radius: 12px;
    text-align: left; font-size: 1.02rem; color: #212529;
}
.unidad:active { transform: scale(.98); }
.unidad .flecha-mover { color: #2C5F8A; font-weight: 700; flex: none; }
.zona-nueva { border: 2px dashed #2C5F8A; border-radius: 14px; padding: 12px; background: #f6f9fc; }
.zona-nueva .unidad { border-color: #2C5F8A; background: #e7f0f7; }
.zona-vacia { color: #6c757d; text-align: center; padding: 14px 0; margin: 0; }

/* "Sin ingrediente" como fichas presionables */
.chips-check { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.chip-check { position: relative; margin: 0; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 54px;
    padding: .4rem .6rem;
    border: 2px solid #ced4da;
    border-radius: 12px;
    background: #fff;
    font-size: 1rem;
}
.chip-check input:checked + span {
    border-color: #B4682B;
    background: #f9efe3;
    font-weight: 700;
}
.chip-check span:active { transform: scale(.97); }

/* Lista de captura de platillos */
.platillo-btn {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; text-align: left;
    min-height: 62px; font-size: 1.1rem;
    background: #fff; border: 1px solid #dee2e6; border-radius: 12px;
    padding: .7rem 1rem; margin-bottom: 10px;
    color: #212529; text-decoration: none;
}
.platillo-btn:active { background: #e9f3ea; }
.platillo-precio { font-weight: 700; white-space: nowrap; }

/* Cuenta: líneas y modificadores */
.linea-cancelada { text-decoration: line-through; color: #adb5bd; }
.mod-item { font-size: .85rem; color: #6c757d; }
.mod-extra { color: #B4682B; }

/* Ticket imprimible */
.ticket {
    background: #fff; max-width: 380px; margin: 0 auto;
    padding: 18px; border: 1px dashed #adb5bd; border-radius: 8px;
    font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: .85rem;
}
.ticket table { width: 100%; }
.ticket td { vertical-align: top; padding: 1px 0; }
.ticket .tot { border-top: 1px dashed #adb5bd; font-weight: 700; }
@media print {
    .piso-nav, .alert, .d-print-none { display: none !important; }
    .piso-body { background: #fff; }
    .ticket { border: none; }
}