/* ============================================================ Mery Academia · cuenta.css — portal "Mi cuenta" (WooCommerce) Usa los tokens de base.css (mismo ). Solo layout + marca. ============================================================ */ .woocommerce-account .woocommerce{ max-width:1080px;margin:0 auto;padding:40px 24px 80px; } .woocommerce-account .woocommerce > h2, .woocommerce-account .entry-header .entry-title{ font-family:var(--fd);font-weight:550; } /* dos columnas: navegación (izq) + contenido (der) */ @media (min-width:860px){ .woocommerce-account .woocommerce-MyAccount-navigation{ float:left;width:26%;margin-right:4%; } .woocommerce-account .woocommerce-MyAccount-content{ float:right;width:70%; } } /* menú lateral como tarjeta */ .woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none;margin:0;padding:8px; background:var(--blanco);border:1px solid var(--piedra); border-radius:var(--r);box-shadow:0 10px 30px rgba(68,79,56,.06); } .woocommerce-account .woocommerce-MyAccount-navigation li{ margin:0;border:0; } .woocommerce-account .woocommerce-MyAccount-navigation li a{ display:block;padding:11px 14px;border-radius:11px; text-decoration:none;color:var(--tinta);font-weight:600;font-size:14.5px; transition:background .15s ease,color .15s ease; } .woocommerce-account .woocommerce-MyAccount-navigation li a:hover{ background:rgba(132,146,113,.1);color:var(--musgo-prof); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:var(--musgo);color:#fff; } /* panel de bienvenida */ .cuenta-panel{margin-bottom:26px} .cuenta-hola{ background:linear-gradient(140deg,var(--musgo),var(--musgo-prof)); color:#fff;border-radius:var(--r);padding:26px 28px; box-shadow:0 16px 40px rgba(68,79,56,.16); } .cuenta-hola .k{color:rgba(255,255,255,.72)} .cuenta-hola h2{color:#fff;font-size:clamp(24px,3vw,32px);margin:2px 0 6px} .cuenta-hola .sub{color:rgba(255,255,255,.85);margin:0 0 16px;max-width:52ch} .cuenta-hola .btn{background:var(--terracota)} .cuenta-tarjetas{ display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px; } @media (max-width:680px){.cuenta-tarjetas{grid-template-columns:1fr}} .cuenta-tarjetas .cta-card{ display:block;background:var(--blanco);border:1px solid var(--piedra); border-radius:var(--r);padding:18px;text-decoration:none;color:var(--tinta); transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; } .cuenta-tarjetas .cta-card:hover{ transform:translateY(-3px);box-shadow:0 14px 32px rgba(68,79,56,.12); border-color:var(--salvia); } .cuenta-tarjetas .ic{font-size:22px;display:block;margin-bottom:8px} .cuenta-tarjetas .t{display:block;font-family:var(--fd);font-size:18px;font-weight:550} .cuenta-tarjetas .d{display:block;color:var(--topo);font-size:13px;margin-top:3px} /* tablas de pedidos / descargas con la marca */ .woocommerce-account .woocommerce-MyAccount-content{ background:var(--blanco);border:1px solid var(--piedra); border-radius:var(--r);padding:24px;box-shadow:0 10px 30px rgba(68,79,56,.06); } .woocommerce-account table.woocommerce-orders-table, .woocommerce-account table.woocommerce-table{ border-collapse:collapse; } .woocommerce-account table thead th{ font-family:var(--fb);text-transform:uppercase;letter-spacing:.08em; font-size:11.5px;color:var(--topo);border-bottom:1px solid var(--piedra); } .woocommerce-account table td{border-bottom:1px solid rgba(219,215,201,.6)} /* botones Woo dentro de la cuenta → marca */ .woocommerce-account .woocommerce-button.button, .woocommerce-account .button{ background:var(--terracota) !important;color:#fff !important; border:0 !important;border-radius:99px !important;font-weight:700 !important; padding:10px 20px !important; } .woocommerce-account .woocommerce-button.button:hover, .woocommerce-account .button:hover{ box-shadow:0 8px 20px rgba(198,112,82,.34) !important; } /* formularios de datos */ .woocommerce-account form .woocommerce-Input, .woocommerce-account form input.input-text, .woocommerce-account form select{ border:1px solid var(--piedra) !important;border-radius:10px !important; padding:11px 12px !important;background:var(--crema) !important; } /* ---- Foto de perfil (subir/quitar) ---- */ .mery-foto-perfil{border:0;margin:0 0 22px;padding:0} .mery-foto-perfil legend{ font-family:var(--fd);font-size:18px;font-weight:550;color:var(--tinta); margin:0 0 12px;padding:0; } .mery-foto-perfil .mfp-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .mery-foto-perfil .mfp-preview{ width:76px;height:76px;border-radius:50%;object-fit:cover; border:2px solid var(--piedra);flex:0 0 auto;background:var(--crema); } .mery-foto-perfil .mfp-controls{display:flex;flex-direction:column;gap:8px} .mery-foto-perfil .mfp-file{ display:inline-flex;align-items:center;gap:10px;cursor:pointer; } .mery-foto-perfil .mfp-file > span{ display:inline-block;background:var(--musgo);color:#fff;font-weight:700; font-size:14px;padding:9px 18px;border-radius:99px;transition:box-shadow .15s ease; } .mery-foto-perfil .mfp-file:hover > span{box-shadow:0 8px 20px rgba(99,112,85,.32)} .mery-foto-perfil .mfp-file input[type=file]{ font-size:13px;color:var(--topo);max-width:190px; } .mery-foto-perfil .mfp-remove{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--topo)} .mery-foto-perfil .mfp-hint{margin:2px 0 0;font-size:12.5px;color:var(--topo)} /* ---- estado vacío de pedidos ---- */ .mery-sin-pedidos{text-align:center;padding:34px 20px} .mery-sin-pedidos .ic{font-size:34px;display:block;margin-bottom:10px} .mery-sin-pedidos h3{font-family:var(--fd);font-size:22px;font-weight:550;color:var(--tinta);margin:0 0 6px} .mery-sin-pedidos p{color:var(--topo);margin:0 auto 18px;max-width:42ch}