/* Contrato visual v1. Cada diseño puede adaptar --em-* sin copiar el módulo. */
.em-cuenta { max-width: 42rem; padding: 2rem 1.25rem 3rem; margin: 0 auto; }
.em-cuenta:has(form) { max-width: 30rem; }
.em-cuenta h1 { margin: 0 0 1.5rem; font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 600; line-height: 1.3; }
.em-cuenta-isla { margin: 0 0 1rem; padding: 1.25rem; border-radius: .75rem; background: var(--em-superficie, var(--app-surface, transparent)); box-shadow: 0 2px 8px rgb(0 0 0 / .04); }
.em-cuenta form { display: grid; gap: .25rem; }
.em-cuenta form > button { position: relative; padding-inline: 2rem; }
.em-cuenta[aria-busy="true"] form > button::after { content: ''; position: absolute; right: .75rem; width: .75rem; height: .75rem; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: em-cuenta-girar 1s linear infinite; }
@keyframes em-cuenta-girar { to { transform: rotate(360deg); } }
.em-cuenta-campo { display: grid; gap: .5rem; font-size: .875rem; }
.em-cuenta-campo input { width: 100%; min-height: 44px; padding: .625rem .75rem; border: 1px solid color-mix(in srgb, var(--em-linea-resuelta) 65%, transparent); border-radius: .375rem; background: transparent; color: inherit; font: inherit; transition: border-color var(--em-tiempo) var(--em-curva-resuelta), background-color var(--em-tiempo) var(--em-curva-resuelta); }
.em-cuenta-campo input:hover { border-color: var(--em-linea-resuelta); }
.em-cuenta-campo input:focus-visible { border-color: var(--em-acento-resuelto); outline: 2px solid color-mix(in srgb, var(--em-acento-resuelto) 30%, transparent); outline-offset: 1px; }
.em-cuenta-error { min-height: 2.5em; line-height: 1.25; font-size: .75rem; }
.em-cuenta-aviso { min-height: 1.5em; margin: .5rem 0; line-height: 1.5; font-size: .875rem; }
.em-cuenta form .em-cuenta-aviso { min-height: 3em; }
.em-cuenta-error, .em-cuenta-aviso { opacity: 1; transition: opacity var(--em-tiempo) var(--em-curva-resuelta); }
.em-cuenta-error:empty, .em-cuenta-aviso:empty { opacity: 0; }
.em-cuenta-enlaces { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .75rem; font-size: .875rem; }
.em-cuenta-enlaces a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: .2em; transition: color var(--em-tiempo) var(--em-curva-resuelta); }
.em-cuenta-enlaces a:hover { color: var(--em-acento-resuelto); }
.em-cuenta-casilla { display: flex; align-items: center; gap: .75rem; min-height: 44px; cursor: pointer; font-size: .875rem; }
.em-cuenta-casilla input { appearance: none; width: 20px; height: 20px; flex: 0 0 20px; border: 1px solid var(--em-linea-resuelta); border-radius: .25rem; transition: background-color var(--em-tiempo) var(--em-curva-resuelta), border-color var(--em-tiempo) var(--em-curva-resuelta); }
.em-cuenta-casilla input:checked { background: var(--em-acento-resuelto); border-color: var(--em-acento-resuelto); box-shadow: inset 0 0 0 3px var(--em-superficie, var(--app-bg, white)); }
.em-cuenta-casilla input:focus-visible { outline: 2px solid var(--em-acento-resuelto); outline-offset: 3px; }
.em-cuenta-cabecera { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: .5rem 1rem; }
.em-cuenta-navegacion { display: flex; flex-wrap: wrap; gap: .5rem; }
.em-cuenta[data-em-cuenta="favoritos"] { max-width: 64rem; }
.em-favoritos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.em-favorito { min-width: 0; padding: .75rem; display: flex; flex-direction: column; }
.em-favorito-enlace { display: grid; gap: .75rem; color: inherit; text-decoration: none; }
.em-favorito-foto { aspect-ratio: 4 / 5; overflow: hidden; border-radius: .375rem; background: color-mix(in srgb, var(--em-linea-resuelta) 25%, transparent); }
.em-favorito-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.em-favorito-enlace strong { min-height: 3.9em; line-height: 1.3; font-size: .875rem; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.em-favorito-enlace:hover strong { text-decoration: underline; text-underline-offset: .2em; }
.em-favorito-precio { min-height: 1.5em; font-size: .875rem; font-variant-numeric: tabular-nums; }
.em-favorito > button { position: relative; margin-top: .75rem; font-size: .75rem; padding-inline: .25rem 1.25rem; }
.em-favorito[aria-busy="true"] > button::after { content: ''; position: absolute; right: .375rem; width: .5rem; height: .5rem; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: em-cuenta-girar 1s linear infinite; }
.em-favorito .em-cuenta-aviso { min-height: 3em; }
[data-em-favoritos-vacio][hidden] { display: none; }
.em-cuenta-datos div { display: grid; gap: .375rem; padding: .5rem 0; }
.em-cuenta-datos dt { color: var(--em-apoyo-resuelto); font-size: .875rem; }
.em-cuenta-datos dd { margin: 0; overflow-wrap: anywhere; }
.em-cuenta-pedidos { list-style: none; padding: 0; margin: 0; }
.em-cuenta-pedido { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; color: inherit; text-decoration: none; font-size: .875rem; }
.em-cuenta-pedido span { overflow-wrap: anywhere; }
.em-cuenta-pedido:hover strong { text-decoration: underline; text-underline-offset: .2em; }
.em-modulo {
    color: inherit;
    font: inherit;
    min-width: 0;
    --em-linea-resuelta: var(--em-linea, var(--app-line, #d7d7d7));
    --em-apoyo-resuelto: var(--em-apoyo, var(--app-fog, #666));
    --em-acento-resuelto: var(--em-acento, var(--app-accent, currentColor));
    --em-tiempo: var(--em-duracion, var(--dur-fast, var(--dur-rapida, 150ms)));
    --em-curva-resuelta: var(--em-curva, var(--ease-out-soft, var(--ease-salida, cubic-bezier(.22, 1, .36, 1))));
}
.em-modulo *, .em-modulo *::before, .em-modulo *::after { box-sizing: border-box; }
.em-modulo-titulo { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
.em-modulo-apoyo { display: block; margin: .25rem 0 0; color: var(--em-apoyo-resuelto); font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere; }
.em-pack-grupos { display: grid; min-width: 0; }
.em-pack-grupo {
    grid-area: 1 / 1;
    display: grid;
    align-content: start;
    gap: .75rem;
    min-width: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    opacity: 1;
    transition: opacity var(--em-tiempo) var(--em-curva-resuelta);
}
.em-pack-grupo[aria-hidden="true"] { opacity: 0; pointer-events: none; }
.em-pack-fila {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-card, .5rem);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--em-linea-resuelta) 65%, transparent);
    transition: background-color var(--em-tiempo) var(--em-curva-resuelta), box-shadow var(--em-tiempo) var(--em-curva-resuelta);
}
.em-pack-fila:hover { background: color-mix(in srgb, var(--em-acento-resuelto) 5%, transparent); }
.em-pack-fila:focus-visible { outline: 2px solid var(--em-acento-resuelto); outline-offset: 3px; }
.em-pack-imagen { display: block; width: 56px; height: 56px; flex: 0 0 56px; object-fit: contain; border-radius: .25rem; }
.em-pack-respaldo { display: grid; place-items: center; color: var(--em-apoyo-resuelto); }
.em-pack-nombre { min-width: 0; flex: 1; font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
.em-pack-nombre > :first-child { font-weight: 600; }
.em-pack-cantidad { flex: 0 0 auto; color: var(--em-apoyo-resuelto); font-size: .875rem; font-variant-numeric: tabular-nums; }
.em-resenas-cuerpo { display: grid; gap: 2rem; }
.em-resenas-cuerpo[data-em-sin-publicas="true"] { grid-template-columns: minmax(0, 32rem); }
.em-resenas-cuerpo[data-em-sin-publicas="true"] [data-em-resenas-publicas] { display: none; }
.em-resenas-media { margin: 0; font-size: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.em-resenas-media > span { font-size: 1rem; color: var(--em-acento-resuelto); }
.em-resenas-reparto { display: grid; gap: .4rem; margin: 1rem 0 0; font-size: .75rem; color: var(--em-apoyo-resuelto); }
.em-resenas-reparto > div { display: flex; align-items: center; gap: .5rem; }
.em-resenas-reparto dt { width: 2rem; }
.em-resenas-reparto dd { margin: 0; font-variant-numeric: tabular-nums; }
.em-resenas-reparto dd:last-child { min-width: 2rem; text-align: right; }
.em-resenas-barra { flex: 1; height: .375rem; overflow: hidden; background: var(--em-linea-resuelta); border-radius: .25rem; }
.em-resenas-barra > span { display: block; height: 100%; background: var(--em-acento-resuelto); }
.em-resenas-lista { min-width: 0; margin: 0; padding: 0; list-style: none; }
.em-resenas-lista > li { padding: 1rem 0; border-top: 1px solid var(--em-linea-resuelta); overflow-wrap: anywhere; }
.em-resenas-lista > li:first-child { padding-top: 0; border-top: 0; }
.em-resenas-lista p, .em-resenas-lista h3 { margin: .25rem 0 0; }
.em-resenas-lista h3 { font-size: 1rem; font-weight: 600; }
.em-resenas-lista li > p:first-child { color: var(--em-acento-resuelto); }
.em-resenas-autor { color: var(--em-apoyo-resuelto); font-size: .75rem; line-height: 1.6; }
.em-resenas { scroll-margin-top: 6rem; }
.em-resena-texto { white-space: pre-line; }
.em-resenas-paginas, .em-editor-estados { display: grid; min-width: 0; }
.em-resenas-paginas { scroll-margin-top: 6rem; }
.em-grupo { grid-area: 1 / 1; min-width: 0; opacity: 1; transition: opacity var(--em-tiempo) var(--em-curva-resuelta); }
.em-grupo[aria-hidden="true"] { opacity: 0; pointer-events: none; }
.em-paginacion, .em-editor-acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.em-paginacion { margin-top: 1.5rem; }
.em-boton {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 44px; padding: .625rem .875rem; font: inherit; font-size: .875rem;
    color: inherit; background: transparent; text-decoration: none; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--em-linea-resuelta) 65%, transparent);
    border-radius: var(--radius-btn, .375rem);
    transition: color var(--em-tiempo) var(--em-curva-resuelta), background-color var(--em-tiempo) var(--em-curva-resuelta), border-color var(--em-tiempo) var(--em-curva-resuelta);
}
.em-boton[hidden] { display: none; }
.em-boton:hover { background: color-mix(in srgb, var(--em-acento-resuelto) 6%, transparent); }
.em-boton:focus-visible, .em-estrella:has(input:focus-visible) { outline: 2px solid var(--em-acento-resuelto); outline-offset: 3px; }
.em-boton:disabled { opacity: .5; cursor: default; }
.em-pagina { min-width: 44px; font-variant-numeric: tabular-nums; }
.em-pagina[aria-current="page"] { background: color-mix(in srgb, var(--em-acento-resuelto) 10%, transparent); border-color: var(--em-acento-resuelto); }
.em-boton-principal { background: var(--em-acento-resuelto); color: var(--em-acento-texto, var(--app-accent-ink, var(--app-bg, white))); border-color: var(--em-acento-resuelto); }
.em-boton-principal:hover { background: color-mix(in srgb, var(--em-acento-resuelto) 90%, black); }
.em-editor { margin-top: 1.5rem; }
.em-editor-abrir { width: 100%; justify-content: space-between; }
.em-editor-abrir span { transition: transform var(--em-tiempo) var(--em-curva-resuelta); }
.em-editor-abrir[aria-expanded="true"] span { transform: rotate(180deg); }
.em-editor-revelado { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--em-tiempo) var(--em-curva-resuelta); }
.em-editor-revelado[data-em-abierto="true"] { grid-template-rows: 1fr; }
.em-editor-recorte { min-height: 0; overflow: hidden; }
.em-editor-estados { padding-top: 1rem; }
.em-editor-estados > .em-grupo { display: flex; flex-direction: column; align-items: stretch; gap: .75rem; }
.em-editor[data-em-editor-actual="sin-sesion"] .em-editor-estados > [aria-hidden="true"],
.em-editor[data-em-editor-actual="error"] .em-editor-estados > [aria-hidden="true"] { display: none; }
.em-editor-estados h3, .em-editor-estados h4, .em-editor-estados p { margin: 0; }
.em-editor-estados h3, .em-editor-estados h4 { font-size: .875rem; line-height: 1.5; font-weight: 600; }
.em-editor-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.em-propia-texto { max-height: 14rem; overflow-y: auto; font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere; }
.em-resena-form label, .em-resena-form legend { display: block; font-size: .875rem; line-height: 1.5; }
.em-resena-form fieldset { min-width: 0; padding: 0; border: 0; margin: 0; }
.em-resena-form input:not([type="radio"]), .em-resena-form textarea {
    display: block; width: 100%; margin-top: .375rem; min-height: 44px; padding: .625rem .75rem;
    background: transparent; color: inherit; font: inherit; border: 1px solid color-mix(in srgb, var(--em-linea-resuelta) 65%, transparent);
    border-radius: var(--radius-btn, .375rem); outline: none; transition: border-color var(--em-tiempo) var(--em-curva-resuelta), box-shadow var(--em-tiempo) var(--em-curva-resuelta);
}
.em-resena-form textarea { resize: none; min-height: 8rem; }
.em-resena-form input:not([type="radio"]):hover:not(:disabled), .em-resena-form textarea:hover:not(:disabled) { border-color: var(--em-linea-resuelta); }
.em-resena-form input:focus-visible, .em-resena-form textarea:focus-visible { border-color: var(--em-acento-resuelto); box-shadow: 0 0 0 2px color-mix(in srgb, var(--em-acento-resuelto) 12%, transparent); }
.em-resena-form [aria-invalid="true"] { border-color: var(--em-error, #b42318); }
.em-error { display: block; min-height: 1.25rem; margin: .25rem 0 0; font-size: .75rem; line-height: 1.5; color: var(--em-error, #b42318); }
.em-editor-acciones { margin-top: auto; }
.em-estrellas { display: flex; margin-top: .25rem; }
.em-estrella { position: relative; display: inline-flex !important; justify-content: center; align-items: center; width: 44px; height: 44px; cursor: pointer; color: var(--em-apoyo-resuelto); border-radius: .25rem; transition: color var(--em-tiempo) var(--em-curva-resuelta); }
.em-estrella-elegida { color: var(--em-acento-resuelto); }
.em-estrella-elegida svg { fill: currentColor; }
.em-estrella svg { transition: fill var(--em-tiempo) var(--em-curva-resuelta); }
.em-estrella:is(:hover, :has(~ .em-estrella:hover)) { color: var(--em-acento-resuelto); }
.em-estrella:is(:hover, :has(~ .em-estrella:hover)) svg { fill: currentColor; }
.em-solo-lector, .em-estrella input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0; }
@media (min-width: 640px) {
    .em-favoritos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .em-resenas-cuerpo { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
    [data-em-disposicion="grilla"] .em-pack-grupo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .em-favoritos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    [data-em-disposicion="grilla"] .em-pack-grupo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .em-modulo *, .em-modulo *::before, .em-modulo *::after { transition: none !important; animation: none !important; }
}