/* La cuenta del cliente en el sitio (HU-39): acceso y "Mi cuenta". Solo variables del tema público
   (--color-*, themes/public.css); los campos son el componente del núcleo (components/forms.css).
   Sin fondo propio y con el color de texto heredado (HU-117): el fondo y el color de texto que se le
   den al nodo en el editor se ven tal cual. Los tonos suaves y los bordes salen de currentColor. */

.cuenta {
    max-width: 960px;
    margin: 0 auto;
    padding: clamp(32px, 6cqi, 64px) 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cuenta__caja {
    padding: clamp(20px, 4cqi, 32px);
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    border-radius: var(--radius, 12px);
}

.cuenta__encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.cuenta__titulo {
    margin: 0 0 16px;
    font-size: clamp(1.5rem, 3cqi, 2rem);
}
.cuenta__encabezado .cuenta__titulo {
    margin: 0;
}

.cuenta__subtitulo {
    margin: 0 0 16px;
    font-size: 1.25rem;
}

.cuenta__texto {
    margin: 0 0 16px;
    color: color-mix(in srgb, currentColor 75%, transparent);
}

.cuenta__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
}
.cuenta__form .btn {
    align-self: flex-start;
}

.cuenta__enlace,
.cuenta__salir {
    color: inherit;
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.cuenta__avisos {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cuenta__aviso {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 8px;
}
.cuenta__aviso--error {
    border-color: var(--color-error);
    color: var(--color-error);
}

/* Eliminar la cuenta (Ley 21.719) */
.cuenta__caja--peligro {
    border-color: var(--color-error);
}
.cuenta__confirmar summary {
    cursor: pointer;
    color: var(--color-error);
    margin-bottom: 16px;
}
.cuenta__eliminar {
    background: var(--color-error);
    border-color: var(--color-error);
}

/* ── Ingresar, crear cuenta y recuperar (HU-117): una tarjeta centrada con la marca de la pyme ── */
.cuenta-acceso {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: clamp(32px, 8cqi, 80px) 16px;
}

.cuenta-tarjeta {
    width: 100%;
    max-width: 440px;
    padding: clamp(24px, 5cqi, 40px);
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    border-radius: var(--radius, 12px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cuenta-tarjeta__marca {
    display: flex;
    justify-content: center;
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.25rem;
}
.cuenta-tarjeta__marca img {
    max-height: 56px;
    max-width: 200px;
    object-fit: contain;
}

.cuenta-tarjeta__titulo {
    margin: 8px 0 0;
    font-size: clamp(1.5rem, 3cqi, 1.875rem);
}

.cuenta-tarjeta__texto,
.cuenta-tarjeta__nota {
    margin: 0;
    color: color-mix(in srgb, currentColor 75%, transparent);
}
.cuenta-tarjeta__nota {
    font-size: 13px;
}
.cuenta-tarjeta a {
    color: var(--color-primary);
}

.cuenta-tarjeta__fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 14px;
}

.cuenta-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.cuenta__form .cuenta-tarjeta__boton,
.cuenta-tarjeta__boton {
    align-self: stretch;
    justify-content: center;
    text-align: center;
}

.cuenta-clave {
    position: relative;
}
.cuenta-clave .form-input {
    width: 100%;
    padding-right: 72px;
}
.cuenta-clave__ver {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    padding: 4px 8px;
    border: 0;
    background: none;
    color: var(--color-primary);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.cuenta-acceso__volver {
    color: inherit;
    font-size: 14px;
}

/* Las secciones de los módulos (ej. sales/cuenta_pedidos.html) */
.cuenta__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.cuenta__fila {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
.cuenta__fila:first-child {
    border-top: 0;
}
.cuenta__vacio {
    margin: 0;
    color: color-mix(in srgb, currentColor 75%, transparent);
}

/* Títulos y etiquetas del sitio traen su color del tema: aquí siguen el del nodo */
.cuenta :is(h1, h2, h3, .form-label),
.cuenta-acceso :is(h1, h2, h3, .form-label) {
    color: inherit;
}