/* ══════════════════════════════════════════════════════════════════
   IBMZ-VIDRIO · una sola piel para todas las páginas del Club IBM Z
   ------------------------------------------------------------------
   Las ocho páginas del Club se hicieron en momentos distintos y cada
   una traía su propio criterio: unas con esquinas de 3 px, otras de
   22; unas con paneles opacos, otras translúcidos; dos con una
   cabecera propia que no era la del resto del sitio.

   Esta hoja NO reemplaza nada. Se carga la última y solo ajusta tres
   cosas, las mismas en todas partes:

     1 · Esquinas. Nada cuadrado: tarjetas con la curva del cuadro de
         Inicio, campos y botones un punto menos, etiquetas en pastilla.
     2 · Vidrio. Los paneles dejan ver el fondo: relleno translúcido,
         un filo claro de 1 px y desenfoque de lo que hay detrás.
     3 · Cabecera. Las páginas internas llevan la misma barra que el
         panel de PRI —logo, nombre, conmutador de espacios, usuario—;
         las públicas siguen con el menú del sitio, que no se toca.

   Los colores de acento de cada página (el cian del Club, el naranja
   de PRI, los filetes de color de cada indicador) se respetan: aquí
   no se declara ni un color de marca nuevo.

   Si algún día se quita esta hoja, las páginas vuelven a verse como
   antes y siguen funcionando igual.
   ══════════════════════════════════════════════════════════════════ */

:root {
    /* Los mismos valores del «cuadro de Inicio» (pie-legal.css). Si allá
       cambian, aquí cambian solos; los de reserva son los de hoy. */
    --vz-r-lg: var(--cuadro-radio, 1.1rem);   /* tarjetas, paneles, modales        */
    --vz-r-md: .85rem;                        /* campos, bloques, filas destacadas */
    --vz-r-sm: .65rem;                        /* botones: igual que «Ingresar»     */
    --vz-pastilla: 999px;                     /* etiquetas y conmutadores          */

    --vz-vidrio:       var(--cuadro-fondo, rgba(2, 12, 30, .68));
    --vz-vidrio-alto:  rgba(255, 255, 255, .09);
    --vz-filo:         var(--cuadro-borde, rgba(255, 255, 255, .15));
    --vz-filo-suave:   rgba(255, 255, 255, .08);
    --vz-brillo:       inset 0 1px 0 rgba(255, 255, 255, .09);
    --vz-sombra:       0 6px 28px rgba(0, 0, 0, .3);
    --vz-desenfoque:   var(--cuadro-vidrio, blur(18px) saturate(1.3));
}

/* ══ 1 · LA PIEZA DE VIDRIO ════════════════════════════════════════
   Todas las tarjetas del Club. Aquí solo se pone lo que hace vidrio
   al vidrio: la curva, el desenfoque de lo que hay detrás, el brillo
   del canto y la sombra. El relleno y el borde de cada tarjeta NO se
   tocan: muchas llevan un tinte propio (verde la del registro rápido,
   ámbar los avisos) o un filete de color a un lado que dice qué son. */

.ibz-card, .ibz-step, .ibz-member, .ibz-quote, .ibz-deck, .ibz-lockup, .rg-banner,
.rg-block, .rg-grupo, .rg-aviso, .rg-legal,
.cr-prox, .cr-ruta, .cr-card, .cr-como div,
.as-block, .as-rapido, .as-legal, .as-tarea,
.ad-kpi, .ad-tabla-cont, .ad-selbar {
    border-radius: var(--vz-r-lg) !important;
    -webkit-backdrop-filter: var(--vz-desenfoque);
            backdrop-filter: var(--vz-desenfoque);
    box-shadow: var(--vz-brillo), var(--vz-sombra);
}

/* Piezas que van DENTRO de una tarjeta: radio menor, para que la
   curva de dentro acompañe a la de fuera en vez de pelearse con ella. */
.rg-check, .rg-next .paso, .as-modo label, .rg-grupo img, .ibz-week {
    border-radius: var(--vz-r-md) !important;
}

/* La ficha lateral del panel entra pegada al borde derecho: solo se
   redondea el lado que queda a la vista. */
.ad-ficha {
    border-radius: var(--vz-r-lg) 0 0 var(--vz-r-lg) !important;
    -webkit-backdrop-filter: var(--vz-desenfoque); backdrop-filter: var(--vz-desenfoque);
}

/* ── El cronograma ─────────────────────────────────────────────────
   Era la única página del Club con tarjetas blancas opacas sobre el
   fondo azul noche: la ruta y las diez sesiones. Pasan al mismo vidrio
   del resto. Se conserva todo lo que informa: el color de cada etapa
   en el mosaico de la izquierda, el verde de «realizada», el azul de
   la que sigue. Solo cambian el relleno y, con él, la tinta. */
.cr-ruta, .cr-card {
    background: var(--vz-vidrio);
    border: 1px solid var(--vz-filo);
    color: #e8f1ff;
}
.cr-ruta ol::before { border-top-color: rgba(255, 255, 255, .22); }
.cr-ruta .pt { background: #2a3d5c; border-color: #071428; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }
.cr-ruta li.hecha .pt { background: #43e39b; box-shadow: 0 0 0 1px #43e39b; }
.cr-ruta li.ahora .pt { background: #4d8dff; box-shadow: 0 0 0 5px rgba(77, 141, 255, .28); }
.cr-ruta .rt { color: #fff; }
.cr-ruta li.pend .rt { color: rgba(255, 255, 255, .58); }
.cr-ruta .fe { color: rgba(255, 255, 255, .6); }
.cr-ruta .et { color: #78a9ff; }

.cr-tile { border-radius: 0 !important; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cr-body h3 { color: #fff; }
.cr-body .res { color: rgba(255, 255, 255, .8); }
.cr-body .cuando { color: rgba(255, 255, 255, .66); }
.cr-det { border-top-color: rgba(255, 255, 255, .12); }
.cr-det h4 { color: #78a9ff; }
.cr-det ul, .cr-det p { color: rgba(255, 255, 255, .84); }
.cr-pie .st { color: rgba(255, 255, 255, .6); }
.cr-mas { color: #78a9ff; }
.cr-meet { padding: .9rem 1rem; border-radius: var(--vz-r-md); background: rgba(71, 219, 217, .07); border: 1px solid rgba(71, 219, 217, .3); }
.cr-meet ul { list-style: none; padding-left: 0; }
.cr-meet b { font-weight: 600; color: rgba(255, 255, 255, .6); }
.cr-meet a { color: #7ee8e6; text-underline-offset: 3px; word-break: break-all; }
.cr-meet a:hover { color: #fff; }
.cr-meet .nota { margin-top: .5rem; font-size: .76rem; color: rgba(255, 255, 255, .55); }
/* «Concepts» no cabía en el mosaico y se partía en «Concept / s» */
.cr-tile .cod { font-size: 1.5rem; word-break: normal; overflow-wrap: break-word; }
.cr-ok { color: #43e39b; }

.cr-chip { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .14); }
.cr-chip.est.realizada     { background: rgba(67, 227, 155, .14); color: #6ff0b5; border-color: rgba(67, 227, 155, .4); }
.cr-chip.est.hoy           { background: #0f62fe; color: #fff; border-color: #0f62fe; }
.cr-chip.est.proxima       { background: rgba(77, 141, 255, .16); color: #a6c8ff; border-color: rgba(120, 169, 255, .45); }
.cr-chip.est.por-confirmar { background: rgba(241, 194, 27, .13); color: #ffd866; border-color: rgba(241, 194, 27, .4); }

.cr-card .cr-btn.linea { border-color: rgba(255, 255, 255, .22); color: #fff; background: rgba(255, 255, 255, .05); }
.cr-card .cr-btn.linea:hover { border-color: #78a9ff; color: #a6c8ff; }
.cr-card .cr-btn.off { background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .45); }

/* ══ 2 · CAMPOS ════════════════════════════════════════════════════ */

.rg-fg input, .rg-fg select, .rg-fg textarea,
.as-fg input, .as-fg select, .as-fg textarea,
.ad-tools input[type=search], .ad-tools select, .ad-selbar select,
.ez-campo input, .ez-campo select, .ez-campo textarea {
    border-radius: var(--vz-r-md) !important;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.rg-fg input:focus, .rg-fg select:focus, .rg-fg textarea:focus,
.as-fg input:focus, .as-fg select:focus, .as-fg textarea:focus,
.ad-tools input[type=search]:focus, .ad-tools select:focus, .ad-selbar select:focus {
    box-shadow: 0 0 0 3px rgba(71, 219, 217, .16);
}

/* Los desplegables: flecha propia y sitio para ella. La del navegador
   quedaba pegada al borde y parecía salirse del cuadro. */
.rg-fg select, .as-fg select, .ad-tools select, .ad-selbar select, .ad-aviso select, .ez-campo select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 2.5rem !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2347dbd9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}
.ez-campo select option, .rg-fg select option, .as-fg select option, .ad-tools select option, .ad-selbar select option {
    background: #04101f; color: #f0f4f8;
}

/* ══ 3 · BOTONES Y ETIQUETAS: redondeados ══════════════════════════ */

.ibz-btn, .rg-btn, .rg-enviar, .cr-btn, .as-enviar, .as-b, .ad-btn,
.rg-banner a, .rg-grupo a, .ad-gate a, .ad-acc a, #ad-den-btn {
    border-radius: var(--vz-r-sm) !important;
}
.cr-chip, .rg-chip, .as-chip, .ibz-tag-chip {
    border-radius: var(--vz-pastilla) !important;
}

/* Los botones secundarios, de vidrio; los principales conservan su
   color lleno, que es lo que los hace principales. */
.ad-btn {
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.ad-btn:hover { background-color: var(--vz-vidrio-alto); border-color: rgba(255,255,255,.22); }

.ibz-btn, .rg-btn, .rg-enviar, .cr-btn, .as-enviar, .as-b {
    transition: transform .2s cubic-bezier(.2,.9,.3,1.2), box-shadow .2s ease, filter .2s ease;
}
.ibz-btn:hover, .rg-btn:hover, .rg-enviar:hover, .cr-btn:hover, .as-enviar:hover, .as-b:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

/* ══ 4 · AVISOS FLOTANTES Y MODALES ════════════════════════════════ */

#rg-toast .t, #as-toast .t, #ad-toast .t {
    border-radius: var(--vz-r-md) !important;
    -webkit-backdrop-filter: var(--vz-desenfoque); backdrop-filter: var(--vz-desenfoque);
    box-shadow: var(--vz-sombra);
}
.ad-qrmodal > div, .ad-qrmodal .caja {
    border-radius: var(--vz-r-lg) !important;
}

/* ══ 5 · TABLAS ════════════════════════════════════════════════════
   El contenedor es el que lleva la curva; la tabla de dentro se
   recorta contra él. Sin esto, las celdas de las esquinas asoman
   cuadradas por fuera del borde redondeado. */
.ad-tabla-cont, .ez-tabla-cont { overflow: hidden; }
.ad-tabla-cont { overflow-x: auto; }
.ad-tabla th { background-color: rgba(255, 255, 255, .035); }
.ad-tabla tr:hover td, .ez-tabla tr:hover td { background-color: rgba(255, 255, 255, .025); }

/* ══ 6 · CABECERAS DE SECCIÓN de las páginas públicas ══════════════
   Eran una franja de lado a lado con un filete duro debajo. Se le
   quita la dureza al filete; el menú del sitio, encima, no se toca. */
.rg-head, .cr-head, .as-head {
    border-bottom-color: rgba(71, 219, 217, .28);
}

/* ══ 7 · LA CABECERA DE LAS PÁGINAS INTERNAS ═══════════════════════
   Espacio del Club y panel de inscritos traían cada una su barra. Se
   igualan a la del panel de PRI: misma altura, mismo logo en círculo,
   mismo nombre, el conmutador de espacios en el centro y el usuario a
   la derecha. Quien pasa de un espacio a otro no debe notar el salto. */

.pz-cab {
    position: sticky; top: 0; z-index: 500;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding: .9rem 2rem;
    background: rgba(2, 26, 54, .72);
    border-bottom: 1px solid var(--vz-filo-suave);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
            backdrop-filter: blur(20px) saturate(150%);
}

.pz-cab .pz-marca {
    display: flex; align-items: center; gap: 1rem;
    text-decoration: none; flex-shrink: 0;
}
.pz-cab .pz-marca .pz-logo {
    width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, .15);
    background: rgba(6, 49, 98, .5);
}
.pz-cab .pz-marca .pz-logo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.pz-cab .pz-marca b {
    display: block;
    font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 900;
    letter-spacing: 2px; text-transform: uppercase; color: #f0f4f8; line-height: 1.2;
}
.pz-cab .pz-marca div > span {
    display: block;
    font-family: 'Montserrat', sans-serif; font-size: .55rem; font-weight: 500;
    letter-spacing: 3px; text-transform: uppercase; color: #38bdf8; line-height: 1.5;
}

/* El conmutador de espacios: idéntico al del panel de PRI. */
.pz-cab .pz-switch {
    display: flex; gap: 2px; padding: 4px; flex-shrink: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
}
.pz-cab .pz-switch a {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .95rem; border-radius: 999px;
    font-family: 'Montserrat', sans-serif; font-size: .6rem; font-weight: 900;
    letter-spacing: 1.4px; text-transform: uppercase; text-decoration: none;
    color: rgba(255, 255, 255, .42); white-space: nowrap;
    transition: color .22s ease, background .22s ease;
}
.pz-cab .pz-switch a:hover { color: #fff; }
.pz-cab .pz-switch a .pt { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }
.pz-cab .pz-switch a[aria-current="page"] {
    /* En el espacio del Club, el activo va en el cian del Club. */
    background: linear-gradient(135deg, rgba(71, 219, 217, .22), rgba(56, 189, 248, .14));
    color: #47dbd9;
    box-shadow: inset 0 0 0 1px rgba(71, 219, 217, .4);
}
.pz-cab .pz-switch a[aria-current="page"] .pt { opacity: 1; }
.pz-cab .pz-switch a[hidden] { display: none; }

.pz-cab .pz-der { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }

.pz-cab .pz-usuario {
    display: flex; align-items: center; gap: .6rem;
    padding: .3rem .85rem .3rem .3rem;
    border-radius: 999px;
    background: var(--vz-vidrio);
    border: 1px solid var(--vz-filo);
    font-family: 'Montserrat', sans-serif; font-size: .7rem; font-weight: 800; color: #f0f4f8;
    line-height: 1.25;
}
.pz-cab .pz-usuario .av {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; overflow: hidden;
    color: #fff; font-size: .78rem; font-weight: 800;
    background: linear-gradient(135deg, #ff5e00, #ff8a3d);
}
.pz-cab .pz-usuario .rol {
    display: block; font-size: .5rem; font-weight: 600; letter-spacing: 1.6px;
    text-transform: uppercase; color: #38bdf8;
}

.pz-cab .pz-boton {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
    font-family: 'Montserrat', sans-serif; font-size: .62rem; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; white-space: nowrap;
    color: rgba(240, 244, 248, .8);
    background: var(--vz-vidrio);
    border: 1px solid var(--vz-filo);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pz-cab .pz-boton:hover { background: var(--vz-vidrio-alto); color: #fff; border-color: rgba(255,255,255,.22); }
.pz-cab .pz-boton.salir { color: #fca5a5; background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .3); }
.pz-cab .pz-boton.salir:hover { background: rgba(239, 68, 68, .25); color: #fff; }

.pz-cab .pz-vivo {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .35rem .8rem; border-radius: 999px;
    font-family: 'IBM Plex Mono', monospace; font-size: .56rem; letter-spacing: 1.6px;
    text-transform: uppercase; color: #43e39b;
    background: rgba(67, 227, 155, .08); border: 1px solid rgba(67, 227, 155, .25);
}
.pz-cab .pz-vivo i {
    width: 7px; height: 7px; border-radius: 50%; background: #43e39b;
    box-shadow: 0 0 0 0 rgba(67, 227, 155, .6); animation: pz-late 1.8s ease-out infinite;
}
@keyframes pz-late { 70% { box-shadow: 0 0 0 7px rgba(67, 227, 155, 0); } 100% { box-shadow: 0 0 0 0 rgba(67, 227, 155, 0); } }

@media (max-width: 900px) {
    .pz-cab { padding: .6rem .8rem; gap: .5rem; }
    .pz-cab .pz-marca { gap: .55rem; }
    .pz-cab .pz-marca .pz-logo { width: 32px; height: 32px; }
    .pz-cab .pz-marca b { font-size: .68rem; letter-spacing: 1px; }
    .pz-cab .pz-marca div > span { display: none; }
    .pz-cab .pz-switch { order: 3; width: 100%; justify-content: center; }
    .pz-cab .pz-switch a { flex: 1; justify-content: center; padding: .45rem .5rem; font-size: .55rem; letter-spacing: 1px; }
    .pz-cab .pz-der { gap: .4rem; flex-wrap: nowrap; }
    .pz-cab .pz-usuario { padding: .2rem; }
    .pz-cab .pz-usuario .pz-quien { display: none; }      /* en el teléfono basta la foto */
    .pz-cab .pz-boton { padding: .45rem .7rem; font-size: .55rem; letter-spacing: 1px; }
    .pz-cab .pz-vivo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pz-cab .pz-vivo i { animation: none; }
    .ibz-btn:hover, .rg-btn:hover, .rg-enviar:hover, .cr-btn:hover, .as-enviar:hover, .as-b:hover { transform: none; }
}

/* Navegadores sin desenfoque: el vidrio se vuelve un panel sólido
   oscuro en vez de quedar transparente e ilegible sobre el fondo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ibz-card, .ibz-step, .ibz-member, .rg-block, .cr-card, .cr-prox, .cr-ruta,
    .as-block, .ad-kpi, .ad-tabla-cont, .ad-ficha { background-color: rgba(6, 24, 48, .92); }
    .pz-cab { background: rgba(2, 26, 54, .96); }
}