/* ========================================================
   DASHBOARD "MI CUENTA" — ver inc/mi-cuenta.php / woocommerce/myaccount/dashboard.php.
   Layout de 2 columnas: sidebar a la izquierda (sticky, ACOMPAÑA el scroll,
   no queda fijo en la pantalla — position:sticky) + secciones apiladas
   verticalmente a la derecha, cada una en su propia tarjeta blanca. El
   sidebar marca la sección activa según scroll (ver mmcScrollSpy en
   js/mi-cuenta.js).
   ======================================================== */
/* La causa real del desbalance de ancho era .account-navigation-wrap/.woocommerce-MyAccount-content
   (ver woocommerce/myaccount/dashboard.php, ahí se corrigió) — la regla que estaba ACÁ antes
   (ocultar #secondary/.sidebar/.widget-area como intento previo) se sacó por completo: Kadence
   reusa .widget-area como clase genérica para CUALQUIER zona con widgets, footer incluido, así que
   esa regla apagaba el footer entero de la página en vez de solo la columna vacía. Se deja
   .site-main a ancho completo nomás, que no oculta nada y no tiene ese riesgo. */
body.woocommerce-account #primary,
body.woocommerce-account .content-area,
body.woocommerce-account .site-main {
    max-width: 100% !important;
    width: 100% !important;
}

.mmc-cuenta-layout {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    max-width: 1200px;
    margin: 20px auto 60px;
    padding: 0 20px;
    box-sizing: border-box;
}

.mmc-cuenta-sidebar {
    flex: 0 0 260px;
    position: sticky;
    top: 20px;
    align-self: flex-start;
}
.mmc-cuenta-sidebar-inner {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
}
.mmc-cuenta-saludo {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin-bottom: 14px;
    word-break: break-word;
}

.mmc-cuenta-nav {
    display: flex;
    flex-direction: column;
}
.mmc-cuenta-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 4px;
    border-top: 1px solid #f0f0f0;
    border-left: 3px solid transparent;
    padding-left: 10px;
    color: #444;
    text-decoration: none !important;
    font-size: 14px;
    transition: color .15s ease, border-color .15s ease;
}
.mmc-cuenta-nav-link:first-child { border-top: none; }
.mmc-cuenta-nav-link.mmc-activo {
    color: #1a6bcf;
    border-left-color: #1a6bcf;
    font-weight: 600;
}
.mmc-cuenta-icono {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.mmc-cuenta-salir {
    display: block;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
    color: #888 !important;
    font-size: 13px;
    text-decoration: none !important;
}
.mmc-cuenta-salir:hover { color: #c0392b !important; }

.mmc-cuenta-contenido {
    flex: 1;
    min-width: 0;
}

/* ========================================================
   TARJETAS (bloques apilados)
   ======================================================== */
.mmc-cuenta-seccion {
    scroll-margin-top: 20px; /* para que el scroll-into-view no quede tapado por nada arriba */
}
.mmc-cuenta-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 26px;
    margin-bottom: 24px;
    box-sizing: border-box;
}
.mmc-cuenta-card-titulo {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin: 0 0 6px;
}
.mmc-cuenta-card-subtexto {
    font-size: 13px;
    color: #777;
    margin: 0 0 18px;
}

/* ========================================================
   MIS PEDIDOS — vacío
   ======================================================== */
.mmc-cuenta-pedidos-vacio-texto {
    font-size: 14px;
    color: #555;
    margin: 0 0 22px;
}
.mmc-cuenta-explorar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.mmc-cuenta-explorar-item {
    text-align: center;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
}
.mmc-cuenta-explorar-titulo {
    font-weight: 600;
    color: #111;
    margin: 0 0 12px;
}
.mmc-cuenta-explorar-link {
    display: inline-block;
    color: #1a6bcf;
    text-decoration: underline;
    font-size: 13px;
    margin-bottom: 14px;
}
.mmc-cuenta-explorar-botones {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.mmc-cuenta-btn-outline {
    padding: 8px 18px;
    border: 1px solid #111;
    border-radius: 999px;
    color: #111 !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}
.mmc-cuenta-btn-outline:hover { background: #111; color: #fff !important; }

/* ========================================================
   MIS PEDIDOS — con pedidos (tarjeta imagen + número + fecha + monto + Ver)
   ======================================================== */
.mmc-cuenta-pedidos-lista {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.mmc-cuenta-pedido-fila {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border: 1px solid #eee;
    border-radius: 8px;
}
.mmc-cuenta-pedido-img {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    background: #f5f5f5;
}
.mmc-cuenta-pedido-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mmc-cuenta-pedido-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.mmc-cuenta-pedido-numero { font-weight: 600; color: #111; font-size: 14px; }
.mmc-cuenta-pedido-fecha { font-size: 12px; color: #888; }
.mmc-cuenta-pedido-monto { font-weight: 700; color: #111; font-size: 14px; white-space: nowrap; }
.mmc-cuenta-btn-ver {
    padding: 8px 20px;
    background: #111;
    color: #fff !important;
    border: none;
    border-radius: 999px;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease;
}
.mmc-cuenta-btn-ver:hover { background: #333; }

/* ========================================================
   LISTA DE DESEOS — la grilla de tarjetas reales vive en css/lista-deseos.css
   (#mmc-cuenta-deseos .mmc-cuenta-deseos-grid), junto con el resto del
   sistema de lista de deseos (ver inc/lista-deseos.php). Acá ya no queda
   nada propio: las tarjetas usan el mismo estilo del catálogo
   (.mmc-custom-product-card, css/catalogo.css).
   ======================================================== */

/* ========================================================
   RECETAS
   ======================================================== */
.mmc-cuenta-recetas-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mmc-cuenta-receta-item,
.mmc-cuenta-receta-agregar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.mmc-cuenta-receta-info { display: flex; flex-direction: column; gap: 3px; }
.mmc-cuenta-receta-nombre { font-weight: 600; color: #111; font-size: 14px; }
.mmc-cuenta-receta-fecha { font-size: 12px; color: #888; }
.mmc-cuenta-receta-flecha { font-size: 18px; color: #888; }

.mmc-cuenta-receta-agregar { border-style: dashed; }
.mmc-cuenta-receta-agregar-icono {
    width: 30px; height: 30px; border-radius: 50%;
    background: #f2f2f2; color: #111;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; margin-right: 12px;
}
.mmc-cuenta-receta-agregar-texto { display: flex; flex-direction: column; margin-right: auto; }
.mmc-cuenta-receta-agregar-titulo { font-weight: 600; color: #111; font-size: 14px; }
.mmc-cuenta-receta-agregar-sub { font-size: 12px; color: #888; }

/* ========================================================
   FORMULARIO "Agregar/editar receta" — ver mmc_render_form_receta() en
   inc/mi-cuenta.php. Vive DENTRO de la misma tarjeta "Recetas" (nunca una
   ventana/modal flotante aparte) — header y footer se estiran con margin
   negativo hasta los bordes reales de .mmc-cuenta-card (que tiene 26px de
   padding) para que las líneas divisorias lleguen de punta a punta, igual
   que en la referencia.
   ======================================================== */
.mmc-modal-receta-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -26px -26px 0;
    padding: 26px 26px 18px;
    border-bottom: 1px solid #eee;
}
.mmc-modal-receta-header h3 { margin: 0; font-size: 18px; color: #111; }
.mmc-modal-receta-cerrar {
    background: none; border: none; font-size: 22px; line-height: 1;
    cursor: pointer; color: #888; padding: 0;
}
.mmc-modal-receta-cuerpo {
    padding: 22px 26px;
}
.mmc-modal-receta-campo {
    display: block;
    margin-bottom: 16px;
}
.mmc-modal-receta-campo span {
    display: block;
    font-size: 12px;
    color: #777;
    margin-bottom: 5px;
}
.mmc-modal-receta-campo input,
.mmc-modal-receta-campo select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}

.mmc-modal-receta-tabla-scroll { overflow-x: auto; margin-bottom: 16px; }
.mmc-modal-receta-tabla {
    width: 100%;
    border-collapse: collapse;
    min-width: 480px;
}
.mmc-modal-receta-tabla th,
.mmc-modal-receta-tabla td {
    border: 1px solid #eee;
    padding: 8px;
    text-align: left;
    font-size: 12px;
}
.mmc-modal-receta-tabla thead th { color: #777; font-weight: 600; background: #fafafa; }
.mmc-modal-receta-tabla tbody th { color: #111; font-weight: 700; white-space: nowrap; }
.mmc-modal-receta-tabla select { width: 100%; padding: 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 12px; }

.mmc-modal-receta-pd-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.mmc-modal-receta-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #444;
    margin-bottom: 10px;
    cursor: pointer;
}
.mmc-modal-receta-comentario {
    width: 100%;
    min-height: 70px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font: inherit;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.mmc-modal-receta-o {
    text-align: center;
    color: #aaa;
    font-size: 12px;
    margin: 18px 0;
}
.mmc-modal-receta-error {
    color: #c0392b;
    font-size: 13px;
    margin: 10px 0 0;
}

.mmc-modal-receta-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin: 20px -26px -26px;
    padding: 16px 26px;
    border-top: 1px solid #eee;
}
.mmc-modal-receta-btn-cancelar,
.mmc-modal-receta-btn-guardar {
    padding: 10px 26px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}
.mmc-modal-receta-btn-cancelar {
    background: #fff;
    border: 1px solid #ccc;
    color: #444;
}
.mmc-modal-receta-btn-guardar {
    background: #1a6bcf;
    color: #fff;
}
.mmc-modal-receta-btn-guardar:disabled { opacity: .6; cursor: default; }

/* ========================================================
   MIS DATOS
   ======================================================== */
.mmc-cuenta-datos-vista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mmc-cuenta-datos-fila { display: flex; gap: 8px; font-size: 14px; }
.mmc-cuenta-datos-label { color: #888; flex: 0 0 170px; }
.mmc-cuenta-datos-acciones {
    display: flex;
    gap: 20px;
    margin-top: 6px;
}
.mmc-cuenta-link-editar,
.mmc-cuenta-link-cancelar {
    background: none;
    border: none;
    padding: 0;
    color: #1a6bcf;
    text-decoration: underline;
    font-size: 13px;
    cursor: pointer;
}
.mmc-cuenta-datos-form { margin-top: 10px; }

/* Restyle genérico de los formularios NATIVOS de WooCommerce (form-edit-account.php /
   form-edit-address.php) para que combinen con el resto del dashboard, sin tocar su
   funcionamiento (validación/guardado siguen siendo 100% de WooCommerce). */
.mmc-cuenta-datos-form .woocommerce-form-row,
.mmc-cuenta-direccion-form .woocommerce-form-row,
.mmc-cuenta-datos-form .form-row,
.mmc-cuenta-direccion-form .form-row {
    margin: 0 0 16px;
}
.mmc-cuenta-datos-form label,
.mmc-cuenta-direccion-form label {
    display: block;
    font-size: 12px;
    color: #777;
    margin-bottom: 5px;
}
.mmc-cuenta-datos-form input,
.mmc-cuenta-datos-form select,
.mmc-cuenta-direccion-form input,
.mmc-cuenta-direccion-form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}
.mmc-cuenta-datos-form fieldset {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 16px;
    margin: 10px 0 16px;
}
.mmc-cuenta-datos-form .button,
.mmc-cuenta-direccion-form .button {
    padding: 11px 26px;
    background: #1a6bcf !important;
    color: #fff !important;
    border-radius: 999px !important;
    border: none !important;
    font-weight: 600;
    cursor: pointer;
}

/* ========================================================
   RESPONSIVE — sidebar arriba, apilado, debajo de ~900px (mismo umbral ya
   usado en otras partes del tema para este tipo de layout de 2 columnas).
   ======================================================== */
@media (max-width: 900px) {
    .mmc-cuenta-layout {
        flex-direction: column;
    }
    .mmc-cuenta-sidebar {
        position: static;
        flex: 0 0 auto;
        width: 100%;
    }
    .mmc-cuenta-explorar-grid {
        grid-template-columns: 1fr;
    }
    .mmc-cuenta-pedido-fila {
        flex-wrap: wrap;
    }
    .mmc-modal-receta-pd-fila {
        grid-template-columns: 1fr;
    }
}