/* --- RESET Y ESTRUCTURA GENERAL DEL PANEL (FORZADO) --- */

.ct-account-main-wrapper {
    display: flex !important;
    flex-direction: row !important; /* Fuerza columna izquierda, contenido derecha */
    width: 100% !important;
    max-width: 100% !important;
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    border-radius: 0px !important;
    margin-top: 20px !important;
    overflow: hidden !important; /* Importante para que nada se salga */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}

/* --- BARRA LATERAL IZQUIERDA (FORZADO) --- */

.ct-account-sidebar {
    flex: 0 0 250px !important; /* Ancho fijo y rígido de 250px */
    width: 250px !important;
    max-width: 250px !important;
    padding: 0px !important;
    background-color: #f4f4f4 !important; /* Gris claro de fondo */
    border: 1px solid #aaa;
	margin-left: 15px;
}

.ct-account-sidebar h3 {
    font-size: 16px !important;
    letter-spacing: 1px !important;
    border-bottom: 2px solid #e0e0e0 !important;
	
	background: linear-gradient(
		135deg,
		#1e3a8a,
		#244bbd
	  );
	  padding: 15px 15px;
	  color: var(--ct-text-light);
	  margin: 1px;
}

/* --- MENÚ DE NAVEGACIÓN (FORZADO) --- */

.ct-account-nav {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important; /* Elementos apilados verticalmente */
}

.ct-account-nav li {
    margin-bottom: 12px !important;
    display: block !important;
    width: 100% !important;
}

.ct-account-nav li a {
    display: flex !important;
    align-items: center !important;
    padding: 12px 15px !important;
    text-decoration: none !important;
    color: #333 !important; /* Texto oscuro */
    font-weight: 500 !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* --- ¡SOLUCIÓN PARA LOS ICONOS GIGANTES! --- */

.ct-icon {
    width: 20px !important; /* TAMAÑO FIJO Y PEQUEÑO DE 20PX */
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin-right: 12px !important;
    color: #708090 !important; /* Gris de diseño */
    transition: color 0.2s ease !important;
    display: inline-block !important; /* Asegura que se comporte como icono */
    vertical-align: middle !important;
}

/* --- ESTADOS DE HOVER (Al pasar el ratón) --- */

.ct-account-nav li a:hover {
    background-color: #eaeaea !important; /* Gris un poco más oscuro */
    color: #2A76EC !important; /* Azul de tu sitio */
}

.ct-account-nav li a:hover .ct-icon {
    color: #2A76EC !important; /* El icono también se vuelve azul */
}

/* --- ESTADO ACTIVO (La página donde estás) --- */

.ct-account-nav li.active a {
    background-color: #ffffff !important; /* Fondo blanco */
    color: #333 !important;
    font-weight: bold !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

.ct-account-nav li.active .ct-icon {
    color: #708090 !important; /* Gris de diseño */
}

/* --- ESTILO ESPECIAL PARA CERRAR SESIÓN --- */

.ct-nav-logout {
    margin-top: 30px !important;
    border-top: 1px solid #e0e0e0 !important;
    padding-top: 15px !important;
}

.ct-nav-logout a:hover .ct-icon {
    color: #cc0000 !important; /* Rojo al hover */
}

/* --- ÁREA CENTRAL DERECHA (CONTENIDO) --- */

.ct-account-content {
    flex: 1 !important; /* Toma todo el espacio sobrante */
    padding-left: 15px !important;
	padding-right: 5px !important;
    box-sizing: border-box !important;
}

/* ARREGLO PARA LA BARRA DE TÍTULO ROTA DE LA DERECHA */

/* Contenedor principal de la barra de titulo (Gris) */
.ct-toyline-headerbar.ct-universe-theme {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 55px !important;
    min-height: 55px !important;
    background: #708090 !important; /* Tu gris de cabecera */
    padding: 0 !important;
	margin-top: 5px !important;
    margin: 0 0 0px 0 !important; /* Espacio debajo de la barra */
    overflow: hidden !important;
    border-radius: 0px !important; /* Bordes redondeados */
    box-sizing: border-box !important;
    border: none !important; /* Aseguramos que no haya bordes extra */
}

.ct-toyline-headerbar .ct-toyline-title2 {
    font-size: 18px !important;
    color: #fff !important;
    font-weight: bold !important;
    margin: 0 !important;
	margin-left: 10px !important;
}




/* --- ESTILOS UNIFICADOS PARA LA BARRA DE TÍTULO (En ct-account-styles.css) --- */


/* Columna Izquierda: Botón + Título */
.ct-toyline-left {
    display: flex !important;
    align-items: center !important;
    flex: 0 1 auto !important; 
    min-width: 0 !important;
	width: 100% !important;
	height: 45px !important;
}

/* Columna Central: El Badge pegado a la izquierda */
.ct-toyline-middle {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important; /* No se estira */
    padding-left: 20px; /* Espacio entre el título y el contador */
    white-space: nowrap !important;
	color: #fff !important;
}

/* Columna Derecha: Espacio vacío que empuja todo */
.ct-toyline-right {
    flex: 1 1 auto !important; 
}

/* Estilo del Badge (Limpio y en armonía) */
.ct-count-badge {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
}

/* Solo tipografía, sin colores invasivos */
.ct-count-label {
    color: #ffffff; 
    opacity: 0.8;
}

.ct-count-num {
    color: #ffffff;
    font-weight: bold;
    font-size: 15px;
}

/* Estilos del Título */
.ct-toyline-title2 {
    font-size: 20px !important; /* Ajustamos el tamaño para que no sea gigante */
    color: #fff !important;
    font-weight: bold !important;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 0 15px !important; /* Margen izquierdo si no hay botón back */
}

/* --- ESTILOS PARA EL BOTÓN BACK (BLOQUE NEGRO) --- */

.ct-toyline-backcol {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-toyline-back {
    width: 45px;
    height: 55px;
    min-width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #212121; /* Fondo negro de consistencia */
    text-decoration: none !important;
    line-height: 1.5;
    transition: filter 0.2s ease !important;
}

/* Quitamos el contenido "«" para que el botón esté vacío */
.ct-toyline-back::before {
    content: ""; /* Vacío */
}

.ct-toyline-back:hover {
    filter: brightness(1.1); /* Efecto hover sutil */
    opacity: 1;
}









/* GRID */
.universe-grid {
  display: grid;
  gap: 0px;
	margin-top: 15px;
}

/* columnas configurables por shortcode */
.universe-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
.universe-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
.universe-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }
.universe-grid.columns-5 { grid-template-columns: repeat(5, 1fr); }

/* UNIVERSE GRID */
.universe-grid{
  background-color: #dedede !important;
}

/* UNIVERSE CARD (single canonical) */
.universe-card{
  display: block;
  position: relative;
  text-align: center;
  padding: 0;
  margin: 10px !important;

  background: #fff;
  color: #000;
  text-decoration: none !important;

  border-radius: 0px;
  border: 0px solid transparent;
  overflow: visible;
  /*transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;*/
}

.universe-card:hover{
  transform: translateY(-3px);
  /*border-color: #2A76EC;*/
  box-shadow: 0 0 5px rgba(0,0,0,.18);
}

/* tracked / not tracked */
.universe-card-tracked{
  border: 1px solid #808080 !important;
}
.universe-card-not-tracked{
  border: 3px solid #c9c9c9 !important;
}


/* --- BARRA SUPERIOR TECH --- */
.ct-card-header-tech {
    background: #fff !important; /* Gris oscuro industrial */
    color: #fff !important;
    display: flex !important;
    justify-content: space-between !important;
    font-family: verdana; /* Toque técnico */
    font-size: 12px !important;
    font-weight: normal !important;
    border-bottom: 0px solid #222 !important;
	margin-bottom: 10px;
	gap: 2px !important;
}
.ct-tech-years{
	margin-left: 0px !important;
	background: #444 !important; /* Gris oscuro industrial */
	width: 50% !important;
}

.ct-tech-total{
	margin-left: 0px !important;
	background: #444 !important; /* Gris oscuro industrial */
	width: 50% !important;
}

/* --- PANEL DE ESTADÍSTICAS GLOBALES (ESTILO INVERTIDO) --- */
.ct-user-stats-panel {
    display: flex !important;
    gap: 5px !important;
    margin-bottom: 30px !important;
    width: 100% !important;
	margin-top: 5px !important;
}

.ct-stat {
    flex: 1 !important;
    padding: 25px 10px !important;
    border-radius: 0px !important; /* Un poco más redondeado para el look cartoon */
    text-align: center !important;
    border: none !important; /* Eliminamos bordes, el color manda */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
}

.ct-stat:hover {
    transform: translateY(-3px) !important;
    filter: brightness(1.05); /* Efecto sutil al pasar el ratón */
}

/* Tipografía en Blanco para todos */
.ct-stat-num, 
.ct-stat-label {
    color: #ffffff !important;
    opacity: 1 !important;
    display: block !important;
}

.ct-stat-num {
    font-size: 36px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
    text-shadow: 1px 2px 4px rgba(0,0,0,0.15); /* Mejora legibilidad en fondos claros */
}

.ct-stat-label {
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
}

/* --- COLORES DE FONDO SÓLIDOS --- */

/* Bloque HAVE (Verde vibrante) */
.ct-stat-have { 
    background-color: #2e7d32  !important; 
}

/* Bloque NEED (Naranja puro) */
.ct-stat-need { 
    background-color: #ff8c00 !important; 
}

/* Bloque GOAL (Azul CollectingToys) */
.ct-stat-goal { 
    background-color: #2A76EC !important; 
}







/* --- CHIPS V2: ESTRUCTURA DE BLOQUE 90s --- */

.ct-chips-v2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Dos columnas iguales */
    gap: 0 !important; /* Pegados uno al otro como en el mockup */
    margin-top: 15px !important;
    width: 100% !important;
}

.ct-chip-v2 {
    padding: 12px 5px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    /*text-transform: uppercase !important;*/
    color: #ffffff !important;
    text-align: center !important;
    border-radius: 0 !important; /* ADIÓS REDONDEADO */
    line-height: 1 !important;
    border: none !important;
}

/* El Goal ocupa las dos columnas */
.goal-v2 {
    grid-column: 1 / span 2 !important;
    font-size: 15px !important; /* Un poco más grande para que destaque */
}

/* Colores Sólidos */
.have-v2 { background-color: #28a745 !important; }
.need-v2 { background-color: #ff8c00 !important; }
.goal-v2 { background-color: #2A76EC !important; }

/* Ajuste opcional para que la card no tenga padding abajo y los botones toquen el borde */
.universe-card {
    padding-bottom: 0 !important;
    overflow: hidden !important;
}










/* --- FOOTER HUB / ACCOUNT STYLE --- */
.ct-hub-footer {
    background: #fff !important; /* Gris casi negro */
    color: #999 !important;
    padding: 20px 20px !important;
    margin-top: 150px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

.ct-footer-content {
    max-width: 1200px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.ct-disclaimer-box {
    border: 1px solid #ccc !important;
    padding: 20px !important;
    margin-bottom: 30px !important;
    background: #fff !important;
    position: relative !important;
}

.ct-warning-label {
    position: absolute !important;
    top: -10px !important;
    left: 20px !important;
    background: #ff8c00 !important; /* Naranja Need */
    color: #fff !important;
    padding: 2px 10px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.ct-disclaimer-box p {
    font-size: 12px !important;
    line-height: 1.6 !important;
    margin: 10px 0 !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
	background: #fff !important; /* Naranja Need */
    color: #000 !important;
}

.ct-disclaimer-box strong {
    color: #000 !important;
}

/* --- LINKS Y COPYRIGHT --- */
.ct-footer-links {
    font-size: 11px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

.ct-footer-link {
    color: #2A76EC !important; /* Azul Goal */
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.ct-footer-link:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

.ct-separator {
    margin: 0 10px !important;
    color: #444 !important;
}

.ct-copyright {
    color: #666 !important;
    display: block !important;
    margin-top: 15px !important;
}














/* --- CONTENEDOR DEL FORMULARIO --- */
.ct-profile-editor-panel {
    background: #fdfdfd !important;
    padding: 30px !important;
    border: 1px solid #ddd !important;
}

/* --- FILAS Y COLUMNAS --- */
.ct-form-row {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

.ct-form-group {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.ct-form-group-half {
    max-width: calc(50% - 10px) !important;
    margin-bottom: 25px !important;
}

/* --- ETIQUETAS (LABELS) --- */
.ct-form-group label {
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #444 !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.5px !important;
}

/* --- INPUTS Y SELECTS (ESTILO 90s TECH) --- */
.ct-form-group input[type="text"],
.ct-form-group input[type="email"],
.ct-form-group select {
    padding: 12px 15px !important;
    border: 2px solid #333 !important; /* Bordes gruesos y oscuros */
    border-radius: 0 !important; /* CERO redondeo */
    font-size: 15px !important;
    font-weight: 600 !important;
    background: #fff !important;
    transition: border-color 0.2s ease !important;
}

.ct-form-group input:focus {
    border-color: #2A76EC !important; /* Azul al enfocar */
    outline: none !important;
}

/* --- CAMPOS DESHABILITADOS --- */
.ct-input-disabled {
    background: #f0f0f0 !important;
    border-color: #ccc !important;
    color: #888 !important;
    cursor: not-allowed !important;
}

.ct-input-hint {
    font-size: 11px !important;
    color: #999 !important;
    margin-top: 5px !important;
    font-style: italic !important;
}

/* --- BOTÓN DE ACCIÓN --- */
.ct-btn-save-profile {
    background: #2A76EC !important; /* Azul Goal */
    color: #fff !important;
    border: none !important;
    padding: 15px 30px !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.1s ease !important;
    display: inline-block !important;
}

.ct-btn-save-profile:hover {
    background: #1a5bbd !important;
    transform: translateY(-2px) !important;
}

/* --- NOTA DE PRIVACIDAD --- */
.ct-privacy-note {
    margin-top: 30px !important;
    padding-top: 20px !important;
    border-top: 1px dashed #ccc !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 12px !important;
    color: #666 !important;
    line-height: 1.5 !important;
}

.ct-privacy-link {
    color: #2A76EC !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}



/* --- CORRECCIÓN SELECT CORTADO --- */

.ct-form-group-half {
    flex: 0 0 50% !important; /* Forzamos que ocupe el 50% real */
    max-width: 50% !important;
}

.ct-select-custom {
    width: 100% !important;
    height: auto !important; /* Deja que el padding defina la altura */
    min-height: 45px !important;
    padding: 10px 35px 10px 15px !important; /* Más espacio a la derecha para la flecha */
    cursor: pointer !important;
    
    /* Look 90s: Bordes rectos y definidos */
    border: 2px solid #333 !important;
    background-color: #fff !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    
    /* Evita que el sistema operativo "corte" el texto */
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    
    /* Elimina bordes redondeados de iOS/Safari */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0 !important;

    /* Flecha personalizada simple (opcional, para que no dependa del SO) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 14px !important;
}

/* Fix para Firefox que a veces añade un margen raro */
.ct-select-custom::-moz-focus-inner {
    border: 0 !important;
    padding: 0 !important;
}



.ct-form-actions {
    display: flex !important;
    justify-content: flex-end !important; /* Mueve el contenido al final (derecha) */
    margin-top: 30px !important;
    padding-top: 20px !important;
    border-top: 1px solid #eee !important; /* Una línea sutil para separar la acción final */
}

/* Opcional: Si quieres que el botón resalte más al estar a la derecha */
.ct-btn-save-profile {
    min-width: 200px !important; /* Le da más cuerpo al botón de confirmación */
    text-align: center !important;
}




/* --- ALERTA DE ÉXITO: FULL BAR 90s --- */
.ct-alert-success {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background-color: #28a745 !important; /* Verde Have */
    color: #ffffff !important;
    padding: 15px 20px !important;
    margin-bottom: 25px !important;
    width: 100% !important;
    
    /* Look Industrial: Sin redondeos y con borde inferior de contraste */
    border-radius: 0 !important; 
    border-bottom: 3px solid #1e7e34 !important;
    
    /* Tipografía técnica */
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    
    /* Animación sutil de entrada (opcional) */
    animation: ctFadeIn 0.3s ease-out !important;
}

.ct-ok-icon {
    flex-shrink: 0 !important;
    opacity: 0.9 !important;
}

@keyframes ctFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}










/* --- ADAPTACIÓN MÓVIL (TABS HORIZONTALES) --- */

@media (max-width: 768px) {
    .ct-account-main-wrapper {
        flex-direction: column !important; /* Sidebar arriba, contenido abajo */
        border: none !important;
        margin-top: 10px !important;
    }

    /* La Sidebar se convierte en la barra de Tabs */
    .ct-account-sidebar {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        background-color: #f4f4f4 !important;
    }

    .ct-account-sidebar h3 {
        display: none !important; /* Ocultamos el título "My Account" en móvil para ganar espacio */
    }

    /* Convertimos la lista en un scroll horizontal */
    .ct-account-nav {
        flex-direction: row !important; 
        overflow-x: auto !important; /* Si hay muchos items, se puede deslizar */
        -webkit-overflow-scrolling: touch;
        display: flex !important;
        padding: 0px !important;
        gap: 0px !important;
    }

    .ct-account-nav li {
        margin-bottom: 0 !important;
        flex: 1 0 auto !important; /* Los items no se encogen */
        width: auto !important;
    }

    .ct-account-nav li a {
        display: flex !important;
        flex-direction: column !important; /* Icono arriba, texto abajo */
        align-items: center !important;    /* Centrado horizontal */
        justify-content: center !important; /* Centrado vertical completo */
        
        /* --- ESTO ES LO CLAVE PARA UNIFICAR --- */
        height: 80px !important;      /* Forzamos una altura fija para todos */
        min-width: 90px !important;    /* Un ancho mínimo para que no se peguen */
        /* ------------------------------------- */

        padding: 5px !important;       /* Padding interno pequeño */
        font-size: 11px !important;    /* Texto pequeño y técnico */
        line-height: 1.2 !important;   /* Interlineado ajustado */
        text-align: center !important;
        border-radius: 0 !important;   /* Mantener look 90s */
        box-sizing: border-box !important;
        background: #f4f4f4 !important; /* Fondo gris por defecto */
        border: 1px solid #ccc !important; /* Borde sutil */
    }
	
	.ct-account-nav li a span {
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important; /* Añade "..." si es muy largo (ej: Change Pass...) */
        white-space: nowrap !important; /* Fuerza una sola línea */
    }
	
	/* Estado Activo: Resaltado */
    .ct-account-nav li.active a {
        background-color: #ffffff !important; /* Fondo blanco */
        border-bottom: 0x solid #2A76EC !important; /* Borde inferior azul de realce */
        color: #2A76EC !important;
    }

    .ct-icon {
        width: 24px !important;  /* Un poco más grandes para que destaquen */
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        
        margin-right: 0 !important; /* Reset del margen derecho de escritorio */
        margin-bottom: 8px !important; /* Espacio fijo entre icono y texto */
        
        flex-shrink: 0 !important; /* Evita que el icono se aplaste */
        display: block !important;
    }
	
	
	/* RESCATE DE LOGOUT */
    .ct-nav-logout {
        margin-top: 0 !important;      /* Quitamos el salto de 30px */
        padding-top: 0 !important;     /* Quitamos el padding extra */
        border-top: none !important;    /* Quitamos la línea divisoria */
        flex: 1 0 auto !important;     /* Forzamos que se comporte como sus hermanos */
    }

    .ct-nav-logout a {
        background-color: #ffebee !important; /* Un tono rojizo muy sutil para diferenciarlo */
        border: 1px solid #ffcdd2 !important; /* Borde acorde al tono */
    }

    /* Ajuste para que el texto de Logout no se pierda */
    .ct-nav-logout a .ct-icon {
        color: #d32f2f !important; /* Icono en rojo sutil */
    }

    /* Ajuste del contenido */
    .ct-account-content {
        padding: 10px !important;
    }

    /* Ajuste de la Barra de Título (Headerbar) */
    .ct-toyline-headerbar.ct-universe-theme {
        flex-direction: column !important;
        height: auto !important;
        padding: 10px !important;
    }

    .ct-toyline-middle {
        padding-left: 0 !important;
        margin-top: 5px !important;
        font-size: 13px !important;
    }

    /* --- EL GRID DE UNIVERSOS A 2 COLUMNAS --- */
    .universe-grid.columns-4, 
    .universe-grid.columns-3,
    .universe-grid.columns-5 { 
        grid-template-columns: repeat(2, 1fr) !important; 
    }

    /* Estadísticas en móvil: 3 columnas apretadas */
    .ct-user-stats-panel {
        gap: 3px !important;
    }
    
    .ct-stat {
        padding: 15px 5px !important;
    }

    .ct-stat-num {
        font-size: 24px !important;
    }

    .ct-stat-label {
        font-size: 9px !important;
    }
	
	
	
	
	/* --- COMPACTAR HEADERBAR MÓVIL --- */
    .ct-toyline-headerbar.ct-universe-theme {
        display: flex !important;
        flex-direction: row !important;    /* Una sola línea */
        justify-content: space-between !important; /* Uno a cada extremo */
        align-items: center !important;    /* Alineación vertical perfecta */
        height: auto !important;           /* Altura dinámica */
        min-height: 0 !important;
        padding: 5px 10px !important;      /* La franja delgada de 5px */
		padding-top: 15px !important;
		padding-bottom: 15px !important;
		border-left: 10px solid #000 !important;
    }

    /* Título más pequeño */
    .ct-toyline-headerbar .ct-toyline-title2 {
        font-size: 14px !important;        /* Tamaño reducido */
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    /* Contenedor del Título (quitar anchos fijos si los hay) */
    .ct-toyline-left {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* La "Last Addition" en una segunda línea más discreta */
    .ct-toyline-middle {
        padding-left: 0 !important;
        margin-top: 0 !important;
        font-size: 10px !important;        /* Letra muy pequeña para la fecha */
        opacity: 0.8 !important;
        white-space: normal !important;
        color: #ddd !important;            /* Gris claro para que no compita con el título */
    }

    /* Escondemos el botón back vacío en móvil para no robar espacio */
    .ct-toyline-backcol, .ct-null-back {
        display: none !important;
    }
	
	
	
	
	
	
	.universe-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 10px !important;
        padding: 10px !important;
    }

	
	.universe-card {
        padding: 10px !important;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 220px; /* Altura mínima para que todas alineen */
        background: #fff;
        border-radius: 8px;
        border: 1px solid #eee;
        text-decoration: none;
    }

    /* --- BARRA SUPERIOR TECH EN MÓVIL --- */
    .ct-card-header-tech {
        flex-direction: column !important; /* Apilamos: uno arriba del otro */
        gap: 2px !important; /* Espacio mínimo entre las dos barras */
        background: transparent !important; /* Quitamos el fondo blanco para que no brille entre las barras */
        margin-bottom: 12px !important;
    }

    .ct-tech-years, 
    .ct-tech-total {
        width: 100% !important; /* Ahora ocupan todo el ancho de la card */
        display: block !important;
        text-align: center !important; /* Centramos el texto para que se vea ordenado */
        font-family: 'Verdana', sans-serif !important;
        font-size: 13px !important;
        font-weight: normal !important; /* Aseguramos que NO sea negrita */
        padding: 4px 0 !important; /* Un poco de aire interno para que no se vea apretado */
        background: #444 !important; /* Mantenemos el gris industrial */
        color: #fff !important;
        border-radius: 0px !important; /* Manteniendo tu estilo de bordes rectos */
    }

    /* Ajuste visual: si quieres que la primera barra no tenga margen superior */
    .ct-tech-years {
        margin-bottom: 0px !important;
    }

    /* El logo: El protagonista */
	/* 1. El contenedor del logo: Más alto para dar espacio */
    .universe-logo {
        height: 100px !important; /* Aumentamos de 60px a 90px */
        display: flex !important;
        align-items: center !important;   /* Centrado vertical */
        justify-content: center !important; /* Centrado horizontal */
        margin-bottom: 10px !important; /* Un poco más de aire abajo */
        padding: 0 0px !important; /* Padding lateral para que no toque bordes */
        width: 100% !important;
    }

    /* 2. La imagen del logo: Soltamos las limitaciones */
    .universe-logo img {
        /* ESTA ES LA CLAVE */
        height: auto !important;       /* Deja que la proporción mande */
        width: auto !important;        /* No forzamos ancho al 100% */
        
        /* Límites de seguridad para que no "explote" la tarjeta */
        max-height: 95px !important;   /* Casi todo el alto del contenedor (90px) */
        max-width: 100% !important;    /* Pero que nunca se salga por los lados */
        
        object-fit: contain !important; /* Integridad total del logo */
        display: block !important;
    }

    /* Título del universo */
    .ct-universe-title h3 {
        font-size: 13px !important;
        margin: 0 0 8px 0 !important;
        line-height: 1.2;
        text-align: center;
        color: #162a6a;
    }

    .ct-chips-v2 {
        display: flex !important;
        flex-direction: column !important; /* Stack vertical */
        justify-content: center !important; /* Centra el grupo verticalmente si hay espacio de sobra */
        align-items: center !important;    /* Centra los chips horizontalmente en la card */
        gap: 3px !important;               /* Espacio uniforme entre ellos */
        margin: auto 0 !important;         /* El "auto" arriba/abajo los centra en el espacio disponible de la card */
        width: 100%;
    }

    /* 2. Cada chip individual */
    .ct-chip-v2 {
        display: flex !important;          /* Convertimos el chip en flex */
        align-items: center !important;    /* Centra el texto verticalmente DENTRO del chip */
        justify-content: center !important; /* Centra el texto horizontalmente DENTRO del chip */
        
        width: 90% !important;             /* Que no toque los bordes de la card, se ve más elegante */
        min-height: 24px !important;       /* Altura fija para que todos sean simétricos */
        
        font-size: 10px !important;
        font-weight: 700 !important;
        border-radius: 0px;
        text-transform: uppercase;
        padding: 0 10px !important;        /* Padding lateral solo para el texto */
    }

    /* Colores con intención (Action Cartoon Style) */
    .have-v2 { 
        /*background-color: #779636 !important; /* Verde "Tengo" */
        color: #fff !important; 
		height: 30px;
    }
    .need-v2 { 
        background-color: #ff8c00 !important; /* Naranja "Necesito" */
        color: #fff !important; 
		height: 30px;
    }
    .goal-v2 { 
        background-color: #2A76EC !important; /* Azul "Meta" */
        color: #fff !important; 
		height: 30px;
    }

}