/* ElectroPC · "Mi cuenta" (plantillas/cuenta*.php).
 *
 * Los tokens, los botones `.epa-btn` y el botón compacto de Google (`.eph-google`)
 * salen de `alt-base.css`. Acá va lo de esta pantalla, y la piel de los
 * formularios de WooCommerce que se siguen usando adentro: el detalle de un
 * pedido, editar los datos, cambiar la contraseña, recuperarla.
 *
 * Los selectores de WooCommerce van colgados de `.eph-cu .woocommerce`: el tema
 * los pinta en `woocommerce.css` con reglas de dos o tres clases.
 */
.epa .eph-cu{padding-block:1.6rem 3.5rem}
.epa .eph-cu h1{font-size:clamp(1.5rem,3vw,2rem)}
.epa .eph-cu h2{font-size:1.125rem;font-weight:600;letter-spacing:-.01em;margin:0}
.epa .eph-cu-texto{margin:.3rem 0 0;font-size:.875rem;color:var(--epa-texto)}
.epa .eph-cu-mas{display:inline-block;margin-top:.8rem;font-size:.875rem;font-weight:600;color:var(--epa-azul-texto)}
.epa .eph-cu-mas:hover{text-decoration:underline;text-underline-offset:3px}

/* ── El acceso: una tarjeta, Google primero ── */
.epa .eph-cu-acceso{max-width:26rem;margin-inline:auto;padding:1.5rem 1.3rem;
  border:1px solid var(--epa-borde);border-radius:16px;background:var(--epa-blanco)}
.epa .eph-cu-acceso .epa-baja{margin-top:.35rem}
.epa .eph-cu-google{margin-top:1.3rem}
/* En esta pantalla Google es la puerta principal: ancho completo, no el chico
   del checkout. */
.epa .eph-cu-google div.nsl-container .nsl-container-buttons a{flex:1 1 auto}
.epa .eph-cu-google div.nsl-container .nsl-button-default{height:2.75rem;justify-content:center}
.epa .eph-cu-o{display:flex;align-items:center;gap:.7rem;margin:1.1rem 0 .2rem;
  font-size:.875rem;color:var(--epa-texto)}
.epa .eph-cu-o::before,.epa .eph-cu-o::after{content:"";flex:1;height:1px;background:var(--epa-borde)}

.epa .eph-cu-form{display:grid;gap:.85rem;margin:.9rem 0 0;padding:0;border:0;background:none}
.epa .eph-cu-form .form-row{display:grid;gap:.3rem;margin:0;padding:0}
.epa .eph-cu-form label{font-size:.875rem;font-weight:600;color:var(--epa-texto)}
.epa .eph-cu-btn{font:inherit;font-size:1rem;font-weight:600;padding:.8rem 1.2rem;border:0;border-radius:999px;
  background:var(--epa-azul);color:#fff;cursor:pointer;transition:background .15s var(--ep-suave,ease)}
.epa .eph-cu-btn:hover{background:var(--epa-azul-osc)}
.epa .eph-cu-olvido{justify-self:center;font-size:.875rem;color:var(--epa-texto)}
.epa .eph-cu-olvido:hover{color:var(--epa-tinta)}

.epa .eph-cu-nueva{margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--epa-borde)}
.epa .eph-cu-nueva summary{cursor:pointer;font-size:.875rem;color:var(--epa-texto);list-style:none}
.epa .eph-cu-nueva summary::-webkit-details-marker{display:none}
.epa .eph-cu-nueva summary b{color:var(--epa-azul-texto)}
.epa .eph-cu-nota{margin:.8rem 0 0;font-size:.875rem;color:var(--epa-texto)}
.epa .eph-cu-volver{margin:1rem 0 0;font-size:.875rem}
.epa .eph-cu-volver a{color:var(--epa-azul-texto);font-weight:600}

/* ── Campos: los nuestros y los de WooCommerce, iguales ── */
.epa .eph-cu .input-text,
.epa .eph-cu .woocommerce input[type="text"],
.epa .eph-cu .woocommerce input[type="email"],
.epa .eph-cu .woocommerce input[type="tel"],
.epa .eph-cu .woocommerce input[type="password"],
.epa .eph-cu .woocommerce select{
  width:100%;font:inherit;font-size:1rem;padding:.7rem .8rem;border:1px solid var(--epa-borde);
  border-radius:12px;background:var(--epa-fondo);color:var(--epa-tinta);box-shadow:none}
.epa .eph-cu .input-text:focus,
.epa .eph-cu .woocommerce input:focus,
.epa .eph-cu .woocommerce select:focus{outline:2px solid var(--epa-azul);outline-offset:1px}

/* ── El panel ── */
.epa .eph-cu-cabeza{margin-bottom:1.3rem}
.epa .eph-cu .woocommerce{display:grid;gap:1.2rem}
@media (min-width:900px){
  .epa .eph-cu .woocommerce{grid-template-columns:13.5rem minmax(0,1fr);gap:2rem;align-items:start}
}
.epa .eph-cu .woocommerce-MyAccount-navigation,
.epa .eph-cu .woocommerce-MyAccount-content{float:none;width:auto;margin:0}

/* El menú: en el celular una fila que se desliza; en la computadora, una lista. */
.epa .eph-cu-menu ul{list-style:none;margin:0;padding:0;display:flex;gap:.45rem;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.epa .eph-cu-menu ul::-webkit-scrollbar{display:none}
.epa .eph-cu-menu a{display:block;white-space:nowrap;padding:.55rem .95rem;border:1px solid var(--epa-borde);
  border-radius:999px;font-size:.875rem;font-weight:600;color:var(--epa-texto);background:var(--epa-blanco);
  transition:color .15s var(--ep-suave,ease),border-color .15s var(--ep-suave,ease)}
.epa .eph-cu-menu a:hover{color:var(--epa-tinta);border-color:var(--epa-azul)}
.epa .eph-cu-menu .is-active a{color:var(--epa-azul-texto);border-color:var(--epa-azul);
  box-shadow:0 0 0 1px var(--epa-azul)}
.epa .eph-cu-menu .woocommerce-MyAccount-navigation-link--customer-logout a{border-style:dashed}
@media (min-width:900px){
  .epa .eph-cu-menu{position:sticky;top:8.5rem}
  .epa .eph-cu-menu ul{flex-direction:column;overflow:visible;gap:.35rem}
  .epa .eph-cu-menu a{border-radius:12px;padding:.65rem .9rem}
  .epa .eph-cu-menu .woocommerce-MyAccount-navigation-link--customer-logout{margin-top:.6rem}
}

/* ── El resumen ── */
.epa .eph-cu-resumen{display:grid;gap:1rem}
@media (min-width:700px){
  .epa .eph-cu-resumen{grid-template-columns:1fr 1fr}
  .epa .eph-cu-resumen > .eph-cu-caja:first-child{grid-column:1 / -1}
}
.epa .eph-cu-caja{padding:1.15rem 1.2rem;border:1px solid var(--epa-borde);border-radius:16px;background:var(--epa-blanco)}
.epa .eph-cu-caja .epa-btn{margin-top:.9rem}
.epa .eph-cu-caja .eph-cu-pedido{margin-top:.9rem}
.epa .eph-cu-datos{margin:.8rem 0 0;display:grid;gap:.45rem}
.epa .eph-cu-datos > div{display:grid;grid-template-columns:6rem 1fr;gap:.6rem;font-size:.875rem}
.epa .eph-cu-datos dt{color:var(--epa-texto);margin:0}
.epa .eph-cu-datos dd{margin:0;color:var(--epa-tinta);font-weight:600;overflow-wrap:anywhere}

/* ── Una tarjeta de pedido ── */
.epa .eph-cu-titulo{margin-bottom:.9rem !important}
.epa .eph-cu-pedidos{display:grid;gap:.7rem}
.epa .eph-cu-pedido{display:grid;gap:.4rem;padding:.95rem 1.05rem;border:1px solid var(--epa-borde);
  border-radius:16px;background:var(--epa-blanco);color:var(--epa-tinta);
  transition:border-color .15s var(--ep-suave,ease)}
.epa .eph-cu-pedido:hover{border-color:var(--epa-azul)}
.epa .eph-cu-pedido-arriba,.epa .eph-cu-pedido-abajo{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.epa .eph-cu-pedido-arriba b{font-size:1rem}
.epa .eph-cu-pedido-que{font-size:.875rem;color:var(--epa-texto);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.epa .eph-cu-pedido-abajo span{font-size:.875rem;color:var(--epa-texto)}
.epa .eph-cu-pedido-abajo b{font-size:1rem;font-weight:700;white-space:nowrap}
.epa .eph-cu-pedido-abajo b del{font-weight:400;color:var(--epa-texto)}

/* El estado. Ámbar lo que espera algo del cliente: es lo que tiene que mirar. */
.epa .eph-cu-estado{font-size:.75rem;font-weight:600;padding:.25rem .6rem;border-radius:999px;white-space:nowrap;
  background:var(--epa-badge-bg);color:var(--epa-badge-texto)}
.epa .eph-cu-estado--ok{background:color-mix(in srgb,var(--epa-verde) 16%,transparent);color:var(--epa-verde-tinta)}
.epa .eph-cu-estado--espera{background:color-mix(in srgb,#F59E0B 18%,transparent);color:#B45309}
[data-theme="dark"] .epa .eph-cu-estado--espera{color:#FBBF24}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .epa .eph-cu-estado--espera{color:#FBBF24}}
.epa .eph-cu-estado--baja{background:color-mix(in srgb,var(--epa-texto) 14%,transparent);color:var(--epa-texto)}

.epa .eph-cu-paginas{display:flex;justify-content:space-between;margin-top:1rem;font-size:.875rem;font-weight:600}
.epa .eph-cu-paginas a{color:var(--epa-azul-texto)}
.epa .eph-cu-vacio .epa-btn{margin-top:1rem}

/* ── Lo que sigue siendo de WooCommerce, con la piel nueva ── */
.epa .eph-cu .woocommerce-MyAccount-content{font-size:1rem;color:var(--epa-tinta)}
.epa .eph-cu .woocommerce-MyAccount-content > p:first-child{color:var(--epa-texto)}
.epa .eph-cu .woocommerce-MyAccount-content mark{background:none;color:var(--epa-tinta);font-weight:600}
.epa .eph-cu .woocommerce-MyAccount-content h2,
.epa .eph-cu .woocommerce-MyAccount-content h3,
.epa .eph-cu .woocommerce-MyAccount-content legend{font-size:1.125rem;font-weight:600;margin:1.4rem 0 .7rem;color:var(--epa-tinta)}

/* Las tablas del detalle de un pedido. */
.epa .eph-cu .woocommerce table.shop_table{width:100%;border:1px solid var(--epa-borde);border-radius:16px;
  border-collapse:separate;border-spacing:0;overflow:hidden;background:var(--epa-blanco);margin:0}
.epa .eph-cu .woocommerce table.shop_table th,
.epa .eph-cu .woocommerce table.shop_table td{padding:.75rem .9rem;border:0;border-top:1px solid var(--epa-borde);
  font-size:.875rem;text-align:left;vertical-align:top;color:var(--epa-tinta);background:transparent}
.epa .eph-cu .woocommerce table.shop_table thead th{border-top:0;color:var(--epa-texto);font-weight:600}
.epa .eph-cu .woocommerce table.shop_table tfoot th{color:var(--epa-texto);font-weight:600}
.epa .eph-cu .woocommerce table.shop_table a{color:var(--epa-azul-texto)}

/* Las direcciones, como cajas. */
.epa .eph-cu .woocommerce-Addresses,.epa .eph-cu .woocommerce-columns--addresses{display:grid;gap:1rem;margin-top:1rem}
.epa .eph-cu .woocommerce-Address,.epa .eph-cu .woocommerce-column{float:none;width:auto;padding:1.1rem 1.2rem;
  border:1px solid var(--epa-borde);border-radius:16px;background:var(--epa-blanco)}
.epa .eph-cu .woocommerce-Address-title{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.epa .eph-cu .woocommerce-Address-title h2,.epa .eph-cu .woocommerce-column__title{margin:0 0 .6rem;font-size:1rem}
.epa .eph-cu .woocommerce-Address-title .edit{font-size:.875rem;font-weight:600;color:var(--epa-azul-texto)}
.epa .eph-cu address{font-style:normal;line-height:1.6;color:var(--epa-texto);font-size:.875rem;border:0;padding:0}

/* Los formularios de editar: una columna, con aire entre campos. */
.epa .eph-cu .woocommerce-MyAccount-content form .form-row{float:none;width:auto;margin:0 0 .85rem;padding:0;
  display:grid;gap:.3rem}
.epa .eph-cu .woocommerce-MyAccount-content form label{font-size:.875rem;font-weight:600;color:var(--epa-texto)}
.epa .eph-cu .woocommerce-MyAccount-content form .required{color:var(--epa-azul-texto);text-decoration:none;border:0}
.epa .eph-cu .woocommerce-MyAccount-content form em,
.epa .eph-cu .woocommerce-MyAccount-content form .description{font-size:.75rem;font-style:normal;color:var(--epa-texto)}
.epa .eph-cu .woocommerce-MyAccount-content fieldset{margin:1.2rem 0 0;padding:1.1rem 1.2rem 0;
  border:1px solid var(--epa-borde);border-radius:16px}
.epa .eph-cu .woocommerce-MyAccount-content .clear{display:none}

/* Los botones de WooCommerce, como los del resto del sitio. */
.epa .eph-cu .woocommerce .button,
.epa .eph-cu .woocommerce button[type="submit"]:not(.eph-cu-btn){
  display:inline-flex;align-items:center;justify-content:center;font:inherit;font-size:1rem;font-weight:600;
  padding:.75rem 1.2rem;border:0;border-radius:999px;background:var(--epa-azul);color:#fff;
  box-shadow:none;text-shadow:none;cursor:pointer}
.epa .eph-cu .woocommerce .button:hover,
.epa .eph-cu .woocommerce button[type="submit"]:not(.eph-cu-btn):hover{background:var(--epa-azul-osc);color:#fff}

/* Los avisos ("Datos guardados", "Contraseña incorrecta"). */
.epa .eph-cu .woocommerce-message,.epa .eph-cu .woocommerce-info,.epa .eph-cu .woocommerce-error{
  margin:0 0 1rem;padding:.8rem 1rem;border-radius:12px;border:1px solid var(--epa-borde);
  background:var(--epa-blanco);color:var(--epa-tinta);font-size:.875rem;list-style:none}
.epa .eph-cu .woocommerce-error{border-color:color-mix(in srgb,#DC2626 45%,var(--epa-borde))}
.epa .eph-cu .woocommerce-message{border-color:color-mix(in srgb,var(--epa-verde) 45%,var(--epa-borde))}
.epa .eph-cu .woocommerce-message .button,.epa .eph-cu .woocommerce-info .button{float:right;padding:.35rem .8rem;font-size:.875rem}