/* ponytail: CSS plano, sin framework. Botones grandes desde ya para que el
   salto a una app Android (WebView) no requiera rediseñar nada. */
* { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }

/* Variables de color: body.oscuro las pisa para el modo oscuro (config. en configuracion.php). */
:root {
    --color-fondo: #f2f2f2;
    --color-superficie: #ffffff;
    --color-texto: #111827;
    --color-texto-secundario: #666666;
    --color-borde: #cccccc;
    --color-borde-suave: #eeeeee;
    --color-hover: #e5e7eb;
    --color-boton-suave: #e5e7eb;
    --color-barra-fondo: #e5e7eb;
    --color-error-bg: #fee2e2;
    --color-error-texto: #991b1b;
    --color-ok-bg: #dcfce7;
    --color-ok-texto: #166534;
    --color-aviso-bg: #fef3c7;
    --color-aviso-texto: #92400e;
    --color-vencido-bg: #fee2e2;
    --color-link: #2563eb;
    --color-nav-fondo: #e5e7eb;
    --color-nav-boton: #ffffff;
    --color-nav-texto: #111827;
}
body.oscuro {
    --color-fondo: #0f172a;
    --color-superficie: #1e293b;
    --color-texto: #e5e7eb;
    --color-texto-secundario: #9ca3af;
    --color-borde: #334155;
    --color-borde-suave: #334155;
    --color-hover: #334155;
    --color-boton-suave: #334155;
    --color-barra-fondo: #334155;
    --color-error-bg: #451a1a;
    --color-error-texto: #fca5a5;
    --color-ok-bg: #14532d;
    --color-ok-texto: #86efac;
    --color-aviso-bg: #451a03;
    --color-aviso-texto: #fbbf24;
    --color-vencido-bg: #451a1a;
    --color-link: #60a5fa;
    --color-nav-fondo: #1f2937;
    --color-nav-boton: #374151;
    --color-nav-texto: #ffffff;
}

body {
    font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    margin: 0;
    background: var(--color-fondo);
    color: var(--color-texto);
    font-size: 18px;
}
.nav-bar { display: none; }
.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--color-nav-fondo);
    padding: 10px;
}
.nav-btn {
    flex: 1;
    text-align: center;
    padding: 16px 10px;
    background: var(--color-nav-boton);
    color: var(--color-nav-texto);
    text-decoration: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 120px;
}
.nav-btn.activo { background: #2563eb; color: #fff; }

.contenido { padding: 14px; max-width: 1300px; margin: 0 auto; }

/* ---- Sub-nav de Administración (Reportes/Productos/Clientes/Compras/Ajustar stock) ---- */
.admin-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.admin-subnav-btn {
    padding: 12px 18px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 10px;
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    text-decoration: none;
    cursor: pointer;
}
.admin-subnav-btn.activo { background: #2563eb; color: #fff; border-color: #2563eb; }
.admin-subnav-salir { border-color: #dc2626; color: #dc2626; margin-left: auto; }
.admin-subnav-salir:hover { background: var(--color-error-bg); }

/* ---- Mobile: menú tipo hamburguesa ---- */
@media (max-width: 700px) {
    .nav-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--color-nav-fondo);
        padding: 12px 16px;
    }
    .nav-titulo { color: var(--color-nav-texto); font-weight: 800; font-size: 1.2rem; }
    .nav-toggle {
        background: none;
        border: none;
        color: var(--color-nav-texto);
        font-size: 1.8rem;
        line-height: 1;
        padding: 4px 8px;
        cursor: pointer;
    }
    .nav {
        display: none;
        flex-direction: column;
        padding: 0 10px 10px;
    }
    .nav.abierto { display: flex; }
    .nav-btn { min-width: 0; text-align: left; }
}

h1, h2 { margin: 0 0 12px; }

.error { background: var(--color-error-bg); color: var(--color-error-texto); padding: 12px; border-radius: 8px; margin-bottom: 12px; font-weight: 600; }
.ok { background: var(--color-ok-bg); color: var(--color-ok-texto); padding: 12px; border-radius: 8px; margin-bottom: 12px; font-weight: 600; }
.aviso { background: var(--color-aviso-bg); color: var(--color-aviso-texto); padding: 12px; border-radius: 8px; margin-bottom: 12px; font-weight: 600; }

/* Banner de suscripción vencida (módulo Pedidos Online) — fijo arriba de
   todo el panel, no se puede cerrar (ver partials/nav.php). A propósito NO
   usa .aviso/.error: tiene que quedar visualmente distinto de cualquier
   aviso descartable de una pantalla puntual. */
.banner-suscripcion { background: var(--color-error-bg); color: var(--color-error-texto); padding: 10px 16px; text-align: center; font-weight: 600; }

/* ---- Venta ---- */
/* Carrito con más aire que un simple 1fr: desde que tiene botón de descuento
   además del de cantidad y el de quitar, una columna angosta apretaba los
   tres controles de la última celda. */
.venta-layout { display: grid; grid-template-columns: 2fr 1.4fr; gap: 16px; }
@media (max-width: 900px) { .venta-layout { grid-template-columns: 1fr; } }

.categorias { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cat-btn {
    padding: 16px 20px;
    font-size: 1.1rem;
    border-radius: 10px;
    border: 2px solid #2563eb;
    background: var(--color-superficie);
    color: #2563eb;
    text-decoration: none;
    font-weight: 700;
}
.cat-btn.activo { background: #2563eb; color: #fff; }

/* ---- Categorías colapsables (mesas/mostrador/delivery): en vez de mostrar
   siempre todos los botones de categoría (con muchas categorías ocupaba
   demasiado alto de pantalla), se ve solo "Todas" por defecto y tocarlo
   despliega el resto como un menú flotante que se superpone sobre la lista
   de productos (position:absolute -- no empuja el layout ni estira el botón
   "Todas" al alto del menú). El ancho de esos botones se pareja por JS al
   de la categoría con el nombre más largo de la lista (ver script al final
   de cada página). Ver feedback de Lucas. ---- */
.categorias-resto {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 8px;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    z-index: 30;
    background: var(--color-superficie);
    border: 2px solid var(--color-borde);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.categorias-resto .cat-btn { white-space: nowrap; }
.categorias-resto.oculto { display: none; }

.buscar-form { display: flex; gap: 8px; margin-bottom: 12px; }
.buscar-form input[type=text] {
    flex: 1;
    min-width: 0;
    font-size: 1.4rem;
    padding: 16px;
    border-radius: 10px;
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
}
.buscar-form .btn-grande { flex-shrink: 0; }
@media (max-width: 500px) {
    .buscar-form { flex-wrap: wrap; }
    .buscar-form input[type=text] { flex-basis: 100%; }
    .buscar-form .btn-grande { flex: 1; }
}
.buscar-wrap { position: relative; }
.resultados-busqueda {
    display: none;
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-superficie);
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
    margin-top: 4px;
    overflow: hidden;
}
.resultado-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border: none;
    border-bottom: 1px solid var(--color-borde-suave);
    background: var(--color-superficie);
    color: var(--color-texto);
    font-size: 1.05rem;
    cursor: pointer;
}
.resultado-item:last-child { border-bottom: none; }
.resultado-item:active { background: var(--color-hover); }
/* "+ Agregar cliente ..." dentro de los resultados del buscador de cliente
   (ver partials/cliente_selector_js.php) — mismo color de acento que el resto
   de los botones primarios, para distinguirlo de un cliente ya existente. */
.resultado-item-crear { color: #2563eb; font-weight: 700; }

.grid-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.prod-form { margin: 0; display: flex; flex-direction: column; }
.prod-btn {
    width: 100%;
    min-height: 90px;
    padding: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 12px;
    border: none;
    background: var(--color-superficie);
    color: var(--color-texto);
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
    cursor: pointer;
    line-height: 1.3;
    margin-top: auto;
}
.prod-btn:active { background: var(--color-hover); }
.prod-btn small { display: block; font-weight: 500; color: #2563eb; font-size: .95rem; margin-top: 4px; }

/* Mesas del salón (grilla libre/ocupada en index.php): el texto de abajo
   difiere en largo ("Libre" vs "Ocupada — Fulano", una o dos líneas), y una
   mesa es <a><span> (navegación) mientras que la otra es <form><button>
   (acción). Sin esto, la más alta de la fila queda de un tamaño distinto a
   sus vecinas y la fila se ve desalineada. height:100% hace que ambos tipos
   de tile llenen el mismo alto de fila que ya estira .grid-productos, y el
   centrado evita que el número/nombre de mesa quede pegado a la izquierda. */
.mesa-btn {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ---- Mapa del salón (ubicar mesas a mano, ver mesas_admin.php/index.php) ----
   Rectángulo único con las mesas en posición absoluta (% del ancho/alto, ver
   mesas.pos_x/pos_y) en vez de la grilla automática de siempre. Mismo
   rectángulo se usa editable (con drag, en mesas_admin.php) y de solo lectura
   (en index.php, ver .mesa-mapa-item ahí abajo). */
.salon-mapa {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    border: 2px dashed var(--color-borde);
    border-radius: 12px;
    background: var(--color-fondo);
    overflow: hidden;
}
/* Contenedor posicionado de una mesa dentro del mapa (% del ancho/alto, ver
   mesas.pos_x/pos_y) -- mismo contenedor Y mismo .prod-btn.mesa-btn de
   adentro tanto en el editor (mesas_admin.php) como en la vista de solo
   lectura (index.php), a propósito: si el tamaño difiriera entre las dos
   pantallas, la misma posición guardada se vería corrida de un lugar a otro. */
.mesa-mapa-item {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 130px;
}
/* Variante arrastrable, solo en el editor de mesas_admin.php. touch-action:none
   evita que el navegador intente hacer scroll de la página mientras se
   arrastra con el dedo. */
.mesa-mapa-item.arrastrable { cursor: grab; touch-action: none; user-select: none; }
.mesa-mapa-item.arrastrable.arrastrando { cursor: grabbing; z-index: 5; }
.prod-img { display: block; width: 100%; height: 70px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.img-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; display: block; }
.img-preview { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; display: block; margin-top: 6px; }
.qty-input {
    width: 100%;
    font-size: 1.1rem;
    padding: 10px;
    margin-bottom: 4px;
    border-radius: 8px;
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    text-align: center;
}

.carrito { background: var(--color-superficie); color: var(--color-texto); border-radius: 12px; padding: 14px; }
.carrito table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.carrito td, .carrito th { padding: 8px 4px; border-bottom: 1px solid var(--color-borde-suave); text-align: left; }
.carrito .quitar-btn { background: #ef4444; color: #fff; border: none; border-radius: 6px; padding: 8px 12px; font-size: 1rem; }
.carrito .desc-btn {
    background: var(--color-boton-suave);
    color: var(--color-texto);
    border: none;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    margin-right: 6px;
}
.carrito .desc-btn:active { background: var(--color-hover); }
.carrito .desc-btn-activo { background: #2563eb; color: #fff; }
.desc-tag { color: #dc2626; font-weight: 700; }
.cant-control { display: flex; align-items: center; gap: 6px; }
.cant-control span { min-width: 2ch; text-align: center; font-weight: 700; }
.qty-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: var(--color-boton-suave);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    color: var(--color-texto);
}
.qty-btn:active { background: var(--color-hover); }
.total-line { font-size: 1.6rem; font-weight: 800; text-align: right; margin: 10px 0; }

.formas-pago { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.formas-pago label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px;
    border-radius: 10px;
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    font-weight: 700;
    cursor: pointer;
}
.formas-pago input { display: none; }
.formas-pago input:checked + span,
.formas-pago label:has(input:checked) { background: #2563eb; color: #fff; border-color: #2563eb; }

/* Widget de "cliente asociado a la venta" (mesas/mostrador/delivery) — ver
   partials/cliente_selector.php. El chip reusa el color de acento de las
   formas de pago seleccionadas para que se sienta parte del mismo sistema. */
.cliente-widget { margin: 10px 0; }
.cliente-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 2px solid #2563eb;
    background: #2563eb;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
}
/* Dirección del cliente elegido, para confirmar de un vistazo que es el
   correcto antes de cobrar (ver actualizarChipCliente() en cliente_selector_js.php). */
.cliente-direccion-info { margin-top: 6px; color: var(--color-texto-secundario); font-size: .95rem; }

.btn-grande {
    width: 100%;
    padding: 20px;
    font-size: 1.4rem;
    font-weight: 800;
    border-radius: 12px;
    border: none;
    background: #16a34a;
    color: #fff;
    cursor: pointer;
    margin-top: 10px;
}
.btn-secundario { background: #6b7280; }
.btn-peligro { background: #dc2626; }
.btn-whatsapp { background: #25D366; text-decoration: none; display: block; text-align: center; box-sizing: border-box; }

/* ---- Formularios genéricos (productos/compras/ajustes/reportes) ---- */
.form-card { background: var(--color-superficie); color: var(--color-texto); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
/* Cuando el form-card es un <details> (secciones colapsables, ej. Configuración) */
.form-card summary { cursor: pointer; }
.form-card summary h2 { display: inline; }
.form-card[open] summary h2 { margin-bottom: 0; }
.form-card summary ~ * { margin-top: 12px; }
.form-card label { display: block; margin-top: 10px; font-weight: 600; }
.form-card small { display: block; color: var(--color-texto-secundario); margin-top: 4px; }
.form-card input[type=checkbox] {
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    accent-color: #2563eb;
    flex-shrink: 0;
}
.form-card label.check-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 400;
}
.form-card input, .form-card select, .form-card textarea {
    width: 100%;
    padding: 14px;
    font-size: 1.1rem;
    border-radius: 8px;
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    margin-top: 4px;
}
.form-card textarea { font-family: inherit; resize: vertical; }

/* ---- Mini popup: pedir peso al agregar un producto por peso ---- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 16px;
}
.modal-card {
    background: var(--color-superficie);
    color: var(--color-texto);
    border-radius: 12px;
    padding: 20px;
    width: 100%;
    max-width: 320px;
}
/* Variante ancha: formularios con muchos campos (ej. editor de productos,
   con imagen incluida) no entran comodos en los 320px del popup chico de
   confirmacion. max-height + scroll propio para que no se corte en pantallas
   bajas (tactil/kiosco). */
.modal-card-ancho { max-width: 480px; max-height: 90vh; overflow-y: auto; }
.modal-card h3 { margin: 0 0 12px; font-size: 1.15rem; }
.modal-card p { margin: 0; font-size: .95rem; }
.modal-card button:disabled { opacity: .5; cursor: not-allowed; }
/* Los botones de acá reusan .btn-grande/.btn-secundario/.btn-peligro por el
   color, pero el tamaño "grande" (pensado para un botón único de pantalla
   completa) queda enorme para un popup chico de confirmación. */
.modal-card .btn-grande {
    padding: 12px;
    font-size: 1rem;
    border-radius: 8px;
    margin-top: 0;
}

.lista-categorias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tag-categoria {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-hover);
    color: var(--color-texto);
    padding: 6px 8px 6px 12px;
    border-radius: 20px;
    font-size: .95rem;
    font-weight: 600;
}
.tag-categoria-orden { font-weight: 400; opacity: .65; }
.tag-categoria-editar {
    border: none;
    background: none;
    color: #2563eb;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}
.tag-categoria-quitar {
    border: none;
    background: none;
    color: #dc2626;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}
.oculto { display: none; }
.tabla-scroll { overflow-x: auto; border-radius: 12px; }
table.tabla-datos { width: 100%; min-width: 520px; border-collapse: collapse; background: var(--color-superficie); color: var(--color-texto); border-radius: 12px; overflow: hidden; }
table.tabla-datos th, table.tabla-datos td { padding: 10px 8px; border-bottom: 1px solid var(--color-borde-suave); text-align: left; }
table.tabla-datos th { background: #1f2937; color: #fff; }
table.tabla-datos a { color: var(--color-link); }
table.tabla-datos a:visited { color: var(--color-link); }
.tag-inactivo { color: var(--color-texto-secundario); font-style: italic; }
.tag-saldo { color: #dc2626; font-weight: 700; }
.tag-vencido { background: var(--color-vencido-bg); }
.tag-vencido-badge { background: #dc2626; color: #fff; font-size: .7rem; padding: 2px 6px; border-radius: 6px; margin-left: 4px; }
.tag-stock-bajo { background: var(--color-aviso-bg); }
.tag-stock-bajo-badge { display: inline-block; vertical-align: middle; background: #d97706; color: #fff; font-size: .7rem; padding: 2px 6px; border-radius: 6px; margin-left: 4px; line-height: 1.4; }
/* Cada acción de la fila (renombrar, eliminar, reactivar, etc.) es un <form>
   separado -- por eso sin flex quedaban alineados por "baseline" (el <input>
   de texto de renombrar es más alto que los botones-ícono redondos, así que
   se veían despareja los unos de los otros). display:flex + align-items acá
   centra verticalmente todos los forms/botones de la celda entre sí, sin
   importar el display propio de cada form. */
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.acciones a, .acciones button { margin-right: 6px; font-size: .95rem; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--color-borde); background: var(--color-superficie); text-decoration: none; color: var(--color-texto); cursor: pointer; }
.acciones button.btn-icono-peligro,
button.btn-icono-peligro { display: inline-flex; align-items: center; justify-content: center; margin-right: 6px; padding: 6px 10px; border-radius: 6px; border: 1px solid #dc2626; background: #dc2626; color: #fff; cursor: pointer; line-height: 1; }
.acciones button.btn-icono-peligro:active,
button.btn-icono-peligro:active { background: #b91c1c; }
/* Nota: se cualifican con "a." / "button." (no solo la clase) a propósito.
   ".acciones a, .acciones button" (más arriba) tiene la misma especificidad
   que un selector de un solo tipo+clase, así que sin el prefijo de tipo acá
   esa regla de .acciones ganaba y pisaba el color/borde de estos botones. */
a.btn-icono-azul, button.btn-icono-azul {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #2563eb;
    background: var(--color-superficie);
    color: #2563eb;
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
}
a.btn-icono-azul:active, button.btn-icono-azul:active { background: var(--color-hover); }
a.btn-icono-verde, button.btn-icono-verde {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #16a34a;
    background: var(--color-superficie);
    color: #16a34a;
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
}
a.btn-icono-verde:active, button.btn-icono-verde:active { background: var(--color-hover); }
a.btn-icono-ambar, button.btn-icono-ambar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #d97706;
    background: var(--color-superficie);
    color: #d97706;
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
}
a.btn-icono-ambar:active, button.btn-icono-ambar:active { background: var(--color-hover); }

/* ---- Dashboard de reportes ---- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.kpi-card { background: var(--color-superficie); color: var(--color-texto); border-radius: 12px; padding: 16px; text-align: center; }
.kpi-valor { font-size: 1.5rem; font-weight: 800; color: #2563eb; }
.kpi-label { font-size: .85rem; color: var(--color-texto-secundario); margin-top: 4px; }

.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .dashboard-grid { grid-template-columns: 1fr; } }

.barra-item { margin-bottom: 14px; }
.barra-label { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; margin-bottom: 4px; }
.barra-label span:last-child { color: #2563eb; font-weight: 700; white-space: nowrap; }
.barra-fondo { background: var(--color-barra-fondo); border-radius: 8px; height: 16px; overflow: hidden; }
.barra-relleno { background: #2563eb; height: 100%; border-radius: 8px; }
.barra-relleno-alt { background: #16a34a; }
.barra-relleno-alt2 { background: #d97706; }

/* ---- Gráfico mensual de ventas/ganancia (reportes.php) ---- */
.leyenda-chart { display: flex; gap: 16px; font-size: .9rem; font-weight: 600; margin-bottom: 10px; }
.leyenda-chart .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.dot-costo { background: #2563eb; }
.dot-ganancia { background: #16a34a; }
.chart-mensual {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 200px;
    overflow-x: auto;
    padding-top: 10px;
}
.chart-mes { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 40px; height: 100%; }
.chart-mes-total { font-size: .7rem; font-weight: 600; color: var(--color-texto-secundario); margin-bottom: 4px; white-space: nowrap; }
.chart-barras { display: flex; align-items: flex-end; flex: 1; min-height: 0; width: 100%; justify-content: center; }
.chart-barra-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; width: 26px; }
.chart-barra { width: 100%; min-height: 0; }
.chart-barra-ganancia { background: #16a34a; border-radius: 4px 4px 0 0; }
.chart-barra-costo { background: #2563eb; border-radius: 0 0 4px 4px; }
.chart-mes-label { font-size: .75rem; color: var(--color-texto-secundario); margin-top: 6px; }

/* ---- Modo "pantalla normal" (config. en configuracion.php): mismo layout que
   el modo táctil, pero con botones/controles más chicos, pensado para mouse y
   teclado en una PC de escritorio en vez de dedo en una tablet/celular. ---- */
body.compacto { font-size: 15px; }
body.compacto .nav-btn { padding: 8px 14px; font-size: .95rem; min-width: 90px; }
body.compacto .admin-subnav-btn { padding: 8px 14px; font-size: .9rem; }
body.compacto .cat-btn { padding: 8px 14px; font-size: .95rem; }
body.compacto .buscar-form input[type=text] { font-size: 1rem; padding: 10px; }
body.compacto .btn-grande { padding: 10px; font-size: 1rem; }
body.compacto .grid-productos { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
body.compacto .prod-btn { min-height: 60px; padding: 6px; font-size: .9rem; }
body.compacto .prod-btn small { font-size: .82rem; }
body.compacto .prod-img { height: 50px; }
body.compacto .qty-btn { width: 24px; height: 24px; font-size: 1rem; }
body.compacto .formas-pago label { padding: 8px; font-size: .9rem; }
body.compacto .form-card input, body.compacto .form-card select { padding: 8px; font-size: .95rem; }
body.compacto .form-card label { margin-top: 6px; }

/* ---- Footer ---- */
.footer-app {
    text-align: center;
    padding: 18px 14px 24px;
    font-size: .8rem;
    color: var(--color-texto-secundario);
}
.footer-app a { color: var(--color-texto-secundario); }

/* ---- Ticket ---- */
/* Márgenes/tipografía chicos a propósito: para que entre más en el mismo
   largo de papel de la impresora térmica (menos consumo de rollo). */
.ticket { max-width: 340px; margin: 0 auto; background: var(--color-superficie); color: var(--color-texto); padding: 6px; font-family: monospace; font-size: .72rem; line-height: 1.25; }
.ticket table { width: 100%; font-size: .68rem; }
.ticket td, .ticket th { padding: 1px 2px; }
.ticket hr { border: none; border-top: 1px dashed var(--color-texto); margin: 4px 0; }
.ticket p { margin: 3px 0; }
@media print {
    .nav, .nav-bar, .no-print { display: none !important; }
    body { background: #fff; color: #000; }
    .ticket { background: #fff; color: #000; }
    .ticket hr { border-top: 1px dashed #000; }
}