/* ============================================================
   MODO EXPERTO — «Ajuste fino» (T07, SOPORTE #156)
   ============================================================
   Vive DENTRO del iframe (vista_previa, solo editor). Todo en coordenadas
   de canvas (375 px): hereda el `zoom` de #responsive-content igual que
   los pills del lápiz. Fuente Apple system: el pill no debe heredar la
   fuente decorativa de la invitación.

   Regla: NINGÚN control existe en un dispositivo y no en el otro. Lo
   único que cambia es el tamaño de la zona de toque (44 px, HIG). */

#experto-overlay {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 42;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
#experto-overlay * { box-sizing: border-box; }

/* ── Marco y nombre de cada sección ─────────────────────────── */
.experto-bloque {
    position: absolute;
    left: 0; right: 0;
    border-top: 1px dashed rgba(124, 58, 237, 0.35);
    pointer-events: none;
}
.experto-bloque-nombre {
    position: absolute;
    top: -1px; left: 8px;
    transform: translateY(-50%);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.92);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 14px;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}
.experto-bloque.is-seleccionado .experto-bloque-nombre { background: #4c1d95; }

/* ── Zonas de toque de los campos (invisibles, solo reciben el toque) ── */
.experto-hit {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    touch-action: pan-y;               /* la pareja sigue pudiendo hacer scroll */
    -webkit-tap-highlight-color: transparent;
    border-radius: 4px;
}
.experto-hit:hover { outline: 1px dashed rgba(124, 58, 237, 0.55); outline-offset: 2px; }
.experto-hit.is-editando { pointer-events: none; }
/* La PISTA al entrar (07-sep): cada zona de toque se ilumina UNA vez, como los campos del editor en vivo al entrar en
   pantalla (`hint-editable`), para que la pareja entienda que los textos se tocan. La pide el padre cuando el velo ya se
   ha retirado; `--pista-delay` escalona de arriba abajo los que entran juntos (experto-overlay.js › pista). Solo
   `backwards`: al terminar, la zona vuelve a ser invisible y su `:hover` sigue mandando (con `forwards` el último
   fotograma pisaría el hover para siempre). Un fundido de color, sin movimiento: no hace falta apagarlo con
   prefers-reduced-motion. */
@keyframes experto-pista {
    0%   { background-color: rgba(124, 58, 237, 0);    box-shadow: inset 0 0 0 1.5px rgba(124, 58, 237, 0); }
    12%  { background-color: rgba(124, 58, 237, 0.15); box-shadow: inset 0 0 0 1.5px rgba(124, 58, 237, 0.65); }
    70%  { background-color: rgba(124, 58, 237, 0.15); box-shadow: inset 0 0 0 1.5px rgba(124, 58, 237, 0.65); }
    100% { background-color: rgba(124, 58, 237, 0);    box-shadow: inset 0 0 0 1.5px rgba(124, 58, 237, 0); }
}
.experto-hit.is-pista { animation: experto-pista 1.2s ease-out var(--pista-delay, 0ms) backwards; }

/* ── La caja del campo seleccionado ─────────────────────────── */
.experto-caja {
    position: absolute;
    z-index: 3;                        /* sobre el asa del aire y la línea del hueco (z 2): lo seleccionado se agarra entero. Un botón en el
                                          borde inferior de su sección («Ver ubicación» de Olive Lite) tenía la mitad de abajo bajo el asa y
                                          arrastrarlo desde ahí cambiaba el aire (medido 06-sep) */
    border: 1.5px dashed #7c3aed;
    border-radius: 4px;
    pointer-events: auto;
    cursor: grab;
    touch-action: none;                /* el seleccionado se arrastra en CUALQUIER dirección; el scroll sigue fuera de la caja */
    background: rgba(124, 58, 237, 0.04);
    transition: box-shadow 140ms ease;
}
.experto-caja.is-arrastrando { cursor: grabbing; box-shadow: 0 8px 24px rgba(124, 58, 237, 0.18); background: rgba(124, 58, 237, 0.06); touch-action: none; }
.experto-caja.is-tope { animation: experto-goma 220ms ease-out; }
.experto-caja.is-editando { border-style: solid; border-color: rgba(124, 58, 237, 0.35); background: transparent; pointer-events: none; }
.experto-caja.is-aviso { border-color: #d97706; }
@keyframes experto-goma {
    0% { transform: translate(0, 0); }
    35% { transform: translate(var(--goma-x, 0px), var(--goma-y, 0px)); }
    100% { transform: translate(0, 0); }
}

/* Sin tiradores de esquina (05-sep): el tamaño solo con A− / A+ y pellizco */

/* ── Los tiradores del ANCHO (07-sep): dos puntos en los lados de la caja, como en soporte-admin ──
   Jose: «el ancho es algo que debería poder ajustarse desde la propia caja, con dos puntos a la izquierda y a la
   derecha, sin afectar al tamaño». La caja de un texto con ancho de diseño mide ese ancho (el contenedor, lo que
   pinta el editor al pasar el cursor) y la tinta en vertical. Zona de toque de 44 px alrededor de cada punto. */
.experto-asa-ancho {
    position: absolute;
    top: 50%;
    width: 14px; height: 14px;
    margin-top: -7px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid #7c3aed;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    cursor: ew-resize;
    touch-action: none;
    pointer-events: auto;
    z-index: 4;
}
.experto-asa-ancho::before { content: ''; position: absolute; left: -15px; top: -15px; right: -15px; bottom: -15px; }
.experto-asa-ancho--izq { left: -7px; }
.experto-asa-ancho--der { right: -7px; }
.experto-asa-ancho:hover, .experto-asa-ancho.is-arrastrando { background: #7c3aed; }
/* Mientras se estira el ancho: solo la caja y sus dos puntos (como al mover: sin pill, hueco, asa ni zonas de toque) */
#experto-overlay.is-ancho .experto-pill,
#experto-overlay.is-ancho .experto-hueco,
#experto-overlay.is-ancho .experto-asa,
#experto-overlay.is-ancho .experto-asa-grip,
#experto-overlay.is-ancho .experto-hit { opacity: 0; pointer-events: none; }
.experto-caja.is-editando .experto-asa-ancho { display: none; }

/* ── El pill del campo ──────────────────────────────────────── */
.experto-pill {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(30, 27, 46, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18), 0 2px 4px rgba(15, 23, 42, 0.1);
    pointer-events: auto;
    color: #fff;
    z-index: 4;                        /* sobre la caja (z 3) */
    white-space: nowrap;
    opacity: 0;
    transition: opacity 160ms ease, transform 160ms ease;
}
.experto-pill.in { opacity: 1; }
.experto-pill-btn {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0 8px;
    height: 32px;
    min-width: 36px;
    border-radius: 7px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}
.experto-pill-btn i { font-size: 12px; }
.experto-pill-btn:hover { background: rgba(255, 255, 255, 0.14); }
.experto-pill-btn:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.22); }
.experto-pill-btn:disabled, .experto-pill-btn.is-disabled { opacity: 0.38; cursor: default; }
/* La «A» de tamaño va en la pila del sistema como el resto del pill (08-sep): con el hub encendido el CSS del chrome
   (hub_css_chrome) ya la ponía ahí, y con el hub apagado salía en Georgia; un mismo control, una misma letra. */
.experto-pill-btn--a { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; }
.experto-pill-btn--a small { font-size: 11px; }
.experto-pill-btn--a big { font-size: 16px; }
.experto-pill-sep { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.18); margin: 0 2px; }
.experto-pill-msg {
    position: absolute;
    left: 50%;
    /* ENCIMA del pill, no debajo (06-sep, T08): debajo caía sobre el texto seleccionado y, en las piezas de un módulo
       (huecos de 8-22 px), sobre la pieza de encima o sobre la línea del hueco. Encima nunca tapa nada que se edite. */
    bottom: 100%;
    transform: translateX(-50%);
    margin-bottom: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(30, 27, 46, 0.9);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.experto-pill-msg.is-aviso { background: #b45309; }
.experto-pill-msg.is-error { background: #b91c1c; }

/* ── Envolvente: la cuadrícula de la sección COMO SE VE (desde que se selecciona, 06-sep) ── */
.experto-envolvente {
    position: absolute;
    left: 0; right: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(124, 58, 237, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 58, 237, 0.12) 1px, transparent 1px);
    background-size: 25px 25px;
    border: 1px solid rgba(124, 58, 237, 0.45);
    border-radius: 3px;
    opacity: 0;
    transition: opacity 120ms ease;
}
.experto-envolvente.in { opacity: 1; }

/* ── Guías que imantan ──────────────────────────────────────── */
.experto-guia { position: absolute; pointer-events: none; }
.experto-guia--v { width: 0; border-left: 1px solid #ec4899; }
.experto-guia--h { height: 0; border-top: 1px solid #ec4899; }
.experto-guia--dist { width: 0; border-left: 1px dashed #ec4899; }
.experto-guia-etq {
    position: absolute;
    left: 6px; top: 50%;
    transform: translateY(-50%);
    padding: 1px 5px;
    border-radius: 4px;
    background: #ec4899;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    line-height: 12px;
    white-space: nowrap;
}

/* ── Obstáculo del guardián (parpadea en rojo) ──────────────── */
.experto-obstaculo {
    position: absolute;
    border: 2px solid #ef4444;
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.12);
    pointer-events: none;
    animation: experto-parpadeo 420ms ease-in-out 2;
}
@keyframes experto-parpadeo { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* ── Línea del hueco (entre el campo y el anterior del bloque) ─ */
.experto-hueco {
    position: absolute;
    left: 24px; right: 24px;
    height: 44px;
    margin-top: -22px;
    z-index: 2;                        /* sobre las zonas de toque de los campos */
    pointer-events: auto;
    cursor: ns-resize;
    touch-action: none;
}
.experto-hueco::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    border-top: 1px dashed rgba(124, 58, 237, 0.7);
}
.experto-hueco-asa {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    min-width: 36px;
    height: 18px;
    padding: 0 8px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #7c3aed;
    color: #4c1d95;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}
.experto-hueco.is-arrastrando .experto-hueco-asa { background: #7c3aed; color: #fff; }
.experto-hueco-input {
    width: 48px; height: 18px;
    border: 0; padding: 0;
    text-align: center;
    font: inherit; font-size: 10px; font-weight: 600;
    color: #4c1d95; background: transparent; outline: none;
}

/* ── El asa del aire (borde inferior de la sección) ─────────── */
.experto-asa {
    position: absolute;
    left: 0; right: 0;
    height: 44px;
    margin-top: -22px;
    z-index: 2;                        /* sobre las zonas de toque de los campos */
    pointer-events: auto;
    cursor: ns-resize;
    touch-action: none;
}
.experto-asa::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    border-top: 2px solid rgba(124, 58, 237, 0.75);
}
/* El agarre del asa es HERMANO de la banda (no hijo) y va por encima de la caja (z 3): cuando el último texto de una
   sección crecida toca el borde inferior —justo cuando hace falta dar aire—, la caja tapaba la banda entera y el
   agarre quedaba medio escondido (06-sep). La banda sigue debajo de la caja (el botón del borde se agarra entero). */
.experto-asa-grip {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 16px;
    z-index: 4;
    pointer-events: auto;
    cursor: ns-resize;
    touch-action: none;
    border-radius: 999px;
    background: #7c3aed;
    color: #fff;
    font-size: 9px;
    line-height: 16px;
    text-align: center;
    letter-spacing: 2px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
}
.experto-asa-grip:hover { background: #6d28d9; }   /* candidato a tap (tacto fino, 05-sep) */
.experto-asa-grip.is-arrastrando { background: #4c1d95; }
.experto-asa-etq {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(30, 27, 46, 0.9);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 120ms ease;
}
.experto-asa.is-arrastrando .experto-asa-etq { opacity: 1; }

/* ── Snackbar «Deshacer» (fijo al viewport del iframe) ──────── */
.experto-snackbar {
    position: fixed;
    left: 50%; bottom: 18px;
    transform: translateX(-50%) translateY(8px);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 24px);
    padding: 10px 12px 10px 14px;
    border-radius: 10px;
    background: #1e1b2e;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12.5px;
    line-height: 1.3;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.32);
    z-index: 9999;
    opacity: 0;
    transition: opacity 160ms ease, transform 160ms ease;
    pointer-events: auto;
}
.experto-snackbar.in { opacity: 1; transform: translateX(-50%) translateY(0); }
.experto-snackbar-txt { max-width: 260px; }
.experto-snackbar-btn {
    border: 0; margin: 0;
    padding: 6px 10px;
    border-radius: 7px;
    background: transparent;
    color: #c4b5fd;
    font: inherit; font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.experto-snackbar-btn:hover { background: rgba(255, 255, 255, 0.1); }

/* ── Debug (?__experto=debug) ───────────────────────────────── */
.experto-debug-caja { position: absolute; border: 1px solid rgba(14, 165, 233, 0.7); pointer-events: none; }
.experto-debug-caja::after {
    content: attr(data-etq);
    position: absolute; left: 0; top: -12px;
    font-size: 8px; line-height: 10px; padding: 0 3px;
    background: rgba(14, 165, 233, 0.85); color: #fff; white-space: nowrap;
}
.experto-debug-caja.clase-imagen { border-color: rgba(234, 88, 12, 0.7); }
.experto-debug-caja.clase-imagen::after { background: rgba(234, 88, 12, 0.85); }
.experto-debug-caja.clase-ubicacion { border-color: rgba(22, 163, 74, 0.7); }
.experto-debug-caja.clase-ubicacion::after { background: rgba(22, 163, 74, 0.85); }
.experto-debug-veredicto {
    position: fixed; right: 6px; bottom: 6px;
    max-width: 60vw;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.88);
    color: #a7f3d0;
    font: 10px/1.3 ui-monospace, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    z-index: 9999;
    pointer-events: none;
}
.experto-debug-veredicto.is-mal { color: #fecaca; }

/* Mientras el experto está activo el canvas no enseña las burbujas ni los lápices
   (misma regla que el lápiz, que ya está activo debajo). El texto que se edita con
   el doble toque sí tiene que poder recibir el foco. */
.is-modo-experto [data-editable="true"][contenteditable="true"] { pointer-events: auto !important; }

/* ── El itinerario dentro del ajuste fino: la realidad del invitado (06-sep) ──
   En el editor el texto del itinerario reserva 46 px de padding-top para la burbuja «Convertir en imagen»
   (_campo_colocado.blade.php lo emite y _vista_previa_scripts lo pone inline al evaluar el texto). El invitado no
   tiene ese hueco: dentro del ajuste fino, donde se coloca al píxel, tampoco. La burbuja no se muestra (su `display`
   va inline con !important: se apaga por visibilidad) y el hueco se quita con !important, que gana al inline.
   La entrada y «Listo» deslizan lo que esto mueve (fotoWow / deslizarSalida en experto-overlay.js). */
.is-modo-experto [data-wow-texto] { padding-top: 0 !important; }
/* La PIEZA del itinerario (sustituto del texto, T09) reserva 42 px para su burbuja solo en el editor: dentro del
   ajuste fino se mide como la ve el invitado (padding 0), igual que el texto. */
.is-modo-experto .campo-wow-pieza[data-wow-html] { padding-top: 0 !important; }
.is-modo-experto .ia-bubble[data-wow-bubble] { visibility: hidden !important; pointer-events: none !important; animation: none !important; }

/* ── Las piezas de los módulos dentro del ajuste fino: la realidad del invitado (T08) ──
   La burbuja «Configurar galería / dress code» del editor va EN FLUJO dentro del módulo (ocupa 4 + 36 + 14 px encima
   de las piezas) y el invitado no la tiene. Con ella puesta, el aire de la primera pieza colapsaría contra su margen
   (los primeros 14 px del arrastre no moverían nada) y las piezas estarían 54 px más abajo que en /confirmar. Se quita
   del flujo; la entrada y «Listo» deslizan lo que eso mueve (fotoPiezas / deslizarPiezas en experto-overlay.js).
   El doble toque sobre una pieza sigue abriendo la configuración: el overlay le pasa el clic a la burbuja escondida. */
.is-modo-experto [data-modulo-codigo] [class*="-config-bubble"], .is-modo-experto [data-modulo-codigo] .regalos-config-btn { display: none !important; }

/* ── Mientras se arrastra un texto: solo la caja y las guías (05-sep, estrés) ── */
#experto-overlay.is-arrastrando .experto-pill,
#experto-overlay.is-arrastrando .experto-hueco,
#experto-overlay.is-arrastrando .experto-asa,
#experto-overlay.is-arrastrando .experto-asa-grip,
#experto-overlay.is-arrastrando .experto-hit { opacity: 0; pointer-events: none; }
.experto-hueco, .experto-asa { transition: opacity 120ms ease; }

/* ── Reflujo suave (05-sep): el borde de la sección estira su altura sin saltar ── */
.experto-bloque { transition: height var(--ux-lapiz-duracion-larga, 280ms) var(--ux-lapiz-easing, cubic-bezier(.32,.72,0,1)); }

/* ── Tacto (05-sep): Chrome ajusta el toque al nodo cercano que responde a un tap (:hover cuenta). Sin estas
   reglas la caja no era candidata y el dedo se iba a la zona de toque del vecino. ── */
.experto-caja:hover { background: rgba(124, 58, 237, 0.05); }
.experto-asa:hover .experto-asa-grip { background: #6d28d9; }
.experto-hueco:hover .experto-hueco-asa { border-color: #6d28d9; }

/* ── La LETRA de cada texto (T11, 07-sep): el botón «Aa» del pill y la REJILLA de letras ──
   Al tocar `Aa` el PROPIO pill (no se recrea: regla del repintado incremental) esconde sus botones y enseña una
   rejilla de dos filas con TODAS las fichas a la vista —«Tu letra», las de la invitación, las sugeridas, «Todas…»—,
   del ancho del canvas. Nada que desplazar: Jose (07-sep) «no sabes que tienes que desplazar a la derecha, es
   complicado de entender». Cada ficha enseña la primera palabra del texto escrita con esa letra, a igual tamaño
   óptico. Las fichas actúan en click; la × cierra (arriba a la derecha) y Escape también. */
.experto-pill-botones { display: inline-flex; align-items: center; gap: 2px; }
.experto-pill-aa { font-family: Georgia, "Times New Roman", serif; font-size: 15px; font-weight: 500; letter-spacing: -0.3px; line-height: 1; }
.experto-pill-btn--aa.is-activo .experto-pill-aa { color: #c4b5fd; text-decoration: underline; text-underline-offset: 3px; }
.experto-tira { display: none; }
.experto-pill.is-tira { height: auto; padding: 6px; border-radius: 14px; box-sizing: border-box; overflow: visible; }
.experto-pill.is-tira .experto-pill-botones { display: none; }
.experto-pill.is-tira .experto-tira {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px;
    width: 100%; box-sizing: border-box;
}
.experto-ficha {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 0; height: 42px; margin: 0; padding: 0 6px; box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9px; background: rgba(255, 255, 255, 0.07);
    color: #fff; cursor: pointer; line-height: 1; white-space: nowrap; overflow: hidden;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    user-select: none; -webkit-user-select: none;
}
.experto-ficha > span { display: block; max-width: 100%; overflow: hidden; text-overflow: clip; line-height: 1.05; text-transform: none; letter-spacing: 0; }
.experto-ficha > small {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 8px; font-weight: 700; letter-spacing: 0.4px; opacity: 0.72; margin-bottom: 2px; text-transform: uppercase;
}
.experto-ficha:hover { background: rgba(255, 255, 255, 0.16); }
.experto-ficha:active { transform: scale(0.96); }
.experto-ficha.is-activa { background: rgba(124, 58, 237, 0.62); border-color: #a78bfa; }
.experto-ficha.is-cargando > span { opacity: 0.35; }
.experto-ficha--todas { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; border-style: dashed; }
.experto-ficha--todas i { font-size: 12px; margin-bottom: 3px; }
.experto-ficha--todas > small { font-size: 8px; margin-bottom: 0; }
/* La × cierra: un botón redondo en la esquina superior derecha del pill, fuera de la rejilla */
.experto-ficha--cerrar {
    position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; padding: 0;
    border-radius: 50%; background: #1e1b2e; border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35); z-index: 1;
}
.experto-ficha--cerrar i { font-size: 12px; }