/* ═══════════════════════════════════════════════════════════════════════════
   Pantalla del reloj: paneles-instrumento, dígitos, mandos centrales y
   pulsadores físicos. (La escena de fondo está en escena.css.)
   Cada tema define los dos paneles con variables --pb-* (blancas) y --pn-*
   (negras): metal del bisel, esfera, dígitos, halo, brillo y tapas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --elev: altura de la tapa del pulsador (registrada para poder animarla) */
@property --elev { syntax: '<length>'; inherits: true; initial-value: 3px; }

/* ── Tema por defecto = «tablero»: marfil y oro cepillado / azul noche y acero anodizado ── */
:root {
  --cepillado: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, rgba(0, 0, 0, .04) 1px 2px, transparent 2px 4px);

  /* blancas */
  --pb-metal: var(--cepillado), linear-gradient(135deg, #fbecc0 0%, #c99442 20%, #fff2cc 40%, #a8701f 60%, #ecc77e 80%, #8a5a18 100%);
  --pb-fondo: radial-gradient(130% 95% at 50% 30%, #fffdf7 0%, #f9f0dd 50%, #eadab7 100%);
  --pb-esfera: repeating-conic-gradient(from 0deg at 50% 46%, rgba(130, 90, 30, .035) 0 1.2deg, rgba(255, 255, 255, .05) 1.2deg 2.4deg);
  --pb-vineta: rgba(110, 72, 20, .22);
  --pb-texto: #2a1c0d;
  --pb-suave: #7b6344;
  --pb-digito: #2b1d0f;
  --pb-digito-alto: #5e4429;
  --pb-digito-bajo: #120b04;
  --pb-faceta: rgba(0, 0, 0, .34);
  --pb-apagado: rgba(110, 76, 24, .075);
  --pb-halo: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) drop-shadow(0 2px 2px rgba(90, 55, 10, .22));
  --pb-halo-peligro: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) drop-shadow(0 0 6px rgba(230, 40, 30, .35));
  --pb-peligro: #d42419; --pb-peligro-alto: #f2564a; --pb-peligro-bajo: #9c0f08;
  --pb-brillo: rgba(255, 186, 72, .9);
  --pb-led: #ffbf4d;
  --pb-vidrio: .55;
  --pb-tapa: radial-gradient(120% 140% at 50% 0%, #ffffff 0%, #f8f3e9 45%, #e6dccb 100%);
  --pb-tapa-lado: #b5a689;
  --pb-tapa-texto: rgba(70, 48, 16, .55);

  /* negras */
  --pn-metal: var(--cepillado), linear-gradient(135deg, #b7d6ff 0%, #2c62b4 20%, #bcdcff 40%, #153d7e 60%, #6a9ce0 80%, #0b2759 100%);
  --pn-fondo: radial-gradient(130% 95% at 50% 28%, #16294a 0%, #0b1730 50%, #050b17 100%);
  --pn-esfera: repeating-conic-gradient(from 0deg at 50% 46%, rgba(120, 175, 255, .03) 0 1.2deg, rgba(0, 0, 0, .05) 1.2deg 2.4deg);
  --pn-vineta: rgba(0, 0, 0, .55);
  --pn-texto: #dcecff;
  --pn-suave: #8db0db;
  --pn-digito: #c4e4ff;
  --pn-digito-alto: #f4fbff;
  --pn-digito-bajo: #6eb6ff;
  --pn-faceta: rgba(0, 35, 95, .3);
  --pn-apagado: rgba(120, 180, 255, .07);
  --pn-halo: drop-shadow(0 0 2px rgba(150, 205, 255, .8)) drop-shadow(0 0 14px rgba(50, 140, 255, .55));
  --pn-halo-peligro: drop-shadow(0 0 2px rgba(255, 140, 130, .8)) drop-shadow(0 0 16px rgba(255, 40, 30, .6));
  --pn-peligro: #ff4a3d; --pn-peligro-alto: #ffb0a8; --pn-peligro-bajo: #e0160b;
  --pn-brillo: rgba(56, 148, 255, .95);
  --pn-led: #4cb2ff;
  --pn-vidrio: .22;
  --pn-tapa: radial-gradient(120% 140% at 50% 0%, #5a606b 0%, #2a2e35 45%, #15171b 100%);
  --pn-tapa-lado: #06070a;
  --pn-tapa-texto: rgba(220, 235, 255, .55);

  /* mandos centrales y base */
  --consola: linear-gradient(180deg, rgba(36, 28, 20, .86), rgba(14, 10, 7, .92));
  --mando-metal: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .14), transparent 62%),
                 conic-gradient(from 0deg, #3b352e, #5c544a, #2c2823, #534b42, #2a2622, #5e564b, #3b352e);
  --mando-anillo: linear-gradient(180deg, #e9cd8c, #8a6324);
  --mando-icono: #f3dcaa;
  --base-fisica: linear-gradient(180deg, #2c2a2d 0%, #151417 45%, #09090b 100%);
  --base-filete: linear-gradient(90deg, transparent, #c99a48 15%, #ffe2a0 50%, #c99a48 85%, transparent);
  --estado-fondo: rgba(0, 0, 0, .42);
  --estado-texto: #dccfb9;
  --estado-fuerte: #fff4dc;
  --peligro-reloj: #ff3b30;
}

/* ── Oscuro: titanio y cristal negro ── */
:root[data-tema="oscuro"] {
  --pb-metal: var(--cepillado), linear-gradient(135deg, #8a949f 0%, #2a3038 22%, #9aa4af 42%, #1b2027 62%, #5d6772 82%, #161a1f 100%);
  --pn-metal: var(--pb-metal);
  --pb-fondo: radial-gradient(130% 95% at 50% 28%, #1c242f 0%, #0e131a 55%, #06080c 100%);
  --pn-fondo: var(--pb-fondo);
  --pb-esfera: repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px);
  --pn-esfera: var(--pb-esfera);
  --pb-vineta: rgba(0, 0, 0, .55); --pn-vineta: rgba(0, 0, 0, .55);
  --pb-texto: #f6efe4; --pb-suave: #a99d8b;
  --pn-texto: #e8f2ff; --pn-suave: #93a7bf;
  --pb-digito: #fff1da; --pb-digito-alto: #ffffff; --pb-digito-bajo: #f0c27a; --pb-faceta: rgba(80, 40, 0, .22);
  --pn-digito: #e3f1ff; --pn-digito-alto: #ffffff; --pn-digito-bajo: #8fc4ff; --pn-faceta: rgba(0, 30, 80, .24);
  --pb-apagado: rgba(255, 235, 200, .05); --pn-apagado: rgba(200, 225, 255, .05);
  --pb-halo: drop-shadow(0 0 2px rgba(255, 220, 160, .6)) drop-shadow(0 0 14px rgba(255, 170, 60, .35));
  --pn-halo: drop-shadow(0 0 2px rgba(170, 210, 255, .6)) drop-shadow(0 0 14px rgba(60, 140, 255, .4));
  --pb-halo-peligro: var(--pn-halo-peligro);
  --pb-peligro: #ff4a3d; --pb-peligro-alto: #ffb0a8; --pb-peligro-bajo: #e0160b;
  --pb-brillo: rgba(255, 176, 64, .9); --pb-led: #ffb547;
  --pn-brillo: rgba(56, 148, 255, .95); --pn-led: #4cb2ff;
  --pb-vidrio: .2; --pn-vidrio: .2;
  --pb-tapa: radial-gradient(120% 140% at 50% 0%, #f4f6f8 0%, #d9dee4 50%, #b9c0c9 100%); --pb-tapa-lado: #7d8590; --pb-tapa-texto: rgba(20, 30, 40, .5);
  --consola: linear-gradient(180deg, rgba(26, 33, 42, .88), rgba(8, 11, 15, .94));
  --mando-metal: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .14), transparent 62%),
                 conic-gradient(from 0deg, #2e353d, #4f5863, #232930, #48515b, #20252b, #525b66, #2e353d);
  --mando-anillo: linear-gradient(180deg, #b8c2cc, #4a535d);
  --mando-icono: #e6eef7;
  --base-fisica: linear-gradient(180deg, #262c33 0%, #13171c 45%, #080a0d 100%);
  --base-filete: linear-gradient(90deg, transparent, rgba(160, 175, 190, .5) 20%, rgba(230, 240, 250, .8) 50%, rgba(160, 175, 190, .5) 80%, transparent);
  --estado-texto: #b7c3d1; --estado-fuerte: #ffffff;
}

/* ── Claro: aluminio y esmalte blanco, al estilo Braun ── */
:root[data-tema="claro"] {
  --pb-metal: var(--cepillado), linear-gradient(135deg, #fbfcfd 0%, #c3cad3 22%, #ffffff 42%, #a9b1bb 62%, #e6eaef 82%, #9aa3ad 100%);
  --pn-metal: var(--cepillado), linear-gradient(135deg, #9aa3ad 0%, #3f4650 22%, #a9b2bc 42%, #2c3239 62%, #6c7580 82%, #22272d 100%);
  --pb-fondo: radial-gradient(130% 95% at 50% 25%, #ffffff 0%, #f6f7f9 55%, #e7eaee 100%);
  --pn-fondo: radial-gradient(130% 95% at 50% 25%, #2b3038 0%, #1b1f25 55%, #111317 100%);
  --pb-esfera: none; --pn-esfera: none;
  --pb-vineta: rgba(40, 60, 90, .12); --pn-vineta: rgba(0, 0, 0, .45);
  --pb-texto: #161b22; --pb-suave: #6b7684;
  --pn-texto: #f4f6f9; --pn-suave: #a3adba;
  --pb-digito: #1a1e24; --pb-digito-alto: #3d444d; --pb-digito-bajo: #07090b; --pb-faceta: rgba(0, 0, 0, .3);
  --pn-digito: #f6f8fb; --pn-digito-alto: #ffffff; --pn-digito-bajo: #c9d2dd; --pn-faceta: rgba(0, 10, 30, .2);
  --pb-apagado: rgba(10, 30, 60, .05); --pn-apagado: rgba(255, 255, 255, .05);
  --pb-halo: drop-shadow(0 1px 0 rgba(255, 255, 255, 1)) drop-shadow(0 2px 2px rgba(20, 30, 50, .16));
  --pn-halo: drop-shadow(0 0 10px rgba(255, 255, 255, .18));
  --pb-brillo: color-mix(in srgb, var(--acento) 80%, transparent); --pb-led: var(--acento);
  --pn-brillo: color-mix(in srgb, var(--acento) 80%, transparent); --pn-led: var(--acento);
  --pb-vidrio: .6; --pn-vidrio: .14;
  --pb-tapa: radial-gradient(120% 140% at 50% 0%, #ffffff 0%, #f3f5f8 50%, #dde2e8 100%); --pb-tapa-lado: #a7afba; --pb-tapa-texto: rgba(20, 30, 45, .45);
  --pn-tapa: radial-gradient(120% 140% at 50% 0%, #4d545e 0%, #2a2f36 50%, #181b20 100%); --pn-tapa-lado: #0b0d10;
  --consola: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(226, 231, 238, .92));
  --mando-metal: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .7), transparent 62%),
                 conic-gradient(from 0deg, #e3e7ec, #ffffff, #cfd5dc, #f6f8fa, #c9d0d8, #ffffff, #e3e7ec);
  --mando-anillo: linear-gradient(180deg, #ffffff, #9aa3ad);
  --mando-icono: #262d36;
  --base-fisica: linear-gradient(180deg, #f3f5f8 0%, #dde2e8 50%, #c5ccd5 100%);
  --base-filete: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9) 30%, #fff 50%, rgba(255, 255, 255, .9) 70%, transparent);
  --estado-fondo: rgba(255, 255, 255, .55); --estado-texto: #4a5562; --estado-fuerte: #10151b;
}

/* ── LCD: reloj DGT de plástico negro, pantallas LCD verdosas y franjas rojas ── */
:root[data-tema="lcd"] {
  --pb-metal: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.2px) 0 0 / 4px 4px, linear-gradient(180deg, #333 0%, #1c1c1c 40%, #0f0f0f 100%);
  --pn-metal: var(--pb-metal);
  --pb-fondo: linear-gradient(180deg, #d3dccb 0%, #bfcab6 55%, #b0bca7 100%);
  --pn-fondo: var(--pb-fondo);
  --pb-esfera: linear-gradient(115deg, rgba(255, 255, 255, .0) 40%, rgba(255, 255, 255, .12) 55%, transparent 70%);
  --pn-esfera: var(--pb-esfera);
  --pb-vineta: rgba(30, 50, 20, .28); --pn-vineta: var(--pb-vineta);
  --pb-texto: #141c12; --pb-suave: #46523f;
  --pn-texto: #141c12; --pn-suave: #46523f;
  --pb-digito: #172015; --pb-digito-alto: #263123; --pb-digito-bajo: #0c110a; --pb-faceta: rgba(0, 0, 0, 0);
  --pn-digito: #172015; --pn-digito-alto: #263123; --pn-digito-bajo: #0c110a; --pn-faceta: rgba(0, 0, 0, 0);
  --pb-apagado: rgba(20, 45, 15, .075); --pn-apagado: rgba(20, 45, 15, .075);
  --pb-halo: drop-shadow(2px 3px 0 rgba(20, 40, 10, .16));
  --pn-halo: var(--pb-halo);
  --pb-halo-peligro: drop-shadow(2px 3px 0 rgba(20, 40, 10, .16)); --pn-halo-peligro: var(--pb-halo-peligro);
  --pb-peligro: #172015; --pb-peligro-alto: #263123; --pb-peligro-bajo: #0c110a;
  --pn-peligro: #172015; --pn-peligro-alto: #263123; --pn-peligro-bajo: #0c110a;
  --pb-brillo: rgba(228, 52, 38, .85); --pn-brillo: rgba(228, 52, 38, .85);
  --pb-led: #ff3a2a; --pn-led: #ff3a2a;
  --pb-vidrio: .35; --pn-vidrio: .35;
  --pb-tapa: radial-gradient(120% 140% at 50% 0%, #454545 0%, #262626 50%, #141414 100%); --pb-tapa-lado: #050505; --pb-tapa-texto: rgba(255, 255, 255, .5);
  --pn-tapa: var(--pb-tapa); --pn-tapa-lado: #050505; --pn-tapa-texto: rgba(255, 255, 255, .5);
  --consola: linear-gradient(180deg, #242424, #0d0d0d);
  --mando-metal: radial-gradient(circle at 50% 30%, #3a3a3a, #1a1a1a 70%);
  --mando-anillo: linear-gradient(180deg, #4a4a4a, #0a0a0a);
  --mando-icono: #f2f2f2;
  --base-fisica: radial-gradient(rgba(255, 255, 255, .03) 1px, transparent 1.2px) 0 0 / 4px 4px, linear-gradient(180deg, #2a2a2a 0%, #151515 50%, #0a0a0a 100%);
  --base-filete: linear-gradient(90deg, #c4271b, #ff4a3a 50%, #c4271b);
  --estado-fondo: #b9c4b0; --estado-texto: #2a3426; --estado-fuerte: #0c110a;
  --peligro-reloj: #172015;
}

/* ── Neón: tubos de luz sobre cristal negro ── */
:root[data-tema="neon"] {
  --pb-metal: linear-gradient(135deg, #fff1a8 0%, #ffb000 35%, #ff6a00 65%, #ff2e88 100%);
  --pn-metal: linear-gradient(135deg, #b8fbff 0%, #00e0ff 35%, #4d6bff 65%, #b44dff 100%);
  --pb-fondo: radial-gradient(130% 95% at 50% 25%, #1d1338 0%, #0d0920 55%, #05030d 100%);
  --pn-fondo: var(--pb-fondo);
  --pb-esfera: linear-gradient(transparent 94%, rgba(180, 77, 255, .12) 94%) 0 0 / 100% 12%, linear-gradient(90deg, transparent 94%, rgba(0, 229, 255, .08) 94%) 0 0 / 8% 100%;
  --pn-esfera: var(--pb-esfera);
  --pb-vineta: rgba(0, 0, 0, .6); --pn-vineta: rgba(0, 0, 0, .6);
  --pb-texto: #ffe9a0; --pb-suave: #d0a8ff;
  --pn-texto: #b9fbff; --pn-suave: #c9a8ff;
  --pb-digito: #ffd84a; --pb-digito-alto: #fff6c4; --pb-digito-bajo: #ff9a00; --pb-faceta: rgba(120, 30, 0, .22);
  --pn-digito: #74f6ff; --pn-digito-alto: #e6feff; --pn-digito-bajo: #00b2e6; --pn-faceta: rgba(0, 30, 90, .22);
  --pb-apagado: rgba(255, 216, 74, .05); --pn-apagado: rgba(116, 246, 255, .05);
  --pb-halo: drop-shadow(0 0 3px rgba(255, 200, 40, .95)) drop-shadow(0 0 18px rgba(255, 120, 0, .75));
  --pn-halo: drop-shadow(0 0 3px rgba(0, 229, 255, .95)) drop-shadow(0 0 18px rgba(0, 150, 255, .75));
  --pb-halo-peligro: drop-shadow(0 0 3px rgba(255, 80, 120, .95)) drop-shadow(0 0 18px rgba(255, 0, 80, .75)); --pn-halo-peligro: var(--pb-halo-peligro);
  --pb-peligro: #ff3d7f; --pb-peligro-alto: #ffc2d6; --pb-peligro-bajo: #ff0055;
  --pn-peligro: #ff3d7f; --pn-peligro-alto: #ffc2d6; --pn-peligro-bajo: #ff0055;
  --pb-brillo: rgba(255, 170, 0, .95); --pn-brillo: rgba(0, 220, 255, .95);
  --pb-led: #ffc400; --pn-led: #00e5ff;
  --pb-vidrio: .14; --pn-vidrio: .14;
  --pb-tapa: radial-gradient(120% 140% at 50% 0%, #3a2a5a 0%, #1d1433 55%, #0f0a1d 100%); --pb-tapa-lado: #07040e; --pb-tapa-texto: rgba(255, 225, 140, .7);
  --pn-tapa: var(--pb-tapa); --pn-tapa-lado: #07040e; --pn-tapa-texto: rgba(150, 245, 255, .7);
  --consola: linear-gradient(180deg, rgba(30, 20, 60, .82), rgba(10, 6, 22, .92));
  --mando-metal: radial-gradient(circle at 50% 35%, #2e2252, #120c26 75%);
  --mando-anillo: linear-gradient(135deg, #ff4dd8, #6a3cff 50%, #00e5ff);
  --mando-icono: #f2e6ff;
  --base-fisica: linear-gradient(180deg, #1e1638 0%, #0e0a1e 50%, #06040e 100%);
  --base-filete: linear-gradient(90deg, transparent, #ffb000 15%, #ff2e88 40%, #b44dff 60%, #00e5ff 85%, transparent);
  --estado-fondo: rgba(0, 0, 0, .4); --estado-texto: #cdb5ff; --estado-fuerte: #ffffff;
}

/* ── Gran maestro: laca negra, oro amarillo y rutenio (tema de lujo) ── */
:root[data-tema="gran-maestro"] {
  --pb-metal: var(--cepillado), linear-gradient(135deg, #fff3c9 0%, #d8a748 18%, #fff8df 36%, #b17b22 55%, #f8dc8f 75%, #7a5212 100%);
  --pn-metal: var(--cepillado), linear-gradient(135deg, #7d7d7d 0%, #1f1f1f 22%, #8a8a8a 40%, #121212 60%, #545454 80%, #0b0b0b 100%);
  --pb-fondo: radial-gradient(130% 95% at 50% 22%, #1e1b16 0%, #0c0b09 55%, #030303 100%);
  --pn-fondo: var(--pb-fondo);
  --pb-esfera: repeating-conic-gradient(from 0deg at 50% 46%, rgba(255, 210, 120, .025) 0 1.2deg, rgba(0, 0, 0, .06) 1.2deg 2.4deg);
  --pn-esfera: var(--pb-esfera);
  --pb-vineta: rgba(0, 0, 0, .6); --pn-vineta: rgba(0, 0, 0, .6);
  --pb-texto: #f6dfa4; --pb-suave: #b39762;
  --pn-texto: #ece6d8; --pn-suave: #a59a83;
  --pb-digito: #f4d27e; --pb-digito-alto: #fff3cc; --pb-digito-bajo: #b98330; --pb-faceta: rgba(90, 50, 0, .32);
  --pn-digito: #efe9dc; --pn-digito-alto: #ffffff; --pn-digito-bajo: #bfb39a; --pn-faceta: rgba(40, 30, 10, .28);
  --pb-apagado: rgba(255, 210, 120, .05); --pn-apagado: rgba(255, 245, 225, .045);
  --pb-halo: drop-shadow(0 0 2px rgba(255, 210, 120, .55)) drop-shadow(0 0 14px rgba(230, 160, 40, .4));
  --pn-halo: drop-shadow(0 0 2px rgba(255, 245, 225, .45)) drop-shadow(0 0 14px rgba(220, 190, 130, .28));
  --pb-halo-peligro: drop-shadow(0 0 2px rgba(255, 140, 130, .8)) drop-shadow(0 0 16px rgba(255, 40, 30, .6)); --pn-halo-peligro: var(--pb-halo-peligro);
  --pb-peligro: #ff4a3d; --pb-peligro-alto: #ffb0a8; --pb-peligro-bajo: #e0160b;
  --pb-brillo: rgba(240, 190, 90, .92); --pn-brillo: rgba(240, 190, 90, .92);
  --pb-led: #ffd27a; --pn-led: #ffd27a;
  --pb-vidrio: .2; --pn-vidrio: .2;
  --pb-tapa: radial-gradient(120% 140% at 50% 0%, #fffdf6 0%, #f6efdf 45%, #e0d3b8 100%); --pb-tapa-lado: #a8946a; --pb-tapa-texto: rgba(90, 64, 20, .55);
  --pn-tapa: radial-gradient(120% 140% at 50% 0%, #3c3c3c 0%, #1a1a1a 45%, #070707 100%); --pn-tapa-lado: #000; --pn-tapa-texto: rgba(245, 215, 150, .6);
  --consola: linear-gradient(180deg, rgba(22, 20, 17, .9), rgba(4, 4, 4, .95));
  --mando-metal: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .12), transparent 62%),
                 conic-gradient(from 0deg, #1c1b19, #3b3833, #121110, #34312c, #0f0e0d, #3a3732, #1c1b19);
  --mando-anillo: linear-gradient(180deg, #ffe7a6, #8a6324);
  --mando-icono: #f4d892;
  --base-fisica: linear-gradient(180deg, #1d1c1b 0%, #0c0c0c 45%, #030303 100%);
  --base-filete: linear-gradient(90deg, transparent, #b8862f 12%, #ffe9a8 50%, #b8862f 88%, transparent);
  --estado-fondo: rgba(0, 0, 0, .5); --estado-texto: #cdb58a; --estado-fuerte: #ffe6a8;
}

/* ═══ Barra superior en la escena ═══════════════════════════════════════ */
.barra-reloj {
  position: relative; z-index: 2; color: #fbf3e4;
  padding-top: max(14px, env(safe-area-inset-top));
  padding-left: max(clamp(14px, 3vw, 28px), env(safe-area-inset-left));
  padding-right: max(clamp(14px, 3vw, 28px), env(safe-area-inset-right));
}
.barra-reloj .titulo { text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
:root[data-tema="claro"] .barra-reloj { color: var(--texto); }
:root[data-tema="claro"] .barra-reloj .titulo { text-shadow: none; }
:root[data-tema="lcd"] .barra-reloj { color: #2b1b0c; }
:root[data-tema="lcd"] .barra-reloj .titulo { text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
:root[data-tema="gran-maestro"] .barra-reloj .titulo { color: #f3d692; }
.btn-icono.vidrio { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); color: inherit; backdrop-filter: blur(8px); }
.btn-icono.vidrio:hover { background: rgba(255, 255, 255, .22); }
.btn-icono.vidrio.acento { background: linear-gradient(180deg, var(--acento), var(--acento-2)); color: #fff; border-color: rgba(255, 255, 255, .3); box-shadow: 0 0 18px var(--acento-suave); }
:root[data-tema="claro"] .btn-icono.vidrio:not(.acento), :root[data-tema="lcd"] .btn-icono.vidrio:not(.acento) { background: rgba(255, 255, 255, .7); border-color: rgba(0, 0, 0, .12); }
.insignia-control {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 99px;
  font-weight: 700; font-size: 14px; letter-spacing: .3px;
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(8px);
}
.insignia-control:empty { display: none; }
:root[data-tema="claro"] .insignia-control, :root[data-tema="lcd"] .insignia-control { background: rgba(255, 255, 255, .78); border-color: rgba(0, 0, 0, .1); color: #1b2430; }

/* ═══ Disposición ═══════════════════════════════════════════════════════ */
.reloj {
  --bisel: clamp(7px, 1vw, 12px);
  --radio-panel: clamp(18px, 2.6vw, 34px);
  position: relative; z-index: 1; flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch;
  gap: clamp(10px, 2vw, 30px);
  padding: 6px max(clamp(12px, 3vw, 40px), env(safe-area-inset-right)) 12px max(clamp(12px, 3vw, 40px), env(safe-area-inset-left));
}
.mandos { align-self: center; }

/* Vertical (pantallas verticales o elegido en la configuración) */
.reloj.vertical {
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  padding-inline: max(clamp(12px, 5vw, 80px), env(safe-area-inset-left)) max(clamp(12px, 5vw, 80px), env(safe-area-inset-right));
  gap: clamp(8px, 1.6vh, 18px);
}
.reloj.vertical .mandos { justify-self: center; }
/* Cara a cara: el panel de arriba se gira para el jugador de enfrente */
.reloj.vertical.cara-a-cara #panel-blancas .panel-marco { transform: rotate(180deg); }
.reloj.invertido #panel-blancas { order: 3; }
.reloj.invertido #panel-negras { order: 1; }
.reloj.invertido .mandos { order: 2; }

/* ═══ Panel-instrumento ═════════════════════════════════════════════════ */
.panel {
  --p-metal: var(--pb-metal); --p-fondo: var(--pb-fondo); --p-esfera: var(--pb-esfera); --p-vineta: var(--pb-vineta);
  --p-texto: var(--pb-texto); --p-suave: var(--pb-suave);
  --p-digito: var(--pb-digito); --p-digito-alto: var(--pb-digito-alto); --p-digito-bajo: var(--pb-digito-bajo);
  --p-faceta: var(--pb-faceta); --p-apagado: var(--pb-apagado); --p-halo: var(--pb-halo); --p-halo-peligro: var(--pb-halo-peligro, var(--pn-halo-peligro));
  --p-peligro: var(--pb-peligro, var(--pn-peligro)); --p-peligro-alto: var(--pb-peligro-alto, var(--pn-peligro-alto)); --p-peligro-bajo: var(--pb-peligro-bajo, var(--pn-peligro-bajo));
  --p-brillo: var(--pb-brillo); --p-led: var(--pb-led); --p-vidrio: var(--pb-vidrio);
  position: relative; min-width: 0; min-height: 0;
  padding: var(--bisel); border: 0; border-radius: var(--radio-panel); cursor: pointer;
  background: var(--p-metal);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 2px rgba(0, 0, 0, .35),
    inset 1px 0 0 rgba(255, 255, 255, .18), inset -1px 0 0 rgba(0, 0, 0, .2),
    0 2px 2px rgba(0, 0, 0, .35), 0 18px 34px -8px rgba(0, 0, 0, .6), 0 46px 70px -30px rgba(0, 0, 0, .55);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .4s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  text-align: center; color: var(--p-texto);
  isolation: isolate;
}
.panel[data-lado="negras"] {
  --p-metal: var(--pn-metal); --p-fondo: var(--pn-fondo); --p-esfera: var(--pn-esfera); --p-vineta: var(--pn-vineta);
  --p-texto: var(--pn-texto); --p-suave: var(--pn-suave);
  --p-digito: var(--pn-digito); --p-digito-alto: var(--pn-digito-alto); --p-digito-bajo: var(--pn-digito-bajo);
  --p-faceta: var(--pn-faceta); --p-apagado: var(--pn-apagado); --p-halo: var(--pn-halo); --p-halo-peligro: var(--pn-halo-peligro);
  --p-peligro: var(--pn-peligro); --p-peligro-alto: var(--pn-peligro-alto); --p-peligro-bajo: var(--pn-peligro-bajo);
  --p-brillo: var(--pn-brillo); --p-led: var(--pn-led); --p-vidrio: var(--pn-vidrio);
}
.panel:focus-visible { outline: 3px solid var(--acento); outline-offset: 5px; }
/* destello del metal (luz cenital) */
.panel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(70% 55% at 28% 0%, rgba(255, 255, 255, .45), transparent 70%),
              radial-gradient(60% 40% at 80% 100%, rgba(255, 255, 255, .14), transparent 70%);
  mix-blend-mode: soft-light;
}
/* aro de luz del jugador con el turno */
.panel::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: -2;
  box-shadow: 0 0 0 1.5px var(--p-brillo), 0 0 26px 3px var(--p-brillo), 0 0 80px 12px color-mix(in srgb, var(--p-brillo) 40%, transparent);
  opacity: 0; transition: opacity .45s ease;
}
/* chaflán entre el bisel y la pantalla (la pantalla queda hundida) */
.panel-bisel {
  position: absolute; inset: calc(var(--bisel) - 3px); pointer-events: none;
  border-radius: calc(var(--radio-panel) - var(--bisel) + 3px);
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .2) 45%, rgba(255, 255, 255, .55));
}
.panel-marco {
  position: relative; z-index: 1; height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(8px, 3cqh, 22px) clamp(12px, 3cqw, 30px) clamp(8px, 2.6cqh, 18px);
  border-radius: calc(var(--radio-panel) - var(--bisel));
  background: var(--p-fondo);
  box-shadow: inset 0 3px 9px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 -1px 2px rgba(255, 255, 255, .12);
  container-type: size;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.panel-marco > * { position: relative; }
/* esfera: textura guilloché + viñeta */
.panel-esfera {
  position: absolute !important; inset: 0; pointer-events: none;
  background: radial-gradient(135% 105% at 50% 42%, transparent 52%, var(--p-vineta) 100%), var(--p-esfera, none);
}
/* cristal: reflejo curvo, filo de luz y barrido al cambiar el turno */
.panel-vidrio {
  position: absolute !important; inset: 0; pointer-events: none; border-radius: inherit; overflow: hidden;
  background:
    radial-gradient(150% 62% at 50% -24%, rgb(255 255 255 / calc(var(--p-vidrio) * .55)) 0%, rgb(255 255 255 / calc(var(--p-vidrio) * .16)) 60%, transparent 61%),
    linear-gradient(118deg, transparent 58%, rgb(255 255 255 / calc(var(--p-vidrio) * .16)) 64%, transparent 74%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / calc(var(--p-vidrio) * .8)), inset 0 0 0 1px rgb(255 255 255 / calc(var(--p-vidrio) * .12));
}
.panel-vidrio::after {
  content: ""; position: absolute; top: -30%; bottom: -30%; left: -45%; width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, .06) 70%, transparent);
  transform: skewX(-16deg); opacity: 0;
}
.reloj.en-juego .panel.activo .panel-vidrio::after { animation: barrido 1.15s cubic-bezier(.25, .7, .2, 1) both; }
@keyframes barrido {
  0% { opacity: 1; transform: translateX(0) skewX(-16deg); }
  100% { opacity: 1; transform: translateX(440%) skewX(-16deg); }
}
.panel[data-lado="blancas"] .panel-vidrio::after { background: linear-gradient(90deg, transparent, rgba(255, 220, 150, .1) 30%, rgba(255, 236, 190, .6) 50%, rgba(255, 220, 150, .1) 70%, transparent); }

/* testigo luminoso del turno */
.panel-led {
  position: absolute !important; z-index: 2; top: clamp(9px, 4cqh, 20px); left: clamp(10px, 3.6cqw, 24px);
  width: clamp(8px, 2.6cqh, 13px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--p-led) 30%, #555), color-mix(in srgb, var(--p-led) 18%, #111) 70%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .25);
  transition: background .3s, box-shadow .3s;
}
.reloj.en-juego .panel.activo .panel-led {
  background: radial-gradient(circle at 40% 35%, #fff, var(--p-led) 45%, color-mix(in srgb, var(--p-led) 70%, #000));
  box-shadow: 0 0 6px 1px var(--p-led), 0 0 18px 4px color-mix(in srgb, var(--p-led) 55%, transparent);
}
.panel.apuro .panel-led, .panel.sin-tiempo .panel-led { --p-led: #ff3b30; }

/* cabecera: pieza + nombre + Elo */
.panel-cabeza { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2cqw, 14px); min-height: 0; padding-inline: 6%; }
.panel-pieza {
  font-size: clamp(20px, 8cqh, 56px); line-height: 1; color: var(--p-texto);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
  display: inline-grid; place-items: center;
}
.panel-pieza svg, .panel-pieza .pz { width: 1.05em; height: 1.05em; display: block; overflow: visible; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.panel-pieza:has(svg) { filter: none; }
:root:is([data-tema="tablero"], :not([data-tema])) .panel[data-lado="blancas"] .panel-pieza:not(:has(svg)) { color: #fffaf0; -webkit-text-stroke: 1.2px #3a2a14; }
.panel-nombre {
  /* el tamaño depende del alto Y del ancho del panel: en paneles angostos el nombre cabe entero */
  font-family: var(--fuente-titulo); font-weight: 600; font-size: clamp(15px, min(6cqh, 7.5cqw), 42px); letter-spacing: .01em;
  line-height: 1.1; max-width: 74%; overflow: hidden; text-align: center;
  /* en paneles angostos el nombre pasa a dos líneas antes que cortarse */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere;
  text-shadow: 0 1px 0 rgb(255 255 255 / calc(var(--p-vidrio) * .5));
}
.panel[data-lado="negras"] .panel-nombre, :root:is([data-tema="oscuro"], [data-tema="neon"], [data-tema="gran-maestro"]) .panel-nombre { text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
:root[data-tema="claro"] .panel[data-lado="blancas"] .panel-nombre, :root[data-tema="lcd"] .panel-nombre { text-shadow: none; }
.panel-elo {
  font: 700 clamp(10px, 2.8cqh, 15px) var(--fuente-num); letter-spacing: .08em; color: var(--p-suave);
  padding: .2em .6em; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--p-suave) 45%, transparent);
}
.panel-elo:empty { display: none; }

/* ═══ Dígitos ═══════════════════════════════════════════════════════════ */
.panel-tiempo {
  --digito: var(--p-digito); --digito-alto: var(--p-digito-alto); --digito-bajo: var(--p-digito-bajo);
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5cqh 0;
  color: var(--p-texto);
  transition: opacity .4s ease, filter .4s ease;
}
.panel.apuro .panel-tiempo, .panel.sin-tiempo .panel-tiempo { --digito: var(--p-peligro); --digito-alto: var(--p-peligro-alto); --digito-bajo: var(--p-peligro-bajo); --p-halo: var(--p-halo-peligro); }
.panel-tiempo .digitos-svg { width: 100%; height: 100%; max-height: 66cqh; overflow: visible; filter: var(--p-halo); }
.panel-tiempo .seg .cara { transition: fill .25s ease; }
.panel-tiempo .seg .bisel { fill: var(--p-faceta); }
.panel-tiempo .seg.apagado .cara { fill: var(--p-apagado); }
.panel-tiempo .seg.apagado .bisel { fill: transparent; }

/* Nixie */
.panel-tiempo[data-estilo="nixie"] {
  --tubo: rgba(28, 18, 12, .82); --tubo-borde: rgba(255, 196, 140, .22);
  --nixie: #ff7a14; --nixie-centro: #ffd29a; --nixie-resplandor: rgba(255, 110, 20, .22);
}
.panel.apuro .panel-tiempo[data-estilo="nixie"], .panel.sin-tiempo .panel-tiempo[data-estilo="nixie"] { --nixie: #ff2a14; --nixie-centro: #ffb4a0; --nixie-resplandor: rgba(255, 40, 20, .3); }
.panel-tiempo .nixie-svg { max-height: 74cqh; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.nixie-tubo { stroke: rgba(255, 220, 180, .28); stroke-width: 1.2; }
.nixie-malla { stroke: rgba(255, 170, 110, .16); stroke-width: .6; fill: none; }
.nixie-fantasma {
  font: 300 90px "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; text-anchor: middle;
  fill: none; stroke: rgba(255, 175, 120, .16); stroke-width: 1;
}
.nixie-numeral {
  font: 300 90px "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; text-anchor: middle;
  fill: var(--nixie-centro); stroke: var(--nixie); stroke-width: 2.4; paint-order: stroke;
  filter: drop-shadow(0 0 3px var(--nixie)) drop-shadow(0 0 12px var(--nixie));
}
.nixie-reflejo { fill: rgba(255, 255, 255, .1); }
.nixie-bulbo { fill: var(--tubo); stroke: rgba(255, 220, 180, .25); stroke-width: 1; }
.nixie-neon { fill: var(--nixie-centro); filter: drop-shadow(0 0 3px var(--nixie)) drop-shadow(0 0 8px var(--nixie)); }

/* Moderna: tipografía fina con degradado */
.panel-tiempo .texto-moderno {
  font-family: var(--fuente-num); font-weight: 300; font-variant-numeric: tabular-nums lining-nums;
  font-size: min(54cqh, 28cqw); line-height: 1; letter-spacing: -.04em;
  background: linear-gradient(180deg, var(--digito-alto), var(--digito) 55%, var(--digito-bajo));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: var(--p-halo);
  padding: 0 .04em;
}
.panel-tiempo .texto-moderno small { font-size: .42em; font-weight: 300; letter-spacing: 0; margin-left: .04em; }

/* ═══ Progreso de la etapa (--fraccion) y retardo ═══════════════════════ */
.panel-progreso, .panel-retardo {
  height: clamp(2px, .8cqh, 4px); margin: 0 7% clamp(6px, 2.2cqh, 14px); border-radius: 4px;
  background: color-mix(in srgb, var(--p-texto) 10%, transparent);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25);
}
.panel-progreso i, .panel-retardo i {
  display: block; height: 100%; border-radius: inherit; position: relative;
  background: linear-gradient(90deg, color-mix(in srgb, var(--p-brillo) 25%, transparent), var(--p-brillo));
}
.panel-progreso i { width: calc(var(--fraccion, 1) * 100%); max-width: 100%; transition: background .3s; }
.panel-progreso i::after {
  content: ""; position: absolute; right: -3px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px 2px var(--p-brillo), 0 0 14px 4px color-mix(in srgb, var(--p-brillo) 50%, transparent);
  opacity: 0; transition: opacity .3s;
}
.reloj.en-juego .panel.activo .panel-progreso i::after { opacity: 1; }
.panel.apuro .panel-progreso i, .panel.sin-tiempo .panel-progreso i { --p-brillo: #ff3b30; }
:root[data-tema="lcd"] .panel-progreso { background: rgba(20, 40, 15, .12); }
:root[data-tema="lcd"] .panel-progreso i { background: #c4271b; }
:root[data-tema="lcd"] .panel-progreso i::after { display: none; }
.panel-retardo { visibility: hidden; margin-top: calc(-1 * clamp(3px, 1.4cqh, 9px)); }
.panel-retardo i { width: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--p-texto) 30%, transparent), var(--p-texto)); }
.panel-retardo.visible { visibility: visible; }

/* ═══ Datos del panel ═══════════════════════════════════════════════════ */
.panel-datos {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 0 2%;
}
.panel-datos > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.panel-datos > div + div { border-left: 1px solid color-mix(in srgb, var(--p-texto) 14%, transparent); }
.panel-datos span {
  font-size: clamp(8px, 2.3cqh, 12px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--p-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.panel-datos b { font-family: var(--fuente-num); font-size: clamp(13px, 4.4cqh, 28px); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .01em; }
.panel-control { font-size: clamp(10px, 2.5cqh, 14px); color: var(--p-suave); margin-top: 6px; min-height: 1.2em; letter-spacing: .03em; }
.panel-control:empty { display: none; }

@container (max-height: 270px) {
  .panel-datos, .panel-control { display: none; }
  .panel-progreso { margin-bottom: 4px; }
}
@container (max-height: 150px) {
  .panel-cabeza { display: none; }
  .panel-tiempo .digitos-svg { max-height: 78cqh; }
}
@container (max-width: 400px) {
  .panel-datos { grid-template-columns: repeat(2, 1fr); row-gap: 6px; }
  .panel-datos > div:nth-child(3) { border-left: 0; }
}

/* ═══ Estados ═══════════════════════════════════════════════════════════ */
.reloj.en-juego .panel:not(.activo) { filter: brightness(.94) saturate(.88); }
.reloj.en-juego .panel:not(.activo) .panel-tiempo { opacity: .8; }
.reloj.en-juego .panel.activo { transform: translateY(-3px); }
.reloj.en-juego .panel.activo::after { opacity: 1; }
:root[data-tema="neon"] .panel::after { opacity: .45; }
:root[data-tema="neon"] .reloj.en-juego .panel.activo::after { opacity: 1; }
:root[data-tema="neon"] .reloj.en-juego .panel:not(.activo) { filter: brightness(.7) saturate(.8); }
.panel:not(.activo):active { transform: translateY(1px) scale(.992); }

/* pausa: el reloj del turno «respira» */
.reloj.pausado .panel.activo .panel-tiempo { animation: latido 2.4s ease-in-out infinite; }
.reloj.pausado .panel.activo::after { animation: latido-aro 2.4s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .38; } }
@keyframes latido-aro { 50% { opacity: .35; } }

/* apuro: alarma roja elegante (aro y aura interior laten) */
.panel.apuro, .panel.sin-tiempo { --p-brillo: rgba(255, 52, 40, .95); }
.panel.apuro .panel-vidrio::before, .panel.sin-tiempo .panel-vidrio::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(255, 60, 50, .55), inset 0 0 50px 6px rgba(255, 40, 30, .32);
}
.panel.apuro.activo::after { animation: alarma 1s ease-in-out infinite; }
.panel.apuro.activo .panel-vidrio::before { animation: alarma-aura 1s ease-in-out infinite; }
@keyframes alarma { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes alarma-aura { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.panel.sin-tiempo::after { opacity: 1; }
:root[data-tema="lcd"] .panel.apuro .panel-vidrio::before, :root[data-tema="lcd"] .panel.sin-tiempo .panel-vidrio::before { box-shadow: inset 0 0 0 3px rgba(200, 30, 20, .6); }

/* ═══ Sello de fin de partida ═══════════════════════════════════════════ */
.panel-sello {
  position: absolute !important; inset: 0; z-index: 5; display: none; place-items: center; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .28), transparent);
}
.panel-sello.visible { display: grid; }
.panel-marco:has(.panel-sello.visible) .panel-tiempo { opacity: .22; filter: blur(2px) saturate(.5); }
.panel-sello span {
  --c: #e5322a;
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .4em;
  padding: .32em 1.05em .36em;
  font-family: var(--fuente-titulo); font-weight: 700; font-size: clamp(22px, 12cqh, 76px); letter-spacing: .16em; text-transform: uppercase;
  color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 0 18px rgba(255, 255, 255, .25);
  border-radius: .28em; transform: rotate(-5deg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, .12) 52%, rgba(0, 0, 0, .25)),
    var(--c);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .55), inset 0 0 0 4px color-mix(in srgb, var(--c) 70%, #000),
    0 0 0 3px color-mix(in srgb, var(--c) 55%, #000), 0 0 0 5px rgba(255, 255, 255, .45),
    0 18px 40px rgba(0, 0, 0, .5), 0 0 70px 10px color-mix(in srgb, var(--c) 55%, transparent);
  animation: sello .7s cubic-bezier(.18, 1.45, .4, 1) both;
}
.panel-sello span::after {
  content: ""; position: absolute; top: -50%; bottom: -50%; left: -60%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  transform: skewX(-20deg); animation: brillo-sello 1.4s .55s ease-out both;
}
.panel-sello .icono { width: .82em; height: .82em; flex: none; }
.panel-sello.perdio span { --c: #d8281f; }
.panel-sello.gano span { --c: #13945a; }
.panel-sello.tablas span { --c: #c98a12; }
:root:is([data-tema="tablero"], [data-tema="gran-maestro"], :not([data-tema])) .panel-sello.gano span {
  --c: #b9862c; color: #fffaf0;
  background: var(--cepillado), linear-gradient(180deg, #ffeab0 0%, #d9a748 45%, #a8731f 55%, #e8c070 100%);
  text-shadow: 0 1px 0 rgba(90, 55, 5, .7), 0 0 14px rgba(255, 240, 200, .5);
}
@keyframes sello {
  0% { opacity: 0; transform: rotate(-14deg) scale(2.2); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: rotate(-5deg) scale(1); }
}
@keyframes brillo-sello { from { transform: translateX(0) skewX(-20deg); } to { transform: translateX(520%) skewX(-20deg); } }

/* ═══ Mandos centrales (consola) ════════════════════════════════════════ */
.mandos {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(8px, 1.6vh, 14px);
  padding: 16px 11px; border-radius: 999px;
  background: var(--consola);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 -2px 6px rgba(0, 0, 0, .4),
              0 0 0 1px rgba(0, 0, 0, .35), 0 20px 40px rgba(0, 0, 0, .45);
  backdrop-filter: blur(10px);
}
:root[data-tema="claro"] .mandos { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .08), 0 18px 34px rgba(30, 40, 60, .18); }
.mando {
  position: relative;
  width: 50px; height: 50px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--mando-metal); color: var(--mando-icono);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .55), 0 0 0 3px rgba(255, 255, 255, .06),
    inset 0 1px 1px rgba(255, 255, 255, .35), inset 0 -2px 3px rgba(0, 0, 0, .4),
    0 5px 10px rgba(0, 0, 0, .45);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, opacity .2s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
/* anillo metálico pulido */
.mando::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; z-index: -1;
  background: var(--mando-anillo);
}
.mando:hover { filter: brightness(1.15); }
.mando:active { transform: translateY(1px) scale(.96); box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 2px 5px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .4); }
.mando:disabled { opacity: .32; pointer-events: none; }
.mando .icono { width: 22px; height: 22px; stroke-width: 2.1; }
.mando.apagado { color: #ff5a4e; }
:root[data-tema="claro"] .mando { box-shadow: 0 0 0 1px rgba(0, 0, 0, .14), inset 0 1px 1px #fff, inset 0 -2px 3px rgba(0, 0, 0, .12), 0 4px 10px rgba(30, 40, 60, .2); }
:root[data-tema="claro"] .mando.apagado { color: #d8281f; }

/* principal: cúpula de cristal con aro de luz */
.mando-principal {
  width: 76px; height: 76px; color: #fff;
  background:
    radial-gradient(70% 45% at 50% 18%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 100%),
    radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--acento) 85%, #fff) 0%, var(--acento) 45%, color-mix(in srgb, var(--acento-2) 80%, #000) 100%);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .6), 0 0 0 4px color-mix(in srgb, var(--acento) 35%, transparent),
    inset 0 -6px 12px rgba(0, 0, 0, .3), inset 0 2px 2px rgba(255, 255, 255, .5),
    0 0 30px 4px color-mix(in srgb, var(--acento) 55%, transparent), 0 10px 20px rgba(0, 0, 0, .5);
}
.mando-principal::before { inset: -5px; }
.mando-principal .icono { width: 34px; height: 34px; filter: none; }
.mando-principal:active { box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), inset 0 3px 10px rgba(0, 0, 0, .45), 0 0 18px 2px color-mix(in srgb, var(--acento) 50%, transparent); }
:root[data-tema="lcd"] .mando-principal {
  background: radial-gradient(70% 45% at 50% 18%, rgba(255, 255, 255, .35), transparent), radial-gradient(circle at 50% 60%, #e8473a, #c4271b 50%, #7c120b);
  box-shadow: 0 0 0 1px #000, inset 0 -6px 12px rgba(0, 0, 0, .3), inset 0 2px 2px rgba(255, 255, 255, .4), 0 8px 16px rgba(0, 0, 0, .55);
}
:root[data-tema="neon"] .mando-principal {
  background: radial-gradient(70% 45% at 50% 18%, rgba(255, 255, 255, .55), transparent), radial-gradient(circle at 50% 60%, #d68bff, #b44dff 45%, #4a137f);
  box-shadow: 0 0 0 1px #000, inset 0 -6px 12px rgba(0, 0, 0, .3), 0 0 34px 6px rgba(180, 77, 255, .8), 0 0 0 4px rgba(0, 229, 255, .35);
}
:root[data-tema="gran-maestro"] .mando-principal {
  color: #3a2608;
  background: radial-gradient(70% 45% at 50% 18%, rgba(255, 255, 255, .75), transparent), radial-gradient(circle at 50% 60%, #ffe9ae, #d9a748 50%, #8a5d18);
  box-shadow: 0 0 0 1px #000, inset 0 -6px 12px rgba(80, 40, 0, .3), inset 0 2px 2px rgba(255, 255, 255, .6), 0 0 30px 4px rgba(240, 190, 90, .5), 0 10px 20px rgba(0, 0, 0, .5);
}

/* Vertical: consola horizontal */
.reloj.vertical .mandos { flex-direction: row; padding: 9px 16px; gap: clamp(8px, 2.2vw, 16px); }
.reloj.vertical .mando-principal { width: 64px; height: 64px; }

/* ═══ Base física con pulsadores ════════════════════════════════════════ */
.base-fisica {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr minmax(160px, auto) 1fr; align-items: center; gap: clamp(12px, 2.4vw, 28px);
  margin: 2px max(clamp(12px, 3vw, 40px), env(safe-area-inset-right)) max(12px, calc(env(safe-area-inset-bottom) + 6px)) max(clamp(12px, 3vw, 40px), env(safe-area-inset-left));
  padding: 14px clamp(16px, 3vw, 40px) 16px;
  border-radius: 28px 28px 38px 38px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 26%), var(--base-fisica);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -8px 14px rgba(0, 0, 0, .45), 0 2px 0 rgba(0, 0, 0, .5),
              0 22px 40px rgba(0, 0, 0, .55);
}
/* filete decorativo (oro, aluminio, rojo DGT…) */
.base-fisica::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 6px; height: 1px; pointer-events: none;
  background: var(--base-filete); opacity: .85;
}
:root[data-tema="lcd"] .base-fisica { border-bottom: 5px solid #c4271b; }
:root[data-tema="lcd"] .base-fisica::before { top: 7px; height: 2px; left: 5%; right: 5%; opacity: 1; box-shadow: 0 0 8px rgba(255, 60, 40, .5); }
:root[data-tema="claro"] .base-fisica { box-shadow: inset 0 1px 0 #fff, inset 0 -6px 12px rgba(0, 0, 0, .08), 0 1px 0 rgba(0, 0, 0, .15), 0 18px 34px rgba(30, 40, 60, .22); }
:root[data-tema="neon"] .base-fisica { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 0 0 1px rgba(180, 77, 255, .35), 0 0 30px rgba(180, 77, 255, .25), 0 22px 40px rgba(0, 0, 0, .55); }
.base-fisica.oculta { display: none; }

.pulsador {
  --tapa: var(--pb-tapa); --tapa-lado: var(--pb-tapa-lado); --tapa-texto: var(--pb-tapa-texto); --aro: var(--pb-metal); --luz: var(--pb-brillo);
  --elev: 3px;
  position: relative; height: 74px; width: 100%; max-width: 460px; justify-self: center; min-width: 0; border: 0; padding: 0; cursor: pointer; background: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: --elev .14s cubic-bezier(.3, .7, .3, 1);
}
.pulsador[data-lado="negras"] { --tapa: var(--pn-tapa); --tapa-lado: var(--pn-tapa-lado); --tapa-texto: var(--pn-tapa-texto); --aro: var(--pn-metal); --luz: var(--pn-brillo); }
:root[data-tema="lcd"] .pulsador { --aro: linear-gradient(180deg, #3a3a3a, #111); }
/* hueco en la carcasa */
.pulsador .pozo {
  position: absolute; inset: 4px -2px -4px; border-radius: 24px;
  background: linear-gradient(180deg, #020203, #17181b);
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, .95), 0 1px 0 rgba(255, 255, 255, .14);
}
:root[data-tema="claro"] .pulsador .pozo { background: linear-gradient(180deg, #7e8792, #b9c1cb); box-shadow: inset 0 4px 8px rgba(0, 0, 0, .45), 0 1px 0 #fff; }
/* aro metálico que se ilumina cuando es el turno */
.pulsador .aro {
  position: absolute; inset: 6px 0 -2px; border-radius: 22px;
  background: var(--aro);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 2px rgba(0, 0, 0, .5);
  transition: box-shadow .3s ease, filter .3s ease;
  filter: brightness(.72) saturate(.85);
}
.pulsador.arriba .aro {
  filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 1px var(--luz), 0 0 22px 4px var(--luz), 0 0 50px 8px color-mix(in srgb, var(--luz) 45%, transparent);
}
/* tapa: superficie + canto (el canto crece cuando está levantada) */
.pulsador .tapa {
  position: absolute; inset: 10px 5px 4px; border-radius: 17px;
  background: var(--tapa);
  transform: translateY(calc(-1 * var(--elev)));
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, .55), inset 0 -3px 6px rgba(0, 0, 0, .18),
    0 var(--elev) 0 var(--tapa-lado),
    0 calc(var(--elev) + 4px) 10px rgba(0, 0, 0, .55);
}
.pulsador .tapa::after {
  content: ""; position: absolute; inset: 5px 8% auto; height: 38%; border-radius: 12px 12px 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  opacity: .5; pointer-events: none;
}
.pulsador[data-lado="negras"] .tapa { box-shadow: inset 0 1px 1px rgba(255, 255, 255, .25), inset 0 -3px 6px rgba(0, 0, 0, .3), 0 var(--elev) 0 var(--tapa-lado), 0 calc(var(--elev) + 4px) 10px rgba(0, 0, 0, .6); }
.pulsador[data-lado="negras"] .tapa::after { opacity: .18; }
.pulsador.arriba { --elev: 12px; }
.pulsador:active, .pulsador.golpe { --elev: 0px; }
.pulsador kbd {
  position: absolute; left: 50%; top: calc(50% + 3px); transform: translate(-50%, calc(-50% - var(--elev)));
  font: 700 11.5px var(--fuente); color: var(--tapa-texto); pointer-events: none;
  max-width: 88%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: none; border: 0; box-shadow: none; padding: 0; white-space: nowrap; letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.pulsador[data-lado="negras"] kbd, :root:is([data-tema="lcd"], [data-tema="neon"]) .pulsador kbd { text-shadow: 0 -1px 0 rgba(0, 0, 0, .6); }

.estado-reloj {
  justify-self: center; text-align: center; color: var(--estado-texto); font-size: 13.5px; line-height: 1.35;
  padding: 8px 16px; border-radius: 12px; max-width: 420px;
  background: var(--estado-fondo);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .08);
}
.estado-reloj b { color: var(--estado-fuerte); }
:root[data-tema="claro"] .estado-reloj { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12), 0 1px 0 #fff; }
:root[data-tema="lcd"] .estado-reloj { font-weight: 600; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35), 0 0 0 3px #1a1a1a, 0 0 0 4px #333; }

/* ═══ Pantallas medianas / pequeñas ═════════════════════════════════════ */
@media (max-width: 760px) {
  .barra-reloj .titulo span:last-child { display: none; }
  .mando { width: 44px; height: 44px; }
  .mando .icono { width: 20px; height: 20px; }
  .mando-principal, .reloj.vertical .mando-principal { width: 58px; height: 58px; }
  .mando-principal .icono { width: 28px; height: 28px; }
  .reloj.vertical .mandos { gap: 8px; padding: 7px 12px; }
  .base-fisica { grid-template-columns: 1fr 1fr; padding: 12px 14px 14px; border-radius: 24px 24px 30px 30px; }
  .estado-reloj { display: none; }
  .pulsador { height: 62px; }
  .pulsador.arriba { --elev: 9px; }
}
@media (max-width: 400px) {
  /* 7 mandos en 360 px: se achican y la fila no se sale de la pantalla */
  .reloj.vertical .mandos { gap: 4px; padding: 5px 8px; max-width: 100%; justify-self: center; }
  .reloj.vertical .mando { width: 39px; height: 39px; }
  .reloj.vertical .mando-principal { width: 52px; height: 52px; }
  .reloj.vertical .mando:not(.mando-principal)::before { inset: -2px; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .base-fisica { padding-block: 10px 12px; }
  .pulsador { height: 60px; }
  .pulsador.arriba { --elev: 9px; }
  .mando { width: 46px; height: 46px; }
  .mando-principal { width: 68px; height: 68px; }
}
@media (max-height: 640px) {
  .barra-reloj { min-height: 54px; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 8px; }
  .reloj:not(.vertical) .mandos { gap: 8px; padding: 12px 9px; }
}

/* Celular en horizontal: sin base, barra compacta, consola en 2 columnas, dígitos enormes */
@media (max-height: 500px) and (orientation: landscape) {
  .barra-reloj { min-height: 44px; padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 2px; gap: 8px; }
  .barra-reloj .titulo { font-size: 17px; }
  .barra-reloj .titulo span:last-child { display: none; }
  .barra-reloj .btn-icono { width: 44px; height: 44px; }
  .insignia-control { padding: 4px 10px; font-size: 12.5px; }
  .base-fisica { display: none; }
  .reloj {
    --bisel: 6px; --radio-panel: 20px;
    gap: 10px; padding-top: 2px; padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .reloj:not(.vertical) .mandos {
    display: grid; grid-template-columns: 44px 44px; gap: 8px; padding: 10px 8px; border-radius: 30px; justify-items: center;
  }
  .reloj:not(.vertical) .mando { width: 44px; height: 44px; }
  .reloj:not(.vertical) .mando-principal { grid-column: 1 / -1; width: 58px; height: 58px; }
  .reloj:not(.vertical) .mando-principal .icono { width: 28px; height: 28px; }
}

/* Pantallas grandes (1920×1080 y más): mandos y textos un poco mayores */
@media (min-width: 1600px) and (min-height: 900px) {
  .mando { width: 58px; height: 58px; }
  .mando .icono { width: 25px; height: 25px; }
  .mando-principal { width: 90px; height: 90px; }
  .mando-principal .icono { width: 40px; height: 40px; }
  .mandos { gap: 16px; padding: 20px 13px; }
  .pulsador { height: 84px; max-width: 520px; }
  .pulsador kbd { font-size: 13px; }
  .estado-reloj { font-size: 15px; }
}

/* modo pantalla completa sin distracciones */
body.enfoque .barra-reloj { opacity: 0; transition: opacity .4s; }
body.enfoque .barra-reloj:hover { opacity: 1; }

/* ═══ Movimiento reducido: estados estáticos equivalentes ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  .reloj.en-juego .panel.activo .panel-vidrio::after, .panel-sello span::after { animation: none !important; opacity: 0; }
  .reloj.pausado .panel.activo .panel-tiempo { animation: none !important; opacity: .55; }
  .reloj.pausado .panel.activo::after { animation: none !important; opacity: .5; }
  .panel.apuro.activo::after, .panel.apuro.activo .panel-vidrio::before { animation: none !important; opacity: 1; }
  .panel-sello span { animation: none !important; }
  .reloj.en-juego .panel.activo { transform: none; }
}