/* =============================================================================
   New Trivia — modo "La Centralita"                                    v1.0.0
   -----------------------------------------------------------------------------
   Un tablero de operadora de los años 50: marco de madera, panel de
   baquelita, placas de bronce, etiquetas de cartulina y lamparitas.
   El tablero es un objeto: se apoya sobre el fondo del tema que eligió el
   docente, sin cambiarlo.
   ============================================================================= */

.tv-modo--centralita {
    --escena-ancho: 66em;
    --escena-alto: 48em;
    max-width: var(--escena-ancho);
    max-height: var(--escena-alto);
    gap: .6em;

    --cx-carton:    #f4ead0;
    --cx-carton-2:  #e9dcb8;
    --cx-tinta:     #2b2117;
    --cx-tinta-2:   #6c5a43;
    --cx-bronce-1:  #f3d98c;
    --cx-bronce-2:  #b98a2f;
    --cx-ambar:     #ffb444;
    --cx-verde:     #4ade80;
    --cx-rojo:      #ff6b5b;
    --hueco:        clamp(3.6em, 15%, 9.5em);
}

/* ---------- El mueble ---------- */
.cx-tablero {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) var(--hueco) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 0;
    row-gap: .55em;
    padding: .75em .8em .85em;
    border: .55em solid transparent;
    border-radius: 1.05em;
    background:
        radial-gradient(120% 70% at 50% 0%, #3d332b 0%, #231d18 55%, #17130f 100%) padding-box,
        repeating-linear-gradient(97deg, #7a4823 0 .35em, #643a1c .35em .55em, #83502a .55em .95em, #5c3419 .95em 1.1em) border-box;
    box-shadow:
        inset 0 0 0 1px rgba(255, 220, 160, .08),
        inset 0 .6em 1.4em rgba(0, 0, 0, .55),
        0 .9em 2.2em rgba(0, 0, 0, .45);
    transition: opacity .2s, transform .25s var(--curva);
    touch-action: none;            /* el arrastre del cable no tiene que scrollear la página */
}
/* Tornillos de las esquinas */
.cx-tablero::before,
.cx-tablero::after {
    content: "";
    position: absolute;
    top: .35em;
    width: .55em; height: .55em;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #f6e2a4, #9a7426 70%);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .6);
    pointer-events: none;
}
.cx-tablero::before { left: .35em; }
.cx-tablero::after  { right: .35em; }

.tv-modo--centralita.es-sale .cx-tablero { opacity: .25; transform: scale(.985); }

/* ---------- Reloj ---------- */
.cx-reloj {
    grid-column: 1 / -1;
    grid-row: 1;
    height: .42em;
    margin: 0 .6em;
    border-radius: 1em;
    background: rgba(0, 0, 0, .5);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
    overflow: hidden;
}
.cx-reloj__barra {
    height: 100%;
    background: linear-gradient(90deg, #ffcf6b, var(--cx-ambar));
    box-shadow: 0 0 .6em rgba(255, 180, 68, .7);
    transform-origin: left center;
}
.cx-reloj.es-poco .cx-reloj__barra { background: linear-gradient(90deg, #ffb444, var(--cx-rojo)); }
.cx-reloj.es-poco { animation: tv-pulso 1s ease-in-out infinite; }
.cx-reloj.es-libre { visibility: hidden; height: 0; }

/* ---------- Columnas ---------- */
.cx-col {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: .5em;
    min-height: 0;
    min-width: 0;
}
.cx-col--llamadas { grid-column: 1; }
.cx-col--lineas   { grid-column: 3; }
.cx-medio         { grid-column: 2; grid-row: 2; }

.cx-placa {
    align-self: center;
    padding: .22em .9em;
    border-radius: .3em;
    font-size: .64em;
    font-weight: 900;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #3d2b0b;
    text-shadow: 0 1px 0 rgba(255, 240, 200, .6);
    background: linear-gradient(180deg, var(--cx-bronce-1), var(--cx-bronce-2) 55%, #e2bd62);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .45);
}

.cx-lista {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .55em;
}
.cx-lista.es-llamando .cx-llamada { animation: cx-llamando .3s ease-in-out 3 alternate; }
@keyframes cx-llamando { to { box-shadow: 0 0 0 .2em var(--cx-ambar), 0 .3em .8em rgba(0, 0, 0, .4); } }

/* ---------- Tarjetas (cartulina) ---------- */
.cx-llamada,
.cx-linea {
    position: relative;
    flex: 1 1 0;
    min-height: 2.6em;
    max-height: 9.5em;
    display: flex;
    align-items: center;
    gap: .55em;
    text-align: left;
    color: var(--cx-tinta);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 40%),
        linear-gradient(180deg, var(--cx-carton), var(--cx-carton-2));
    border-radius: .5em;
    box-shadow:
        inset 0 0 0 1px rgba(80, 55, 20, .18),
        0 .22em 0 rgba(0, 0, 0, .35),
        0 .35em .8em rgba(0, 0, 0, .35);
    transition: transform .15s var(--curva), box-shadow .15s, background .2s, opacity .2s;
    animation: cx-entra .45s var(--curva) both;
    animation-delay: calc(var(--i, 0) * 55ms);
    cursor: pointer;
    touch-action: none;
    outline: none;
}
@keyframes cx-entra {
    from { opacity: 0; transform: translateY(.5em) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.cx-llamada { padding: .45em 1.05em .45em .45em; }
.cx-linea   { padding: .4em .5em .4em 1.15em; }

.cx-llamada:hover, .cx-linea:hover { transform: translateY(-.06em); }
.cx-llamada:focus-visible, .cx-linea:focus-visible {
    box-shadow: 0 0 0 .2em #fff, 0 0 0 .38em var(--cx-ambar), 0 .35em .8em rgba(0, 0, 0, .35);
}

.cx-llamada__cuerpo, .cx-linea__cuerpo {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: .5em;
}
.cx-texto {
    display: block;
    max-height: 100%;
    overflow: hidden;
    font-size: .92em;
    font-weight: 750;
    line-height: 1.22;
    text-wrap: pretty;
    overflow-wrap: anywhere;
    hyphens: auto;
}
.cx-linea .cx-texto { font-weight: 800; }
.cx-texto.es-cortado {
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
            mask-image: linear-gradient(180deg, #000 70%, transparent);
}
.cx-vermas {
    position: absolute;
    right: 1.15em;
    bottom: .25em;
    width: 1.5em; height: 1.5em;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: .8em;
    color: #fff;
    background: rgba(43, 33, 23, .8);
    cursor: zoom-in;
}

.cx-llamada__foto {
    flex: 0 0 auto;
    width: 3.2em;
    height: 3.2em;
    object-fit: cover;
    border-radius: .35em;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .7), 0 1px 3px rgba(0, 0, 0, .35);
    cursor: zoom-in;
}
.cx-linea__foto {
    flex: 0 0 auto;
    height: 100%;
    max-height: 5.6em;
    aspect-ratio: 1;
    width: auto;
    object-fit: cover;
    border-radius: .35em;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
}

/* Número de la llamada: botón de baquelita del color de su cable */
.cx-num {
    flex: 0 0 auto;
    width: 1.75em; height: 1.75em;
    display: grid; place-items: center;
    border-radius: 50%;
    font-weight: 900;
    font-size: .95em;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), transparent 45%), var(--cable, #888);
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .4);
}
.cx-letra {
    flex: 0 0 auto;
    min-width: 1.45em;
    height: 1.45em;
    display: grid; place-items: center;
    border-radius: .3em;
    font-weight: 900;
    font-size: .8em;
    color: #f4ead0;
    background: #3a2f25;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
}

/* ---------- Agujeros (jacks) y lamparitas ---------- */
.cx-jack {
    position: absolute;
    top: 50%;
    width: 1.3em; height: 1.3em;
    margin-top: -.65em;
    border-radius: 50%;
    background: radial-gradient(circle, #050403 0 30%, #2a2018 31% 38%, var(--cx-bronce-1) 42%, var(--cx-bronce-2) 64%, #6d5019 72%, transparent 74%);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6));
    pointer-events: none;
}
.cx-llamada .cx-jack { right: -.95em; }
.cx-linea .cx-jack   { left: -.95em; }

.cx-lampara {
    position: absolute;
    top: .32em;
    width: .62em; height: .62em;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #8a6d3c, #3c2d17 70%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
    transition: background .2s, box-shadow .2s;
}
.cx-llamada .cx-lampara { right: .3em; }
.cx-linea .cx-lampara   { left: .3em; }

.es-elegida .cx-lampara,
.es-conectada .cx-lampara,
.es-ocupada .cx-lampara {
    background: radial-gradient(circle at 35% 30%, #fff3c4, var(--cx-ambar) 60%);
    box-shadow: 0 0 .5em .1em rgba(255, 180, 68, .85);
}
.es-elegida .cx-lampara { animation: cx-titila .55s steps(2, jump-none) infinite; }
@keyframes cx-titila { 50% { opacity: .25; } }
.es-bien .cx-lampara {
    background: radial-gradient(circle at 35% 30%, #eafff1, var(--cx-verde) 60%) !important;
    box-shadow: 0 0 .7em .2em rgba(74, 222, 128, .9) !important;
    animation: none;
}
.es-mal .cx-lampara {
    background: radial-gradient(circle at 35% 30%, #ffe5e1, var(--cx-rojo) 60%) !important;
    box-shadow: 0 0 .7em .2em rgba(255, 107, 91, .9) !important;
    animation: none;
}

/* ---------- Estados ---------- */
.cx-llamada.es-elegida,
.cx-llamada.es-tirando {
    transform: translateX(.18em) scale(1.015);
    box-shadow: 0 0 0 .2em var(--cable), 0 .4em 1em rgba(0, 0, 0, .45);
}
.cx-linea.es-ocupada { box-shadow: inset .32em 0 0 var(--cable, var(--cx-ambar)), 0 .22em 0 rgba(0, 0, 0, .35), 0 .35em .8em rgba(0, 0, 0, .35); }
.cx-linea.es-apuntada {
    transform: translateX(-.15em) scale(1.03);
    box-shadow: 0 0 0 .22em var(--cx-ambar), 0 0 1.2em rgba(255, 180, 68, .55);
}
.cx-llamada.es-bien, .cx-linea.es-bien {
    background: linear-gradient(180deg, #eafbe9, #cdeccf);
}
.cx-llamada.es-mal {
    background: linear-gradient(180deg, #fbe7e2, #f0cfc6);
}
.cx-linea.es-mal { opacity: .72; }
.cx-linea.es-sacudida { animation: cx-sacudida .38s ease-in-out; }
@keyframes cx-sacudida {
    20% { transform: translateX(-.35em); }
    40% { transform: translateX(.3em); }
    60% { transform: translateX(-.2em); }
    80% { transform: translateX(.12em); }
}
.cx-linea.es-era {
    opacity: 1;
    box-shadow: 0 0 0 .2em var(--cx-verde), 0 0 1.1em rgba(74, 222, 128, .5);
    animation: cx-era 1.2s ease-in-out 2;
}
@keyframes cx-era { 50% { box-shadow: 0 0 0 .32em var(--cx-verde), 0 0 1.6em rgba(74, 222, 128, .75); } }

.cx-era {
    position: absolute;
    right: 1.05em;
    bottom: -.55em;
    padding: .12em .5em;
    border-radius: 1em;
    font-size: .68em;
    font-weight: 900;
    color: #0d3b1e;
    background: var(--cx-verde);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    pointer-events: none;
}
.cx-era:empty { display: none; }

/* ---------- Cables ---------- */
.cx-cables {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 3;
}
.cx-cable path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cx-cable__sombra { stroke: rgba(0, 0, 0, .32); stroke-width: .6em; transform: translate(.08em, .32em); }
.cx-cable__borde  { stroke: #160f0a; stroke-width: .5em; }
.cx-cable__alma   { stroke-width: .34em; }
.cx-cable__brillo { stroke: rgba(255, 255, 255, .38); stroke-width: .09em; transform: translate(0, -.07em); }
.cx-cable.es-arriba .cx-cable__sombra { transform: translate(.18em, .7em); stroke: rgba(0, 0, 0, .22); }
.cx-ficha { filter: drop-shadow(0 .12em .1em rgba(0, 0, 0, .55)); }

.cx-fantasma {
    fill: none;
    stroke: var(--cx-verde);
    stroke-width: .22em;
    stroke-linecap: round;
    stroke-dasharray: .55em .45em;
    filter: drop-shadow(0 0 .25em rgba(74, 222, 128, .8));
    animation: cx-hormigas .9s linear infinite;
}
@keyframes cx-hormigas { to { stroke-dashoffset: -2em; } }

/* ---------- Chispas ---------- */
.cx-chispas { position: absolute; width: 0; height: 0; z-index: 5; pointer-events: none; }
.cx-chispas i {
    position: absolute;
    left: -2px; top: -2px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #ffe39a;
    box-shadow: 0 0 6px 2px rgba(255, 196, 80, .9);
    animation: cx-chispa .5s ease-out forwards;
}
.cx-chispas.es-grande i { width: 5px; height: 5px; background: #fff1c9; box-shadow: 0 0 8px 3px rgba(255, 120, 60, .95); animation-duration: .65s; }
@keyframes cx-chispa {
    to { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

/* ---------- Sello ---------- */
.cx-sello {
    position: absolute;
    left: 50%; top: 50%;
    z-index: 4;
    padding: .25em .7em;
    border: .18em solid currentColor;
    border-radius: .3em;
    font-size: 1.7em;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #ffcf6b;
    background: rgba(20, 15, 10, .72);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-8deg) scale(1.6);
}
.cx-sello.es-ok { color: var(--cx-verde); }
.cx-sello.es-visible { animation: cx-sello 2.2s var(--curva) forwards; }
@keyframes cx-sello {
    0%   { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1.6); }
    12%  { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
    75%  { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(.96); }
}

/* ---------- Pie y palanca ---------- */
.cx-pie {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .8em;
}
.cx-ayuda {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .82em;
    font-weight: 700;
    color: var(--tinta-2);
    line-height: 1.25;
}
.cx-ayuda.es-aviso { color: var(--tinta); animation: tv-sube-suave .3s var(--curva) both; }

.cx-palanca {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .6em;
    min-height: 3em;
    padding: .6em 1.3em;
    border-radius: .75em;
    font-weight: 900;
    font-size: 1em;
    letter-spacing: .02em;
    color: #fff6e0;
    background: linear-gradient(180deg, #7b6a58, #4f4234);
    box-shadow: 0 .28em 0 #2c241b, 0 .5em 1em rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .1s, box-shadow .1s, filter .15s, background .2s;
}
.cx-palanca:not(:disabled) {
    background: linear-gradient(180deg, #e2483c, #a52219);
    box-shadow: 0 .28em 0 #5e130d, 0 .5em 1em rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.cx-palanca.es-lista { animation: cx-lista 1.1s ease-in-out infinite; }
@keyframes cx-lista { 50% { filter: brightness(1.15); transform: translateY(-.08em); } }
.cx-palanca.es-seguir {
    color: #14121f;
    background: linear-gradient(180deg, var(--acento-2), var(--acento));
    box-shadow: 0 .28em 0 rgba(0, 0, 0, .3), var(--sombra);
}
.cx-palanca:active:not(:disabled), .cx-palanca.es-bajando {
    transform: translateY(.22em);
    box-shadow: 0 .06em 0 #5e130d, 0 .2em .5em rgba(0, 0, 0, .3);
}
.cx-palanca:disabled { opacity: .55; cursor: default; }
.cx-palanca__cuenta {
    padding: .1em .5em;
    border-radius: 1em;
    font-size: .8em;
    background: rgba(0, 0, 0, .28);
    font-variant-numeric: tabular-nums;
}

/* ---------- Repaso del tablero ---------- */
.cx-repaso {
    position: absolute;
    left: .6em; right: .6em; bottom: .6em;
    z-index: 7;
    max-height: 74%;
    display: flex;
    flex-direction: column;
    transform: translateY(115%);
    visibility: hidden;
    transition: transform .45s var(--curva), visibility 0s .45s;
}
.cx-repaso.es-activo { transform: none; visibility: visible; transition: transform .45s var(--curva); }
.cx-repaso__hoja {
    display: flex;
    flex-direction: column;
    gap: .55em;
    min-height: 0;
    overflow: auto;
    padding: 1em 1em .9em;
    border-radius: .9em;
    color: var(--cx-tinta);
    background:
        repeating-linear-gradient(180deg, transparent 0 1.55em, rgba(70, 110, 160, .12) 1.55em 1.6em),
        linear-gradient(180deg, #fbf5e3, #efe4c5);
    box-shadow: 0 -.4em 1.6em rgba(0, 0, 0, .45);
}
.cx-repaso__titulo {
    font-size: .72em;
    font-weight: 900;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #8a3b22;
}
.cx-repaso__item { display: flex; gap: .6em; align-items: flex-start; }
.cx-repaso__item .cx-num { width: 1.5em; height: 1.5em; font-size: .85em; }
.cx-repaso__cuerpo { flex: 1 1 auto; min-width: 0; }
.cx-repaso__preg { font-weight: 800; font-size: .92em; line-height: 1.25; }
.cx-repaso__linea { font-size: .85em; margin-top: .15em; color: var(--cx-tinta-2); }
.cx-repaso__item.es-mal .cx-repaso__linea b { color: #166534; }
.cx-repaso__item.es-bien .cx-repaso__linea b { color: #166534; }
.cx-repaso__nota {
    margin-top: .3em;
    padding: .35em .6em;
    border-left: .22em solid var(--cx-bronce-2);
    font-size: .84em;
    line-height: 1.3;
    background: rgba(255, 255, 255, .5);
    border-radius: 0 .35em .35em 0;
}
.cx-repaso__seguir {
    align-self: stretch;
    margin-top: .3em;
    min-height: 2.8em;
    border-radius: .7em;
    font-weight: 900;
    color: #14121f;
    background: linear-gradient(180deg, var(--acento-2), var(--acento));
    box-shadow: 0 .24em 0 rgba(0, 0, 0, .25);
}

/* ---------- Texto ampliado ---------- */
.cx-leer {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: none;
    place-items: center;
    padding: 1.4em;
    background: rgba(10, 8, 6, .72);
    font-size: 1.3em;
    font-weight: 800;
    line-height: 1.35;
    color: var(--cx-tinta);
    cursor: zoom-out;
}
.cx-leer.es-activa {
    display: grid;
    background-image: linear-gradient(180deg, var(--cx-carton), var(--cx-carton-2));
    background-size: min(30em, 92%) auto;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(10, 8, 6, .72);
    text-align: center;
}

/* ---------- Tamaños ---------- */
/* Celular: el hueco se angosta y las tarjetas se aprietan un poco */
@media (max-width: 600px) {
    .tv-modo--centralita { padding: .6em; gap: .5em; }
    .cx-tablero { padding: .55em .45em .65em; border-width: .42em; --hueco: 3.5em; }
    .cx-llamada { padding: .35em .95em .35em .35em; gap: .4em; }
    .cx-linea   { padding: .35em .4em .35em 1.05em; gap: .4em; }
    .cx-texto { font-size: .86em; }
    .cx-num { width: 1.5em; height: 1.5em; font-size: .85em; }
    .cx-llamada__foto { width: 2.4em; height: 2.4em; }
    .cx-ayuda { font-size: .74em; }
    .cx-palanca { padding: .55em 1em; font-size: .92em; }
}
/* Bajito (contenedor de 320x400, celular acostado) */
@media (max-height: 470px) {
    .tv-modo--centralita { padding: .45em .6em; gap: .4em; }
    .cx-tablero { row-gap: .35em; padding: .45em .55em .5em; border-width: .38em; }
    .cx-placa { display: none; }
    .cx-lista { gap: .35em; }
    .cx-llamada, .cx-linea { min-height: 2.2em; }
    .cx-palanca { min-height: 2.5em; padding: .4em .9em; }
    .cx-ayuda { display: none; }
    .cx-sello { font-size: 1.2em; }
}
@media (max-height: 470px) and (max-width: 420px) {
    .cx-ayuda { display: none; }
    .cx-pie { justify-content: center; }
}

/* Dentro del iframe de la plataforma hay un botón abajo a la izquierda */
.tv.es-empotrado .tv-modo--centralita .cx-pie { padding-left: 2.6em; }

/* Papel: el mueble queda igual, solo se suaviza la sombra sobre fondo claro */
.tv[data-tema="papel"] .cx-tablero { box-shadow: inset 0 0 0 1px rgba(255, 220, 160, .08), inset 0 .6em 1.4em rgba(0, 0, 0, .55), 0 .7em 1.6em rgba(22, 25, 43, .3); }

@media (prefers-reduced-motion: reduce) {
    .cx-llamada, .cx-linea, .cx-sello.es-visible, .cx-fantasma,
    .cx-palanca.es-lista, .es-elegida .cx-lampara, .cx-linea.es-era, .cx-linea.es-sacudida { animation: none !important; }
    .cx-sello.es-visible { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg); }
    .cx-repaso { transition: none; }
}

/* =============================================================================
   Celular parado
   -----------------------------------------------------------------------------
   Dos columnas angostas obligaban a leer enunciados largos en tarjetas de
   150 px. Acá la llamada en curso se lee grande en la consola; las llamadas
   son teclas numeradas en un canal a la derecha, y las líneas usan todo el
   ancho. Los cables bajan por el canal y entran a las líneas por la derecha.
   ============================================================================= */
.cx-consola { display: none; }

.cx-tablero.es-movil {
    --canal: 4.3em;
    grid-template-columns: minmax(0, 1fr) var(--canal);
    grid-template-rows: auto auto minmax(0, 1fr);
    row-gap: .6em;
    column-gap: 0;
    padding: .55em .35em .65em .55em;
}
.es-movil .cx-placa, .es-movil .cx-medio, .es-movil .cx-era { display: none; }

/* La consola: la llamada en curso, grande */
.es-movil .cx-consola {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: .45em;
    min-height: 9.5em;
    max-height: 15em;
    padding: .7em .8em .65em;
    border-radius: .6em;
    color: var(--cx-tinta);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 40%),
        linear-gradient(180deg, var(--cx-carton), var(--cx-carton-2));
    box-shadow: inset .32em 0 0 var(--cable, var(--cx-ambar)), 0 .22em 0 rgba(0, 0, 0, .35), 0 .35em .8em rgba(0, 0, 0, .35);
    touch-action: none;
}
.es-movil .cx-consola.es-cambio { animation: cx-consola .3s var(--curva); }
@keyframes cx-consola { from { opacity: .3; transform: translateY(.3em); } to { opacity: 1; transform: none; } }
.cx-consola__cab { display: flex; align-items: center; gap: .5em; }
.cx-consola .cx-num { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), transparent 45%), var(--cable, #888); }
.cx-consola__paso {
    font-size: .7em;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cx-tinta-2);
}
.cx-consola__cuerpo { flex: 1 1 auto; min-height: 0; display: flex; gap: .6em; align-items: flex-start; }
.cx-consola__foto {
    flex: 0 0 auto;
    width: 4.2em; height: 4.2em;
    object-fit: cover;
    border-radius: .4em;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .7), 0 1px 3px rgba(0, 0, 0, .35);
    cursor: zoom-in;
}
.cx-consola__texto {
    flex: 1 1 auto;
    min-width: 0;
    max-height: 100%;
    overflow: auto;
    font-weight: 800;
    line-height: 1.25;
    text-wrap: pretty;
}
.cx-consola__estado {
    font-size: .74em;
    font-weight: 700;
    color: var(--cx-tinta-2);
}
.cx-consola.es-conectada .cx-consola__estado { color: #1d6b38; }
.cx-consola.es-bien { background: linear-gradient(180deg, #eafbe9, #cdeccf); }
.cx-consola.es-mal  { background: linear-gradient(180deg, #fbe7e2, #f0cfc6); }
.cx-consola.es-bien .cx-consola__estado { color: #166534; font-size: .85em; font-weight: 900; }
.cx-consola.es-mal .cx-consola__estado  { color: #9f1d12; font-size: .85em; font-weight: 900; }

/* Canal: las teclas de las llamadas, una debajo de la otra */
.es-movil .cx-col--llamadas {
    grid-column: 2;
    grid-row: 2;
    align-items: center;
    position: relative;
    z-index: 4;             /* los cables salen por debajo de las teclas */
}
.es-movil .cx-col--llamadas .cx-lista { gap: .45em; justify-content: flex-start; padding-top: .1em; }
.es-movil .cx-llamada {
    flex: 0 0 auto;
    width: 2.55em;
    height: 2.55em;
    min-height: 0;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #4b4038, #1f1915 75%);
    box-shadow: inset 0 0 0 .14em #8a6a24, 0 .2em .35em rgba(0, 0, 0, .55);
}
.es-movil .cx-llamada .cx-num { width: 1.9em; height: 1.9em; font-size: .95em; }
.es-movil .cx-llamada__cuerpo, .es-movil .cx-llamada .cx-vermas { display: none; }
.es-movil .cx-llamada .cx-lampara { top: -.1em; right: -.1em; width: .55em; height: .55em; }
.es-movil .cx-llamada .cx-jack {
    top: auto;
    right: auto;
    left: 50%;
    bottom: -.25em;
    width: .8em; height: .8em;
    margin: 0 0 0 -.4em;
}
.es-movil .cx-llamada:hover { transform: none; }
.es-movil .cx-llamada.es-elegida,
.es-movil .cx-llamada.es-tirando {
    transform: scale(1.08);
    box-shadow: inset 0 0 0 .14em #8a6a24, 0 0 0 .18em var(--cable), 0 0 .9em var(--cable);
}
.es-movil .cx-llamada.es-bien, .es-movil .cx-llamada.es-mal { background: radial-gradient(circle at 35% 30%, #4b4038, #1f1915 75%); }
.es-movil .cx-llamada.es-bien { box-shadow: inset 0 0 0 .14em #8a6a24, 0 0 0 .18em var(--cx-verde); }
.es-movil .cx-llamada.es-mal  { box-shadow: inset 0 0 0 .14em #8a6a24, 0 0 0 .18em var(--cx-rojo); }
.cx-tecla__linea { display: none; }
.es-movil .cx-tecla__linea:not(:empty) {
    display: grid;
    place-items: center;
    position: absolute;
    left: -.55em;
    bottom: -.15em;
    min-width: 1.15em; height: 1.15em;
    padding: 0 .2em;
    border-radius: .3em;
    font-size: .68em;
    font-weight: 900;
    color: #f4ead0;
    background: #3a2f25;
    box-shadow: 0 0 0 1.5px var(--cable);
}

/* Líneas: todo el ancho, agujero a la derecha, sobre el canal */
.es-movil .cx-col--lineas { grid-column: 1; grid-row: 3; }
.es-movil .cx-col--lineas .cx-lista { justify-content: flex-start; gap: .45em; }
.es-movil .cx-linea {
    max-height: 4.6em;
    min-height: 2.75em;
    padding: .35em 1.1em .35em .55em;
}
.es-movil .cx-linea .cx-jack { left: auto; right: -1.05em; }
.es-movil .cx-linea .cx-lampara { left: auto; right: .3em; }
.es-movil .cx-linea.es-ocupada {
    box-shadow: inset -.32em 0 0 var(--cable, var(--cx-ambar)), 0 .22em 0 rgba(0, 0, 0, .35), 0 .35em .8em rgba(0, 0, 0, .35);
}
.es-movil .cx-linea.es-apuntada { transform: translateX(.15em) scale(1.02); }
.es-movil .cx-linea__foto { max-height: 3.6em; }
.es-movil .cx-texto { font-size: .95em; }

/* Muy bajito (320×400): consola más chata */
@media (max-height: 470px) {
    .es-movil .cx-consola { min-height: 6.5em; max-height: 9em; padding: .5em .6em; gap: .3em; }
    .es-movil .cx-consola__estado { display: none; }
    .es-movil .cx-consola__foto { width: 3em; height: 3em; }
    .es-movil .cx-llamada { width: 2.2em; height: 2.2em; }
    .es-movil .cx-col--llamadas .cx-lista { gap: .3em; }
    .es-movil .cx-linea { min-height: 2.3em; }
}

/* ---------- Lupa: ver una respuesta (o una llamada larga) en grande ---------- */
.cx-linea.con-lupa   { padding-right: 2.5em; }
.cx-llamada.con-lupa { padding-right: 3.1em; }
.cx-linea .tv-lupita   { right: .35em; bottom: .3em; width: 1.75em; height: 1.75em; }
.cx-llamada .tv-lupita { right: 1.1em; bottom: .3em; width: 1.75em; height: 1.75em; }
.es-movil .cx-linea.con-lupa { padding-right: 2.9em; }
.es-movil .cx-linea .tv-lupita { right: .55em; top: 50%; bottom: auto; margin-top: -.875em; }
.es-movil .cx-llamada .tv-lupita { display: none; }

/* En celular el canal es angosto: cables más finos, cada uno por su carril */
.es-movil .cx-cable__sombra { stroke-width: .42em; transform: translate(.06em, .22em); }
.es-movil .cx-cable__borde  { stroke-width: .36em; }
.es-movil .cx-cable__alma   { stroke-width: .24em; }
.es-movil .cx-cable__brillo { stroke-width: .07em; transform: translate(0, -.05em); }