/* Área 6 de DATALOGIC: búsqueda global (dlb-), recetario (rc-), bestiario (bs-), novedades (nv-), buscar (bx-),
   sugerencias (sg-), galería (gl-), agenda (ag-), Mi DATALOGIC (mi-) y comparador (cp-).
   Usa las variables y piezas del tema (mc-tooltip, mc-ranura, mc-panel). Se carga en todas las páginas públicas. */

/* ---------- Búsqueda global (Ctrl+K) ---------- */
.dlb-boton {
    display: inline-flex; align-items: center; gap: .45rem; margin: .35rem .5rem; padding: .3rem .6rem;
    background: rgba(0, 0, 0, .55); color: #c8c8c8; border: 2px solid #000; box-shadow: inset 0 0 0 1px #555;
    font-family: var(--mc-pixel, monospace); font-size-adjust: .5; cursor: pointer;
}
.dlb-boton:hover, .dlb-boton:focus-visible { color: var(--mc-amarillo, #ff5); box-shadow: inset 0 0 0 1px #aaa; }
.dlb-boton kbd { font-size: .7rem; padding: .05rem .3rem; background: #2a2a2a; color: #aaa; border: 1px solid #555; }
.dlb-boton.flotante { position: fixed; right: 16px; bottom: 16px; z-index: 1040; }
@media (max-width: 1199.98px) { .dlb-boton kbd { display: none; } }
html.dlb-abierto { overflow: hidden; }
.dlb-fondo { position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .6); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.dlb-fondo[hidden] { display: none; }
.dlb-caja {
    width: min(680px, 100%); max-height: 78vh; display: flex; flex-direction: column;
    background: var(--mc-tooltip, rgba(16, 0, 16, .96)); border: 2px solid #2a0a5e; outline: 2px solid rgba(16, 0, 16, .94);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.dlb-campo {
    width: 100%; padding: .9rem 1rem; font-size: 1.15rem; color: #fff; background: rgba(0, 0, 0, .5);
    border: 0; border-bottom: 2px solid #3a1a6e; outline: none; font-family: var(--mc-pixel, monospace); font-size-adjust: .5;
}
.dlb-campo::placeholder { color: #888; }
.dlb-estado { margin: .4rem 1rem 0; color: #888; font-size: .85rem; }
.dlb-lista { overflow-y: auto; padding: .25rem .5rem .5rem; flex: 1 1 auto; }
.dlb-grupo { margin: .7rem .5rem .25rem; color: var(--mc-oro, #fa0); font-family: var(--mc-pixel, monospace); font-size-adjust: .5; font-size: .95rem; }
.dlb-item { display: flex; align-items: center; gap: .65rem; padding: .4rem .5rem; color: #ddd; text-decoration: none; border: 2px solid transparent; }
.dlb-item.activo, .dlb-item:focus-visible { background: rgba(80, 0, 255, .25); border-color: #6b74c9; color: #fff; }
.dlb-icono { width: 32px; height: 32px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: #8b8b8b; border: 2px solid; border-color: #373737 #fff #fff #373737; }
.dlb-icono img { width: 24px; height: 24px; image-rendering: pixelated; }
.dlb-icono i { color: #222; font-size: 1rem; }
.dlb-texto { display: flex; flex-direction: column; min-width: 0; }
.dlb-texto b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlb-texto small { color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlb-pie { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin: 0; padding: .5rem 1rem; border-top: 2px solid #3a1a6e; color: #888; font-size: .8rem; }
.dlb-pie kbd { font-size: .7rem; padding: .05rem .3rem; margin-right: .15rem; background: #2a2a2a; color: #bbb; border: 1px solid #555; }
.dlb-todo { color: #a8a8ff; }

/* ---------- Comunes ---------- */
.dl-flotante { position: fixed; z-index: 2100; pointer-events: none; max-width: 340px; font-size: .95rem; line-height: 1.35; }
.bs-chip {
    display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; color: #ddd; text-decoration: none;
    background: rgba(0, 0, 0, .5); border: 2px solid #000; box-shadow: inset 0 0 0 1px #444;
}
.bs-chip img, .nv-cat img, .dl-vivo-titulo img { image-rendering: pixelated; width: 16px; height: 16px; object-fit: cover; object-position: top; }
.dl-vivo-titulo img { width: 24px; height: 24px; }
.bs-chip > span:not([class]) { color: #888; font-size: .85em; }
.bs-chip:hover, .bs-chip:focus-visible { color: var(--mc-amarillo, #ff5); }
.bs-chip.activa { background: rgba(80, 0, 255, .25); box-shadow: inset 0 0 0 1px #6b74c9; color: #fff; }
.bs-gris { color: #8a8a8a; }
.nv-filtros { display: flex; flex-wrap: wrap; gap: .4rem; }
.rc-reserva { font-family: var(--mc-pixel, monospace); color: #fff; font-size: .8rem; text-shadow: 1px 1px 0 #000; background: #8a2be2; width: 70%; height: 70%; display: flex; align-items: center; justify-content: center; }
.mc-ranura { position: relative; }
.rc .mc-ranura .mc-cantidad, .mi-inventario .mc-ranura .mc-cantidad { position: absolute; right: 2px; bottom: -3px; color: #fff; font-family: var(--mc-pixel, monospace); font-size: 1.15rem; line-height: 1.1; text-shadow: 2px 2px 0 #3f3f3f; pointer-events: none; }
.rc-tt-id { color: #555; font-size: .8rem; }

/* ---------- Recetario ---------- */
.rc { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 991.98px) { .rc { grid-template-columns: minmax(0, 1fr); } }
.rc-lateral, .rc-lateral > * { min-width: 0; }
.rc-lateral { display: flex; flex-direction: column; gap: .55rem; position: sticky; top: calc(var(--dl-nav-h, 64px) + 12px); max-height: calc(100vh - var(--dl-nav-h, 64px) - 24px); }
@media (max-width: 991.98px) { .rc-lateral { position: static; max-height: 60vh; } }
.rc-cuenta { margin: 0; color: #888; font-size: .85rem; }
.rc-lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; min-height: 120px; }
.rc-objeto { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .2rem .3rem; text-align: left; color: #ddd; background: none; border: 2px solid transparent; }
.rc-objeto:hover, .rc-objeto:focus-visible { background: rgba(255, 255, 255, .06); color: #fff; }
.rc-objeto.activo { border-color: #6b74c9; background: rgba(80, 0, 255, .2); color: #fff; }
.rc-objeto-nombre { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-objeto small { color: #777; font-size: .75rem; }
.rc-detalle { min-width: 0; }
.rc-bienvenida ul { margin: .5rem 0 0; padding-left: 1.2rem; color: #c8c8c8; }
.rc-bienvenida li { margin-bottom: .35rem; }
.rc-cab { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.rc-cab h2 { margin: 0; font-size: clamp(1.2rem, 4vw, 1.6rem); overflow-wrap: anywhere; }
.rc-cab > div { min-width: 0; }
.rc-cab code { color: #888; font-size: .8rem; }
.rc-precio { margin: .25rem 0 0; color: var(--mc-oro, #fa0); }
.rc-pestanas { display: flex; gap: .3rem; margin-bottom: .75rem; flex-wrap: wrap; }
.rc-pestana { padding: .4rem .8rem; color: #ccc; background: rgba(0, 0, 0, .5); border: 2px solid #000; box-shadow: inset 0 0 0 1px #444; font-family: var(--mc-pixel, monospace); font-size-adjust: .5; }
.rc-pestana.activa { color: #fff; background: #3c8527; box-shadow: inset 0 0 0 1px #6c6; }
.rc-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: .9rem; }
.rc-receta { padding: .6rem .75rem .8rem; }
.rc-receta-cab { display: flex; align-items: center; gap: .4rem; color: #404040; font-weight: 600; margin-bottom: .55rem; font-size: .92rem; }
.rc-receta-cab img { image-rendering: pixelated; }
.rc-mod { margin-left: auto; color: #555; font-weight: 400; font-size: .75rem; }
.rc-receta-cuerpo { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rc-rejilla { display: grid; grid-template-columns: repeat(3, 44px); gap: 0; }
.rc-casilla { padding: 0; cursor: pointer; }
.rc-casilla.vacia { cursor: default; }
.rc-casilla:not(.vacia):hover, .rc-casilla:not(.vacia):focus-visible { background: #c5c5c5; outline: none; }
.rc-casilla.rc-varios::after { content: ""; position: absolute; left: 2px; top: 2px; width: 5px; height: 5px; background: #55f; box-shadow: 0 0 0 1px #000; }
.rc-flecha { display: inline-flex; flex-direction: column; align-items: center; color: #6f6f6f; font-size: 1.7rem; line-height: 1; padding: 0 .2rem; }
.rc-flecha small { font-size: .7rem; color: #555; margin-top: .2rem; white-space: nowrap; }
.rc-horno, .rc-alambique { display: inline-flex; flex-direction: column; align-items: center; gap: .1rem; }
.rc-fuego, .rc-gota { font-size: .95rem; line-height: 1; color: #7a3; }
.mc-ranura.grande.rc-resultado { width: 60px; height: 60px; }

/* ---------- Bestiario ---------- */
.bs-barra { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.5rem; }
.bs-barra input { max-width: 420px; }
.bs-indice { display: flex; flex-wrap: wrap; gap: .4rem; }
.bs-grupo { margin-bottom: 2rem; scroll-margin-top: calc(var(--dl-nav-h, 64px) + 12px); }
.bs-ayuda { color: #c8c8c8; margin-top: -.5rem; }
.bs-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.bs-carta { display: flex; flex-direction: column; gap: .5rem; scroll-margin-top: calc(var(--dl-nav-h, 64px) + 12px); }
.bs-carta:target { box-shadow: 0 0 0 3px var(--mc-amarillo, #ff5); }
.bs-cab { display: flex; align-items: center; gap: .6rem; }
.bs-cab h3 { font-size: 1.15rem; margin: 0; }
.bs-base { color: #888; }
.bs-desc { margin: 0; color: #cfcfcf; font-size: .93rem; }
.bs-cita { margin: 0; padding-left: .6rem; border-left: 3px solid #5a2; color: #b8e0a0; font-style: italic; font-size: .9rem; }
.bs-etiquetas { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; }
.bs-etiquetas span { padding: .05rem .4rem; background: #2c1b47; color: #d6c4ff; font-size: .78rem; border: 1px solid #000; }
.bs-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .25rem .6rem; margin: 0; }
.bs-datos div { display: flex; flex-direction: column; }
.bs-datos dt { color: #888; font-weight: 400; font-size: .75rem; }
.bs-datos dd { margin: 0; color: #fff; font-family: var(--mc-pixel, monospace); font-size-adjust: .5; }
.bs-botin summary { cursor: pointer; color: var(--mc-oro, #fa0); }
.bs-botin ul { list-style: none; padding: 0; margin: .4rem 0 0; display: flex; flex-direction: column; gap: .25rem; }
.bs-botin li { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }

/* ---------- Novedades ---------- */
.nv-barra { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; margin-bottom: 1.5rem; }
.nv-buscar { max-width: 340px; }
.nv-dia { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 767.98px) { .nv-dia { grid-template-columns: 1fr; gap: .4rem; } }
.nv-fecha { display: flex; align-items: center; gap: .6rem; font-size: 1rem; color: #fff; margin: 0; align-self: start; position: sticky; top: calc(var(--dl-nav-h, 64px) + 12px); }
@media (max-width: 767.98px) { .nv-fecha { position: static; } }
.nv-fecha small { display: block; color: #888; font-size: .78rem; font-weight: 400; }
.nv-dia-num { font-family: var(--mc-titulo, monospace); font-size: 1.6rem; color: var(--mc-amarillo, #ff5); text-shadow: 3px 3px 0 #3f3f15; }
.nv-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.nv-entrada { scroll-margin-top: calc(var(--dl-nav-h, 64px) + 12px); }
.nv-entrada:target { box-shadow: 0 0 0 3px var(--mc-amarillo, #ff5); }
.nv-cat { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--mc-pixel, monospace); font-size-adjust: .5; font-size: .85rem; margin-bottom: .3rem; }
.nv-cat img { image-rendering: pixelated; }
.nv-texto { color: #d0d0d0; font-size: .93rem; overflow-wrap: anywhere; }
.nv-texto code { font-size: .85em; }
.nv-entrada summary { cursor: pointer; color: #eee; }
.nv-entrada details[open] summary { margin-bottom: .4rem; color: #fff; }
.nv-nuevo { border-left: 4px solid #55ff55; }

/* ---------- Buscar ---------- */
.bx-form { max-width: 640px; margin: 0 auto 2rem; }
.bx-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .3rem .8rem; }
.bx-item { display: flex; align-items: center; gap: .6rem; padding: .3rem; color: #ddd; text-decoration: none; }
.bx-item:hover, .bx-item:focus-visible { background: rgba(80, 0, 255, .2); color: #fff; }
.bx-item span:last-child { display: flex; flex-direction: column; min-width: 0; }
.bx-item small { color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-item .mc-ranura i { color: #222; }

/* ---------- Sugerencias ---------- */
.sg-filtros { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; margin-bottom: 1rem; }
.sg-orden { display: flex; gap: .4rem; }
.sg-item { display: flex; gap: .9rem; margin-bottom: .8rem; }
.sg-voto { flex: 0 0 auto; }
.sg-votar {
    display: flex; flex-direction: column; align-items: center; width: 56px; padding: .35rem 0; color: #ccc;
    background: rgba(0, 0, 0, .5); border: 2px solid #000; box-shadow: inset 0 0 0 1px #555; font-family: var(--mc-pixel, monospace);
}
.sg-votar i { font-size: 1.2rem; line-height: 1; }
.sg-votar:hover:not(:disabled), .sg-votar:focus-visible { color: var(--mc-amarillo, #ff5); }
.sg-votar.votada { color: #55ff55; box-shadow: inset 0 0 0 1px #3c8527; background: rgba(60, 133, 39, .25); }
.sg-votar:disabled { opacity: .5; }
.sg-votos { font-size: 1.1rem; }
.sg-cuerpo { min-width: 0; flex: 1 1 auto; }
.sg-titulo { font-size: 1.15rem; margin: 0 0 .2rem; }
.sg-titulo a { color: #fff; }
.sg-meta { display: flex; flex-wrap: wrap; gap: .2rem .8rem; color: #888; font-size: .82rem; margin-bottom: .35rem; }
.sg-texto { color: #cfcfcf; overflow-wrap: anywhere; }
.sg-respuesta { margin-top: .6rem; padding: .5rem .7rem; background: rgba(60, 133, 39, .15); border-left: 3px solid #3c8527; color: #d8f0d0; font-size: .92rem; }
.sg-rechazada .sg-respuesta { background: rgba(170, 0, 0, .15); border-color: #a00; color: #f0d0d0; }
.sg-hecha { box-shadow: inset 4px 0 0 #55ff55; }
.sg-nueva { position: sticky; top: calc(var(--dl-nav-h, 64px) + 12px); }

/* ---------- Galería ---------- */
.gl-barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.gl-vista { display: block; max-width: 100%; max-height: 200px; margin-top: .5rem; border: 2px solid #000; }
.gl-mias ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.gl-mias li { display: flex; align-items: center; gap: .6rem; }
.gl-mias li span { flex: 1 1 auto; display: flex; flex-direction: column; color: #ddd; }
.gl-mias img { border: 2px solid #000; }
.gl-rejilla { columns: 3 300px; column-gap: 1rem; }
.gl-carta { break-inside: avoid; margin: 0 0 1rem; background: rgba(0, 0, 0, .55); border: 2px solid #000; box-shadow: inset 0 0 0 1px #444; }
.gl-carta.destacada { box-shadow: inset 0 0 0 2px var(--mc-oro, #fa0); }
.gl-abrir { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gl-abrir img { display: block; width: 100%; height: auto; }
.gl-carta figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; padding: .5rem .6rem; }
.gl-carta figcaption b { flex: 1 1 100%; color: #fff; font-weight: 600; }
.gl-autor { color: #999; font-size: .82rem; flex: 1 1 auto; }
.gl-autor img { image-rendering: pixelated; vertical-align: -3px; }
.gl-gusta { background: none; border: 0; color: #999; padding: .1rem .3rem; }
.gl-gusta:hover, .gl-gusta:focus-visible { color: #ff7777; }
.gl-gusta.activa { color: #ff5555; }
.gl-visor { max-width: min(96vw, 1600px); max-height: 94vh; padding: 0; background: #0d0d0d; border: 2px solid #000; color: #ddd; }
.gl-visor::backdrop { background: rgba(0, 0, 0, .85); }
.gl-visor img { display: block; max-width: 100%; max-height: 82vh; margin: 0 auto; }
.gl-visor-texto { padding: .6rem .9rem; display: flex; flex-wrap: wrap; gap: .2rem .8rem; }
.gl-visor-texto b { color: #fff; }
.gl-visor-texto span { color: #999; }
.gl-visor-texto p { flex: 1 1 100%; margin: 0; }
.gl-cerrar { position: absolute; top: .3rem; right: .5rem; font-size: 1.8rem; line-height: 1; color: #fff; background: rgba(0, 0, 0, .6); border: 0; padding: 0 .5rem; }

/* ---------- Agenda ---------- */
.ag-evento { display: flex; gap: 1.1rem; margin-bottom: 1rem; scroll-margin-top: calc(var(--dl-nav-h, 64px) + 12px); }
.ag-evento.en-curso { box-shadow: 0 0 0 3px #55ff55; }
.ag-evento:target { box-shadow: 0 0 0 3px var(--mc-amarillo, #ff5); }
.ag-fecha { flex: 0 0 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .4rem; background: var(--mc-gris-panel, #c6c6c6); color: #303030; border: 2px solid #000; align-self: flex-start; }
.ag-fecha span { text-transform: uppercase; font-size: .8rem; font-weight: 700; color: #a00; }
.ag-fecha b { font-family: var(--mc-titulo, monospace); font-size: 1.6rem; line-height: 1.2; }
.ag-fecha small { font-size: .85rem; }
.ag-cuerpo { min-width: 0; flex: 1 1 auto; }
.ag-cuerpo h2 { font-size: 1.3rem; display: flex; align-items: center; gap: .4rem; margin: 0 0 .3rem; }
.ag-meta { display: flex; flex-wrap: wrap; gap: .2rem 1rem; color: #aaa; font-size: .9rem; margin-bottom: .4rem; }
.ag-desc { color: #d0d0d0; margin-bottom: .6rem; }
.ag-pie { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.ag-cuenta { font-family: var(--mc-pixel, monospace); font-size-adjust: .5; color: var(--mc-amarillo, #ff5); font-size: 1.05rem; }
.ag-cuenta.ya { color: #55ff55; animation: dl-parpadeo 1.2s steps(2) infinite; }
.ag-asistentes { color: #aaa; }
.ag-pasados-titulo { font-size: 1.15rem; margin-top: 2rem; }
.ag-pasados { color: #ccc; }
@media (max-width: 575.98px) { .ag-evento { flex-direction: column; } .ag-fecha { flex-direction: row; gap: .5rem; flex-basis: auto; } }

/* ---------- Mi DATALOGIC ---------- */
.mi-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; }
.mi-cabeza { image-rendering: pixelated; box-shadow: 0 0 0 3px #000; }
.mi-cab h2 { font-size: 1.6rem; margin: 0 0 .2rem; display: flex; gap: .4rem; align-items: center; }
.mi-enlaces { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 0; }
.mi-hud { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.mi-hud div { display: grid; grid-template-columns: 24px auto; grid-template-rows: auto auto; column-gap: .45rem; padding: .35rem .6rem; background: rgba(0, 0, 0, .45); border: 2px solid #000; min-width: 120px; }
.mi-hud img { grid-row: 1 / 3; align-self: center; image-rendering: pixelated; }
.mi-hud small { color: #999; font-size: .75rem; }
.mi-hud b { color: #fff; font-family: var(--mc-pixel, monospace); font-size-adjust: .5; }
.mi-inv-cuerpo { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.mi-equipo { display: grid; grid-template-columns: 44px; gap: 0; }
.mi-principal { display: flex; flex-direction: column; gap: .5rem; }
.mi-rejilla { display: grid; grid-template-columns: repeat(9, 44px); }
@media (max-width: 575.98px) { .mi-rejilla { grid-template-columns: repeat(9, 34px); } .mi-rejilla .mc-ranura { width: 34px; height: 34px; } .mi-rejilla .mc-ranura img { width: 24px; height: 24px; } }
.mi-sub { font-size: 1rem; margin: 1rem 0 .4rem; }
.mi-r.mi-sel { outline: 3px solid #fff; outline-offset: -3px; z-index: 1; }
.mi-r.mi-brillo img { filter: drop-shadow(0 0 3px #b06bff); }
.mi-secundaria { margin-top: .5rem; }
.mi-dura { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; background: #000; }
.mi-dura span { display: block; height: 2px; }
.mi-amigos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .25rem; max-height: 420px; overflow-y: auto; }
.mi-amigos li { display: flex; align-items: center; gap: .5rem; }
.mi-amigos li a { flex: 1 1 auto; color: #ddd; text-decoration: none; display: flex; align-items: center; gap: .4rem; }
.mi-amigos li a img { image-rendering: pixelated; }
.mi-amigos .btn { color: #888; }
.mi-avisar.activo { color: var(--mc-amarillo, #ff5) !important; }
.mi-capturas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.mi-capturas img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 2px solid #000; }
.mi-capturas .estado-pendiente img { opacity: .6; }
.mi-capturas .estado-rechazada img { opacity: .35; filter: grayscale(1); }

/* ---------- Comparador ---------- */
.cp-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; max-width: 760px; margin: 0 auto; }
.cp-campo { flex: 1 1 200px; }
.cp-vs, .cp-marcador { font-family: var(--mc-titulo, monospace); color: var(--mc-oro, #fa0); text-shadow: 3px 3px 0 #3f2a00; }
.cp-tabla { max-width: 960px; margin: 1.5rem auto 0; padding: 1rem 1.1rem; }
.cp-cabeza { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.cp-jugador { display: flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; }
.cp-jugador img { image-rendering: pixelated; box-shadow: 0 0 0 3px #000; }
.cp-jugador span { display: flex; flex-direction: column; }
.cp-jugador b { font-size: 1.3rem; }
.cp-j1 { flex-direction: row-reverse; text-align: right; }
.cp-jugador.gana img { box-shadow: 0 0 0 3px var(--mc-oro, #fa0); }
.cp-marcador { display: flex; gap: .5rem; font-size: 1.6rem; }
.cp-fila { display: grid; grid-template-columns: 110px 1fr minmax(150px, auto) 1fr 110px; align-items: center; gap: .6rem; padding: .3rem 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.cp-nombre { text-align: center; color: #ccc; font-size: .9rem; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.cp-valor { font-family: var(--mc-pixel, monospace); font-size-adjust: .5; color: #bbb; }
.cp-valor.cp-der { text-align: left; }
.cp-valor.cp-izq { text-align: right; }
.cp-valor.gana { color: #55ff55; }
.cp-barra { height: 10px; background: #2a2a2a; border: 1px solid #000; display: flex; }
.cp-barra.cp-izq { justify-content: flex-end; }
.cp-barra span { display: block; height: 100%; background: #5555ff; }
.cp-barra.cp-der span { background: #ff5555; }
.cp-resultado { text-align: center; margin: 1rem 0 0; font-size: 1.1rem; color: #fff; }
@media (max-width: 767.98px) {
    .cp-cabeza { grid-template-columns: 1fr; text-align: center; }
    .cp-j1 { flex-direction: row; text-align: left; }
    .cp-marcador { justify-content: center; }
    .cp-fila { grid-template-columns: 1fr 1fr; }
    .cp-nombre { grid-column: 1 / -1; order: -1; }
    .cp-barra { display: none; }
    .cp-valor.cp-der { text-align: right; }
    .cp-valor.cp-izq { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .ag-cuenta.ya { animation: none; }
}