:root {
    /* Tipografía del sistema: en Windows 11 es Segoe UI Variable, en un Mac
       sería SF Pro. Se ve nativa en cada equipo y, de paso, la app ya no
       descarga ninguna fuente de internet para arrancar.

       Las dos variantes de Segoe UI Variable no son un capricho: "Display"
       está dibujada para tamaños grandes (espaciado más ceñido) y "Text" para
       el cuerpo, que es justo el reparto que hace la app.

       Están en variables para poder cambiar de tipografía tocando un solo
       sitio, en vez de repetirla por todo el archivo. */
    --fuente-titulo: "Segoe UI Variable Display", "Segoe UI", -apple-system,
                     BlinkMacSystemFont, system-ui, sans-serif;
    --fuente-texto: "Segoe UI Variable Text", "Segoe UI", -apple-system,
                    BlinkMacSystemFont, system-ui, sans-serif;

    /* Paleta de alto contraste. Dos reglas:
       - Azul = se puede tocar (enlaces, botones, foco).
       - Oro  = es una nota (puntajes, barras, estrellas).
       Todo el texto pasa 4.5:1; los números están en CAMBIOS.md. */
    --bg: #F2F2F7;
    --surface: #FFFFFF;
    --border: #D6D6DB;
    --text: #1C1C1E;            /* 17.0:1 sobre la superficie */
    --muted: #5B5B60;           /*  6.8:1 sobre la superficie */
    --primary: #0B63CE;         /*  5.7:1 sobre la superficie */
    --primary-hover: #0952AC;
    --accent: #F5C24A;          /* el oro de las insignias y estrellas */
    --accent-text: #2E1F00;     /*  7.0:1 sobre ese oro */
    /* El oro de las barras va más profundo que el de las insignias: tiene que
       separarse de su propia pista gris (3.45:1) y leerse como texto (6.4:1). */
    --oro: #A86C00;
    --oro-texto: #8A5200;
    --danger: #C9342B;          /*  5.2:1 sobre la superficie */
    --danger-bg: rgba(201, 52, 43, 0.10);
    --track-bg: #E4E4E9;
    --btn-icon-bg: rgba(255, 255, 255, 0.92);
    /* Tinta que va encima de un relleno de color fuerte (azul o rojo). */
    --sobre-relleno: #FFFFFF;   /* 5.7:1 sobre el azul, 5.2:1 sobre el rojo */
    /* Textura del fondo: una trama de puntos finísima, hecha con el propio
       color del texto a muy baja opacidad. No es un color nuevo, es una
       variación del que ya hay. Sube o baja el último número para notarla
       más o menos. */
    --textura: rgba(28, 28, 30, 0.05);
    --textura-paso: 20px;
    --badge-filter: none;
    /* Hace que los controles del navegador (boton de archivo, barras de
       desplazamiento, casillas) se dibujen acordes al tema. */
    color-scheme: light;
    --radius: 16px;
    --shadow: 0 10px 24px -14px rgba(54, 45, 34, 0.22);
}

/* Modo noche: se cambian solo los colores, el resto del diseño es el mismo. */
[data-theme="noche"] {
    color-scheme: dark;
    /* Los colores de noche no son la inversión de los del día: se eligen
       aparte para que brillen sobre gris muy oscuro sin deslumbrar. */
    --bg: #101013;
    --surface: #1C1C1F;
    --border: #33333A;
    --text: #F2F2F5;            /* 15.2:1 sobre la superficie */
    --muted: #A2A2AA;           /*  6.7:1 */
    --primary: #4EA1FF;         /*  6.4:1 */
    --primary-hover: #7FBBFF;
    --accent: #FFB800;
    --accent-text: #2A1C00;     /*  9.6:1 sobre ese oro */
    /* De noche el oro sí puede ir brillante: contra la pista oscura da 8.0:1. */
    --oro: #FFB800;
    --oro-texto: #FFC759;       /* 11.0:1 */
    --danger: #FF6B60;          /*  6.1:1 */
    --danger-bg: rgba(255, 107, 96, 0.16);
    --track-bg: #2C2C31;
    --btn-icon-bg: rgba(44, 44, 49, 0.92);
    /* De noche el azul y el rojo son claros: encima va tinta oscura.
       Blanco sobre ese azul daria 2.67:1 y no se leeria. */
    --sobre-relleno: #101013;   /* 7.1:1 sobre el azul, 6.1:1 sobre el rojo */
    /* De noche la trama va en claro y un punto más marcada: sobre un gris
       muy oscuro y plano casi no se percibe si se deja igual que de día. */
    --textura: rgba(255, 255, 255, 0.042);
    /* Las insignias de categoría son pasteles claros: se atenúan para que no
       queden como manchas brillantes sobre el fondo oscuro. */
    --badge-filter: brightness(0.78) saturate(0.85);
    --shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6);
}

* {
    box-sizing: border-box;
}

/* Que [hidden] gane siempre, incluso sobre reglas con display: flex. */
[hidden] {
    display: none !important;
}

body {
    background-color: var(--bg);
    /* La trama va fija: al hacer scroll no se arrastra, y así se lee como
       el papel de la página y no como un patrón que se mueve. */
    background-image: radial-gradient(var(--textura) 1.1px, transparent 1.2px);
    background-size: var(--textura-paso) var(--textura-paso);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--fuente-texto);
    margin: 0;
    padding: 0;
    line-height: 1.55;
}

header {
    background: var(--surface);
    padding: 1.1rem 3rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--muted);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.theme-toggle:hover {
    color: var(--text);
    border-color: var(--muted);
}

.theme-toggle .icon {
    width: 16px;
    height: 16px;
    display: block;
}

/* Se muestra el icono de la acción: luna para pasar a noche, sol para volver. */
.theme-icon-sun {
    display: none;
}

[data-theme="noche"] .theme-icon-sun {
    display: block;
}

[data-theme="noche"] .theme-icon-moon {
    display: none;
}

@media (max-width: 600px) {
    .theme-toggle .theme-label {
        display: none;
    }
}

.logo {
    color: var(--text);
    font-family: var(--fuente-titulo);
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.01em;
}

main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2.5rem 3rem 5rem;
}

h1, h2 {
    font-family: var(--fuente-titulo);
    font-weight: 600;
    margin: 0 0 0.3rem;
    color: var(--text);
}

h1 {
    font-size: 2.1rem;
}

h2 {
    font-size: 1.35rem;
    margin-top: 3rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-subtitle, .hint {
    color: var(--muted);
    margin: 0 0 2rem;
    font-size: 1.02rem;
}

a {
    color: var(--primary);
}

.back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.75rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--muted);
}

.back:hover {
    color: var(--text);
}

.icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    vertical-align: -0.125em;
}

/* ---- Grids & cards ---- */

.grid {
    display: grid;
    gap: 1.5rem;
    margin: 1.5rem 0 2.75rem;
}

.grid-categories {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
    .grid-categories {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .grid-categories {
        grid-template-columns: 1fr;
    }
}

.grid-items {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.card-link {
    text-decoration: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
}

.drop-placeholder {
    border: 2px dashed var(--primary);
    background: rgba(177, 89, 47, 0.06);
    box-shadow: none;
}

.drag-hint {
    margin: -1.75rem 0 2.5rem;
    font-size: 0.8rem;
}

.drag-handle {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--muted);
    cursor: grab;
    opacity: 0;
    transition: opacity 120ms ease, background 120ms ease;
}

.drag-handle .icon {
    width: 16px;
    height: 16px;
}

.category-card:hover .drag-handle {
    opacity: 1;
}

.drag-handle:hover {
    background: var(--bg);
    color: var(--text);
}

.drag-handle:active {
    cursor: grabbing;
}

.category-card .card-link {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.2rem;
    padding: 1.5rem 1.6rem 1.35rem;
    min-height: 150px;
}

.category-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    filter: var(--badge-filter);
}

.category-badge .icon {
    width: 28px;
    height: 28px;
}

.category-text {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.monogram {
    font-family: var(--fuente-titulo);
    font-weight: 700;
    font-size: 1.3rem;
}

.badge-perfumes { background: #FBD9E6; color: #A0164C; }
.badge-juegos   { background: #D6EBD8; color: #276B2A; }
.badge-peliculas{ background: #FCDFCB; color: #B8450A; }
.badge-series   { background: #CFEAED; color: #0B636B; }
.badge-animes   { background: #EBDAF7; color: #75369F; }
.badge-libros   { background: #F7DCD8; color: #932F26; }
.badge-musica   { background: #DCDCF7; color: #3E3DAD; }

.badge-custom-0 { background: #D6E4F8; color: #0A55B0; }
.badge-custom-1 { background: #EDE1CE; color: #6F5531; }
.badge-custom-2 { background: #CDE9E6; color: #005E58; }
.badge-custom-3 { background: #E2DAF3; color: #58408A; }
.badge-custom-4 { background: #EAE5CA; color: #635619; }

.category-title {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.5rem;
}

.category-title .category-badge {
    width: 44px;
    height: 44px;
    margin-bottom: 0;
}

.category-title .category-badge .icon {
    width: 20px;
    height: 20px;
}

.category-card .name {
    font-weight: 600;
    font-size: 1.15rem;
}

.category-card .count {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.count-number {
    font-family: var(--fuente-titulo);
    font-weight: 700;
    font-size: 2.1rem;
    color: var(--primary);
    line-height: 1;
}

.count-label {
    color: var(--muted);
    font-size: 0.85rem;
}

.thumb {
    aspect-ratio: 1 / 1;
    width: 100%;
    background: var(--track-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thumb .icon-placeholder {
    width: 2.5rem;
    height: 2.5rem;
    opacity: 0.55;
}

.empty {
    color: var(--muted);
    grid-column: 1 / -1;
}

/* ---- Delete buttons ---- */

.delete-form {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    margin: 0;
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--btn-icon-bg);
    color: var(--muted);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(54, 45, 34, 0.15);
}

.btn-icon .icon {
    width: 16px;
    height: 16px;
}

.btn-icon.danger:hover {
    background: var(--danger);
    color: var(--sobre-relleno);
}

/* ---- Forms ---- */

.form {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-bottom: 2rem;
    align-items: flex-end;
}

.form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.6rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    min-width: 180px;
}

.field label {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.field label .icon {
    width: 15px;
    height: 15px;
}

.field input[type="text"],
.subcat-nueva .subcat-nueva-nombre,
.field input[type="file"] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    padding: 0.65rem 0.9rem;
    font-family: inherit;
    font-size: 0.95rem;
}

.field input[type="text"]:focus,
.subcat-nueva .subcat-nueva-nombre:focus,
input[type="range"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.field input[type="file"] {
    padding: 0.55rem;
}

.paste-hint {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: var(--muted);
}

/* align-self y width:auto son lo importante: sin ellos la imagen se estira
   a todo el ancho del campo (el .field es flex en columna, y por defecto
   estira a sus hijos), y con el max-height puesto quedaba aplastada. */
.imagen-preview {
    margin-top: 0.7rem;
    align-self: flex-start;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--track-bg);
    box-shadow: var(--shadow);
    display: block;
}

.imagen-medidas {
    margin: 0.35rem 0 0;
    font-size: 0.74rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.field-slider {
    min-width: 220px;
}

.field-review {
    flex: 1 1 100%;
}

.field textarea {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    padding: 0.65rem 0.9rem;
    font-family: inherit;
    font-size: 0.85rem;
    resize: vertical;
}

.field textarea:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.field-slider output {
    color: var(--oro-texto);
    font-weight: 700;
    font-size: 1.05rem;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--primary);
    border: none;
    border-radius: 999px;
    color: var(--sobre-relleno);
    font-weight: 700;
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-primary .icon {
    width: 16px;
    height: 16px;
}

/* ---- Range slider ---- */

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, var(--primary) 0%, var(--primary) var(--fill, 44%), var(--track-bg) var(--fill, 44%), var(--track-bg) 100%);
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid var(--surface);
    box-shadow: 0 0 0 1px var(--border);
    cursor: pointer;
    margin-top: 0;
}

input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid var(--surface);
    box-shadow: 0 0 0 1px var(--border);
    cursor: pointer;
}

input[type="range"]::-moz-range-track {
    height: 8px;
    border-radius: 4px;
    background: transparent;
}

/* ---- Item detail ---- */

.item-header {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.item-hero {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--track-bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}

.item-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-hero .icon-placeholder {
    width: 2.75rem;
    height: 2.75rem;
    opacity: 0.55;
}

.item-header-info {
    flex: 1;
    min-width: 240px;
}

.score-big {
    margin: 0.35rem 0 1rem;
}

.edit-toggle {
    margin-top: 0.5rem;
}

.edit-toggle summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
    list-style: none;
}

.edit-toggle summary::-webkit-details-marker {
    display: none;
}

.edit-toggle summary:hover {
    color: var(--primary-hover);
}

/* "Mover a la papelera" en la ficha: mismo tamaño y forma que "Editar", pero
   en el color apagado del texto secundario. Se encuentra al primer vistazo y
   no grita; solo se pone rojo al pasarle el ratón, que es cuando importa. */
.form-papelera {
    margin-top: 0.6rem;
}
.boton-papelera {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.boton-papelera .icon { width: 15px; height: 15px; }
.boton-papelera:hover,
.boton-papelera:focus-visible {
    color: var(--danger);
}

.form-edit {
    margin-top: 1rem;
    max-width: 480px;
}

.review-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    margin: 1.5rem 0 1rem;
    min-height: 110px;
}

.review-box p {
    margin: 0;
    /* Un paso más grande que el resto del texto (antes 0.9rem): la review es
       lo que se viene a leer en la ficha, y a 0.9 pasaba desapercibida. */
    font-size: 1.04rem;
    color: var(--text);
    line-height: 1.7;
    white-space: pre-wrap;
}
/* El aviso de "todavía no hay review" se queda en su tamaño: lo que crece es
   la review escrita, no la explicación de que falta. */
.review-box p.empty { font-size: 0.9rem; }

.review-box .empty {
    margin: 0;
}

.subrating-sin-nota {
    margin: 0.9rem 0 1.25rem;
}

/* En pantallas angostas el nombre ocupa su propia línea y la barra queda
   debajo, para que no se aplaste. */

.subrating-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    max-width: 460px;
}

.subcat-compact-group {
    flex: 1 1 100%;
}

.subcat-compact-title {
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
    margin: 0 0 0.6rem;
}

/* min(200px, 100%) en vez de 200px a secas: sin eso, cada columna se niega a
   bajar de 200 y el bloque entero no cabe en una ventana angosta, sacando una
   barra de scroll horizontal a toda la página. */
.subcat-compact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 1rem 1.5rem;
    max-width: min(460px, 100%);
}

.subrating-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.subrating-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.subrating-header label {
    font-weight: 600;
    font-size: 0.9rem;
}

.subrating-value-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.subrating-value {
    color: var(--oro-texto);
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}

.subrating-delete {
    width: 24px;
    height: 24px;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
}

.subrating-delete .icon {
    width: 13px;
    height: 13px;
}

.subrating-delete:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

.subrating-controls {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.subrating-controls input[type="range"] {
    flex: none;
    width: 160px;
}

.subrating-controls input[type="range"]:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.na-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.na-toggle input {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.add-subcategory-form {
    max-width: 420px;
    margin-top: 0.25rem;
}

.comment-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 1rem 0 2rem;
}

.comment-list li {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.85rem 1.1rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.comment-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.delete-form-inline {
    margin: 0;
    flex-shrink: 0;
}

.delete-form-inline .btn-icon {
    background: transparent;
    box-shadow: none;
    color: var(--muted);
}

.delete-form-inline .btn-icon:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

.comment-text {
    color: var(--text);
}

.date {
    color: var(--muted);
    font-size: 0.78rem;
}

/* ---- Ordenar los ítems de una categoría ---- */

.orden-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0 0 1.25rem;
}

.orden-bar label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
}

.orden-bar label .icon {
    width: 15px;
    height: 15px;
}

select {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    padding: 0.6rem 0.8rem;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Fuera de una tarjeta el fondo es --bg, así que se invierte para que resalte. */
.orden-bar select {
    background: var(--surface);
}

select:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.item-card .drag-handle {
    background: var(--btn-icon-bg);
}

/* El tirador solo existe mientras se ve el orden propio. */
.grid-items:not(.orden-manual) .drag-handle {
    display: none;
}

.grid-items.orden-manual .item-card:hover .drag-handle {
    opacity: 1;
}

/* ---- Fecha del ítem ---- */

.field-fecha {
    flex: 1 1 100%;
}

.fecha-hint {
    margin: 0;
    font-size: 0.78rem;
    color: var(--muted);
}

.fecha-inputs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fecha-dia {
    width: 6.5rem;
}

.fecha-mes {
    width: 10.5rem;
}

.fecha-anio {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    padding: 0.6rem 0.9rem;
    font-family: inherit;
    font-size: 0.95rem;
    width: 7rem;
}

.fecha-anio:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.item-fecha-detalle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.92rem;
    margin: 0 0 0.85rem;
}

.item-fecha-detalle .icon {
    width: 16px;
    height: 16px;
}

/* ---- Música: buscador de Spotify ---- */

.buscador-spotify {
    flex: 1 1 100%;
    padding: 1rem 1.1rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}

.buscador-campos {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.buscador-campos input {
    flex: 1 1 200px;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    padding: 0.6rem 0.9rem;
    font-family: inherit;
    font-size: 0.95rem;
}

.buscador-campos input:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.buscador-aviso {
    margin: 0.7rem 0 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.buscador-aviso.error {
    color: var(--danger);
}

.buscador-resultados {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.8rem;
}

.resultado-album {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
}

.resultado-album:hover {
    border-color: var(--primary);
}

.resultado-album img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--track-bg);
}

.resultado-datos {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.resultado-nombre {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resultado-artista {
    font-size: 0.82rem;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portada-elegida {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.8rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.portada-elegida img {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.portada-elegida span {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.portada-elegida small {
    color: var(--muted);
    font-size: 0.8rem;
}

/* ---- Música: la mejor canción del álbum ---- */

.mejor-opcion {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.mejor-opcion input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.mejor-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px dashed var(--border);
    background: transparent;
    /* Apagada hasta que se elige, para que no compita con las estrellas. */
    color: var(--muted);
    opacity: 0.5;
}

.mejor-icono .icon {
    width: 15px;
    height: 15px;
}

.mejor-opcion:hover .mejor-icono {
    opacity: 1;
    border-color: var(--muted);
}

.mejor-opcion input:checked + .mejor-icono {
    opacity: 1;
    border-style: solid;
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-text);
}

.mejor-opcion input:focus-visible + .mejor-icono {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.mejor-ayuda {
    margin: 0 0 0.8rem;
    font-size: 0.82rem;
}

/* En la lista del álbum */
.canciones-vista li.es-mejor {
    /* El primero es el respaldo si el navegador no entiende color-mix. */
    background: var(--track-bg);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.mejor-marca {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-text);
    font-size: 0.73rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.mejor-marca .icon {
    width: 13px;
    height: 13px;
}

/* ---- Música: álbumes calificados canción por canción ---- */

.spotify-enlaces {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0 0 0.85rem;
}

.btn-spotify {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #1DB954;
    color: #0B2A16;
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.btn-spotify:hover {
    background: #1ED760;
}

.btn-spotify .icon {
    width: 16px;
    height: 16px;
}

.spotify-web {
    font-size: 0.82rem;
    color: var(--muted);
}

.spotify-web:hover {
    color: var(--text);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    cursor: pointer;
    white-space: nowrap;
}

.btn-secondary:hover {
    border-color: var(--muted);
}

.btn-secondary .icon {
    width: 15px;
    height: 15px;
}

.con-puntaje-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    margin-bottom: 0.25rem;
}

.con-puntaje-toggle input {
    accent-color: var(--primary);
}

/* El selector: cinco botones tipo pastilla. El radio real queda oculto y la
   pastilla visible es el span que viene justo después. */
.calif-grupo {
    display: inline-flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.calif-opcion {
    position: relative;
    cursor: pointer;
}

.calif-opcion input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.calif-icono,
.calif-vista {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 2.1rem;
    height: 2rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
}

.calif-icono .icon,
.calif-vista .icon {
    width: 14px;
    height: 14px;
}

.calif-opcion:hover .calif-icono {
    border-color: var(--muted);
    color: var(--text);
}

.calif-opcion input:focus-visible + .calif-icono {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Colores al marcar (y en la vista de solo lectura). */
.calif-cruz input:checked + .calif-icono,
.calif-vista.calif-cruz {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: var(--danger);
}

.calif-saltar input:checked + .calif-icono,
.calif-vista.calif-saltar {
    background: var(--track-bg);
    border-color: var(--muted);
    color: var(--text);
}

.calif-estrella-1 input:checked + .calif-icono,
.calif-estrella-2 input:checked + .calif-icono,
.calif-estrella-3 input:checked + .calif-icono,
.calif-vista.calif-estrella-1,
.calif-vista.calif-estrella-2,
.calif-vista.calif-estrella-3 {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
}

.calif-vista.calif-sin {
    font-weight: 700;
}

/* Vista del álbum */
.calif-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
}

.calif-resumen-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.calif-resumen-chip b {
    color: var(--text);
}

.canciones-vista {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.canciones-vista li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.65rem 1.1rem;
    border-bottom: 1px solid var(--border);
}

.canciones-vista li:last-child {
    border-bottom: none;
}

.cancion-num {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 1.8rem;
    text-align: right;
    flex-shrink: 0;
}

.cancion-titulo {
    flex: 1;
    min-width: 0;
}

/* Edición: una fila por canción */
.canciones-editor {
    flex: 1 1 100%;
}

.canciones-lista {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cancion-fila {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.cancion-fila .cancion-nombre {
    flex: 1 1 220px;
    min-width: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    padding: 0.55rem 0.8rem;
    font-family: inherit;
    font-size: 0.95rem;
}

.cancion-fila .cancion-nombre:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.cancion-fila .cancion-quitar {
    background: transparent;
    box-shadow: none;
}

.canciones-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.pegar-lista {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.pegar-lista textarea {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    padding: 0.65rem 0.9rem;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
}

.pegar-lista .btn-secondary {
    align-self: flex-start;
}

.canciones-form {
    margin-bottom: 1rem;
}

.canciones-form .btn-primary {
    margin-top: 1rem;
}

.agregar-cancion-form .field-calif {
    flex: 0 0 auto;
}

/* ====== Menú principal: color propio por categoría ======
   Los iconos, todos de línea fina y del mismo tamaño, se confundían entre sí.
   Aquí el icono pasa a ser una marca de agua grande (la silueta se reconoce
   sola) y el color de cada categoría tiñe la tarjeta entera. */

.grid-categories [data-cat="perfumes"]  { --cat-color: #C2185B; }
.grid-categories [data-cat="juegos"]    { --cat-color: #2E7D32; }
.grid-categories [data-cat="peliculas"] { --cat-color: #DF5209; }
.grid-categories [data-cat="series"]    { --cat-color: #0E7C86; }
.grid-categories [data-cat="animes"]    { --cat-color: #8E44C6; }
.grid-categories [data-cat="libros"]    { --cat-color: #B23A2F; }
.grid-categories [data-cat="musica"]    { --cat-color: #4B4ACF; }
.grid-categories [data-cat="custom-0"]  { --cat-color: #0B63CE; }
.grid-categories [data-cat="custom-1"]  { --cat-color: #8A6A3E; }
.grid-categories [data-cat="custom-2"]  { --cat-color: #00736B; }
.grid-categories [data-cat="custom-3"]  { --cat-color: #6B4FA8; }
.grid-categories [data-cat="custom-4"]  { --cat-color: #7A6A1F; }

/* En noche se usan versiones claras: un color oscuro sobre fondo oscuro no se
   distingue, y atenuarlo como se hacía antes lo empeoraba. */
[data-theme="noche"] .grid-categories [data-cat="perfumes"]  { --cat-color: #FF5C92; }
[data-theme="noche"] .grid-categories [data-cat="juegos"]    { --cat-color: #45C25B; }
[data-theme="noche"] .grid-categories [data-cat="peliculas"] { --cat-color: #FF7A2F; }
[data-theme="noche"] .grid-categories [data-cat="series"]    { --cat-color: #3AC0CE; }
[data-theme="noche"] .grid-categories [data-cat="animes"]    { --cat-color: #C07CF0; }
[data-theme="noche"] .grid-categories [data-cat="libros"]    { --cat-color: #FF6F5E; }
[data-theme="noche"] .grid-categories [data-cat="musica"]    { --cat-color: #8583FF; }
[data-theme="noche"] .grid-categories [data-cat="custom-0"]  { --cat-color: #4EA1FF; }
[data-theme="noche"] .grid-categories [data-cat="custom-1"]  { --cat-color: #C79A5E; }
[data-theme="noche"] .grid-categories [data-cat="custom-2"]  { --cat-color: #36BDB2; }
[data-theme="noche"] .grid-categories [data-cat="custom-3"]  { --cat-color: #A98CF0; }
[data-theme="noche"] .grid-categories [data-cat="custom-4"]  { --cat-color: #C9B23F; }

.grid-categories .category-card {
    background: color-mix(in srgb, var(--cat-color) 16%, var(--surface));
    border-color: color-mix(in srgb, var(--cat-color) 38%, var(--border));
}

/* El icono, grande y detrás del texto. Se recorta contra el borde de la
   tarjeta a propósito (la tarjeta tiene overflow: hidden). */
.grid-categories .category-badge {
    position: absolute;
    right: -0.6rem;
    bottom: -1.1rem;
    width: auto;
    height: auto;
    background: none;
    color: var(--cat-color);
    opacity: 0.22;
    filter: none;
    pointer-events: none;
}

.grid-categories .category-badge .icon {
    width: 118px;
    height: 118px;
    stroke-width: 1.4;
}

/* Las categorías propias no tienen icono: se usa su inicial, igual de grande. */
.grid-categories .monogram {
    font-size: 5.5rem;
    line-height: 1;
}

.grid-categories .category-text {
    position: relative;
    z-index: 1;
}

.grid-categories .name {
    font-family: var(--fuente-titulo);
    font-size: 1.5rem;
    font-weight: 600;
}

.grid-categories .count-number {
    color: var(--cat-color);
}

/* ---- Página de datos y respaldos ---- */

.header-acciones {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.enlace-datos {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.enlace-datos:hover {
    color: var(--text);
    border-color: var(--muted);
}

.mensaje-ok,
.mensaje-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.1rem;
    border-radius: 12px;
    margin: 0 0 1.5rem;
    font-size: 0.92rem;
}

.mensaje-ok {
    background: color-mix(in srgb, var(--accent) 18%, var(--surface));
    border: 1px solid var(--accent);
}

.mensaje-error {
    background: var(--danger-bg);
    border: 1px solid var(--danger);
    color: var(--danger);
}

.hint-cuidado {
    color: var(--text);
}

a.btn-primary {
    text-decoration: none;
}

.lista-copias {
    list-style: none;
    margin: 0.9rem 0 1.5rem;
    padding: 0;
    max-width: 560px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.lista-copias li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.65rem 1.1rem;
    border-bottom: 1px solid var(--border);
}

.lista-copias li:last-child {
    border-bottom: none;
}

.copia-fecha {
    flex: 1;
    font-weight: 600;
    font-size: 0.92rem;
}

.copia-danada {
    color: var(--danger);
    font-size: 0.82rem;
    font-weight: 700;
}

.copia-peso {
    color: var(--muted);
    font-size: 0.85rem;
}

@media (max-width: 600px) {
    .enlace-datos-texto {
        display: none;
    }
}

/* ---- Papelera ---- */

.lista-papelera {
    list-style: none;
    margin: 0.9rem 0 1.5rem;
    padding: 0;
    max-width: 760px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.lista-papelera li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 1.1rem;
    border-bottom: 1px solid var(--border);
}

.lista-papelera li:last-child {
    border-bottom: none;
}

.papelera-foto {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--track-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}

.papelera-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.papelera-datos {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.papelera-datos small {
    color: var(--muted);
    font-size: 0.8rem;
}

/* El botón de vaciar es destructivo de verdad: se ve como tal. */
.btn-primary.danger-primary {
    background: var(--danger);
}

.btn-primary.danger-primary:hover {
    background: var(--danger);
    filter: brightness(1.1);
}

/* ---- Música: artista y enlace por canción ---- */

.item-artista-detalle {
    margin: -0.1rem 0 0.5rem;
    color: var(--muted);
    font-size: 1.02rem;
}

.cancion-spotify-enlace {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    color: #1DB954;
    flex-shrink: 0;
    opacity: 0.75;
}

.cancion-spotify-enlace:hover {
    opacity: 1;
    background: color-mix(in srgb, #1DB954 18%, transparent);
}

.cancion-spotify-enlace .icon {
    width: 16px;
    height: 16px;
}

/* ---- Botón de salir y página de despedida ---- */

.form-salir {
    margin: 0;
}

.boton-salir {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--muted);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.boton-salir:hover {
    color: var(--danger);
    border-color: var(--danger);
}

.despedida {
    max-width: 520px;
    margin: 4rem auto;
    text-align: center;
}

.despedida .page-subtitle {
    margin-bottom: 1rem;
}

@media (max-width: 600px) {
    .salir-texto {
        display: none;
    }
}

/* ---- Pasos para conectar Spotify ---- */

.pasos-spotify {
    max-width: 640px;
    margin: 0 0 1.2rem;
    padding-left: 1.3rem;
    color: var(--muted);
    font-size: 0.92rem;
}

.pasos-spotify li {
    margin-bottom: 0.4rem;
}

.pasos-spotify b {
    color: var(--text);
}

code {
    background: var(--track-bg);
    border-radius: 6px;
    padding: 0.1rem 0.4rem;
    font-size: 0.88em;
}

.field input[type="password"] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    padding: 0.65rem 0.9rem;
    font-family: inherit;
    font-size: 0.95rem;
}

.field input[type="password"]:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---- Pestañas de la categoría: colección y pendientes ---- */

.pestanas {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0 0 1.5rem;
    border-bottom: 1px solid var(--border);
}

.pestana {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    /* Compensa el borde del contenedor para que la activa se una a él. */
    margin-bottom: -1px;
}

.pestana:hover {
    color: var(--text);
}

.pestana.activa {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

.pestana-cuenta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--track-bg);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.pestana.activa .pestana-cuenta {
    background: var(--primary);
    color: var(--sobre-relleno);
}

.count-deseos {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

/* ---- Marcar un pendiente como hecho ---- */

.etiqueta-pendiente {
    display: inline-flex;
    align-items: center;
    margin: 0 0 0.6rem;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    background: var(--track-bg);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 700;
}

.completar-caja {
    margin: 0 0 1.5rem;
}

.completar-caja h2 {
    margin-top: 0;
}

@media (max-width: 720px) {
    header {
        padding: 1rem 1.25rem;
    }

    main {
        padding: 1.75rem 1.25rem 3rem;
    }
}

@media (max-width: 480px) {
    .item-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-card {
        padding: 1.1rem;
    }
}

/* ====== Crear una categoría propia (0.60) ====== */

.form-crear-categoria {
    flex-direction: column;
    align-items: stretch;
    gap: 1.4rem;
}

/* min-width:0 y max-width:100%: sin esto el bloque no se encoge y, en una
   ventana angosta, el banco de iconos empuja la pagina hacia el lado. */
.form-crear-categoria > .field {
    flex: none;
    min-width: 0;
    max-width: 100%;
}

.form-crear-categoria .hint {
    margin: 0;
    max-width: 52ch;
}

.form-crear-categoria > .btn-primary {
    align-self: flex-start;
}

/* --- Banco de iconos --- */

.banco-iconos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 0.5rem;
    max-width: min(640px, 100%);
}

/* display:block a la fuerza: la regla general ".field label" las pone en flex
   con align-items:center, y eso encogía la casilla al tamaño del dibujo. */
.icono-opcion {
    display: block;
    cursor: pointer;
}

/* El radio de verdad sigue ahí (para el teclado y los lectores de pantalla),
   solo que no se dibuja: lo que se ve es la casilla con el dibujo. */
.icono-opcion input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.icono-vista {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--muted);
    transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

/* Gana a ".field label .icon", que deja los dibujos en 15px dentro de una
   etiqueta. Aquí el dibujo ES el contenido, no un adorno al lado del texto. */
.banco-iconos .icono-vista .icon {
    width: 26px;
    height: 26px;
}

.icono-inicial {
    font-family: var(--fuente-titulo);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1;
}

.icono-opcion:hover .icono-vista {
    border-color: var(--muted);
    color: var(--text);
}

.icono-opcion input:checked + .icono-vista {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.icono-opcion input:focus-visible + .icono-vista {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* --- Filas de subcategorías --- */

.subcats-lista {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(440px, 100%);
}

.subcat-fila {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.subcat-fila input {
    flex: 1;
    min-width: 0;
}

.field-subcats > .btn-secondary {
    align-self: flex-start;
    margin-top: 0.2rem;
}

/* --- La nota de una subcategoría nueva, en el mismo formulario --- */

.add-subcategory-form {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    max-width: 440px;
}

.add-subcategory-form .field-nota-nueva {
    gap: 0.5rem;
}

.add-subcategory-form .btn-primary {
    align-self: flex-start;
}

.editar-categoria {
    margin: -0.4rem 0 1.4rem;
}

/* ==========================================================================
   Ficha de un ítem
   ========================================================================== */

/* ---- Anillos de nota ---------------------------------------------------- */

/* En SVG y no con un degradado cónico: es la única forma de redondear las
   puntas del arco (stroke-linecap). El largo sale de --parte (de 0 a 1);
   toda la cuenta está en el CSS, así que el HTML solo pasa ese número. */
.anillo {
    --tamano: 92px;
    --grosor: 10;              /* en unidades del viewBox de 100 */
    --circunferencia: 263.894; /* 2 · π · 42 */
    position: relative;
    width: var(--tamano);
    height: var(--tamano);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

/* ---- Rejilla de subcategorías ------------------------------------------- */

.anillos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 1.6rem 1rem;
    max-width: 660px;
    margin-bottom: 1.4rem;
}

.anillo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
}

/* El nombre tiene que leerse solo: es lo que da sentido al número de arriba. */
.anillo-nombre {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.25;
    max-width: 15ch;
}

/* ---- La foto, con su forma de verdad ------------------------------------ */

/* Antes se recortaba a cuadrado y a los pósters verticales les cortaba el
   título. Ahora se respeta la proporción original: la foto manda el alto. */
.ficha .item-hero {
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: auto;
    display: block;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--track-bg);
}

.ficha .item-hero img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Sin foto no hay proporción que respetar: se deja un cuadrado con el icono. */
.ficha .item-hero:not(:has(img)) {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Reparto de la página ----------------------------------------------- */

/* La foto y la nota se quedan quietas a la izquierda mientras se lee el
   resto. Los álbumes de música van en una sola columna, como ya estaban. */
.ficha {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    column-gap: 2.8rem;
    align-items: start;
}

.ficha[data-vista="musica"] { display: block; }

.ficha .item-header { display: contents; }

.ficha .item-hero {
    position: sticky;
    top: 1.5rem;
    grid-row: span 2;
}

.ficha .item-header-info,
.ficha .ficha-cuerpo { min-width: 0; }

.ficha .item-header-info { margin-bottom: 1.4rem; }

/* En música vuelve a ser una cabecera normal: foto al lado del texto. */
.ficha[data-vista="musica"] .item-header {
    display: flex;
    gap: 2.2rem;
    align-items: flex-start;
    margin-bottom: 1.6rem;
}

.ficha[data-vista="musica"] .item-hero {
    position: static;
    width: 300px;
    flex-shrink: 0;
}

/* ---- Cabecera y bloques -------------------------------------------------- */

.ficha .item-header-info h1 {
    font-size: 2.3rem;
    line-height: 1.12;
    margin-bottom: 0.2rem;
}

.ficha-titulo-texto { min-width: 0; }

.ficha-titulo-fila {
    display: flex;
    align-items: center;
    gap: 1.8rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ficha .review-box { min-height: 0; }
.ficha .review-box .empty { margin: 0; }
.ficha .review-box p { max-width: 78ch; }

.bloque { margin-bottom: 2.6rem; }
.bloque:last-child { margin-bottom: 0; }
.bloque > h2:first-child { margin-top: 0; }

@media (max-width: 900px) {
    .ficha { display: block; }
    .ficha .item-header {
        display: flex;
        gap: 1.6rem;
        flex-wrap: wrap;
        margin-bottom: 1.4rem;
    }
    .ficha .item-hero { position: static; max-width: 260px; }
}

/* ====== Página Info ====== */

.version-caja {
    display: inline-flex;
    align-items: baseline;
    gap: 0.7rem;
    margin: 0.4rem 0 0.5rem;
    padding: 0.7rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.version-etiqueta {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.version-numero {
    font-family: var(--fuente-titulo);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.notas-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 780px;
}

.nota {
    padding: 1.1rem 0 1.2rem;
    border-bottom: 1px solid var(--border);
}

.nota:last-child { border-bottom: none; }

.nota-cabeza {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.nota-version {
    font-family: var(--fuente-titulo);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* La versión que se está usando se marca, para no tener que compararla a ojo. */
.nota-marca {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    /* El azul normal sobre su propio tinte se queda en 4.19:1, por debajo del
       minimo. El tono oscuro del hover llega a 5.49:1 y se lee bien. */
    color: var(--primary-hover);
}

.nota-puntos {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.nota-puntos li {
    color: var(--muted);
    line-height: 1.5;
}

.nota-actual .nota-puntos li { color: var(--text); }

/* ====== Etiquetas ====== */

.etiqueta {
    display: inline-block;
    padding: 0.16rem 0.55rem;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

/* En la miniatura: arriba a la izquierda (a la derecha está el botón de
   borrar), un poco ladeada, como una pegatina puesta a mano. Opaca a
   propósito: encima de una portada cualquiera tiene que leerse igual. */
.etiquetas-esquina {
    position: absolute;
    top: 9px;
    left: 8px;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    pointer-events: none;
    max-width: calc(100% - 52px);
    min-width: 0;
}

.etiquetas-esquina .etiqueta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.etiquetas-esquina .etiqueta {
    transform: rotate(-3.5deg);
    transform-origin: left center;
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.35);
}

.etiquetas-esquina .etiqueta-mas {
    transform: rotate(2deg);
    padding: 0.16rem 0.4rem;
    color: var(--muted);
    pointer-events: auto;
}

/* La miniatura necesita ser el marco de referencia de la esquina. */
.item-card .thumb { position: relative; }

/* En la ficha: todas, derechas y pinchables para filtrar por ellas. */
.etiquetas-ficha {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.2rem 0 0.9rem;
}

.etiqueta-enlace { text-decoration: none; }

.etiqueta-enlace:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ====== Lo último (portada) ====== */

.recientes {
    display: grid;
    /* 4 columnas fijas: "Lo último" trae 8, así que siempre son dos filas
       completas. Con columnas automáticas quedaba una fila de 6 y otra de 2. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 1rem;
}
@media (max-width: 900px) {
    .recientes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.reciente {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    min-width: 0;
    transition: border-color 140ms ease;
}

.reciente:hover { border-color: var(--muted); }

.reciente-foto {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--track-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}

.reciente-foto img { width: 100%; height: 100%; object-fit: cover; }
.reciente-foto .icon { width: 18px; height: 18px; }

.reciente-texto {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.reciente-nombre {
    font-weight: 600;
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reciente-pie {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--muted);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}

.reciente-nota {
    font-weight: 700;
    color: var(--oro-texto);
    font-variant-numeric: tabular-nums;
}

.reciente-pendiente {
    font-weight: 600;
    color: var(--primary-hover);
}

.reciente-cuando { white-space: nowrap; }

/* ==========================================================================
   Tops
   ========================================================================== */

/* ---- Navegación principal ---------------------------------------------- */

/* Grande y a la altura del contenido, no un enlace más en la cabecera: son
   las dos mitades de la app, no un ajuste. */
.nav-principal {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    margin: 0 0 1.8rem;
    border-radius: 14px;
    background: var(--track-bg);
    border: 1px solid var(--border);
}

.nav-seccion {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.62rem 1.4rem;
    border-radius: 11px;
    text-decoration: none;
    color: var(--muted);
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
}

.nav-seccion .icon { width: 18px; height: 18px; }

.nav-seccion:hover { color: var(--text); }

.nav-seccion.activa {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}

/* ---- La lista de tops --------------------------------------------------- */

.grid-tops {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.top-card {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1rem 1.2rem;
    text-decoration: none;
    color: inherit;
}

/* La portada no es un archivo: son las fotos de los tres primeros puestos,
   montadas como un mazo. Si cambias el puesto 1, esto cambia solo. */
.top-portada {
    position: relative;
    width: 86px;
    height: 62px;
    flex-shrink: 0;
}

.top-portada-foto {
    position: absolute;
    top: 0;
    left: calc(var(--capa) * 22px);
    width: 44px;
    height: 62px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--surface);
    background: var(--track-bg);
    box-shadow: 0 2px 6px -3px rgba(0, 0, 0, 0.4);
    /* La primera arriba del todo: es el puesto 1. */
    z-index: calc(3 - var(--capa));
}

.top-portada-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.top-portada-vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 10px;
    background: var(--track-bg);
    color: var(--muted);
}

.top-portada-vacia .icon { width: 26px; height: 26px; }

.top-card-texto {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.top-card-numero {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--oro-texto);
}

.top-card-nombre {
    font-family: var(--fuente-titulo);
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.25;
}

.top-card-estado {
    font-size: 0.78rem;
    color: var(--muted);
}

.form-crear-top { align-items: flex-end; }
.form-crear-top .field-cuantos { flex: 0 0 150px; min-width: 120px; }

/* ---- Un top por dentro ---------------------------------------------------
   Dos columnas en pantalla ancha: el afiche del top (fijo mientras bajas) y
   el ranking. En pantalla angosta, uno debajo del otro. */

.top-pagina {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    margin-top: .8rem;
}
.top-afiche { position: sticky; top: 1rem; min-width: 0; }
.top-ranking { min-width: 0; }

.puestos {
    list-style: none;
    margin: 0 0 .8rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.puesto {
    position: relative;
    padding: 0 3.6rem 0 1.6rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}
.puesto-fila {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 76px;
    padding: .55rem 0;
}
.puesto-numero {
    flex: 0 0 2.4rem;
    text-align: center;
    font-family: var(--fuente-titulo);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.puesto-foto {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--track-bg);
}
.puesto-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.puesto-foto .icon { width: 20px; height: 20px; opacity: .55; }
.puesto-texto { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; }
.puesto-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.puesto-ficha { font-size: .8rem; text-decoration: none; width: fit-content; }
.puesto-ficha:hover { text-decoration: underline; }
.puesto-nota { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* Un puesto vacío: el renglón entero es el botón para llenarlo. */
.puesto-vacio { background: none; border-style: dashed; }
.puesto-llenar {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 56px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.puesto-llenar .icon { width: 16px; height: 16px; }

/* Editar: el botón a la derecha de la fila; el editor debajo, a lo ancho. */
.puesto-editar { margin: 0; }
.puesto-editar > summary {
    position: absolute;
    top: 38px;
    right: .7rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .55rem;
    list-style: none;
    cursor: pointer;
}
.puesto-editar > summary::-webkit-details-marker { display: none; }
.puesto-editar > summary .icon { width: 16px; height: 16px; }
.puesto-editar-texto {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.puesto-editor { padding: .2rem 0 1rem; }
.form-puesto {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1rem 1.25rem;
    align-items: start;
}
.form-puesto .field { margin: 0; min-width: 0; }
.puesto-editor-acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.puesto-editor-quitar { margin-left: auto; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
/* La × de un puesto vacío: a la vista, sin abrir el editor. */
.puesto-quitar-rapido {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    margin-right: 2.1rem;
}
.puesto-quitar-rapido .icon { width: 16px; height: 16px; }

/* El tirador para arrastrar, pegado al borde izquierdo de la fila. */
.puesto .drag-handle {
    position: absolute;
    left: .2rem;
    top: 38px;
    transform: translateY(-50%);
    opacity: 0;
}
.puesto:hover .drag-handle { opacity: 1; }

/* Los resultados del buscador de ítems, dentro de un puesto. */
.buscador-items { position: relative; }
.buscador-items .buscador-resultados { margin-top: .4rem; max-height: 260px; overflow-y: auto; }
.resultado-sin-foto { width: 44px; height: 44px; border-radius: 8px; background: var(--track-bg); flex-shrink: 0; }

/* Agregar un puesto al final, sin pasar por "Editar el top". */
.form-agregar-puesto { margin: 0 0 .6rem; }
.agregar-puesto {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1rem;
    border: 2px dashed var(--border);
    background: none;
    font: inherit;
    cursor: pointer;
}
.agregar-puesto .icon { width: 16px; height: 16px; }

.top-afiche .editar-top { margin-top: 1rem; }
.form-borrar-top { margin-top: .6rem; }

.puestos ~ .drag-hint { margin-top: .4rem; margin-bottom: 1.5rem; }

@media (max-width: 860px) {
    .top-pagina { grid-template-columns: 1fr; gap: 1.2rem; }
    .top-afiche { position: static; }
}
@media (max-width: 560px) {
    .puesto { padding: 0 3rem 0 1.2rem; }
    .puesto-fila { gap: .7rem; min-height: 68px; }
    .puesto-numero { flex-basis: 1.8rem; }
    .puesto-foto { width: 46px; height: 46px; }
    .form-puesto { grid-template-columns: 1fr; }
    .puesto-editor-quitar { margin-left: 0; }
}

/* ====== Crear un top: nombre, cuántos puestos y los puestos ====== */

/* Lo usan crear un top y "Editar el top" (dentro de un top). */
.form-crear-top { flex-direction: column; align-items: stretch; }
.form-crear-top > * { flex: none; }
.form-crear-top > .field { flex: none; min-width: 0; max-width: 100%; }
.form-crear-top > .btn-primary { align-self: flex-start; }

/* Nombre y contador en una fila; en pantalla angosta, uno debajo del otro. */
/* Grilla y no flex con wrap: dentro de una columna flex, una fila con wrap
   reserva alto como si ya estuviera partida en dos (quedaba un hueco). */
.crear-top-cabeza {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1rem 1.25rem;
}
.crear-top-cabeza > .field { margin: 0; min-width: 0; }
@media (max-width: 520px) {
    .crear-top-cabeza { grid-template-columns: 1fr; }
}

.cantidad { display: flex; align-items: stretch; height: 46px; }
.cantidad-boton {
    width: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}
.cantidad-boton .icon { width: 16px; height: 16px; }
.cantidad-boton:disabled { opacity: .35; cursor: default; }
.cantidad-numero {
    min-width: 3.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-block: 1px solid var(--border);
    font-family: var(--fuente-titulo);
    font-size: 1.6rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.cantidad-atajos { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.2rem 0 0; }
.cantidad-atajo {
    padding: .25rem .65rem;
    border: 1px solid var(--border);
    background: none;
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}
.cantidad-atajo.activo { cursor: default; }

/* --- Los puestos, dentro del formulario de crear --- */
.puestos-nuevos {
    list-style: none;
    margin: .5rem 0 .6rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.puesto-nuevo {
    max-width: none;          /* los <li> llevan la medida de lectura; aquí no */
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .4rem .45rem .4rem .7rem;
    border: 1px solid var(--border);
    background: var(--surface);
}
.puesto-nuevo-numero {
    flex: 0 0 1.8rem;
    text-align: center;
    font-family: var(--fuente-titulo);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
/* El recuadro de la foto es el botón para elegirla. */
.puesto-nuevo-foto {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px dashed var(--border);
    background: none;
    cursor: pointer;
    margin: 0;
}
.puesto-nuevo-foto:has(img:not([hidden])) { border-style: solid; }
.puesto-nuevo-foto img { width: 100%; height: 100%; object-fit: cover; }
.puesto-nuevo-foto .icon { width: 18px; height: 18px; }
.puesto-nuevo-imagen {
    position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
}
.puesto-nuevo-campos { flex: 1 1 auto; min-width: 0; }
.puesto-nuevo-campos .puesto-nuevo-nombre { width: 100%; }
.puesto-nuevo-quitar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
}
.puesto-nuevo-quitar .icon { width: 15px; height: 15px; }
.agregar-puesto-nuevo { margin-top: .1rem; }

/* ====== 0.82 ====== */

/* En la wishlist las canciones se escriben pero no se califican: todavía no
   lo has escuchado. Se esconden los controles, no las filas. */
.canciones-editor.sin-calificar .calif-grupo,
.canciones-editor.sin-calificar .mejor-opcion {
    display: none;
}

/* Calificar las canciones al marcar el álbum como escuchado. */
.canciones-completar { flex: 1 1 100%; }

.canciones-calificables li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.canciones-calificables .cancion-titulo { flex: 1; min-width: 140px; }

/* --- Tarjetas de top más grandes y llamativas --- */

.grid-tops {
    grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
    gap: 1.1rem;
}

.top-card {
    gap: 1.4rem;
    padding: 1.4rem 1.5rem;
    align-items: center;
}

.top-portada { width: 138px; height: 104px; }

.top-portada-foto {
    width: 74px;
    height: 104px;
    left: calc(var(--capa) * 32px);
    border-radius: 10px;
    border-width: 3px;
}

.top-portada-vacia { width: 104px; height: 104px; border-radius: 14px; }
.top-portada-vacia .icon { width: 38px; height: 38px; }

.top-card-numero { font-size: 0.86rem; }
.top-card-nombre { font-size: 1.5rem; line-height: 1.18; }
.top-card-estado { font-size: 0.86rem; margin-top: 0.2rem; }

/* Los tres primeros, listados: la tarjeta dice de qué va el top sin entrar. */
.top-card-primeros {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 0.5rem;
    font-size: 0.84rem;
    color: var(--muted);
}

.top-card-primeros span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-card-primeros b {
    color: var(--oro-texto);
    font-variant-numeric: tabular-nums;
    margin-right: 0.35rem;
}

@media (max-width: 560px) {
    .grid-tops { grid-template-columns: 1fr; }
    .top-card { gap: 1rem; padding: 1.1rem; }
    .top-portada { width: 110px; height: 84px; }
    .top-portada-foto { width: 60px; height: 84px; left: calc(var(--capa) * 25px); }
    .top-card-nombre { font-size: 1.25rem; }
}

/* ====== Paneles que se abren encima (0.83) ====== */

.agregar-barra {
    display: flex;
    justify-content: center;
    margin: 2.2rem 0 1rem;
}

.btn-agregar {
    font-size: 1.02rem;
    padding: 0.85rem 1.9rem;
}

/* El <dialog> ocupa toda la pantalla y hace de fondo; la caja de dentro es
   lo que se ve como panel. Así un clic fuera de la caja lo cierra. */
dialog.panel {
    border: none;
    padding: 0;
    background: none;
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    overflow: auto;
    color: var(--text);
}

dialog.panel::backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}

.panel-caja {
    position: relative;
    margin: 3rem auto;
    max-width: 900px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1.8rem 2rem 2rem;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5);
}

.panel-cerrar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

.panel-caja > h2:first-of-type { margin-top: 0; }
.panel-caja .form-card { margin-bottom: 0; }

/* Dentro del panel la tarjeta ya no necesita su propio marco: el panel es
   el marco. Si no, se ven dos cajas una dentro de otra. */
.panel-caja > .form-card,
.panel-caja .completar-caja > .form-card {
    border: none;
    background: none;
    padding: 0;
}

@media (max-width: 720px) {
    .panel-caja { margin: 0; border-radius: 0; min-height: 100%; padding: 1.4rem 1.1rem 2rem; }
}

/* El botón final del panel de agregar, centrado y en su propia línea. El
   formulario es flex con wrap, así que necesita una fila para él solo. */
.guardar-barra {
    flex: 1 1 100%;
    display: flex;
    justify-content: center;
    margin-top: 0.6rem;
}

.btn-guardar {
    font-size: 1.02rem;
    padding: 0.85rem 2.1rem;
}

/* ===========================================================================
   AYUDA: la guía de uso
   Va en esta hoja y no en mundo.css porque es igual en las dos estéticas;
   los colores salen de los tokens, así que cada una la viste a su manera.
   =========================================================================== */

/* El botón de la cabecera es un <button> con la cara de los enlaces de al
   lado (Datos, Info). Sin esto se vería con el gris de botón del navegador. */
.boton-ayuda {
    background: none;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}

.panel-ayuda .panel-caja { max-width: 720px; }

.ayuda-intro {
    color: var(--muted);
    margin: 0.4rem 0 0;
    max-width: 62ch;
}

.ayuda {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 1.2rem;
}

.ayuda-seccion {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.ayuda-seccion > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.ayuda-seccion > summary::-webkit-details-marker { display: none; }

/* La flecha que indica si está abierta: dibujada con dos bordes, no con un
   carácter, para que tenga el mismo trazo en cualquier fuente. */
.ayuda-seccion > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.18s ease-out;
    opacity: 0.6;
}
.ayuda-seccion[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.ayuda-seccion > summary:hover { color: var(--primary); }

.ayuda-seccion > p,
.ayuda-seccion > ul,
.ayuda-seccion > ol {
    margin: 0 1.1rem 0.9rem;
    line-height: 1.6;
    max-width: 64ch;
}
.ayuda-seccion > ul,
.ayuda-seccion > ol { padding-left: 1.3rem; }
.ayuda-seccion li + li { margin-top: 0.45rem; }
.ayuda-seccion > summary + * { margin-top: 0.1rem; }

.ayuda-cuidado {
    background: var(--danger-bg);
    border-radius: var(--radius);
    padding: 0.6rem 0.8rem;
}

.ayuda kbd {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--bg);
    font-family: inherit;
    font-size: 0.85em;
    line-height: 1.3;
}

/* La cabecera puede partirse en dos pisos si sus botones no caben. Solo se
   permite el salto de línea; si caben, se ven exactamente igual que antes.
   Sin esto, al sumar Ayuda la fila podía empujar la página hacia el lado
   en pantallas medianas. */
header { flex-wrap: wrap; row-gap: 0.6rem; }
header .header-acciones { flex-wrap: wrap; min-width: 0; max-width: 100%; }

/* Cambiar la foto desde la ficha: la de ahora en chico, y al lado el control.
   Va en esta hoja porque es igual en las dos estéticas. */
/* El formulario de editar reparte los campos en filas flexibles; la foto va
   en una fila propia; si no, se ponía al lado del nombre, apretada, con el
   botón de elegir archivo cortado. */
.form-edit .field-foto-editar { flex: 1 1 100%; }

.foto-editar {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    min-width: 0;
}
.foto-editar-vista {
    width: 76px;
    height: auto;
    max-height: 110px;
    object-fit: contain;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--track-bg);
}
/* Cuando ya hay una foto nueva esperando, que se note que no es la de antes. */
.foto-cambiada .foto-editar-vista {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.foto-editar-controles {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    flex: 1 1 auto;
}
.foto-editar-controles input[type=file] { max-width: 100%; }

/* ===========================================================================
   COMPARTIR una categoría como imagen (static/compartir.js)
   Igual en las dos estéticas: el cartel ya sale con los colores de cada una.
   =========================================================================== */

/* El botón va al final de la fila del título, a la derecha. */
.category-title .btn-compartir {
    margin-left: auto;
    flex: 0 0 auto;
}
/* Si no cabe todo en una fila (pantallas angostas, o un nombre largo), el
   botón baja a la siguiente en vez de empujar la página hacia el lado: a
   320px se salía 22px. */
.category-title { flex-wrap: wrap; row-gap: 0.6rem; }
.category-title h1 { min-width: 0; overflow-wrap: anywhere; }

.panel-compartir .panel-caja { max-width: 760px; }

/* La vista previa: el cartel entero, encogido, con su propio scroll si es
   muy largo, para que los botones queden siempre a la vista. */
.compartir-vista {
    margin: 1rem 0;
    max-height: 60vh;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--track-bg);
    min-height: 140px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.compartir-vista img {
    display: block;
    width: 100%;
    height: auto;
}
.compartir-estado {
    margin: auto;
    padding: 2rem 1rem;
    color: var(--muted);
}

.compartir-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}
.compartir-aviso { text-align: center; margin-top: 0.8rem; }

/* --- Fechas: el tipo al crear una categoría, y los dos campos del rango --- */
.field-tipo-fecha {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.field-tipo-fecha legend {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
    padding: 0;
}
.tipo-fecha-opcion {
    display: flex !important;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    margin-top: 0.45rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 0.92rem !important;
    color: var(--text) !important;
}
.tipo-fecha-opcion input { margin-top: 0.2rem; flex: 0 0 auto; }
.tipo-fecha-opcion span { display: flex; flex-direction: column; gap: 0.15rem; }
.tipo-fecha-opcion small { color: var(--muted); font-size: 0.82rem; }
.tipo-fecha-opcion:has(input:checked) { border-color: var(--primary); }

/* El par Empecé / Terminé, lado a lado si caben. */
.fechas-rango {
    flex: 1 1 100%;
    min-width: 0;
}
.fechas-rango-ayuda { margin: 0 0 0.4rem; }
.fechas-rango-par {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.2rem;
}
.fechas-rango-par .field-fecha {
    flex: 1 1 260px;
    min-width: 0;
}

/* ===========================================================================
   TAMAÑO DE LAS TARJETAS de una categoría (static/tamano.js)
   Grande es el de siempre y no lleva clase. Al achicar no solo caben más
   columnas: también bajan las letras, la nota y la barra, para que una
   tarjeta chica siga viéndose como una tarjeta y no como una grande mal
   encogida. En Mini se esconde la fecha, que a ese tamaño ya no se lee.
   Las reglas van con .grid-items.tam-X para ganarle a las de cada estética
   sin depender del orden de las hojas.
   =========================================================================== */

.agregar-barra-arriba { margin: 0.2rem 0 1.3rem; }

/* El selector */
.tamanos {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.tamanos-titulo {
    font-size: 0.85rem;
    color: var(--muted);
    margin-right: 0.25rem;
}
.tamano {
    font: inherit;
    font-size: 0.82rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
}
.tamano:hover { color: var(--text); }
.tamano[aria-pressed="true"] {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--sobre-relleno);
}

/* Columnas */
.grid-items.tam-mediano { grid-template-columns: repeat(auto-fill, minmax(min(165px, 100%), 1fr)); gap: 1.4rem 1rem; }
.grid-items.tam-chico   { grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr)); gap: 1.1rem 0.8rem; }
.grid-items.tam-mini    { grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr)); gap: 0.9rem 0.6rem; }

/* --- Marquesina: el talón --- */
.grid-items.tam-mediano .talon { padding: 0.7rem 0.6rem 0.65rem; }
.grid-items.tam-mediano .talon-nombre { font-size: 1.12rem; }
.grid-items.tam-mediano .talon-serial { font-size: 2.1rem; }

.grid-items.tam-chico .talon { padding: 0.65rem 0.5rem 0.55rem; }
.grid-items.tam-chico .talon-nombre { font-size: 0.98rem; }
.grid-items.tam-chico .talon-serial { font-size: 1.7rem; }
.grid-items.tam-chico .talon-pie { font-size: 0.68rem; letter-spacing: 0.04em; }
.grid-items.tam-chico .escala { margin-top: 0.45rem; }
.grid-items.tam-chico .escala-tira { --alto: 9px; }

.grid-items.tam-mini .talon { padding: 0.6rem 0.45rem 0.5rem; }
.grid-items.tam-mini .talon-nombre {
    font-size: 0.82rem;
    /* Dos líneas como mucho: un título largo no puede estirar la fila. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.grid-items.tam-mini .talon-linea { margin-top: 0.3rem; padding-top: 0.3rem; }
.grid-items.tam-mini .talon-pie { display: none; }
.grid-items.tam-mini .talon-serial { font-size: 1.3rem; }
.grid-items.tam-mini .talon-serial small { font-size: 0.6rem; }
.grid-items.tam-mini .escala { margin-top: 0.35rem; }
.grid-items.tam-mini .escala-tira { --alto: 7px; }

/* Lo que va encima de la foto: la pegatina de etiqueta y el botón de borrar */
.grid-items.tam-chico .etiqueta,
.grid-items.tam-mini .etiqueta { font-size: 0.62rem; padding: 0.1rem 0.35rem; }
.grid-items.tam-mini .delete-form { transform: scale(0.78); transform-origin: top right; }

/* En el buscador de Series, Animes, Juegos y Libros las miniaturas son
   pósters y portadas de libro: verticales, no cuadradas como un álbum. */
.buscador-portada .resultado-album img,
.buscador-portada .resultado-album .resultado-sin-foto {
    width: 40px;
    height: 58px;
    object-fit: cover;
    flex: 0 0 auto;
}
.buscador-portada .portada-elegida img {
    width: 48px;
    height: 70px;
    object-fit: cover;
}

/* --- Ambiente de la ficha ----------------------------------------------------
   Un velo con el color promedio de la foto cubre toda la página (lo que la
   envuelve, y lo que la oscurece si la portada es oscura), y encima van
   manchas grandes y difusas: cada esquina de la pantalla lleva el color
   protagonista de esa misma esquina de la foto. Los colores llegan ya
   ajustados a cada tema (ver imagenes.paleta). Va fija detrás de todo
   (incluso del header y de la fibra del papel): al hacer scroll el ambiente se
   queda y la ficha se mueve. */
.ambiente {
    --amb-velo: 0.30;
    --amb-fuerza: 0.50;
    --v: var(--amb-velo-dia);
    --c1: var(--amb-1-dia); --c2: var(--amb-2-dia);
    --c3: var(--amb-3-dia); --c4: var(--amb-4-dia);
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 75% at var(--amb-1-x) var(--amb-1-y),
            rgb(var(--c1) / var(--amb-fuerza)), transparent 75%),
        radial-gradient(ellipse 80% 75% at var(--amb-2-x) var(--amb-2-y),
            rgb(var(--c2) / var(--amb-fuerza)), transparent 75%),
        radial-gradient(ellipse 80% 75% at var(--amb-3-x) var(--amb-3-y),
            rgb(var(--c3) / var(--amb-fuerza)), transparent 75%),
        radial-gradient(ellipse 80% 75% at var(--amb-4-x) var(--amb-4-y),
            rgb(var(--c4) / var(--amb-fuerza)), transparent 75%),
        rgb(var(--v) / var(--amb-velo));
    animation: ambiente-entra 0.6s ease-out;
}
:root[data-theme="noche"] .ambiente {
    --amb-velo: 0.55;
    --amb-fuerza: 0.55;
    --v: var(--amb-velo-noche);
    --c1: var(--amb-1-noche); --c2: var(--amb-2-noche);
    --c3: var(--amb-3-noche); --c4: var(--amb-4-noche);
}
/* Con el fondo teñido, la tinta de la ficha gana un paso de contraste: el
   texto secundario, los enlaces y los puntajes que van directo sobre el
   fondo se siguen leyendo aunque la portada lo oscurezca o lo encienda. */
:root:not([data-theme="noche"]) body:has(> .ambiente) main {
    --tinta-2: #3B3022; --verde: #11463C; --rojo: #9A1F13;
    /* Los alias del clásico se resuelven en :root: hay que volver a atarlos. */
    --muted: var(--tinta-2); --primary: var(--verde); --danger: var(--rojo);
}
:root[data-theme="noche"] body:has(> .ambiente) main {
    --tinta-2: #D2D9C9; --verde: #D3E3C4; --rojo: #FF9C86;
    /* Los alias del clásico se resuelven en :root: hay que volver a atarlos. */
    --muted: var(--tinta-2); --primary: var(--verde); --danger: var(--rojo);
}
@keyframes ambiente-entra { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ambiente { animation: none; } }

/* Los dos juegos de iconos (trazo fino en el clásico, macizos en la
   marquesina) van juntos en el HTML; su envoltorio no debe contar en el
   diseño. La regla que oculta el de la otra estética pesa más que esta. */

/* ===========================================================================
   MOVIMIENTO (prueba): transiciones entre páginas
   Vale para las dos estéticas. Al ir de una página a otra el navegador funde
   una en la otra, y la portada de un ítem viaja de la miniatura a la ficha
   (y de vuelta), porque las dos llevan el mismo view-transition-name.
   =========================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .22s; }
::view-transition-group(*) { animation-duration: .38s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ===========================================================================
   ARRASTRAR PARA ORDENAR (ver static/arrastrar.js)
   La tarjeta se levanta y sigue al puntero; en su sitio queda un hueco; las
   demás se deslizan; al soltar vuela a su hueco y se asienta.
   =========================================================================== */

/* Mientras se arrastra: nada se selecciona y el cursor es una mano cerrada. */
html.arrastrando-algo,
html.arrastrando-algo * { cursor: grabbing !important; user-select: none !important; }

/* Con mouse se agarra la tarjeta entera; el tirador queda como pista. */
.grid-categories .category-card,
.grid-items.orden-manual .item-card,
.puestos .puesto { touch-action: pan-y; }
.drag-handle { touch-action: none; }

/* El hueco: la tarjeta de verdad, vaciada y punteada. */
.hueco-arrastre {
    background: color-mix(in srgb, var(--primary) 7%, transparent) !important;
    background-image: none !important;
    border: 2px dashed color-mix(in srgb, var(--primary) 70%, transparent) !important;
    box-shadow: none !important;
    animation: none !important;
}
.hueco-arrastre > *,
.hueco-arrastre::before { visibility: hidden; }

/* El envoltorio de la copia: fijo, sin nada del contenedor que lo imita
   (rejilla, rieles, márgenes). Solo está para que los estilos encajen. */
.fantasma-envoltorio {
    position: fixed !important;
    z-index: 1000;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    pointer-events: none;
    list-style: none;
}
.fantasma-envoltorio.aterrizando {
    transition: translate 240ms cubic-bezier(.22, 1, .36, 1);
}
.fantasma-arrastre {
    margin: 0 !important;
    animation: none !important;
    transition: scale .16s ease-out, rotate .16s ease-out, box-shadow .16s ease-out;
}
/* Levantada: un poco más grande, ladeada, con la sombra de algo que flota. */
.fantasma-arrastre.levantado {
    scale: 1.05;
    rotate: -2deg;
    box-shadow: 0 18px 30px -12px rgb(0 0 0 / .45), 0 4px 10px -4px rgb(0 0 0 / .3) !important;
}
.puestos .fantasma-arrastre.levantado { rotate: -1deg; scale: 1.02; }

/* Mientras se ordena, el hover no levanta las tarjetas: se mueven por el
   desliz, no porque el puntero pase por encima. */
.grid-categories.ordenando .category-card:hover,
.grid-items.ordenando .item-card:hover,
.grid-tops.ordenando .top-card:hover { transform: none; }
.ordenando .drag-handle { opacity: 0 !important; }

/* Al soltar: se asienta con un rebote corto. */
@keyframes asentarse {
    0%   { scale: 1.03; }
    55%  { scale: .985; }
    100% { scale: 1; }
}
.recien-soltado { animation: asentarse .32s cubic-bezier(.22, 1, .36, 1); }

@media (prefers-reduced-motion: reduce) {
    .fantasma-arrastre.levantado { rotate: 0deg; scale: 1; }
    .recien-soltado { animation: none; }
}