#cssFailSafe {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    text-align: center;
    padding: 1rem;
}

#cssFailSafe {
    display: flex;
}
        #cssFailSafeCard {
            max-width: 320px;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(10px);
            border-radius: 32px;
            padding: 2rem 1.5rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }
        .fallback-icon {
            font-size: 4rem;
            margin-bottom: 1rem;
        }
        #cssFailSafe h2 {
            margin: 0 0 0.5rem;
            font-size: 1.75rem;
            font-weight: 700;
            color: white;
        }
        #cssFailSafe p {
            margin: 0;
            opacity: 0.9;
            font-size: 0.95rem;
            line-height: 1.5;
        }
        #fallbackRetryBtn {
            margin-top: 1.5rem;
            background: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 9999px;
            font-weight: 600;
            font-size: 0.9rem;
            color: #2563eb;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        #fallbackRetryBtn:hover {
            transform: scale(1.02);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
        }
        .fallback-note {
            margin-top: 1rem !important;
            font-size: 0.75rem !important;
            opacity: 0.6 !important;
        }
.yc-inline-001 { color: var(--primario); }
.yc-inline-002 { color: var(--amarillo); }
.yc-inline-003 { background: var(--amarillo);color: var(--texto); }
.yc-inline-004 { font-size: 3rem; }
.yc-inline-005 { color: var(--rojo);font-size: 3rem; }
.yc-inline-006 { background: var(--rojo); }
.yc-inline-007 { text-align: left;max-width: 400px; }
.yc-inline-008 { display: grid;grid-template-columns: repeat(2, 1fr);gap: 0.5rem;margin-bottom: 1rem; }
.yc-inline-009 { background: linear-gradient(135deg, #1e3c72, #2a5298);color: white;padding: 0.5rem;border-radius: 8px;border: none;cursor: pointer; }
.yc-inline-010 { background: linear-gradient(135deg, #f093fb, #f5576c);color: white;padding: 0.5rem;border-radius: 8px;border: none;cursor: pointer; }
.yc-inline-011 { background: linear-gradient(135deg, #43e97b, #38f9d7);color: #333;padding: 0.5rem;border-radius: 8px;border: none;cursor: pointer; }
.yc-inline-012 { background: linear-gradient(135deg, #fa709a, #fee140);color: #333;padding: 0.5rem;border-radius: 8px;border: none;cursor: pointer; }
.yc-inline-013 { background: linear-gradient(135deg, #30cfd0, #330867);color: white;padding: 0.5rem;border-radius: 8px;border: none;cursor: pointer; }
.yc-inline-014 { background: linear-gradient(135deg, #a8edea, #fed6e3);color: #333;padding: 0.5rem;border-radius: 8px;border: none;cursor: pointer; }
.yc-inline-015 { display: grid;grid-template-columns: repeat(3, 1fr);gap: 0.5rem;margin-bottom: 1rem; }
.yc-inline-016 { display: flex;flex-direction: column;align-items: center;cursor: pointer; }
.yc-inline-017 { display: grid;grid-template-columns: repeat(2, 1fr);gap: 0.5rem; }
.yc-inline-018 { max-width: 350px;text-align: left; }
.yc-inline-019 { display: flex;align-items: center;gap: 0.5rem;margin-bottom: 1rem; }
.yc-inline-020 { width: 48px;height: 48px;border-radius: 50%;object-fit: cover;display: none; }
.yc-inline-021 { font-size: 3rem;color: var(--primario); }
.yc-inline-022 { margin: 0; }
.yc-inline-023 { margin: 1rem 0 0.5rem; }
.yc-inline-024 { display: flex;justify-content: flex-end;margin-top: 1rem; }
.yc-inline-025 { max-width: 350px; }
.yc-inline-026 { width: 100%;border-radius: 12px; }
.yc-inline-027 { justify-content: center; }
.yc-inline-028 { justify-content: center;margin-top: 1rem; }
.yc-inline-029 { font-size: 0.7rem;margin-top: 0.5rem;color: var(--texto-suave); }
.yc-inline-030 { margin-top: 0.5rem; }
.yc-inline-031 { color: var(--amarillo);font-size: 3rem; }
.yc-inline-032 { background: var(--amarillo); }
.yc-inline-033 { width: 4rem;height: 4rem;object-fit: contain; }
.yc-inline-034 { margin-top: 1rem; }
.yc-inline-035 { margin-bottom: 1.5rem;color: var(--texto-suave); }
.yc-inline-036 { position: absolute;right: 12px;top: 38px;background: none;border: none;cursor: pointer;color: var(--texto-suave);font-size: 1.2rem;width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;border-radius: 50%; }
.yc-inline-037 { margin-top: 0.8rem;text-align: right; }
.yc-inline-038 { font-size: 0.8rem;color: var(--primario);text-decoration: none; }
.yc-inline-039 { margin-top: 2rem;text-align: center; }
.yc-inline-040 { color: var(--texto-suave);margin-bottom: 1rem; }
.yc-inline-041 { margin-bottom: 1.5rem; }
.yc-inline-042 { font-size: 0.8rem; }
.yc-inline-043 { display: flex;align-items: center;justify-content: space-between;border-radius: 32px; }
.yc-inline-044 { display: flex;align-items: center;gap: 1rem; }
.yc-inline-045 { position: relative; }
.yc-inline-046 { width: 60px;height: 60px;font-size: 1.8rem; }
.yc-inline-047 { position: absolute;bottom: -5px;right: -5px;background: var(--primario);color: white;border: none;border-radius: 50%;width: 24px;height: 24px;font-size: 0.7rem;cursor: pointer;display: flex;align-items: center;justify-content: center;box-shadow: 0 2px 5px rgba(0,0,0,0.2);z-index: 10; }
.yc-inline-048 { font-size: 0.65rem; }
.yc-inline-049 { display: flex;align-items: center;gap: 0.5rem; }
.yc-inline-050 { font-size: 1.3rem; }
.yc-inline-051 { background: none;border: none;color: var(--texto-suave);cursor: pointer;font-size: 0.8rem;padding: 0.2rem; }
.yc-inline-052 { color: var(--texto-suave);font-size: 0.8rem; }
.yc-inline-053 { display: flex;gap: 0.5rem; }
.yc-inline-054 { background: linear-gradient(135deg, #667eea, #764ba2);color: white;border: none;border-radius: 40px;padding: 0.4rem 0.8rem;font-size: 0.7rem;cursor: pointer;display: none; }
.yc-inline-057 { background: none;border: none;font-size: 1.2rem;cursor: pointer;color: var(--texto-suave);padding: 0.3rem;border-radius: 50%; }
.yc-inline-058 { display: flex;align-items: baseline;justify-content: space-between;margin: 1.5rem 0 0.75rem 0; }
.yc-inline-059 { margin: 0;font-size: 1.1rem; }
.yc-inline-060 { font-size: 0.7rem;color: var(--texto-suave);background: var(--fondo);padding: 0.2rem 0.6rem;border-radius: 20px; }
.yc-inline-061 { border-radius: 40px;padding: 0.9rem;margin-top: 0.5rem; }
.yc-inline-062 { border-radius: 40px; }
.yc-inline-063 { cursor: pointer; }
.yc-inline-064 { text-align: center;margin-top: 1rem; }
.yc-inline-065 { font-size: 2rem;color: var(--primario); }
.yc-inline-066 { margin: 1rem auto; }
.yc-inline-067 { font-size: 0.875rem;font-weight: 500; }
.yc-inline-068 { display: none; }
.yc-inline-069 { display: inline-block;margin-top: 0.5rem;padding: 0.3rem 0.8rem;border-radius: 20px;font-size: 0.75rem;font-weight: 600;background: #e5e7eb;color: #374151; }
.yc-inline-070 { margin-bottom: 1.5rem;background: var(--primario); }
.yc-inline-071 { margin-bottom: 1.5rem;background: var(--exito); }
.yc-inline-072 { margin-bottom: 1.5rem;background: #25D366;display: none; }
.yc-inline-073 { text-align: center; }
.yc-inline-074 { width: 200px;height: 200px;margin: 0 auto;display: block; }
.yc-inline-075 { margin-top: 1rem;font-size: 0.7rem;color: var(--texto-suave); }
.yc-inline-076 { max-height: 400px;overflow-y: auto; }
.yc-inline-077 { display:none;background:#fff3cd;color:#92400e;padding:0.8rem;border-radius:12px;margin-bottom:1rem;font-size:0.85rem; }
.yc-inline-078 { max-height: 300px;overflow-y: auto; }
.yc-inline-079 { width: 100%; }
.yc-inline-080 { font-size: 0.7rem;color: var(--texto-suave);margin-top: 0.25rem; }
.yc-inline-081 { display: grid;grid-template-columns: 1fr 1fr;gap: 1rem;margin-bottom: 1.5rem; }
.yc-inline-082 { background: linear-gradient(135deg, #667eea, #764ba2);padding: 1rem;border-radius: 16px;color: white;text-align: center; }
.yc-inline-083 { margin: 0;opacity: 0.9; }
.yc-inline-084 { font-size: 1.8rem;font-weight: bold;margin: 0.5rem 0; }
.yc-inline-085 { background: linear-gradient(135deg, #f093fb, #f5576c);padding: 1rem;border-radius: 16px;color: white;text-align: center; }
.yc-inline-086 { background: var(--fondo);border-radius: 16px;padding: 1rem;margin-bottom: 1rem; }
.yc-inline-087 { max-height: 250px;width: 100%; }
.yc-inline-088 { background: var(--fondo);border-radius: 16px;padding: 1rem; }
.yc-inline-089 { display: flex;align-items: center;gap: 1rem;flex-wrap: wrap; }
.yc-inline-090 { flex: 1; }
.yc-inline-091 { max-height: 150px;width: 100%; }
.yc-inline-092 { flex: 1;text-align: center; }
.yc-inline-093 { font-size: 2rem;font-weight: bold;margin: 0; }
.yc-inline-094 { margin-top: 1.5rem; }
.yc-inline-095 { display: flex;flex-direction: column;gap: 1rem; }
.yc-inline-096 { background: var(--exito); }
.yc-inline-097 { font-size: 0.8rem;color: var(--texto-suave);margin-top: 0.5rem; }

/* ========== BLINDAJE DE ANCHO PARA NOMBRES LARGOS EN EL LOBBY ========== */
.yc-inline-044 {
    min-width: 0;
    flex: 1;
}

.yc-inline-044 > div:last-child {
    min-width: 0;
    flex: 1;
}

.yc-inline-050 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ========== COMPATIBILIDAD DEL BUSCADOR DE TARJETAS ========== */
/*
 * Estas reglas mantienen el componente de búsqueda visualmente estable
 * aunque otra capa de estilos sea servida antes/después de esta hoja.
 */
.tarjetas-cabecera {
    min-width: 0;
}

.buscador-tarjetas {
    display: flex;
    align-items: center;
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    height: 38px;
    overflow: hidden;
    border-radius: 22px;
    background: var(--fondo);
    border: 1px solid transparent;
    box-sizing: border-box;
}

.buscador-tarjetas.abierto {
    flex-basis: 190px;
    width: 190px;
    min-width: 190px;
    border-color: var(--borde);
}

.buscador-tarjetas-btn,
.buscador-tarjetas-cerrar {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    color: var(--texto-suave);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.buscador-tarjetas-input {
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--texto);
    font: inherit;
    box-sizing: border-box;
}

#tarjetasContainer {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    overscroll-behavior: contain;
}