/* Sitia — estilos propios (sobre Bootstrap 5). Mobile-first. */
:root {
    --sitia-ink: #0f172a;
    --sitia-accent: #0d6efd;
    --sitia-bg: #f5f7fb;
    --sitia-sidebar: 15rem;
    --sitia-bottomnav: 4.25rem;
}

body { background: var(--sitia-bg); color: var(--sitia-ink); }

.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: .6rem;
    background: var(--sitia-ink); color: #fff; font-weight: 700; letter-spacing: -.02em;
}
.brand-mark-lg { width: 3.5rem; height: 3.5rem; font-size: 1.75rem; border-radius: 1rem; }

.panel-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--sitia-ink); text-decoration: none; }

/* Landing */
.landing .hero { padding-top: clamp(2rem, 8vh, 6rem); }

/* Panel: estructura */
.panel-body { margin: 0; }
.panel-shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.panel-sidebar {
    width: var(--sitia-sidebar); flex: 0 0 var(--sitia-sidebar);
    background: #fff; border-right: 1px solid #e5e7eb; padding: 1rem;
    position: sticky; top: 0; height: 100vh; height: 100dvh;
}
.panel-link { display: flex; align-items: center; gap: .75rem; color: #475569; border-radius: .6rem; padding: .6rem .85rem; }
.panel-link:hover { background: #f1f5f9; color: var(--sitia-ink); }
.panel-link.active { background: var(--sitia-ink); color: #fff; }
.panel-link .bi { font-size: 1.15rem; }

.panel-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.panel-topbar {
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem 1rem; background: #fff; border-bottom: 1px solid #e5e7eb;
    position: sticky; top: 0; z-index: 1020;
    padding-top: calc(.65rem + env(safe-area-inset-top));
}
.panel-content { padding: 1rem; padding-bottom: calc(var(--sitia-bottomnav) + 1rem + env(safe-area-inset-bottom)); }
@media (min-width: 992px) { .panel-content { padding: 1.5rem 2rem 2rem; } }

/* Navegación inferior móvil */
.panel-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    background: #fff; border-top: 1px solid #e5e7eb;
    height: calc(var(--sitia-bottomnav) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
}
.panel-bottomnav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    color: #64748b; text-decoration: none; font-size: .7rem;
}
.panel-bottomnav a .bi { font-size: 1.35rem; }
.panel-bottomnav a.active { color: var(--sitia-accent); font-weight: 600; }

/* Tarjetas de estadísticas */
.stat-card .stat-icon { font-size: 1.75rem; color: var(--sitia-accent); }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }

/* Áreas táctiles cómodas en móvil */
@media (max-width: 575.98px) {
    .btn, .form-control, .form-select { min-height: 2.75rem; }
}

/* ===== Editor de salón ===== */
.editor { display: flex; flex-direction: column; height: calc(100dvh - 3.6rem - var(--sitia-bottomnav) - env(safe-area-inset-bottom) - 2rem); min-height: 420px; }
@media (min-width: 992px) { .editor { height: calc(100dvh - 3.6rem - 3rem); } }
.editor-barra { display: flex; align-items: center; gap: .5rem; padding-bottom: .5rem; flex-wrap: wrap; }
.editor-nombre { max-width: 16rem; font-weight: 600; }
.editor-cuerpo { flex: 1 1 auto; display: flex; gap: .75rem; min-height: 0; position: relative; }
.editor-lienzo { flex: 1 1 auto; position: relative; min-width: 0; background: #e9edf3; border: 1px solid #d7dde6; border-radius: .6rem; overflow: hidden; }
.editor-scroll { position: absolute; inset: 0; overflow: auto; display: grid; place-items: start center; padding: .5rem; }
.editor-svg { touch-action: none; user-select: none; -webkit-user-select: none; display: block; }
.editor-svg .el { cursor: grab; }
.editor-svg .el:active { cursor: grabbing; }
.editor-svg.modo-contorno { cursor: crosshair; }
.editor-svg.modo-contorno .el { pointer-events: none; }
.editor-svg .el.seleccionado .el-shape { stroke: #0d6efd; stroke-width: 3; }
.editor-svg .el.detectado .el-shape { stroke: #d97706; stroke-dasharray: 6 3; }
.editor-zoom { position: absolute; right: .6rem; top: .6rem; z-index: 5; }
.editor-aviso-contorno { position: absolute; left: .6rem; right: 4rem; top: .6rem; z-index: 5; background: rgba(15,23,42,.92); color: #fff; padding: .5rem .75rem; border-radius: .5rem; font-size: .9rem; }
.editor-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--sitia-bottomnav) + 1rem + env(safe-area-inset-bottom)); z-index: 1060; min-width: 16rem; max-width: 90vw; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.2); }
@media (min-width: 992px) { .editor-toast { bottom: 1.5rem; } }

/* Panel de propiedades: lateral en escritorio */
.editor-props { width: 19rem; flex: 0 0 19rem; background: #fff; border: 1px solid #d7dde6; border-radius: .6rem; padding: .85rem; overflow-y: auto; }
.editor-props-vacio { padding: .5rem 0; }

/* Hoja inferior en móvil */
@media (max-width: 991.98px) {
    .editor-props { position: fixed; left: 0; right: 0; bottom: calc(var(--sitia-bottomnav) + env(safe-area-inset-bottom)); width: auto; flex: none;
        max-height: 55vh; border-radius: 1rem 1rem 0 0; box-shadow: 0 -.5rem 1.5rem rgba(0,0,0,.15); transform: translateY(110%); transition: transform .2s ease; z-index: 1025; }
    .editor-props.abierto { transform: translateY(0); }
    .editor-props-vacio { display: none; }
}

/* Vista pública del salón */
.salon-publico-svg { width: 100%; height: auto; display: block; touch-action: pan-x pan-y; }
.salon-publico-svg .el-mesa { cursor: pointer; }
.salon-publico-svg .el-mesa.estado-ocupada .el-shape { fill: #e5e7eb; stroke: #9ca3af; }
.salon-publico-svg .el-mesa.estado-ocupada text { fill: #9ca3af; }
.salon-publico-svg .el-mesa.estado-seleccionada .el-shape { stroke: #0d6efd; stroke-width: 4; fill: #dbeafe; }

/* ===== Reserva pública ===== */
.reserva .r-horarios .btn { min-width: 4.4rem; }
.reserva .r-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.r-resumen { position: sticky; bottom: 0; z-index: 1020; display: flex; align-items: center; gap: .75rem; background: #fff; border-top: 1px solid #e5e7eb;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); margin: 0 -.75rem; box-shadow: 0 -.5rem 1.5rem rgba(0,0,0,.08); }
.r-resumen-texto { flex: 1 1 auto; min-width: 0; }
.salon-publico-svg .el-mesa.estado-libre .el-shape { cursor: pointer; }
.salon-publico-svg .el-mesa.estado-libre:hover .el-shape { stroke-width: 3; }

/* Plano de la agenda (panel) */
.plano-agenda-svg .el-mesa.estado-reservada .el-shape { fill: #fee2e2; stroke: #b91c1c; }
.plano-agenda-svg .el-mesa { cursor: pointer; }

/* ---- Comprobante de reserva (impresión / PDF) ---- */
.solo-imprimir { display: none; }
@media print {
    @page { margin: 1.2cm; }
    body { background: #fff !important; }
    body > :not(main), .flash-container, .no-imprimir { display: none !important; }
    .solo-imprimir { display: block; }
    main { padding: 0 !important; max-width: 100% !important; }
    .comprobante { box-shadow: none !important; border: 1px solid #cbd5e1 !important; }
    .badge { border: 1px solid currentColor; color: #000 !important; background: #fff !important; }
    .alert-warning { border: 1px solid #b45309; }
}