/* ============================================================
   Puzzleland – Estilo competitivo
   Inspirado en minesweeper.online (tarjetas, rankings, header oscuro)
   ============================================================ */

:root {
    --pz-bg: #0f1720;
    --pz-panel: #172232;
    --pz-panel-2: #1f2d42;
    --pz-border: #2b3a55;
    --pz-text: #e8eef7;
    --pz-muted: #9aa7bd;
    --pz-primary: #3b82f6;
    --pz-primary-hover: #2563eb;
    --pz-accent: #f59e0b;
    --pz-success: #22c55e;
    --pz-danger: #ef4444;
    --pz-gold: #ffcc00;
    --pz-silver: #c0c0c0;
    --pz-bronze: #cd7f32;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html { font-size: 16px; }
}

html, body {
    background-color: var(--pz-bg);
    color: var(--pz-text);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.pz-main {
    flex: 1 0 auto;
}

/* ---------- Links ----------
   Por defecto NINGÚN <a> en Puzzleland tiene subrayado. Los botones,
   chips, items de tabla, marca, nav-links, etc. son todos <a> y se
   ven mejor sin underline. Si en algún lugar querés un link tipo
   "ver más" subrayado al hover, agregale la clase .pz-textlink. */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
    color: #93c5fd;
    text-decoration: none !important;
}

a:hover { color: #bfdbfe; }

/* Excepción: links explícitos en prosa que SÍ deben subrayarse. */
.pz-textlink,
.pz-textlink:hover { text-decoration: underline !important; }

/* Doble cobertura sobre todo lo que parezca botón / chip / tab / nav. */
.btn,
button,
.btn:hover,
.btn:focus,
.btn:active,
a.btn,
a.btn:hover,
a.btn:focus,
a.btn:active,
.btn-pz-primary,
.btn-pz-primary:hover,
.btn-pz-outline,
.btn-pz-outline:hover,
.nav-link,
.nav-link:hover,
.nav-link:focus,
.navbar-brand,
.navbar-brand:hover,
.pz-tab,
.pz-tab:hover,
.pz-chip,
.pz-supporter,
.pz-faq-q,
.pz-faq-q:hover,
.pz-card,
.pz-card:hover {
    text-decoration: none !important;
}

/* Bootstrap 5 setea --bs-link-decoration: underline en :root.
   Lo neutralizamos para que el reset anterior no tenga que pelear
   contra la cascada del framework. */
:root {
    --bs-link-decoration: none;
    --bs-link-hover-decoration: none;
    --bs-link-color: #93c5fd;
    --bs-link-hover-color: #bfdbfe;
}

/* ---------- Navbar ---------- */
.pz-navbar {
    background: linear-gradient(180deg, #0b1320 0%, #172232 100%);
    border-bottom: 1px solid var(--pz-border);
    padding: 0.5rem 0;
}
.pz-navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--pz-text) !important;
    font-size: 1.4rem;
}
.pz-navbar .navbar-brand .brand-accent { color: var(--pz-accent); }
/* Logo del header (img.pz-logo). El SVG ya viene en proporción 1:1;
   le damos un toque de glow ámbar para que combine con el accent
   dorado del nombre cuando se renderiza sobre el fondo oscuro. */
.pz-logo {
    display: inline-block;
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, .35));
    transition: transform .15s ease;
}
.pz-navbar .navbar-brand:hover .pz-logo {
    transform: rotate(-6deg) scale(1.05);
}
.pz-navbar .nav-link {
    color: var(--pz-muted) !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    border-radius: 6px;
    transition: all .15s ease-in-out;
    /* white-space: nowrap evita que items como "Ranking Global" o
       "Diario" + ⭐ envuelvan a 2 líneas cuando el espacio se aprieta.
       Si el viewport es muy chico, el navbar colapsa a hamburger
       (ver navbar-expand-* en _Layout.cshtml). */
    white-space: nowrap;
}
/* Username del header — truncado con "..." si excede ~150px.
   Aplicamos las 4 reglas canónicas (display:inline-block + max-width +
   overflow:hidden + text-overflow:ellipsis + white-space:nowrap)
   con !important para que ninguna regla de Bootstrap (.nav-link,
   .navbar-nav .nav-link, etc.) pueda pisarlas. */
.pz-username-display {
    display: inline-block !important;
    max-width: 150px;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: middle;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}
/* Botones dentro del navbar (Mi perfil, Cerrar sesión, Login, Register).
   Sin esto, "Mi perfil" partía a "Mi"/"perfil" y "Cerrar sesión" a
   "Cerrar"/"sesión" cuando el ancho del nav-item se apretaba. */
.pz-navbar .btn {
    white-space: nowrap;
}

/* ---------- Dropdown del usuario en el navbar ----------
   Diseño tipo GitHub/Discord: un único toggle con avatar + nombre,
   click → menú con "Mi perfil" + "Cerrar sesión" adentro.
   Reemplaza al layout anterior de 3 chips separados. */
.pz-user-toggle {
    color: var(--pz-text) !important;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 999px !important;
    padding: 0.35rem 0.85rem !important;
}
.pz-user-toggle:hover,
.pz-user-toggle[aria-expanded="true"] {
    background: rgba(245, 158, 11, 0.20);
    border-color: rgba(245, 158, 11, 0.45);
}
/* Nombre del usuario dentro del toggle: truncado con ellipsis si
   excede 130px. El nombre completo aparece en el title (tooltip)
   y como header informativo dentro del dropdown desplegado. */
.pz-user-name {
    display: inline-block;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
/* Contenedor del menú: overflow:hidden + padding:0 para que el
   hover de los items NO sobrepase los bordes redondeados. Antes
   el background con transparencia se "asomaba" por las esquinas. */
.pz-user-menu {
    overflow: hidden;
    padding: 0 !important;
    border-radius: 10px;
    min-width: 220px;
}
/* Header "Conectado como [nombre]" — más aire abajo y un fondo
   sutil para diferenciarlo de los items clickeables. */
.pz-user-menu .pz-user-menu-header {
    padding: 0.7rem 0.9rem 0.85rem !important;
    background: rgba(245, 158, 11, 0.04);
    border-bottom: 1px solid #2b3a55;
}
/* Items del menú desplegable — overrides del default de Bootstrap
   para que combinen con el tema oscuro y queden compactos. */
.pz-user-menu .dropdown-item {
    color: #e8eef7;
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
    line-height: 1.5;
    transition: background-color .12s ease;
    /* Centrar verticalmente el icono con el texto. */
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.pz-user-menu .dropdown-item > * {
    line-height: 1;
}
.pz-user-menu .dropdown-item:hover,
.pz-user-menu .dropdown-item:focus {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}
.pz-user-menu form .dropdown-item {
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
}
.pz-user-menu .dropdown-divider {
    margin: 0;
    border-color: #2b3a55;
}

/* ---------- Medidor de ping (Play.cshtml) ----------
   Chip fijo en el corner superior derecho durante el juego.
   Color verde/amarillo/rojo según latencia. */
.pz-ping-chip {
    position: fixed;
    top: 80px;
    right: 16px;
    z-index: 1040;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(15, 23, 32, 0.85);
    backdrop-filter: blur(4px);
    border: 1px solid var(--pz-border);
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--pz-text);
    user-select: none;
    pointer-events: auto;
    transition: border-color .15s ease, color .15s ease;
}
.pz-ping-chip .pz-ping-icon { font-size: 0.95rem; line-height: 1; }
.pz-ping-chip .pz-ping-unit { opacity: 0.7; font-size: 0.75rem; }
.pz-ping-chip.pz-ping-good  { color: #86efac; border-color: #14532d; }
.pz-ping-chip.pz-ping-ok    { color: #fcd34d; border-color: #78350f; }
.pz-ping-chip.pz-ping-bad   { color: #fca5a5; border-color: #7f1d1d; }

/* ---------- Banner de mantenimiento (programado) ----------
   Aparece arriba del navbar cuando hay un mantenimiento futuro
   configurado. */
.pz-maintenance-banner {
    background: linear-gradient(90deg, #78350f, #b45309);
    color: #fef3c7;
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-bottom: 1px solid #92400e;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.pz-maintenance-banner .pz-countdown {
    font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, monospace;
    font-weight: 700;
    color: #fef9c3;
    background: rgba(0, 0, 0, 0.25);
    padding: 0.1rem 0.5rem;
    border-radius: 6px;
}

/* ---------- Página completa de mantenimiento ---------- */
.pz-maintenance-page {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 2rem 1rem;
}
.pz-maintenance-page .pz-maintenance-icon {
    font-size: 5rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.4));
}
.pz-maintenance-page h1 {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    color: #fbbf24;
}
.pz-maintenance-page .lead {
    font-size: 1.15rem;
    color: #cdd6e3;
    max-width: 560px;
    margin: 0 auto 2rem;
}
.pz-maintenance-page .pz-countdown-big {
    display: inline-flex;
    gap: 0.5rem;
    font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, monospace;
    font-size: 2.5rem;
    font-weight: 700;
    color: #fef9c3;
    background: rgba(0, 0, 0, 0.35);
    padding: 0.5rem 1.25rem;
    border-radius: 12px;
    border: 1px solid #b45309;
    box-shadow: 0 0 24px rgba(245, 158, 11, 0.2);
}
.pz-maintenance-page .pz-countdown-big .sep { opacity: 0.5; }

/* ---------- Paginación de tablas de ranking ----------
   Controles "« ‹ N/M › »" debajo de cada tabla paginada. */
.pz-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 1rem 0 0.25rem;
    flex-wrap: wrap;
}
.pz-pagination button {
    background: var(--pz-panel-2);
    color: var(--pz-text);
    border: 1px solid var(--pz-border);
    border-radius: 6px;
    padding: 0.35rem 0.7rem;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    min-width: 36px;
    font-family: inherit;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.pz-pagination button:hover:not(:disabled) {
    background: var(--pz-primary);
    border-color: var(--pz-primary);
    color: #fff;
}
.pz-pagination button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.pz-pagination .pz-page-label {
    color: var(--pz-muted);
    font-size: 0.9rem;
    min-width: 90px;
    text-align: center;
    padding: 0 0.4rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Dialogs / modales (Eliminar cuenta, Reportar) ----------
   Backdrop fixed full-screen, contenido flex-centered.
   Usamos clases CSS (no inline styles) para que el centrado sea
   100% predecible. position:fixed + inset:0 garantiza que el
   container abarque todo el viewport — su único hijo (el card)
   queda centrado por flex. z-index 1080 lo deja por encima de
   los toasts de logros. */
.pz-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1080;
    padding: 1rem;
}
.pz-modal-card {
    max-width: 520px;
    width: 100%;
    background: var(--pz-panel);
    border: 1px solid var(--pz-border);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}
.pz-navbar .nav-link:hover,
.pz-navbar .nav-link.active {
    color: var(--pz-text) !important;
    background: rgba(59, 130, 246, 0.15);
}

/* ---------- Paneles / Tarjetas ---------- */
.pz-panel {
    background: var(--pz-panel);
    border: 1px solid var(--pz-border);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.pz-card {
    background: var(--pz-panel);
    border: 1px solid var(--pz-border);
    border-radius: 12px;
    transition: transform .15s ease, border-color .15s ease;
    color: var(--pz-text);
    overflow: hidden;
}
.pz-card:hover {
    transform: translateY(-3px);
    border-color: var(--pz-primary);
}
.pz-card .pz-card-head {
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, var(--pz-panel-2), var(--pz-panel));
    border-bottom: 1px solid var(--pz-border);
    font-weight: 700;
    font-size: 1.15rem;
}
.pz-card .pz-card-body { padding: 1rem 1.25rem; }
.pz-card .pz-card-foot {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--pz-border);
    display: flex; justify-content: space-between; gap: .5rem;
    align-items: center;
}

/* ---------- Hero ---------- */
.pz-hero {
    background: radial-gradient(ellipse at top, #1b2a41 0%, #0f1720 70%);
    border: 1px solid var(--pz-border);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    margin-bottom: 2rem;
}
.pz-hero h1 {
    font-size: 2.75rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: var(--pz-text);
}
.pz-hero h1 span.accent { color: var(--pz-accent); }
.pz-hero .lead { color: var(--pz-muted); font-size: 1.15rem; }

/* ---------- Botones ----------
   Todos los botones azules (.btn-pz-primary, .btn-primary, .btn-info)
   tienen letra blanca SIEMPRE — incluso al hover, focus y active. */
.btn-pz-primary,
.btn-pz-primary:link,
.btn-pz-primary:visited,
.btn-pz-primary:hover,
.btn-pz-primary:focus,
.btn-pz-primary:active {
    background: var(--pz-primary);
    color: #fff !important;
    border: none;
    padding: .55rem 1.1rem;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color .15s ease;
}
.btn-pz-primary:hover,
.btn-pz-primary:focus { background: var(--pz-primary-hover); color: #fff !important; }
.btn-pz-outline {
    background: transparent;
    color: var(--pz-text);
    border: 1px solid var(--pz-border);
    padding: .55rem 1.1rem;
    border-radius: 8px;
    font-weight: 600;
}
.btn-pz-outline:hover { background: var(--pz-panel-2); color: var(--pz-text); }

/* ---------- Tablas de ranking ---------- */
.pz-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--pz-text);
}
.pz-table thead tr {
    background: var(--pz-panel-2);
    color: var(--pz-muted);
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: 0.05em;
}
.pz-table th, .pz-table td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--pz-border);
    text-align: left;
}
.pz-table tbody tr:hover { background: rgba(59, 130, 246, 0.07); }
.pz-table .pz-rank {
    font-weight: 700;
    width: 60px;
    font-variant-numeric: tabular-nums;
}
.pz-table .pz-rank-1 { color: var(--pz-gold); }
.pz-table .pz-rank-2 { color: var(--pz-silver); }
.pz-table .pz-rank-3 { color: var(--pz-bronze); }
.pz-table .pz-time, .pz-table .pz-points {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ---------- Tabs dificultad ---------- */
.pz-tabs {
    display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.pz-tabs .pz-tab {
    padding: .5rem 1rem;
    border-radius: 8px;
    background: var(--pz-panel);
    color: var(--pz-muted);
    border: 1px solid var(--pz-border);
    cursor: pointer;
    font-weight: 600;
    user-select: none;
}
.pz-tabs .pz-tab.active {
    background: var(--pz-primary);
    color: #fff;
    border-color: var(--pz-primary);
}
.pz-tabs .pz-tab:hover:not(.active) { background: var(--pz-panel-2); color: var(--pz-text); }

/* ---------- Badges / chips ----------
   inline-flex (en lugar de inline-block) + align-items:center
   para que el texto SIEMPRE quede centrado vertical aunque un
   flex parent estire el chip (caso típico: chip al lado de un
   botón más alto en un d-flex con align-items default = stretch).
   line-height:1 evita que el ascender de la fuente corra el
   texto hacia arriba dentro del chip. */
.pz-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--pz-panel-2);
    color: var(--pz-muted);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.03em;
    border: 1px solid var(--pz-border);
    /* Evita que el chip se estire vertical cuando es flex item
       directo de un contenedor con align-items: stretch. */
    align-self: center;
}
.pz-chip.pz-chip-easy { color: #86efac; border-color: #14532d; }
.pz-chip.pz-chip-medium { color: #fcd34d; border-color: #78350f; }
.pz-chip.pz-chip-hard { color: #fca5a5; border-color: #7f1d1d; }
.pz-chip.pz-chip-points { color: #c4b5fd; border-color: #4c1d95; background: rgba(76,29,149,.15); font-weight: 700; }

/* ---------- Supporter (⭐) ---------- */
/* Estrellita al lado del nombre de los usuarios que donaron.
   Tono dorado como el puesto 1 + pequeño glow para que se note
   pero no distraiga al leer la tabla. */
.pz-supporter {
    color: var(--pz-gold);
    margin-left: .35rem;
    font-size: .95em;
    text-shadow: 0 0 6px rgba(255,204,0,0.45);
    cursor: help;
    user-select: none;
}

/* ---------- Username clickeable ---------- */
/* En las tablas de ranking, el nombre de jugador es un link al perfil
   público (/Profile?user=…). Mantenemos el color heredado (la celda usa
   el color de texto base del tema) pero subrayamos al pasar el mouse
   para indicar que es clickeable. */
.pz-username-link,
.pz-username-link:link,
.pz-username-link:visited,
.pz-username-link:hover,
.pz-username-link:focus,
.pz-username-link:active {
    color: inherit;
    text-decoration: none !important;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s ease;
}
.pz-username-link:hover,
.pz-username-link:focus {
    color: var(--pz-primary, #60a5fa);
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

/* ---------- FAQ (acordeón Alpine) ---------- */
.pz-faq-item {
    border-bottom: 1px solid var(--pz-border);
}
.pz-faq-item:last-child { border-bottom: none; }
.pz-faq-q {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--pz-text);
    padding: .85rem .25rem;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: color .1s;
}
.pz-faq-q:hover { color: var(--pz-primary); }
.pz-faq-chev {
    color: var(--pz-muted);
    transition: transform .2s ease;
    font-size: .9rem;
}
.pz-faq-chev-rot {
    transform: rotate(90deg);
    color: var(--pz-primary);
}
.pz-faq-a {
    padding: 0 .25rem .85rem .25rem;
    animation: pz-faq-fade .15s ease-out;
}
@keyframes pz-faq-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Podio ---------- */
.pz-podium { display: flex; gap: 1rem; justify-content: center; margin: 1rem 0 2rem; flex-wrap: wrap; }
.pz-podium .pz-step {
    background: var(--pz-panel);
    border: 1px solid var(--pz-border);
    border-radius: 12px;
    padding: 1rem;
    min-width: 180px;
    text-align: center;
    position: relative;
}
.pz-podium .pz-step.gold   { border-color: var(--pz-gold); box-shadow: 0 0 0 2px rgba(255,204,0,0.2); }
.pz-podium .pz-step.silver { border-color: var(--pz-silver); }
.pz-podium .pz-step.bronze { border-color: var(--pz-bronze); }
.pz-podium .pz-step .medal { font-size: 2rem; }
.pz-podium .pz-step .user { font-weight: 700; font-size: 1.1rem; }
.pz-podium .pz-step .pts { color: var(--pz-muted); }

/* ---------- Footer ---------- */
.pz-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--pz-border);
    background: #0b1320;
    color: var(--pz-muted);
    padding: 1rem 0;
    margin-top: 3rem;
}
.pz-footer a { color: var(--pz-muted); }

/* ---------- Form controls sobre fondo oscuro ---------- */
.form-control, .form-select {
    background-color: var(--pz-panel-2);
    color: var(--pz-text);
    border: 1px solid var(--pz-border);
}
.form-control:focus, .form-select:focus {
    background-color: var(--pz-panel-2);
    color: var(--pz-text);
    border-color: var(--pz-primary);
    box-shadow: 0 0 0 .2rem rgba(59,130,246,.25);
}
/* Placeholders sobre fondo oscuro — Bootstrap los pone negros por
   default, casi invisibles. Subimos el contraste a un gris medio
   con opacity:1 para anular la regla de Firefox que los dim aún más. */
.form-control::placeholder,
.form-select::placeholder,
input::placeholder,
textarea::placeholder {
    color: #6b7a92;
    opacity: 1;
}
.form-control::-ms-input-placeholder,
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    color: #6b7a92;
}

/* ---------- Identity overrides (forms de login/register quedan legibles) ---------- */
.btn-primary,
.btn-primary:link,
.btn-primary:visited,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--pz-primary);
    border-color: var(--pz-primary);
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--pz-primary-hover);
    border-color: var(--pz-primary-hover);
    color: #fff !important;
}

/* btn-outline-primary (ej: el botón "Iniciar sesión" del navbar) usa color
   azul cuando no está hover. Al pasarle el mouse, queda fondo azul +
   letra blanca. */
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #fff !important;
    background-color: var(--pz-primary);
    border-color: var(--pz-primary);
}

/* Bootstrap .btn-info (azul claro) — letra blanca también. */
.btn-info,
.btn-info:link,
.btn-info:visited,
.btn-info:hover,
.btn-info:focus,
.btn-info:active { color: #fff !important; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #0b1320, 0 0 0 0.25rem var(--pz-primary);
}

/* ---- Twemoji flags (renderizado uniforme cross-OS, sobre todo Windows) ---- */
.pz-flag {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.pz-flag img.pz-twemoji {
    height: 1em;
    width: auto;
    vertical-align: -0.1em;
    margin: 0;
    display: inline-block;
    /* Borde sutil para que la bandera se vea contra fondos oscuros. */
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}