/* ===========================================================================
   BAREMO WEB: estilos que solo existen en la versión web
   Cuentas, entrar, invitaciones, borrar cuentas y contraseñas olvidadas.
   Viven aparte de mundo.css para que mundo.css sea idéntico al de la app de
   escritorio: así traer los cambios de escritorio (git merge master) no
   choca con ellos. Se carga después de mundo.css, solo en la edición web.
   =========================================================================== */

/* ===========================================================================
   BAREMO WEB: cuentas
   =========================================================================== */
.taquilla {
    max-width: 440px;
    margin: 8vh auto 4rem;
    text-align: center;
}
.taquilla-marca {
    margin: 0 0 1.4rem;
    font-family: var(--fuente-titulo);
    font-size: 2.6rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta);
}
.taquilla h1 { margin: 0 0 .4rem; }
.taquilla-bajada { margin: 0 auto 1.4rem; }
.form-taquilla { text-align: left; display: grid; gap: .2rem; }
.form-taquilla .btn-guardar { justify-self: stretch; justify-content: center; margin-top: .6rem; }
.taquilla-error {
    margin: 0 0 .6rem;
    padding: .6rem .8rem;
    background: color-mix(in srgb, var(--rojo) 14%, transparent);
    border-left: 3px solid var(--rojo);
    color: var(--tinta);
}
.taquilla-pie { margin-top: 1.2rem; }
.cuenta-aviso {
    padding: .6rem .8rem;
    background: color-mix(in srgb, var(--ampolleta) 16%, transparent);
    border-left: 3px solid var(--ampolleta);
}
.cuenta-bloque { margin: 2rem 0; max-width: 720px; }
.cuenta-bloque .form-taquilla { max-width: 440px; }
.cuenta-lista { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .5rem; }
.cuenta-lista li {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .55rem .7rem;
    border: 1px solid var(--regla);
}
.cuenta-enlace { flex: 1 1 260px; min-width: 0; font-family: ui-monospace, monospace; font-size: .85rem; }
.cuenta-tenue { color: var(--tinta-2); }
.cuenta-borrar { margin: 0; }


/* --- Borrar una cuenta (Baremo Web) --------------------------------------- */
.cuenta-borrar-cuenta { margin-left: auto; }
.cuenta-borrar-cuenta > summary { list-style: none; cursor: pointer; }
.cuenta-borrar-cuenta > summary::-webkit-details-marker { display: none; }
.cuenta-borrar-cuenta[open] { flex: 1 1 100%; margin-left: 0; }
.cuenta-borrar-form {
    display: grid;
    gap: .45rem;
    margin-top: .6rem;
    padding: .8rem;
    border: 1px dashed var(--rojo);
    background: color-mix(in srgb, var(--rojo) 7%, transparent);
}
.cuenta-borrar-form p { margin: 0; }
.cuenta-borrar-form input { max-width: 260px; }
.btn-primary.btn-peligro { background: var(--rojo); border-color: var(--rojo); color: #FFF6E5; justify-self: start; }

.panel-borrar-cuenta .panel-caja { max-width: 520px; border-color: var(--rojo); }
.panel-borrar-cuenta h2 { color: var(--rojo); }
.borrar-cuenta-texto { font-size: 1.02rem; }
.borrar-cuenta-acciones { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; margin-top: 1rem; }


/* --- Olvidó la contraseña (Baremo Web) ------------------------------------- */
.cuenta-clave { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.btn-secondary.btn-chico { font-size: .78rem; padding: .3rem .6rem; }
.cuenta-enlace-clave {
    max-width: 720px;
    margin: 1.2rem 0 0;
    padding: 1rem 1.1rem;
    background: color-mix(in srgb, var(--ampolleta) 16%, transparent);
    border-left: 4px solid var(--ampolleta);
}
.cuenta-enlace-clave h2 { margin: 0 0 .4rem; font-size: 1.25rem; }
.cuenta-enlace-clave p { margin: 0 0 .6rem; }
.cuenta-enlace-clave .hint { margin: .6rem 0 0; }
.cuenta-enlace-fila { display: flex; gap: .5rem; flex-wrap: wrap; }
.cuenta-enlace-fila .cuenta-enlace { padding: .45rem .6rem; }


/* ===========================================================================
   AMIGOS (PLAN_WEB.md, A1 a A3)
   La página de Amigos, los interruptores de "qué ven tus amigos" y el modo
   amigo: la colección de otro con las páginas de siempre, sin editar nada.
   =========================================================================== */

/* El botón del encabezado, con las solicitudes nuevas como una ampolleta. */
.enlace-amigos { position: relative; }
.amigos-nuevas {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .3rem;
    margin-left: .15rem;
    border-radius: 1rem;
    background: var(--ampolleta);
    color: #1C150B;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
}

/* --- La página de Amigos --------------------------------------------------- */
.amigos-bloque { margin: 2rem 0; max-width: 980px; }
.amigos-bloque h2 { display: flex; align-items: center; gap: .55rem; }
.amigos-cuenta {
    display: inline-grid; place-items: center; min-width: 1.6rem; padding: 0 .35rem;
    background: var(--ampolleta); color: #1C150B; font-size: .75em; line-height: 1.5;
}
.amigos-recibidas {
    padding: 1rem 1.2rem;
    background: color-mix(in srgb, var(--ampolleta) 14%, transparent);
    border-left: 4px solid var(--ampolleta);
}
.amigos-recibidas h2 { margin-top: 0; }
.amigos-buscar { display: flex; gap: .5rem; flex-wrap: wrap; max-width: 560px; margin-top: .4rem; }
.amigos-buscar input { flex: 1 1 220px; min-width: 0; }

.amigos-filas { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .5rem; max-width: 760px; }
.amigo-fila {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    padding: .55rem .75rem;
    background: var(--papel-2);
    border: 1px solid var(--regla);
}
.amigo-fila-nombre { flex: 1 1 160px; min-width: 0; display: grid; }
.amigo-fila-nombre b { font-size: 1.05rem; overflow-wrap: anywhere; }
.amigo-fila-nombre small { color: var(--tinta-2); }
.amigo-fila-acciones { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.amigo-fila form { margin: 0; }
.amigo-estado { font-size: .85rem; color: var(--tinta-2); }

/* La inicial, como un sello de color. */
.amigo-inicial {
    flex: 0 0 auto;
    display: inline-grid; place-items: center;
    width: 2.4rem; height: 2.4rem;
    border-radius: 50%;
    font-family: var(--fuente-titulo);
    font-size: 1.35rem;
    line-height: 1;
    color: #FFF6E4;
    background: #1C5C50;
    box-shadow: inset 0 0 0 2px rgb(255 246 228 / .3);
}
.amigo-color-0 { background: #1C5C50; }
.amigo-color-1 { background: #B3271A; }
.amigo-color-2 { background: #8A5A0B; }
.amigo-color-3 { background: #3C4E7A; }
.amigo-color-4 { background: #5E3B6E; }

/* Tus amigos: tarjetas, con el tablero verde de las categorías arriba. */
.amigos-tarjetas {
    list-style: none; margin: .9rem 0 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    gap: 1rem;
}
.amigo-tarjeta {
    position: relative;
    background: var(--papel-2);
    border: 1px solid var(--regla);
    box-shadow: 0 3px 6px -4px var(--sombra);
    transition: transform .18s ease-out, box-shadow .18s ease-out;
}
.amigo-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 6px 11px -5px var(--sombra); }
.amigo-tarjeta-enlace { display: grid; color: var(--tinta); text-decoration: none; }
.amigo-tarjeta-enlace:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 3px; }
.amigo-tarjeta-cartel {
    display: grid; place-items: center;
    height: 96px;
    background-color: var(--tablero);
    background-image: radial-gradient(var(--tablero-alto) 1.1px, transparent 1.4px);
    background-size: 7px 7px;
    box-shadow: inset 0 0 0 6px var(--tablero), inset 0 0 0 7px color-mix(in srgb, var(--hueso) 28%, transparent);
}
.amigo-inicial-grande { width: 3.6rem; height: 3.6rem; font-size: 2.1rem; }
.amigo-tarjeta-texto { display: grid; gap: .2rem; padding: .75rem .9rem .85rem; }
.amigo-tarjeta-nombre {
    font-family: var(--fuente-titulo); font-size: 1.45rem; font-weight: 700; line-height: 1;
    text-transform: uppercase; letter-spacing: .04em; overflow-wrap: anywhere;
}
.amigo-tarjeta-numeros { font-size: .88rem; color: var(--tinta-2); }
.amigo-tarjeta-numeros b { font-family: var(--fuente-titulo); font-size: 1.1rem; color: var(--rojo); }
.amigo-tarjeta-ver { margin-top: .2rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--verde); }
.amigo-tarjeta:hover .amigo-tarjeta-ver { text-decoration: underline; }

/* "···": eliminar o bloquear, guardado para que no se apriete sin querer. */
.amigo-mas { position: absolute; top: .45rem; right: .45rem; }
.amigo-mas > summary {
    list-style: none; cursor: pointer;
    width: 32px; height: 32px; display: grid; place-items: center;
    color: var(--hueso); background: color-mix(in srgb, var(--tablero) 70%, transparent);
    font-weight: 800; letter-spacing: .05em;
}
.amigo-mas > summary::-webkit-details-marker { display: none; }
.amigo-mas > summary:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 2px; }
.amigo-mas-caja {
    position: absolute; right: 0; top: calc(100% + .3rem); z-index: 5;
    display: grid; gap: .4rem; min-width: 190px; padding: .6rem;
    background: var(--papel-2); border: 1px solid var(--regla-fuerte);
    box-shadow: 0 8px 18px -10px var(--sombra);
}
.amigo-mas-caja form { margin: 0; }
.amigo-mas-caja button { width: 100%; justify-content: center; }

.amigos-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0 2rem; max-width: 980px; }
.amigos-dos .amigos-bloque { margin: 1rem 0; }
.amigos-botones { display: flex; gap: .5rem; flex-wrap: wrap; }
.amigos-botones a { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; padding: .55rem .9rem; }
.amigos-cambiar-enlace { margin-top: .6rem; }

/* --- Interruptor "lo ven tus amigos" ---------------------------------------- */
.form-interruptor { margin: 0; display: inline-flex; }
.interruptor {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .35rem .7rem .35rem .4rem;
    background: var(--papel-2);
    border: 1px solid var(--regla-fuerte);
    border-radius: 2px;
    color: var(--tinta);
    font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    cursor: pointer;
}
.interruptor:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 3px; }
.interruptor-riel {
    position: relative; width: 34px; height: 18px; flex: 0 0 auto;
    border-radius: 9px;
    background: color-mix(in srgb, var(--tinta) 22%, transparent);
    transition: background-color .18s ease-out;
}
.interruptor-perilla {
    position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
    border-radius: 50%; background: var(--papel-2);
    box-shadow: 0 1px 2px var(--sombra);
    transition: transform .18s ease-out;
}
.interruptor[aria-checked="true"] .interruptor-riel { background: var(--verde); }
.interruptor[aria-checked="true"] .interruptor-perilla { transform: translateX(16px); }
.interruptor[aria-checked="false"] { color: var(--tinta-2); border-style: dashed; }
@media (prefers-reduced-motion: reduce) { .interruptor-riel, .interruptor-perilla { transition: none; } }

.privacidad-ficha { display: flex; gap: .45rem; flex-wrap: wrap; flex-basis: 100%; }
.privacidad-nota { margin: 0; display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--tinta-2); }
.privacidad-nota .icon { width: 16px; height: 16px; }
.privacidad-categoria, .privacidad-top { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.privacidad-top { margin: .8rem 0 0; }
.privacidad-mas { font-size: .85rem; }

.privacidad-cabeza { margin-bottom: .5rem; }
.privacidad-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0 2rem; max-width: 980px; }
.privacidad-columnas .amigos-bloque { margin: 1.2rem 0; }
.privacidad-lista { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .4rem; }
.privacidad-lista li {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    padding: .45rem .6rem .45rem .8rem;
    background: var(--papel-2); border: 1px solid var(--regla);
    scroll-margin-top: 5rem;
}
.privacidad-lista li.esta-oculto { background: transparent; border-style: dashed; }
.privacidad-nombre { min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--tinta); text-decoration: none; }
.privacidad-nombre small { display: block; font-weight: 400; color: var(--tinta-2); }
a.privacidad-nombre:hover { text-decoration: underline; }

/* En tus mosaicos: lo que ocultaste lleva un ojo tachado. */
.marca-oculto {
    position: absolute; bottom: .45rem; right: .45rem; z-index: 3;
    display: grid; place-items: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: color-mix(in srgb, var(--tinta) 78%, transparent);
    color: var(--papel);
    pointer-events: none;
}
.marca-oculto .icon { width: 16px; height: 16px; }
.top-card .marca-oculto, .category-card .marca-oculto { top: .45rem; bottom: auto; right: 2.6rem; }

/* --- Modo amigo: la colección de otro ------------------------------------- */
.banda-amigo {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    padding: .55rem max(1rem, calc((100vw - 1200px) / 2));
    background: var(--ampolleta);
    color: #1C150B;
    box-shadow: 0 4px 10px -6px var(--sombra);
}
.banda-amigo-ojo .icon { width: 20px; height: 20px; display: block; }
.banda-amigo-texto { flex: 1 1 auto; font-size: .98rem; }
.banda-amigo-texto b { font-family: var(--fuente-titulo); font-size: 1.2rem; letter-spacing: .04em; text-transform: uppercase; }
.banda-amigo-volver {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .7rem; border: 1px solid currentColor;
    color: inherit; text-decoration: none;
    font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.banda-amigo-volver .icon { width: 14px; height: 14px; }
.banda-amigo-volver:hover { background: rgb(28 21 11 / .1); }

/* Lo que sirve para editar no se muestra mirando lo de otro. */
.modo-amigo main :is(
    form[method="post"]:not(.permitido-amigo), form[method="POST"]:not(.permitido-amigo),
    [data-abre-panel]:not(.permitido-amigo), details.edit-toggle,
    .drag-handle, .drag-hint, .cabeza-mosaico .btn-nuevo, .agregar-barra, .btn-de-nuevo,
    .boton-papelera, .delete-form, .cartel-anio, .bloque-comentarios, .btn-compartir,
    .foto-editar, .field-foto-editar, .paste-hint, .en-curso-terminar, .btn-empezar,
    .vez-acciones, .subrating-delete, #orden-hint, #orden-tops-hint, .privacidad-ficha,
    .privacidad-categoria, .privacidad-top
) { display: none !important; }
.modo-amigo main :is(.canciones-calificables, .calificar-cancion) { pointer-events: none; }
/* El subtítulo de la portada habla de "lo que ves" tú, y la sección de subítems
   vacía explica cómo agregarlos: mirando lo de otro, sobran. */
.modo-amigo main .cabeza-mosaico,
.modo-amigo main .bloque-subitems:not(:has(.subitem)) { display: none; }
/* Los textos de "vacío" se cambian a tercera persona en amigos.js; hasta
   entonces no se muestran (así no se alcanza a leer "Usa Editar…"). */
.modo-amigo main .empty:not(.empty-amigo) { visibility: hidden; }


/* ===========================================================================
   COMPARAR Y GRUPOS (PLAN_WEB.md, A4 y "Grupos")
   =========================================================================== */

/* La cabecera: los dos sellos, el título y el porcentaje como un marcador. */
.comp-cabeza {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.2rem 1.6rem;
    margin: .6rem 0 1.4rem;
    padding: 1.2rem 1.4rem;
    background-color: var(--tablero);
    background-image: radial-gradient(var(--tablero-alto) 1.1px, transparent 1.4px);
    background-size: 7px 7px;
    box-shadow: inset 0 0 0 6px var(--tablero), inset 0 0 0 7px color-mix(in srgb, var(--hueso) 28%, transparent);
    color: var(--hueso);
}
.comp-personas { display: flex; }
.comp-personas .amigo-inicial + .amigo-inicial { margin-left: -.8rem; }
.comp-titulo h1 { margin: 0; color: var(--hueso); }
.comp-titulo .hint { color: color-mix(in srgb, var(--hueso) 75%, transparent); margin: .3rem 0 .7rem; }
.comp-ver { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; padding: .4rem .8rem; }
.comp-porcentaje { display: grid; justify-items: end; text-align: right; }
.comp-numero {
    font-family: var(--fuente-titulo); font-size: 4.6rem; font-weight: 800; line-height: .9;
    color: var(--ampolleta);
}
.comp-numero small { font-size: .45em; margin-left: .05em; }
.comp-numero-vacio { color: color-mix(in srgb, var(--hueso) 70%, transparent); }
.comp-etiqueta { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.comp-base { max-width: 220px; font-size: .78rem; color: color-mix(in srgb, var(--hueso) 75%, transparent); }
@media (max-width: 640px) {
    .comp-cabeza { grid-template-columns: minmax(0, 1fr); justify-items: start; }
    .comp-porcentaje { justify-items: start; text-align: left; }
}

.comp-foto {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    overflow: hidden;
    background: color-mix(in srgb, var(--tablero) 14%, transparent);
    border: 1px solid var(--regla);
}
.comp-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comp-marca {
    display: inline-block; margin-top: .15rem; padding: .05rem .4rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--verde); border: 1px dashed var(--verde);
}

/* Barras por categoría (y por pareja, en los grupos). */
.comp-barras { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .5rem; max-width: 760px; }
.comp-barras li { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) 3.2rem; align-items: center; gap: .8rem; }
.comp-barra-nombre { font-weight: 600; overflow-wrap: anywhere; }
.comp-barra-nombre small { display: block; font-weight: 400; color: var(--tinta-2); }
.comp-barra { height: 10px; background: color-mix(in srgb, var(--tinta) 12%, transparent); }
.comp-barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--ampolleta), var(--rojo)); }
.comp-barra-valor { font-family: var(--fuente-titulo); font-size: 1.3rem; color: var(--rojo); text-align: right; }
@media (max-width: 560px) {
    .comp-barras li { grid-template-columns: minmax(0, 1fr) 3rem; }
    .comp-barras .comp-barra { grid-column: 1 / -1; grid-row: 2; }
}

/* Donde más discrepan: boletos con las dos notas. */
.comp-duelos { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: .6rem; }
.comp-duelo { display: flex; gap: .7rem; align-items: center; padding: .55rem .7rem; background: var(--papel-2); border: 1px solid var(--regla); border-left: 4px solid var(--rojo); }
.comp-duelo-texto { display: grid; gap: .2rem; min-width: 0; }
.comp-nombre { font-weight: 700; color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; }
.comp-nombre:hover { text-decoration: underline; }
.comp-duelo-notas { display: flex; gap: .9rem; font-size: .85rem; color: var(--tinta-2); }
.comp-duelo-notas b { font-family: var(--fuente-titulo); font-size: 1.25rem; color: var(--rojo); }

/* En común: filas de tabla que en el celular se apilan. */
.comp-comunes-cabeza { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.comp-comunes-cabeza h2 { margin-bottom: 0; }
.comp-comunes-cabeza .control-select { position: relative; display: inline-flex; align-items: center; }
.comp-comunes-cabeza .control-select > .icon { position: absolute; left: .7rem; width: 15px; height: 15px; pointer-events: none; }
.comp-comunes-cabeza select { padding-left: 2.1rem; }
.comp-tabla { list-style: none; margin: .7rem 0 0; padding: 0; max-width: 820px; }
.comp-fila {
    display: grid; grid-template-columns: minmax(0, 1fr) 4.2rem 4.2rem; align-items: center; gap: .6rem;
    padding: .4rem .5rem; border-bottom: 1px solid var(--regla);
}
.comp-fila-titulos { border-bottom: 2px solid var(--regla-fuerte); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.comp-fila-titulos span:not(:first-child) { text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-cosa { display: flex; align-items: center; gap: .6rem; min-width: 0; color: var(--tinta); text-decoration: none; }
.comp-cosa > span:last-child { display: grid; min-width: 0; }
.comp-cosa b { overflow-wrap: anywhere; }
.comp-cosa small { color: var(--tinta-2); overflow-wrap: anywhere; }
.comp-cosa:hover b { text-decoration: underline; }
.comp-nota { font-family: var(--fuente-titulo); font-size: 1.45rem; text-align: center; color: var(--rojo); text-decoration: none; }
a.comp-nota-suya { color: var(--verde); }
a.comp-nota-suya:hover { text-decoration: underline; }

/* Lo que tiene uno y no el otro. */
.comp-solo { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: .5rem; }
.comp-solo-tarjeta { display: flex; align-items: center; gap: .65rem; padding: .45rem .6rem; background: var(--papel-2); border: 1px solid var(--regla); color: var(--tinta); text-decoration: none; height: 100%; }
.comp-solo-tarjeta:hover { border-color: var(--ampolleta); }
.comp-solo-tarjeta:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 2px; }
.comp-solo-texto { display: grid; min-width: 0; flex: 1 1 auto; }
.comp-solo-texto b { overflow-wrap: anywhere; }
.comp-solo-texto small { color: var(--tinta-2); }
.comp-solo-nota { font-family: var(--fuente-titulo); font-size: 1.45rem; color: var(--rojo); }
.comp-oculto-extra { display: none; }
.comp-mostrar-todo .comp-oculto-extra { display: block; }
.comp-ver-mas { margin-top: .7rem; }

/* ¿Es lo mismo? */
.comp-posibles { padding: 1rem 1.2rem; background: color-mix(in srgb, var(--ampolleta) 12%, transparent); border-left: 4px solid var(--ampolleta); }
.comp-posibles h2 { margin-top: 0; }
.comp-posible { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; justify-content: space-between; padding: .55rem .7rem; background: var(--papel-2); border: 1px solid var(--regla); }
.comp-posible-par { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.comp-posible-par > span:not(.comp-igual) { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.comp-posible-par > span > span { display: grid; }
.comp-posible-par small { color: var(--tinta-2); }
.comp-igual { font-size: 1.4rem; color: var(--tinta-2); }

/* "Comparar" en las tarjetas de amigos y miembros. */
.amigo-tarjeta-comparar {
    display: block; padding: .5rem .9rem; border-top: 1px dashed var(--regla);
    font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--rojo); text-decoration: none;
}
.amigo-tarjeta-comparar:hover { background: color-mix(in srgb, var(--rojo) 7%, transparent); }
.amigo-tarjeta-comparar:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 2px; }
.amigo-tarjeta-nombre small { font-family: var(--fuente-texto); font-size: .8rem; text-transform: none; letter-spacing: 0; color: var(--tinta-2); }
.banda-amigo-comparar { background: #1C150B; color: var(--ampolleta); border-color: #1C150B; }
.banda-amigo-comparar:hover { background: #2C2213; }

/* Tus grupos. */
.grupos-tarjetas { list-style: none; margin: .8rem 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .7rem; }
.grupo-tarjeta { display: flex; align-items: center; gap: .9rem; padding: .7rem .85rem; background: var(--papel-2); border: 1px solid var(--regla); box-shadow: 0 3px 6px -4px var(--sombra); color: var(--tinta); text-decoration: none; transition: transform .18s ease-out; }
.grupo-tarjeta:hover { transform: translateY(-2px); border-color: var(--ampolleta); }
.grupo-tarjeta:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 2px; }
.grupo-tarjeta-caras { display: flex; }
.grupo-tarjeta-caras .amigo-inicial { width: 2.1rem; height: 2.1rem; font-size: 1.1rem; box-shadow: 0 0 0 2px var(--papel-2); }
.grupo-tarjeta-caras .amigo-inicial + .amigo-inicial { margin-left: -.55rem; }
.grupo-mas { background: var(--tinta-2) !important; font-size: .8rem !important; }
.grupo-tarjeta-texto { display: grid; min-width: 0; }
.grupo-tarjeta-texto b { font-family: var(--fuente-titulo); font-size: 1.3rem; text-transform: uppercase; letter-spacing: .04em; line-height: 1.05; overflow-wrap: anywhere; }
.grupo-tarjeta-texto small { color: var(--tinta-2); }
.grupo-crear { margin-top: .4rem; }

/* La página del grupo. */
.grupo-invitar { margin-top: 1.1rem; }
.grupo-invitar select { flex: 1 1 200px; min-width: 0; }
.grupo-pendientes { margin-top: .7rem; }
.grupo-lista { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .45rem; max-width: 900px; }
.grupo-fila { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .45rem .6rem; background: var(--papel-2); border: 1px solid var(--regla); }
.grupo-puesto { font-family: var(--fuente-titulo); font-size: 1.4rem; color: var(--rojo); min-width: 1.6rem; text-align: right; }
.grupo-cosa { display: grid; flex: 1 1 180px; min-width: 0; }
.grupo-cosa b { overflow-wrap: anywhere; }
.grupo-cosa small { color: var(--tinta-2); }
.grupo-notas { display: flex; gap: .55rem; flex-wrap: wrap; }
.grupo-nota { display: inline-flex; align-items: center; gap: .25rem; }
.grupo-nota b { font-family: var(--fuente-titulo); font-size: 1.15rem; color: var(--tinta); }
.amigo-inicial-chica { width: 1.7rem; height: 1.7rem; font-size: .78rem; letter-spacing: .02em; }
.grupo-promedio { margin-left: auto; font-family: var(--fuente-titulo); font-size: 1.7rem; color: var(--rojo); min-width: 2.8rem; text-align: right; }
.grupo-rango { color: var(--tinta-2); font-size: 1.35rem; }
.grupo-ajustes form { margin: 0; }
.grupo-ajustes .amigos-botones { margin-top: .8rem; }

/* En tu ficha: qué nota le pusieron tus amigos. */
.bloque-amigos h2 { display: flex; align-items: center; gap: .5rem; }
.notas-amigos-promedio { font-family: var(--fuente-titulo); font-size: 1.3rem; color: var(--rojo); }
.notas-amigos { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: .5rem; }
.nota-amigo { display: flex; align-items: center; gap: .65rem; padding: .45rem .65rem; background: var(--papel-2); border: 1px solid var(--regla); color: var(--tinta); text-decoration: none; height: 100%; }
.nota-amigo:hover { border-color: var(--ampolleta); }
.nota-amigo:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 2px; }
.nota-amigo-texto { display: grid; flex: 1 1 auto; min-width: 0; }
.nota-amigo-texto small { color: var(--tinta-2); overflow-wrap: anywhere; }
.nota-amigo-nota { font-family: var(--fuente-titulo); font-size: 1.6rem; color: var(--rojo); }


/* ===========================================================================
   COMPARTIR (PLAN_WEB.md, A5, y lo adelantado de A6 y A7)
   Recomendar, agregar a pendientes, conversaciones y avisos.
   =========================================================================== */

/* El aviso de "listo", flotando abajo. */
.aviso-flotante {
    position: fixed; left: 50%; bottom: 1.4rem; z-index: 60;
    transform: translateX(-50%);
    max-width: min(92vw, 520px);
    margin: 0; padding: .7rem 1.1rem;
    background: var(--tablero); color: var(--hueso);
    border-left: 4px solid var(--ampolleta);
    box-shadow: 0 10px 24px -10px var(--sombra);
    font-weight: 600;
    transition: opacity .4s ease, transform .4s ease;
}
.aviso-flotante-fuera { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .aviso-flotante { transition: none; } }

/* La campanita del encabezado. */
.enlace-avisos { position: relative; }

/* Recomendar: el panel. */
.panel-recomendar .panel-caja { max-width: 560px; }
.panel-recomendar h2 { display: flex; align-items: center; gap: .5rem; }
.recomendar-lista { border: 0; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.recomendar-lista legend { margin-bottom: .45rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.recomendar-opcion {
    display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
    padding: .35rem .7rem .35rem .45rem; border: 1px solid var(--regla-fuerte); background: var(--papel-2);
    font-size: .92rem; text-transform: none; letter-spacing: 0;
}
.recomendar-opcion input { margin: 0; }
.recomendar-opcion:has(input:checked) { border-color: var(--verde); background: color-mix(in srgb, var(--verde) 12%, transparent); }
.recomendar-opcion:has(input:focus-visible) { outline: 3px solid var(--ampolleta); outline-offset: 2px; }
.btn-recomendar { display: inline-flex; align-items: center; gap: .4rem; }

/* Mirando la ficha de un amigo: agregar a tus pendientes y escribirle. */
.acciones-amigo { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; flex-basis: 100%; }
.acciones-amigo form { margin: 0; display: flex; gap: .4rem; flex-wrap: wrap; }
.acciones-amigo a, .acciones-amigo button { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.ya-lo-tengo b { font-family: var(--fuente-titulo); font-size: 1.1rem; color: var(--rojo); }
.form-mi-version { margin: .8rem 0 0; }
.form-mi-version button { display: inline-flex; align-items: center; gap: .45rem; }

/* Conversaciones. */
.bloque-conversacion h2 { display: flex; align-items: center; gap: .5rem; }
.bloque-conversacion .hint b { font-family: var(--fuente-titulo); font-size: 1.1rem; color: var(--rojo); }
.conversacion { margin: 1rem 0; padding: .8rem 1rem; background: var(--papel-2); border: 1px solid var(--regla); max-width: 760px; }
.conversacion h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; }
.mensajes { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .45rem; max-width: 760px; }
.mensaje {
    justify-self: start; max-width: min(100%, 560px);
    padding: .5rem .75rem; background: var(--papel-2); border: 1px solid var(--regla);
    border-left: 3px solid var(--tinta-2);
}
.mensaje-mio { justify-self: end; border-left-color: var(--ampolleta); background: color-mix(in srgb, var(--ampolleta) 10%, var(--papel-2)); }
.mensaje-cabeza { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--tinta-2); }
.mensaje-cabeza b { color: var(--tinta); }
.mensaje-borrar { margin: 0 0 0 auto; }
.mensaje-borrar .btn-icon { width: 26px; height: 26px; opacity: .55; }
.mensaje-borrar .btn-icon:hover, .mensaje-borrar .btn-icon:focus-visible { opacity: 1; }
.mensaje-borrar .icon { width: 14px; height: 14px; }
.mensaje-texto { margin: .25rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.form-mensaje { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; max-width: 760px; margin: 0; }
.form-mensaje textarea { flex: 1 1 260px; min-width: 0; }

/* Comparar: comentar y las acciones rápidas de cada tarjeta. */
.comp-comentar { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; color: var(--verde); text-decoration: none; }
.comp-comentar .icon { width: 14px; height: 14px; }
.comp-comentar:hover { text-decoration: underline; }
.comp-solo-item { position: relative; }
.comp-solo-item .comp-solo-tarjeta { padding-right: 3.2rem; }
.comp-accion { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); margin: 0; }
.comp-accion .btn-icon { width: 32px; height: 32px; }
.comp-solo-item .comp-solo-nota { margin-right: .2rem; }

/* Avisos. */
.avisos-lista { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .45rem; max-width: 760px; }
.aviso {
    display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem;
    background: var(--papel-2); border: 1px solid var(--regla); color: var(--tinta); text-decoration: none;
}
.aviso:hover { border-color: var(--ampolleta); }
.aviso:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 2px; }
.aviso-nuevo { border-left: 4px solid var(--ampolleta); background: color-mix(in srgb, var(--ampolleta) 9%, var(--papel-2)); }
.aviso-texto { display: grid; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.aviso-texto small { color: var(--tinta-2); }
.aviso-tipo .icon { width: 20px; height: 20px; color: var(--tinta-2); }

/* Te recomendaron. */
.amigos-atajos { margin: .2rem 0 .4rem; }
.recomendaciones { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; max-width: 860px; }
.recomendacion {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: .9rem; align-items: center;
    padding: .7rem .8rem; background: var(--papel-2); border: 1px solid var(--regla); scroll-margin-top: 5rem;
}
.recomendacion-nueva { border-left: 4px solid var(--ampolleta); }
.recomendacion-descartada, .recomendacion-agregada { opacity: .78; }
.recomendacion-foto { width: 64px; height: 88px; overflow: hidden; background: color-mix(in srgb, var(--tablero) 14%, transparent); border: 1px solid var(--regla); }
.recomendacion-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recomendacion-texto { display: grid; gap: .15rem; min-width: 0; }
.recomendacion-de { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--tinta-2); }
.recomendacion-nombre { font-family: var(--fuente-titulo); font-size: 1.35rem; text-transform: uppercase; letter-spacing: .03em; line-height: 1.05; overflow-wrap: anywhere; }
.recomendacion-texto small { color: var(--tinta-2); }
.recomendacion-texto small b { font-family: var(--fuente-titulo); font-size: 1.05rem; color: var(--rojo); }
.recomendacion-mensaje { margin: .25rem 0 0; font-style: italic; overflow-wrap: anywhere; }
.recomendacion-acciones { display: grid; gap: .4rem; justify-items: stretch; }
.recomendacion-acciones form { margin: 0; display: grid; gap: .35rem; }
.recomendacion-acciones a { text-decoration: none; }
@media (max-width: 600px) {
    .recomendacion { grid-template-columns: 56px minmax(0, 1fr); }
    .recomendacion-foto { width: 56px; height: 76px; }
    .recomendacion-acciones { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}


/* ===========================================================================
   LA BARRA EN BAREMO WEB
   Lo social (Amigos, Chats, Avisos) con su nombre, en ampolleta: se
   distingue de las herramientas (íconos) y de tu cuenta.
   =========================================================================== */
header .barra-social-boton {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 42px;
    padding: 0 .85rem;
    border: 1px solid color-mix(in srgb, var(--ampolleta) 55%, transparent);
    border-radius: 2px;
    color: var(--ampolleta);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .15s ease-out, color .15s ease-out;
}
header .barra-social-boton .icon { width: 19px; height: 19px; }
header .barra-social-boton:hover { background: color-mix(in srgb, var(--ampolleta) 16%, transparent); }
header .barra-social-boton.activo { background: var(--ampolleta); color: #241C10; }
header .barra-social-boton:focus-visible { outline: 3px solid var(--hueso); outline-offset: 2px; }
.barra-numero {
    display: inline-grid;
    place-items: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 .3rem;
    border-radius: 1rem;
    background: #E0452F;
    color: #FFF6E4;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}
.barra-numero[hidden] { display: none; }
header .barra-social-boton .barra-numero { position: absolute; top: -7px; right: -7px; box-shadow: 0 0 0 2px var(--tablero); }

header .barra-yo {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 42px;
    padding: 0 .7rem 0 .35rem;
    color: var(--hueso);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: 2px;
}
header .barra-yo:hover, header .barra-yo.activo { border-color: color-mix(in srgb, var(--hueso) 30%, transparent); }
header .barra-yo:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 2px; }
.barra-cuenta { gap: .3rem; }
.form-salir-cuenta { margin: 0; }

/* El aviso de "listo" no queda tapado por la barra de abajo. */
@media (max-width: 720px) {
    .aviso-flotante { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
/* Con muchas cosas en la barra, entre 721 y 1100px las herramientas se
   achican un poco para que todo quepa en una fila. */
@media (min-width: 721px) and (max-width: 1100px) {
    .barra { gap: .6rem; }
    .barra-grupo + .barra-grupo { padding-left: .6rem; }
    header .barra-icono { width: 36px; height: 38px; }
    header .barra-social-boton, header .barra-salir, header .barra-yo { height: 38px; padding: 0 .55rem; }
    header .barra-yo span:last-child { display: none; }
    header .barra-salir span { display: none; }
}


/* ===========================================================================
   CHATS
   En el PC, la lista a la izquierda y la conversación a la derecha; en el
   teléfono, una cosa a la vez. Burbujas: las tuyas a la derecha, en
   ampolleta; las demás a la izquierda, con su sello.
   =========================================================================== */
.chats {
    display: grid;
    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
    gap: 0;
    height: calc(100vh - 210px);
    min-height: 460px;
    border: 1px solid var(--regla-fuerte);
    background: var(--papel-2);
    box-shadow: 0 8px 18px -14px var(--sombra);
}
.chats-lista { border-right: 1px solid var(--regla); overflow-y: auto; }
.chats-titulo {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: .5rem;
    margin: 0; padding: .8rem 1rem;
    background: var(--tablero); color: var(--hueso);
    font-size: 1.5rem;
}
.chats-titulo .icon { color: var(--ampolleta); }
.chats-lista ul { list-style: none; margin: 0; padding: 0; }
.chat-fila {
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--regla);
    color: var(--tinta); text-decoration: none;
}
.chat-fila:hover { background: color-mix(in srgb, var(--ampolleta) 10%, transparent); }
.chat-fila.activo { background: color-mix(in srgb, var(--ampolleta) 22%, transparent); box-shadow: inset 4px 0 0 var(--ampolleta); }
.chat-fila:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: -3px; }
.chat-fila-texto { display: grid; flex: 1 1 auto; min-width: 0; }
.chat-fila-texto b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-fila-texto small { color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-fila.con-nuevos .chat-fila-texto small { color: var(--tinta); font-weight: 700; }
.chat-fila-tipo { font-weight: 400; color: var(--tinta-2); font-size: .75rem; }
.chat-fila-caras { display: flex; flex: 0 0 auto; }
.chat-fila-caras .amigo-inicial { box-shadow: 0 0 0 2px var(--papel-2); }
.chat-fila-caras .amigo-inicial + .amigo-inicial { margin-left: -.55rem; }
.chat-fila .amigos-nuevas { background: #E0452F; color: #FFF6E4; }

.chat-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.chat-encabezado {
    display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    padding: .65rem 1rem;
    background: var(--tablero); color: var(--hueso);
}
.chat-encabezado-texto { display: grid; flex: 1 1 auto; min-width: 0; }
.chat-encabezado-texto b { font-family: var(--fuente-titulo); font-size: 1.4rem; text-transform: uppercase; letter-spacing: .04em; line-height: 1; }
.chat-encabezado-texto small { color: color-mix(in srgb, var(--hueso) 75%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-encabezado .btn-secondary { background: transparent; color: var(--hueso); border-color: color-mix(in srgb, var(--hueso) 35%, transparent); text-decoration: none; }
.chat-encabezado .btn-secondary:hover { background: var(--ampolleta); color: #241C10; }
.chat-volver { display: none; color: var(--hueso); }
.chat-volver .icon { width: 22px; height: 22px; }

.chat-mensajes {
    list-style: none; margin: 0; padding: 1rem;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: .7rem;
    background: var(--papel);
    background-image: var(--fibra);
}
.chat-vacio { margin: auto; max-width: 340px; text-align: center; color: var(--tinta-2); }
.chat-mensaje { display: flex; align-items: flex-end; gap: .5rem; max-width: min(92%, 560px); }
.chat-suyo { align-self: flex-start; }
.chat-mio { align-self: flex-end; flex-direction: row-reverse; }
.chat-cara { flex: 0 0 auto; }
.chat-burbuja {
    min-width: 0;
    padding: .55rem .8rem .65rem;
    background: var(--papel-2);
    border: 1px solid var(--regla);
    border-radius: 2px 12px 12px 12px;
    box-shadow: 0 2px 4px -3px var(--sombra);
}
.chat-mio .chat-burbuja {
    background: color-mix(in srgb, var(--ampolleta) 24%, var(--papel-2));
    border-color: color-mix(in srgb, var(--ampolleta) 55%, transparent);
    border-radius: 12px 2px 12px 12px;
}
.chat-cabeza { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; font-size: .78rem; color: var(--tinta-2); }
.chat-cabeza > b { color: var(--tinta); font-size: .85rem; }
.chat-cabeza time { margin-left: auto; padding-left: .6rem; }
.chat-para b { color: var(--rojo); }
.chat-texto { margin: .25rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.chat-recien { animation: chat-llega .35s ease-out; }
@keyframes chat-llega { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .chat-recien { animation: none; } }

/* Una recomendación es una tarjeta dentro de la burbuja. */
.chat-recomendacion .chat-burbuja { border-left: 4px solid var(--rojo); }
.chat-rec { display: flex; gap: .7rem; align-items: center; margin-top: .45rem; }
.chat-rec-foto { flex: 0 0 auto; width: 58px; height: 80px; overflow: hidden; background: color-mix(in srgb, var(--tablero) 14%, transparent); border: 1px solid var(--regla); }
.chat-rec-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-rec-texto { display: grid; gap: .1rem; min-width: 0; }
.chat-rec-nombre { font-family: var(--fuente-titulo); font-size: 1.3rem; text-transform: uppercase; letter-spacing: .03em; line-height: 1.02; overflow-wrap: anywhere; }
.chat-rec-texto small { color: var(--tinta-2); }
.chat-rec-nota { font-size: .8rem; color: var(--tinta-2); }
.chat-rec-nota b { font-family: var(--fuente-titulo); font-size: 1.5rem; color: var(--rojo); }
.chat-rec-pie { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-top: .55rem; }
.chat-rec-pie form { margin: 0; }
.chat-estado { font-size: .78rem; font-weight: 700; color: var(--tinta-2); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.chat-estado-ok { color: var(--verde); }
.chat-estado .icon { width: 15px; height: 15px; }
/* Un mensaje sobre una nota: con la ficha de la que habla. */
.chat-sobre { display: inline-flex; align-items: center; gap: .3rem; margin-top: .3rem; font-size: .8rem; font-weight: 700; color: var(--verde); text-decoration: none; }
.chat-sobre .icon { width: 14px; height: 14px; }
.chat-sobre:hover { text-decoration: underline; }

.chat-escribir {
    display: flex; align-items: flex-end; gap: .5rem;
    margin: 0; padding: .7rem .8rem;
    border-top: 1px solid var(--regla);
    background: var(--papel-2);
}
.chat-escribir textarea { flex: 1 1 auto; min-width: 0; min-height: 42px; max-height: 160px; resize: none; }
.chat-boton-recomendar { display: inline-flex; align-items: center; gap: .35rem; }
.chat-enviar { min-height: 42px; }
.chat-bienvenida { margin: auto; padding: 2rem; max-width: 380px; text-align: center; color: var(--tinta-2); display: grid; justify-items: center; gap: .6rem; grid-row: 1 / -1; align-self: center; }
.chat-bienvenida .icon { width: 44px; height: 44px; color: var(--ampolleta); }

/* Recomendar desde el chat: elegir algo de tu colección. */
.chat-cosas { list-style: none; margin: .5rem 0 1rem; padding: 0; display: grid; gap: .35rem; max-height: 300px; overflow-y: auto; }
.chat-cosa {
    display: flex; align-items: center; gap: .65rem; width: 100%;
    padding: .4rem .6rem; background: var(--papel-2); border: 1px solid var(--regla); border-radius: 2px;
    color: var(--tinta); font: inherit; text-align: left; cursor: pointer;
}
.chat-cosa .chat-rec-foto { width: 38px; height: 52px; }
.chat-cosa:hover { border-color: var(--ampolleta); }
.chat-cosa.elegida { border-color: var(--verde); box-shadow: inset 4px 0 0 var(--verde); background: color-mix(in srgb, var(--verde) 9%, var(--papel-2)); }
.chat-cosa:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 2px; }
.chat-cosa-texto { display: grid; flex: 1 1 auto; min-width: 0; }
.chat-cosa-texto small { color: var(--tinta-2); }
.chat-cosa-nota { font-family: var(--fuente-titulo); font-size: 1.3rem; color: var(--rojo); }
.chat-cosas-vacio { color: var(--tinta-2); padding: .4rem; }

@media (max-width: 860px) {
    .chats { grid-template-columns: minmax(0, 1fr); height: calc(100vh - 190px); }
    .chats.chats-con-abierto .chats-lista { display: none; }
    .chats:not(.chats-con-abierto) .chat-panel { display: none; }
    .chat-volver { display: inline-grid; }
}
@media (max-width: 720px) {
    .chats { height: calc(100dvh - 150px - 70px); margin: 0 -1rem; border-left: 0; border-right: 0; }
    .chat-encabezado .chat-comparar { display: none; }
    .chat-boton-recomendar span { display: none; }
}
/* Cada mensaje mide lo que su contenido (sin esto, se estiraban para llenar
   el alto de la conversación). */
.chat-mensajes { flex-wrap: nowrap; justify-content: flex-start; align-content: flex-start; }
.chat-mensaje { flex: 0 0 auto; }
/* La burbuja hereda "pre-line" de más arriba: solo el texto del mensaje
   respeta los saltos de línea; el resto, no (si no, la sangría de la
   plantilla se vuelve espacio en blanco). */
.chat-mensajes, .chat-burbuja { white-space: normal; }
.chat-texto { white-space: pre-line; }


/* ===========================================================================
   COMPARAR COMO DASHBOARD
   Dos colores, uno por persona, en todos los gráficos: tú en rojo, la otra
   persona en azul. Validados (dataviz/validate_palette.js) en día y en
   noche: se distinguen también con daltonismo. El texto va en tinta; el
   color lo llevan las marcas (puntos, barras, sellos) y la leyenda.
   =========================================================================== */
:root { --serie-yo: #B3271A; --serie-otro: #2F5D9E; --sobre-serie: #FFF6E4; }
:root[data-theme="noche"] { --serie-yo: #E0644C; --serie-otro: #4F8AE0; --sobre-serie: #10140F; }

.dash {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: .6rem 0 2rem;
}
.dash-tarjeta {
    min-width: 0;
    padding: 1.1rem 1.25rem 1.2rem;
    background: var(--papel-2);
    border: 1px solid var(--regla);
    box-shadow: 0 4px 10px -8px var(--sombra);
}
.dash-tarjeta h2 { margin-top: 0; font-size: 1.45rem; }
.dash-ancho { grid-column: 1 / -1; }
@media (max-width: 860px) { .dash { grid-template-columns: minmax(0, 1fr); } }

/* La cabecera: los dos sellos, el resultado en grande y qué hacer. */
.dash-cabeza {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.2rem 2rem;
    padding: 1.4rem 1.6rem;
    background-color: var(--tablero);
    background-image: radial-gradient(var(--tablero-alto) 1.1px, transparent 1.4px);
    background-size: 7px 7px;
    box-shadow: inset 0 0 0 6px var(--tablero), inset 0 0 0 7px color-mix(in srgb, var(--hueso) 28%, transparent);
    color: var(--hueso);
}
.dash-personas { display: flex; align-items: center; gap: .9rem; }
.dash-persona { display: grid; justify-items: center; gap: .35rem; }
.dash-persona b { font-family: var(--fuente-titulo); font-size: 1.25rem; letter-spacing: .05em; text-transform: uppercase; }
.dash-persona .amigo-inicial { width: 4.4rem; height: 4.4rem; font-size: 2.4rem; box-shadow: 0 0 0 3px color-mix(in srgb, var(--hueso) 30%, transparent); }
.dash-yo .amigo-inicial { background: var(--serie-yo); color: var(--sobre-serie); }
.dash-otro .amigo-inicial { background: var(--serie-otro); color: var(--sobre-serie); }
.dash-y { font-family: var(--fuente-titulo); font-size: 1.6rem; color: var(--ampolleta); }
.dash-resultado { display: grid; justify-items: center; text-align: center; }
.dash-numero { font-family: var(--fuente-titulo); font-size: clamp(4rem, 9vw, 6.4rem); font-weight: 800; line-height: .85; color: var(--ampolleta); }
.dash-numero small { font-size: .42em; }
.dash-numero-vacio { color: color-mix(in srgb, var(--hueso) 70%, transparent); }
.dash-frase { margin-top: .3rem; font-family: var(--fuente-titulo); font-size: 1.6rem; letter-spacing: .04em; text-transform: uppercase; }
.dash-base { font-size: .85rem; color: color-mix(in srgb, var(--hueso) 75%, transparent); }
.dash-acciones { display: grid; gap: .5rem; }
.dash-acciones a { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; text-decoration: none; padding: .6rem 1rem; }
.dash-acciones .btn-secondary { background: transparent; color: var(--hueso); border-color: color-mix(in srgb, var(--hueso) 40%, transparent); }
.dash-acciones .btn-secondary:hover { background: var(--ampolleta); color: #241C10; }
@media (max-width: 760px) {
    .dash-cabeza { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .dash-acciones { grid-auto-flow: column; }
}

/* La leyenda: un punto de color y el nombre en tinta. */
.leyenda { display: flex; gap: 1rem; margin: -.3rem 0 .6rem; font-size: .85rem; font-weight: 700; }
.leyenda span::before, .txt-yo::before, .txt-otro::before {
    content: ""; display: inline-block; width: .65em; height: .65em; margin-right: .35em;
    border-radius: 50%; vertical-align: .05em;
}
.ley-yo::before, .txt-yo::before { background: var(--serie-yo); }
.ley-otro::before, .txt-otro::before { background: var(--serie-otro); }
.comp-nota.txt-yo::before, .comp-nota.txt-otro::before, .comp-solo-nota::before { width: .45em; height: .45em; vertical-align: .3em; }
.comp-nota, .comp-solo-nota, a.comp-nota-suya { color: var(--tinta); }

/* Lo que tienen: dos círculos que se cruzan. */
.venn { position: relative; width: 100%; max-width: 380px; margin: .4rem auto 0; aspect-ratio: 300 / 180; }
.venn svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.venn-yo { fill: color-mix(in srgb, var(--serie-yo) 22%, transparent); stroke: var(--serie-yo); stroke-width: 2.5; }
.venn-otro { fill: color-mix(in srgb, var(--serie-otro) 22%, transparent); stroke: var(--serie-otro); stroke-width: 2.5; }
.venn-zona {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    display: grid; justify-items: center; text-align: center;
    padding: .3rem .4rem; border-radius: 6px;
    color: var(--tinta); text-decoration: none; line-height: 1.1;
}
.venn-zona b { font-family: var(--fuente-titulo); font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1; }
.venn-zona span { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; max-width: 6.5rem; }
.venn-zona:hover, .venn-zona:focus-visible { background: color-mix(in srgb, var(--papel-2) 70%, transparent); outline: 2px solid var(--ampolleta); }
.venn-izq { left: 21%; }
.venn-medio { left: 50%; }
.venn-der { left: 79%; }

/* Cómo califica cada uno: barras de 1 a 10 por persona. */
.histo { margin-top: .8rem; }
.histo-quien { font-size: .88rem; }
.histo-prom { font-family: var(--fuente-titulo); font-size: 1.2rem; }
.histo-barras {
    display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px;
    align-items: end; height: 74px; margin-top: .25rem;
    border-bottom: 1px solid var(--regla-fuerte);
}
.histo-barra { height: max(2px, var(--alto)); border-radius: 4px 4px 0 0; cursor: default; }
.dash-yo .histo-barra { background: var(--serie-yo); }
.dash-otro .histo-barra { background: var(--serie-otro); }
.histo-barra:hover { filter: brightness(1.15); }
.histo-eje { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; margin-top: .2rem; text-align: center; font-size: .72rem; color: var(--tinta-2); }
.dash-lectura { margin: .9rem 0 0; padding: .55rem .75rem; background: color-mix(in srgb, var(--ampolleta) 12%, transparent); border-left: 3px solid var(--ampolleta); }

/* El mapa: tu nota (abajo) y la suya (a la izquierda). */
.mapa {
    display: grid;
    grid-template-columns: 1.4rem minmax(0, 1fr);
    grid-template-areas: "ejey area" ". ejex" ". titx";
    max-width: 480px;
    margin: .6rem auto 0;
}
.mapa-eje-y { grid-area: ejey; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
.mapa-area { grid-area: area; position: relative; aspect-ratio: 1; background: var(--papel); border: 1px solid var(--regla-fuerte); }
.mapa-fondo { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa-rejilla { stroke: var(--regla); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mapa-diagonal { stroke: var(--tinta-2); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.mapa-zona { position: absolute; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-2); opacity: .8; pointer-events: none; }
.mapa-zona-otro { top: .5rem; left: .6rem; }
.mapa-zona-yo { bottom: .5rem; right: .6rem; }
.mapa-punto {
    position: absolute;
    width: calc(10px + var(--n, 1) * 3px); height: calc(10px + var(--n, 1) * 3px);
    padding: 0; border: 0; border-radius: 50%;
    transform: translate(-50%, 50%);
    box-shadow: 0 0 0 2px var(--papel);
    cursor: pointer;
    transition: transform .12s ease-out;
}
.mapa-punto:hover, .mapa-punto:focus-visible { transform: translate(-50%, 50%) scale(1.35); outline: none; box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--ampolleta); z-index: 2; }
.mapa-yo { background: var(--serie-yo); }
.mapa-otro { background: var(--serie-otro); }
.mapa-igual { background: var(--tinta-2); }
.mapa-eje-x { grid-area: ejex; position: relative; height: 1.3rem; }
.mapa-eje-x span { position: absolute; transform: translateX(-50%); font-size: .72rem; color: var(--tinta-2); }
.mapa-titulo-x { grid-area: titx; text-align: center; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }

/* Donde más discrepan: las dos notas en una misma regla de 1 a 10. */
.duelos { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.duelo-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.duelo-nombre { font-weight: 700; color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; }
.duelo-nombre:hover { text-decoration: underline; }
.duelo-regla {
    position: relative; display: block; height: 30px; margin: .3rem 15px 0;
    background: linear-gradient(var(--regla), var(--regla)) center / 100% 2px no-repeat;
}
.duelo-tramo { position: absolute; top: 50%; height: 6px; transform: translateY(-50%); background: color-mix(in srgb, var(--tinta) 22%, transparent); border-radius: 3px; }
.duelo-punto {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%;
    box-shadow: 0 0 0 2px var(--papel-2);
    color: var(--sobre-serie);
}
.duelo-punto b { font-family: var(--fuente-titulo); font-size: .95rem; line-height: 1; }
.duelo-punto.dash-yo { background: var(--serie-yo); }
.duelo-punto.dash-otro { background: var(--serie-otro); }

/* Por categoría: barras de una sola tinta (es una cantidad, no una persona). */
.dash-barras { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .65rem; }
.dash-barras li { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) 3.4rem; align-items: center; gap: .8rem; }
.dash-barra-nombre { font-weight: 600; overflow-wrap: anywhere; }
.dash-barra-nombre small { display: block; font-weight: 400; color: var(--tinta-2); }
.dash-barra { height: 14px; background: color-mix(in srgb, var(--tinta) 10%, transparent); border-radius: 0 4px 4px 0; }
.dash-barra span { display: block; height: 100%; background: var(--verde); border-radius: 0 4px 4px 0; }
.dash-barra-valor { font-family: var(--fuente-titulo); font-size: 1.45rem; text-align: right; }
@media (max-width: 560px) {
    .dash-barras li { grid-template-columns: minmax(0, 1fr) 3rem; }
    .dash-barras .dash-barra { grid-column: 1 / -1; grid-row: 2; }
}

/* El cuadrito al pasar el mouse (o tocar) un punto, una barra o una zona. */
.tip-flotante {
    position: fixed; z-index: 80; max-width: 280px;
    padding: .45rem .65rem; border-radius: 4px;
    background: #1C150B; color: #F3E6C6;
    font-size: .82rem; font-weight: 600; line-height: 1.3;
    box-shadow: 0 8px 18px -8px rgb(0 0 0 / .55);
    pointer-events: none;
}
/* En "Solo de…" el título ya dice de quién es: la nota va sin punto. */
.comp-solo-nota::before { display: none !important; }


/* ===========================================================================
   EL PERFIL DE OTRA PERSONA (/de/<nombre>/)
   No es tu portada con otro nombre: es su tarjeta (quién es, cuánto se
   parecen, qué hacer) y pestañas para revisar lo que calificó.
   =========================================================================== */
.banda-amigo-nombre { color: inherit; text-decoration: none; border-bottom: 2px solid currentColor; }
.banda-amigo-nombre:hover { background: rgb(28 21 11 / .1); }

.perfil-cabeza {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "sello quien compat" "sello acciones compat";
    align-items: center;
    gap: .6rem 1.6rem;
    margin: .4rem 0 1.4rem;
    padding: 1.4rem 1.6rem;
    background-color: var(--tablero);
    background-image: radial-gradient(var(--tablero-alto) 1.1px, transparent 1.4px);
    background-size: 7px 7px;
    box-shadow: inset 0 0 0 6px var(--tablero), inset 0 0 0 7px color-mix(in srgb, var(--hueso) 28%, transparent);
    color: var(--hueso);
}
.perfil-sello { grid-area: sello; width: 6.5rem; height: 6.5rem; font-size: 3.6rem; box-shadow: 0 0 0 4px color-mix(in srgb, var(--hueso) 30%, transparent); }
.perfil-quien { grid-area: quien; min-width: 0; }
.perfil-quien h1 { margin: 0; color: var(--hueso); font-size: clamp(2rem, 5vw, 3.2rem); overflow-wrap: anywhere; }
.perfil-numeros { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: .3rem 0 0; color: color-mix(in srgb, var(--hueso) 80%, transparent); }
.perfil-numeros b { font-family: var(--fuente-titulo); font-size: 1.35rem; color: var(--ampolleta); }
.perfil-grupos { display: flex; align-items: center; gap: .4rem; margin: .4rem 0 0; font-size: .85rem; color: color-mix(in srgb, var(--hueso) 80%, transparent); }
.perfil-grupos .icon { width: 16px; height: 16px; }
.perfil-acciones { grid-area: acciones; display: flex; flex-wrap: wrap; gap: .5rem; }
.perfil-boton { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; padding: .6rem 1rem; }
.perfil-acciones .btn-secondary { background: transparent; color: var(--hueso); border-color: color-mix(in srgb, var(--hueso) 40%, transparent); }
.perfil-acciones .btn-secondary:hover { background: var(--ampolleta); color: #241C10; }
.perfil-compat {
    grid-area: compat;
    display: grid; justify-items: center; gap: .3rem; text-align: center;
    padding: .8rem 1.2rem;
    border: 1px solid color-mix(in srgb, var(--ampolleta) 55%, transparent);
    color: var(--hueso); text-decoration: none;
}
a.perfil-compat:hover { background: color-mix(in srgb, var(--ampolleta) 12%, transparent); }
a.perfil-compat:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 3px; }
.perfil-compat-numero { font-family: var(--fuente-titulo); font-size: 4rem; font-weight: 800; line-height: .85; color: var(--ampolleta); }
.perfil-compat-numero small { font-size: .45em; }
.perfil-compat-vacio { color: color-mix(in srgb, var(--hueso) 70%, transparent); }
.perfil-compat-texto { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; max-width: 12rem; }
.perfil-compat .btn-secondary { background: transparent; color: var(--hueso); border-color: color-mix(in srgb, var(--hueso) 40%, transparent); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
@media (max-width: 760px) {
    .perfil-cabeza {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "sello quien" "compat compat" "acciones acciones";
        padding: 1.1rem;
    }
    .perfil-sello { width: 4.4rem; height: 4.4rem; font-size: 2.4rem; }
    .perfil-compat { grid-template-columns: auto auto; align-items: center; justify-content: start; text-align: left; }
    .perfil-compat-numero { font-size: 2.8rem; }
    .perfil-acciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .perfil-boton { justify-content: center; padding: .55rem .4rem; font-size: .75rem; }
}

/* Las pestañas. */
.perfil-pestanas { display: flex; gap: .3rem; flex-wrap: wrap; margin: 0 0 1rem; border-bottom: 2px solid var(--regla-fuerte); }
.perfil-pestana {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .6rem 1rem; margin-bottom: -2px;
    background: transparent; border: 0; border-bottom: 4px solid transparent;
    color: var(--tinta-2); font: inherit; font-weight: 700; font-size: .9rem; letter-spacing: .05em; text-transform: uppercase;
    cursor: pointer;
}
.perfil-pestana:hover { color: var(--tinta); }
.perfil-pestana.activa { color: var(--tinta); border-bottom-color: var(--ampolleta); }
.perfil-pestana:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 2px; }
.perfil-pestana .pestana-cuenta { font-size: .78rem; }

/* Lo último / Lo mejor: afiches con su nota. */
.perfil-cosas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 150px), 1fr)); gap: 1rem .8rem; }
.perfil-cosa { display: grid; gap: .2rem; color: var(--tinta); text-decoration: none; }
.perfil-cosa-foto {
    position: relative; display: grid; place-items: center;
    aspect-ratio: 2 / 3; overflow: hidden;
    background: var(--tablero); color: color-mix(in srgb, var(--hueso) 30%, transparent);
    box-shadow: 0 4px 10px -6px var(--sombra);
    transition: transform .15s ease-out;
}
.perfil-cosa-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.perfil-cosa-foto .icon { width: 36px; height: 36px; }
.perfil-cosa:hover .perfil-cosa-foto { transform: translateY(-3px); }
.perfil-cosa:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 3px; }
.perfil-cosa-nota {
    position: absolute; right: .4rem; bottom: .4rem;
    min-width: 2.4rem; padding: .15rem .4rem;
    background: var(--papel-2); color: var(--rojo);
    font-family: var(--fuente-titulo); font-size: 1.5rem; text-align: center; line-height: 1.1;
    box-shadow: 0 2px 6px -2px rgb(0 0 0 / .5);
}
.perfil-cosa-nombre { font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.perfil-cosa small { color: var(--tinta-2); font-size: .78rem; }

/* Categorías y tops. */
.perfil-categorias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .6rem; }
.perfil-categoria {
    display: grid; gap: .3rem; padding: 1rem 1.1rem;
    background: var(--tablero); color: var(--hueso); text-decoration: none;
    box-shadow: inset 0 0 0 4px var(--tablero), inset 0 0 0 5px color-mix(in srgb, var(--hueso) 25%, transparent);
}
.perfil-categoria:hover { background: var(--tablero-alto); }
.perfil-categoria:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 2px; }
.perfil-categoria-nombre { font-family: var(--fuente-titulo); font-size: 1.5rem; text-transform: uppercase; letter-spacing: .04em; line-height: 1; }
.perfil-categoria-n { font-size: .85rem; color: color-mix(in srgb, var(--hueso) 75%, transparent); }
.perfil-categoria-n b { font-family: var(--fuente-titulo); font-size: 1.2rem; color: var(--ampolleta); }
.perfil-tops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: .7rem; }
.perfil-top { display: flex; gap: .8rem; align-items: center; padding: .6rem; background: var(--papel-2); border: 1px solid var(--regla); color: var(--tinta); text-decoration: none; }
.perfil-top:hover { border-color: var(--ampolleta); }
.perfil-top:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 2px; }
.perfil-top-foto { position: relative; flex: 0 0 auto; width: 64px; height: 88px; overflow: hidden; background: var(--tablero); }
.perfil-top-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.perfil-top-n { position: absolute; left: 0; right: 0; bottom: 0; padding: .1rem; background: rgb(0 0 0 / .65); color: var(--ampolleta); font-size: .7rem; font-weight: 700; text-align: center; text-transform: uppercase; }
.perfil-top-n b { font-family: var(--fuente-titulo); font-size: 1rem; color: var(--hueso); }
.perfil-top-texto { display: grid; gap: .2rem; min-width: 0; }
.perfil-top-texto b { font-family: var(--fuente-titulo); font-size: 1.3rem; text-transform: uppercase; letter-spacing: .03em; line-height: 1.05; overflow-wrap: anywhere; }
.perfil-top-texto small { color: var(--tinta-2); overflow-wrap: anywhere; }


/* ===========================================================================
   RECOMENDAR, RENOVADO
   La misma línea que Comparar: lo que recomiendas en grande, los
   destinatarios como fichas con su sello (se marcan con un ✓), frases
   rápidas y un botón grande que dice a cuántas personas les llega.
   =========================================================================== */
.rec-caja { max-width: 620px; padding: 0; overflow: hidden; }
.rec-caja .panel-cerrar { z-index: 3; background: rgb(0 0 0 / .35); color: var(--hueso); border-color: transparent; }
.rec-cartel {
    position: relative;
    display: flex; align-items: center; gap: 1rem;
    padding: 1.2rem 1.4rem;
    background-color: var(--tablero);
    background-image: radial-gradient(var(--tablero-alto) 1.1px, transparent 1.4px);
    background-size: 7px 7px;
    color: var(--hueso);
}
.rec-cartel::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 10px;
    background-image: radial-gradient(circle at 7px 5px, var(--ampolleta) 0 3px, transparent 3.6px);
    background-size: 26px 10px; background-repeat: repeat-x;
}
.rec-afiche { flex: 0 0 auto; width: 74px; height: 104px; overflow: hidden; display: grid; place-items: center; background: var(--tablero-alto); box-shadow: 0 6px 14px -6px rgb(0 0 0 / .7); border: 3px solid var(--hueso); transform: rotate(-3deg); }
.rec-afiche img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-afiche .icon { width: 30px; height: 30px; color: color-mix(in srgb, var(--hueso) 40%, transparent); }
.rec-cartel-texto { display: grid; gap: .15rem; min-width: 0; flex: 1 1 auto; }
.rec-eyebrow { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ampolleta); }
.rec-eyebrow .icon { width: 15px; height: 15px; }
.rec-nombre { font-family: var(--fuente-titulo); font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1; text-transform: uppercase; letter-spacing: .03em; overflow-wrap: anywhere; }
.rec-cat { font-size: .85rem; color: color-mix(in srgb, var(--hueso) 75%, transparent); }
.rec-tu-nota { display: grid; justify-items: center; flex: 0 0 auto; padding-right: 1.6rem; }
.rec-tu-nota b { font-family: var(--fuente-titulo); font-size: 3rem; line-height: .9; color: var(--ampolleta); }
.rec-tu-nota small { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.form-recomendar, .chat-recomendar-form { display: grid; gap: .55rem; padding: 1.2rem 1.4rem 1.4rem; }
.rec-paso { margin: .4rem 0 0; font-family: var(--fuente-titulo); font-size: 1.25rem; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta); }
.rec-paso label { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.rec-paso small { font-family: var(--fuente-texto); font-size: .75rem; text-transform: none; letter-spacing: 0; color: var(--tinta-2); }

.rec-destinos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; }
.rec-destino {
    position: relative;
    display: grid; justify-items: center; gap: .3rem; text-align: center;
    padding: .8rem .4rem .7rem;
    background: var(--papel-2);
    border: 2px solid var(--regla);
    border-radius: 6px;
    cursor: pointer;
    text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--tinta);
    transition: border-color .15s ease-out, transform .15s ease-out, background-color .15s ease-out;
}
.rec-destino:hover { border-color: color-mix(in srgb, var(--ampolleta) 70%, transparent); transform: translateY(-2px); }
.rec-destino input { position: absolute; opacity: 0; pointer-events: none; }
.rec-sello { width: 3rem; height: 3rem; font-size: 1.4rem; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.rec-destino-nombre { font-weight: 700; overflow-wrap: anywhere; line-height: 1.15; }
.rec-destino small { font-size: .7rem; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .06em; }
.rec-check {
    position: absolute; top: .35rem; right: .35rem;
    display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
    background: var(--verde); color: var(--sobre-relleno);
    transform: scale(0); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.rec-check .icon { width: 13px; height: 13px; stroke-width: 3; }
.rec-destino:has(input:checked) { border-color: var(--verde); background: color-mix(in srgb, var(--verde) 12%, var(--papel-2)); }
.rec-destino:has(input:checked) .rec-check { transform: scale(1); }
.rec-destino:has(input:checked) .rec-sello { transform: scale(1.08); }
.rec-destino:has(input:focus-visible) { outline: 3px solid var(--ampolleta); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .rec-destino, .rec-check, .rec-sello { transition: none; } }

.rec-frases { display: flex; flex-wrap: wrap; gap: .35rem; }
.rec-frase {
    padding: .3rem .7rem; border: 1px dashed var(--regla-fuerte); border-radius: 1rem;
    background: transparent; color: var(--tinta); font: inherit; font-size: .82rem; cursor: pointer;
}
.rec-frase:hover { border-style: solid; border-color: var(--ampolleta); background: color-mix(in srgb, var(--ampolleta) 12%, transparent); }
.rec-frase:focus-visible { outline: 3px solid var(--ampolleta); outline-offset: 2px; }
.form-recomendar textarea, .chat-recomendar-form textarea, .chat-recomendar-form input[type=search] { width: 100%; }
.rec-enviar {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    margin-top: .5rem; min-height: 54px; font-size: 1rem;
    background: var(--rojo); border-color: color-mix(in srgb, #000 25%, var(--rojo));
    box-shadow: 0 3px 0 color-mix(in srgb, #000 35%, var(--rojo));
}
.rec-enviar:hover:not(:disabled) { background: color-mix(in srgb, #000 12%, var(--rojo)); }
.rec-enviar:disabled { background: var(--tinta-2); border-color: var(--tinta-2); box-shadow: none; }
.rec-pie { margin: 0; text-align: center; }
.rec-cartel-chat { padding-right: 3.5rem; }
@media (max-width: 560px) {
    .rec-cartel { padding: 1rem; gap: .8rem; }
    .rec-afiche { width: 58px; height: 82px; }
    .rec-tu-nota { padding-right: .4rem; }
    .rec-tu-nota b { font-size: 2.3rem; }
    .form-recomendar, .chat-recomendar-form { padding: 1rem; }
    .rec-destinos { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}

/* --- Promedio en Baremo (bajo el título de la ficha) --- */
.promedio-app {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin: .2rem 0 1rem;
    padding: .35rem .9rem .35rem .35rem;
    background: var(--papel-2);
    border: 1px solid var(--regla-fuerte);
    border-left: 4px solid var(--ampolleta);
    border-radius: var(--radius);
    color: var(--tinta);
    max-width: 100%;
}
.promedio-app-nota {
    display: grid;
    place-items: center;
    min-width: 3rem;
    height: 3rem;
    padding: 0 .4rem;
    background: var(--tablero);
    color: var(--ampolleta);
    font-family: var(--fuente-titulo);
    font-size: 1.6rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    border-radius: var(--radius);
}
.promedio-app-texto { display: grid; gap: .1rem; line-height: 1.2; min-width: 0; }
.promedio-app-texto b {
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.promedio-app-texto small { color: var(--tinta-2); font-size: .85rem; }