/* ================================
   HONEY'S · ESTILOS MÓVILES (PWA)
   Diseño basado en el prototipo "Honey's app móvil".
   Solo se aplica en pantallas de hasta 650px;
   en la PC todo se ve igual que antes.
================================ */

.nav-movil,
.hoja-mas,
.hoja-mas-fondo,
.app-movil {
    display: none;
}

@media (max-width: 650px) {

    /* ================================
       BASE Y TIPOGRAFÍA
    ================================ */

    :root {
        --m-fondo: #faf6ec;
        --m-tinta: #2b2111;
        --m-suave: #6b5f48;
        --m-tenue: #857a64;
        --m-borde: #eee6d4;
        --m-borde-fuerte: #e4dccb;
        --m-miel: #f2b705;
        --m-miel-claro: #fff4cc;
        --m-display: "Fraunces", Georgia, serif;
        --m-texto: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    }

    body {
        background: var(--m-fondo);
        color: var(--m-tinta);
        font-family: var(--m-texto);
        -webkit-tap-highlight-color: transparent;
    }

    .dashboard input,
    .dashboard select,
    .dashboard textarea,
    .dashboard button {
        font-family: var(--m-texto);
    }

    /* El menú lateral se reemplaza por la barra inferior */
    .dashboard .sidebar,
    body.sidebar-oculto .dashboard .sidebar {
        display: none;
    }

    .dashboard .contenido,
    body.sidebar-oculto .dashboard .contenido {
        width: 100%;
        margin-left: 0;
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }

    /* Páginas con vista móvil propia: se oculta la vista de escritorio */
    .contenido.con-movil > .topbar,
    .contenido.con-movil > .contenido-principal {
        display: none;
    }

    .app-movil {
        display: block;
    }

    /* ================================
       VISTAS MÓVILES (app-movil)
    ================================ */

    .m-header {
        position: sticky;
        top: 0;
        z-index: 30;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 22px 20px 14px;
        background: var(--m-fondo);
    }

    .m-header-textos {
        flex-grow: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .m-header-sub {
        font-size: 13px;
        color: var(--m-suave);
    }

    .m-header-titulo {
        margin: 0;
        font-family: var(--m-display);
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -0.3px;
        line-height: 1.15;
    }

    .m-avatar {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        border-radius: 50%;
        background: var(--m-miel);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 17px;
    }

    .m-volver {
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        border-radius: 12px;
        border: 1.5px solid var(--m-borde-fuerte);
        background: #ffffff;
        color: var(--m-tinta);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .m-contenido {
        padding: 4px 20px 24px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .m-contenido form {
        margin: 0;
    }

    /* Tarjeta oscura de Inicio */
    .m-hero {
        padding: 20px;
        border-radius: 20px;
        background: var(--m-tinta);
        color: #ffffff;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .m-hero-label {
        font-size: 14px;
        color: #e8dcc0;
    }

    .m-hero-numero {
        font-family: var(--m-display);
        font-size: 44px;
        font-weight: 700;
        line-height: 1.1;
        color: var(--m-miel);
    }

    .m-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .m-stat {
        padding: 16px;
        border-radius: 16px;
        background: #ffffff;
        border: 1px solid var(--m-borde);
        display: flex;
        flex-direction: column;
        gap: 4px;
        color: var(--m-tinta);
        text-decoration: none;
    }

    .m-stat-label {
        font-size: 13px;
        color: var(--m-suave);
    }

    .m-stat-numero {
        font-size: 26px;
        font-weight: 700;
    }

    .m-stat-numero.azul { color: #1f4f94; }
    .m-stat-numero.verde { color: #1d6b3c; }

    .m-seccion {
        margin: 8px 0 0;
        font-size: 17px;
        font-weight: 700;
    }

    /* Tarjetas */
    .m-card {
        padding: 16px;
        border-radius: 16px;
        background: #ffffff;
        border: 1px solid var(--m-borde);
        color: var(--m-tinta);
        text-decoration: none;
    }

    a.m-card:active {
        background: #fffdf5;
    }

    .m-bloque {
        padding: 18px;
        border-radius: 18px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .m-pedido {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .m-fila {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .m-fila-abajo {
        align-items: flex-end;
    }

    .m-crece {
        flex-grow: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .m-card-titulo {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }

    .m-card-titulo.grande { font-size: 17px; }
    .m-card-titulo.xl { font-size: 20px; font-weight: 700; }

    .m-card-sub {
        font-size: 13px;
        color: var(--m-suave);
    }

    .m-card-meta {
        font-size: 13px;
        font-weight: 600;
        color: var(--m-suave);
    }

    .m-monto {
        font-size: 16px;
        font-weight: 700;
        white-space: nowrap;
    }

    .m-monto.grande { font-size: 18px; }

    .m-chevron {
        flex-shrink: 0;
        color: #9a8f78;
    }

    /* Etiquetas de estado */
    .m-pill {
        padding: 5px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }

    .m-pill.pendiente { background: #fff4cc; color: #7a5a00; }
    .m-pill.aceptado  { background: #e6efff; color: #1f4f94; }
    .m-pill.entregado { background: #e3f5ea; color: #1d6b3c; }
    .m-pill.inactivo  { background: #f1ede4; color: var(--m-suave); }

    /* Búsqueda y filtros */
    .m-buscar {
        height: 50px;
        padding: 0 14px;
        border-radius: 14px;
        border: 1.5px solid var(--m-borde-fuerte);
        background: #ffffff;
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--m-suave);
    }

    .m-buscar input[type="search"] {
        flex-grow: 1;
        min-width: 0;
        min-height: 0;
        border: 0;
        outline: none;
        background: transparent;
        font-size: 16px;
        color: var(--m-tinta);
    }

    .m-chips {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .m-chip {
        height: 40px;
        padding: 0 16px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        border-radius: 999px;
        border: 1.5px solid var(--m-borde-fuerte);
        background: #ffffff;
        color: var(--m-tinta);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }

    .m-chip.activo {
        background: var(--m-tinta);
        border-color: var(--m-tinta);
        color: #ffffff;
    }

    /* Detalle */
    .m-datos {
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 15px;
    }

    .m-datos.m-grid-2 {
        display: grid;
    }

    .m-datos.m-grid-2 > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .m-etiqueta {
        font-size: 12px;
        color: var(--m-suave);
    }

    .m-item-nombre {
        font-size: 15px;
        font-weight: 500;
    }

    .m-cantidad {
        min-width: 32px;
        height: 32px;
        flex-shrink: 0;
        border-radius: 8px;
        background: var(--m-miel-claro);
        color: #7a5a00;
        font-size: 14px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .m-total {
        padding-top: 12px;
        border-top: 1px solid var(--m-borde);
        font-size: 16px;
        font-weight: 700;
    }

    .m-total strong {
        font-size: 20px;
    }

    .m-finalizado {
        margin: 0;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        color: #1d6b3c;
    }

    .m-aviso {
        padding: 12px 14px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 600;
    }

    .m-aviso.ok { background: #e3f5ea; color: #1d6b3c; }
    .m-aviso.error { background: #fdecea; color: #a1261a; }

    .m-vacio {
        margin: 0;
        padding: 16px;
        border-radius: 16px;
        background: #ffffff;
        border: 1px dashed var(--m-borde-fuerte);
        font-size: 14px;
        color: var(--m-suave);
        text-align: center;
    }

    /* Botones */
    .m-btn {
        min-height: 48px;
        padding: 0 18px;
        border: 0;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-family: var(--m-texto);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }

    .m-btn-auto {
        align-self: flex-start;
        min-height: 44px;
        margin-top: 6px;
        border-radius: 12px;
    }

    .m-btn-grande {
        width: 100%;
        min-height: 56px;
        border-radius: 16px;
        font-size: 16px;
        font-weight: 700;
    }

    .m-btn-miel   { background: var(--m-miel); color: var(--m-tinta); }
    .m-btn-oscuro { background: var(--m-tinta); color: #ffffff; }
    .m-btn-claro  {
        background: var(--m-fondo);
        border: 1.5px solid var(--m-borde-fuerte);
        color: var(--m-tinta);
    }

    /* ================================
       RESTO DE PÁGINAS (tipos, usuarios, formularios)
       Mismo estilo visual sobre el HTML existente.
    ================================ */

    .dashboard .topbar {
        position: sticky;
        top: 0;
        z-index: 30;
        height: auto;
        min-height: 64px;
        padding: 22px 20px 14px;
        background: var(--m-fondo);
        border-bottom: none;
    }

    .dashboard .topbar h1 {
        font-family: var(--m-display);
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -0.3px;
        color: var(--m-tinta);
    }

    .dashboard .topbar p {
        color: var(--m-suave);
    }

    .dashboard .contenido-principal {
        padding: 4px 20px 24px;
    }

    .dashboard .volver {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        color: var(--m-suave);
        font-weight: 600;
    }

    .dashboard .panel-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        padding: 4px 2px 12px;
        border-bottom: none;
    }

    .dashboard .contador {
        white-space: nowrap;
    }

    .dashboard .panel-header h2,
    .dashboard .form-panel-header h2 {
        font-size: 17px;
    }

    .dashboard .form-panel {
        background: #ffffff;
        border: 1px solid var(--m-borde);
        border-radius: 18px;
        box-shadow: none;
    }

    .dashboard .filtros-productos {
        padding: 0 0 14px;
        background: transparent;
        border: none;
    }

    .dashboard input,
    .dashboard select,
    .dashboard textarea {
        font-size: 16px; /* evita el zoom automático en iOS */
        min-height: 48px;
        border-radius: 14px;
        border: 1.5px solid var(--m-borde-fuerte);
        background-color: #ffffff;
        color: var(--m-tinta);
    }

    .dashboard .btn-guardar,
    .dashboard .btn-filtrar,
    .dashboard .btn-nuevo {
        min-height: 52px;
        border-radius: 14px;
        background: var(--m-tinta);
        color: #ffffff;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .dashboard .btn-cancelar,
    .dashboard .btn-limpiar {
        min-height: 52px;
        border-radius: 14px;
        background: #ffffff;
        color: var(--m-tinta);
        border: 1.5px solid var(--m-borde-fuerte);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .dashboard .btn-accion {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        border-radius: 10px;
    }

    .dashboard .form-acciones {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .dashboard .form-acciones > * {
        width: 100%;
        text-align: center;
    }

    .dashboard .estado.activo { background: #e3f5ea; color: #1d6b3c; }
    .dashboard .estado.inactivo { background: #f1ede4; color: var(--m-suave); }

    /* Tablas como tarjetas (tipos y usuarios) */
    .dashboard .panel {
        background: transparent;
        border: none;
        box-shadow: none;
        overflow: visible;
    }

    .dashboard .tabla-responsive {
        overflow: visible;
    }

    .dashboard .tabla,
    .dashboard .tabla tbody,
    .dashboard .tabla tr,
    .dashboard .tabla td {
        display: block;
        width: 100%;
    }

    .dashboard .tabla thead {
        display: none;
    }

    .dashboard .tabla tbody tr {
        background: #ffffff;
        border: 1px solid var(--m-borde);
        border-radius: 16px;
        padding: 4px 16px;
        margin-bottom: 12px;
    }

    .dashboard .tabla tbody tr:hover {
        background: #ffffff;
    }

    .dashboard .tabla td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 11px 0;
        border-bottom: 1px solid #f3eee3;
        text-align: right;
        font-size: 15px;
    }

    .dashboard .tabla tbody tr td:last-child {
        border-bottom: none;
    }

    .dashboard .tabla td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: var(--m-tenue);
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        text-align: left;
    }

    .dashboard .tabla td[colspan] {
        justify-content: center;
        text-align: center;
    }

    .dashboard .tabla .acciones {
        justify-content: flex-end;
    }

    /* ================================
       BARRA INFERIOR
    ================================ */

    .nav-movil {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        padding: 6px 8px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #ffffff;
        border-top: 1px solid var(--m-borde);
    }

    .nav-movil-item {
        min-height: 58px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: none;
        border-radius: 12px;
        background: transparent;
        color: var(--m-tenue);
        font-family: var(--m-texto);
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }

    .nav-movil-item.activo {
        background: var(--m-miel-claro);
        color: var(--m-tinta);
    }

    /* Hoja "Más" */
    .hoja-mas-fondo.abierta {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 60;
        background: rgba(43, 33, 17, 0.35);
    }

    .hoja-mas.abierta {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 70;
        padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
        background: var(--m-fondo);
        border-radius: 22px 22px 0 0;
    }

    .hoja-mas-usuario {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0 4px 8px;
    }

    .hoja-mas-usuario strong {
        font-family: var(--m-display);
        font-size: 20px;
    }

    .hoja-mas-usuario span {
        color: var(--m-tenue);
        font-size: 14px;
    }

    .hoja-mas-item {
        min-height: 60px;
        display: flex;
        align-items: center;
        padding: 0 16px;
        border-radius: 16px;
        background: #ffffff;
        border: 1px solid var(--m-borde);
        color: var(--m-tinta);
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
    }

    .hoja-mas-item.salir {
        margin-top: 12px;
        background: #fdecea;
        border-color: #fdecea;
        color: #a1261a;
    }

    /* ================================
       LOGIN Y REGISTRO
    ================================ */

    body:has(.login-container) {
        background: var(--m-fondo);
    }

    .login-container {
        align-items: center;
        padding: 32px 28px;
        background: var(--m-fondo);
    }

    .login-card {
        max-width: none;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .login-card .logo {
        width: 72px;
        height: 72px;
        margin: 0 auto 14px;
        border-radius: 22px;
        background: var(--m-miel) url("/assets/img/icon-192.png") center / cover no-repeat;
        font-size: 0;
        color: transparent;
    }

    .login-card h1 {
        font-family: var(--m-display);
        font-size: 36px;
        font-weight: 700;
        letter-spacing: -0.5px;
        color: var(--m-tinta);
    }

    .login-card .subtitulo {
        margin-bottom: 28px;
        color: var(--m-suave);
        font-size: 15px;
    }

    .campo label {
        color: var(--m-tinta);
        font-family: var(--m-texto);
    }

    .campo input {
        height: 52px;
        padding: 0 16px;
        border-radius: 14px;
        border: 1.5px solid var(--m-borde-fuerte);
        background: #ffffff;
        font-family: var(--m-texto);
        font-size: 16px;
        color: var(--m-tinta);
    }

    .password-container input {
        padding-right: 55px;
    }

    .login-card button[type="submit"] {
        height: 54px;
        margin-top: 8px;
        border: 0;
        border-radius: 14px;
        background: var(--m-tinta);
        color: #ffffff;
        font-family: var(--m-texto);
        font-size: 16px;
        font-weight: 600;
        box-shadow: none;
    }

    .registro-link {
        color: var(--m-suave);
        font-family: var(--m-texto);
    }

    .registro-link a {
        color: #8a6200;
    }
}