.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    border-top: none !important;
}

a:focus, a:hover {
    color: inherit !important;
    text-decoration: none !important;
}
/*registro*/
.formpadrao .desc {
    color: #fff;
}
.formpadrao .desc, .formpadrao .camp, .formpadrao .camp2 {
    float: left;
    height: 6px;
    line-height: 35px;
}
.formpadrao .desc {
    width: 180px;
    padding: 0 10px;
    color: #fff;
    font-family: H67, Arial;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    text-align: right;
}
.form-control {
	background: #fafafa;
	border: 1px solid #e3e3e3;
	color: #666;
}
.form-control:focus {
	border: 1px solid #ccc;
}

/* http://stackoverflow.com/questions/19562903/remove-padding-from-columns-in-bootstrap-3 */
.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

/* http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 */
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.thumbnail {
    background-color: #f1f1f1;
    border: 1px solid #e3e3e3;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #ff0000;
}
.form-group{margin: auto;}
.btn-primary {
    color: #ff0000;
    background-color: transparent;
	border-color: #ff0000;
	-moz-transition: all .1s ease-in;
    -o-transition: all .1s ease-in;
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
    color: #fff !important;
    background-color: #140c17  !important;
	border-color: #140c17  !important;
}

.social-bar-vertical {
    position: fixed;
    top: 35%;
    left: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0,0,0,0.7);
    padding: 10px 5px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    gap: 15px;
}

.social-bar-vertical .social-icon {
    font-size: 28px;
    width: 50px;
    height: 50px;
    color: #fff;
    background: #222;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.social-bar-vertical .social-icon:hover {
    transform: scale(1.1);
}

.social-bar-vertical .facebook:hover {
    background: #3b5998;
}

.social-bar-vertical .instagram:hover {
    background: #e4405f;
}

.social-bar-vertical .discord:hover {
    background: #7289da;
}

/* ========== RANKINGS: CONTENEDOR / ESCALA COMPACTA ========== */
/* aplica a todas las tablas de rankings que usamos */
#RankingGeneral,
#RankingLevel,
#RankingResets,
#RankingMaster,
#RankingPK,
#RankingOnline,
#RankingGuilds,
#RankingGens,
#RankingVotes,
#RankingBloodCastle,
#RankingChaosCastle,
#RankingDevilSquare,
.table.general-rank {
  width: 100% !important;      /* ocupar el ancho de su columna (col-xs-8) */
  table-layout: auto;          /* columnas se ajustan al contenido */
  white-space: nowrap;         /* evita saltos raros */
  font-size: 13px;             /* escala base compacta */
  margin: 0 auto;              /* centrado si el padre deja espacio */
  max-width: 900px;            /* límite para no “desbordar” visualmente */
}

/* encabezados y filas más chicos */
.general-rank thead th { font-size: 13.5px; padding: 6px 8px; }
.general-rank tbody td { font-size: 13px;   padding: 6px 8px;  }

/* avatar compacto y redondo */
.rankings-class-image {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

/* columna de nombre: ancho razonable y corte elegante */
#RankingGeneral td.text-start,
#RankingLevel  td.text-start,
#RankingResets td.text-start,
#RankingMaster td.text-start,
#RankingPK      td.text-start,
#RankingOnline  td.text-start,
#RankingGuilds  td.text-start,
#RankingGens    td.text-start,
#RankingVotes   td.text-start,
#RankingBloodCastle td.text-start,
#RankingChaosCastle td.text-start,
#RankingDevilSquare td.text-start {
  max-width: 320px;            /* ajustá si querés un poco más/menos */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========== BARRA DE ESTADO (cache + crédito) ========== */
.rank-toolbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 8px 0 10px;
  padding: 8px 12px;
  background: #1f1a27;
  border: 1px solid #322d39;
  border-radius: 4px;
  font-size: 13px;
  color: #ddd;
}
.rank-toolbar i{ margin-right:6px; opacity:.9; }
.rank-toolbar a{ color:#6ea8ff; text-decoration:none; }
.rank-toolbar a:hover{ text-decoration:underline; }

.form-control{display:block;width:70%;
margin: auto;
	height:34px;
	padding:6px 12px;
	font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.form-control::-moz-placeholder{color:#999;opacity:1}.form-control:-ms-input-placeholder{color:#999}.form-control::-webkit-input-placeholder{color:#999}.form-control::-ms-expand{background-color:transparent;border:0}.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{background-color:#eee;opacity:1}.form-control[disabled],fieldset[disabled] .form-control{cursor:not-allowed}textarea.form-control{height:auto}input[type=search]{-webkit-appearance:none}@media screen and (-webkit-min-device-pixel-ratio:0){input[type=date].form-control,input[type=time].form-control,input[type=datetime-local].form-control,input[type=month].form-control{line-height:34px}.input-group-sm input[type=date],.input-group-sm input[type=time],.input-group-sm input[type=datetime-local],.input-group-sm input[type=month],input[type=date].input-sm,input[type=time].input-sm,input[type=datetime-local].input-sm,input[type=month].input-sm{line-height:30px}.input-group-lg input[type=date],.input-group-lg input[type=time],.input-group-lg input[type=datetime-local],.input-group-lg input[type=month],input[type=date].input-lg,input[type=time].input-lg,input[type=datetime-local].input-lg,input[type=month].input-lg{line-height:46px}}.form-group{margin-bottom:15px}.checkbox,.radio{position:relative;display:block;margin-top:10px;margin-bottom:10px}.checkbox label,.radio label{min-height:20px;padding-left:20px;margin-bottom:0;font-weight:400;cursor:pointer}.checkbox input[type=checkbox],.checkbox-inline input[type=checkbox],.radio input[type=radio],.radio-inline input[type=radio]{position:absolute;margin-top:4px\9;margin-left:-20px}.checkbox+.checkbox,.radio+.radio{margin-top:-5px}.checkbox-inline,.radio-inline{position:relative;display:inline-block;padding-left:20px;margin-bottom:0;font-weight:400;vertical-align:middle;cursor:pointer}.checkbox-inline+.checkbox-inline,.radio-inline+.radio-inline{margin-top:0;margin-left:10px}fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed}.checkbox-inline.disabled,.radio-inline.disabled,fieldset[disabled] .checkbox-inline,fieldset[disabled] .radio-inline{cursor:not-allowed}.checkbox.disabled label,.radio.disabled label,fieldset[disabled] .checkbox label,fieldset[disabled] .radio label{cursor:not-allowed}.form-control-static{min-height:34px;padding-top:7px;padding-bottom:7px;margin-bottom:0}.form-control-static.input-lg,.form-control-static.input-sm{padding-right:0;padding-left:0}.input-sm{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}select.input-sm{height:30px;line-height:30px}select[multiple].input-sm,textarea.input-sm{height:auto}.form-group-sm .form-control{height:30px;padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.form-group-sm select.form-control{height:30px;line-height:30px}.form-group-sm select[multiple].form-control,.form-group-sm textarea.form-control{height:auto}.form-group-sm .form-control-static{height:30px;min-height:32px;padding:6px 10px;font-size:12px;line-height:1.5}.input-lg{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}select.input-lg{height:46px;line-height:46px}select[multiple].input-lg,textarea.input-lg{height:auto}.form-group-lg .form-control{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.form-group-lg select.form-control{height:46px;line-height:46px}.form-group-lg select[multiple].form-control,.form-group-lg textarea.form-control{height:auto}.form-group-lg .form-control-static{height:46px;min-height:38px;padding:11px 16px;font-size:18px;line-height:1.3333333}.has-feedback{position:relative}.has-feedback .form-control{padding-right:42.5px}.form-control-feedback{position:absolute;top:0;right:0;z-index:2;display:block;width:34px;height:34px;line-height:34px;text-align:center;pointer-events:none}.form-group-lg .form-control+.form-control-feedback,.input-group-lg+.form-control-feedback,.input-lg+.form-control-feedback{width:46px;height:46px;line-height:46px}.form-group-sm .form-control+.form-control-feedback,.input-group-sm+.form-control-feedback,.input-sm+.form-control-feedback{width:30px;height:30px;line-height:30px}.has-success .checkbox,.has-success .checkbox-inline,.has-success .control-label,.has-success .help-block,.has-success .radio,.has-success .radio-inline,.has-success.checkbox label,.has-success.checkbox-inline label,.has-success.radio label,.has-success.radio-inline label{color:#3c763d}.has-success .form-control{border-color:#3c763d;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-success .form-control:focus{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168}.has-success .input-group-addon{color:#3c763d;background-color:#dff0d8;border-color:#3c763d}.has-success .form-control-feedback{color:#3c763d}.has-warning .checkbox,.has-warning .checkbox-inline,.has-warning .control-label,.has-warning .help-block,.has-warning .radio,.has-warning .radio-inline,.has-warning.checkbox label,.has-warning.checkbox-inline label,.has-warning.radio label,.has-warning.radio-inline label{color:#8a6d3b}.has-warning .form-control{border-color:#8a6d3b;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-warning .form-control:focus{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b}.has-warning .input-group-addon{color:#8a6d3b;background-color:#fcf8e3;border-color:#8a6d3b}.has-warning .form-control-feedback{color:#8a6d3b}.has-error .checkbox,.has-error .checkbox-inline,.has-error .control-label,.has-error .help-block,.has-error .radio,.has-error .radio-inline,.has-error.checkbox label,.has-error.checkbox-inline label,.has-error.radio label,.has-error.radio-inline label{color:#a94442}.has-error .form-control{border-color:#a94442;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.has-error .form-control:focus{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.has-error .input-group-addon{color:#a94442;background-color:#f2dede;border-color:#a94442}.has-error .form-control-feedback{color:#a94442}.has-feedback label~.form-control-feedback{top:25px}.has-feedback label.sr-only~.form-control-feedback{top:0}.help-block{display:block;margin-top:5px;margin-bottom:10px;color:#737373}@media (min-width:768px){.form-inline .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-static{display:inline-block}.form-inline .input-group{display:inline-table;vertical-align:middle}.form-inline .input-group .form-control,.form-inline .input-group .input-group-addon,.form-inline .input-group .input-group-btn{width:auto}.form-inline .input-group>.form-control{width:100%}.form-inline .control-label{margin-bottom:0;vertical-align:middle}.form-inline .checkbox,.form-inline .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.form-inline .checkbox label,.form-inline .radio label{padding-left:0}.form-inline .checkbox input[type=checkbox],.form-inline .radio input[type=radio]{position:relative;margin-left:0}.form-inline .has-feedback .form-control-feedback{top:0}}.form-horizontal .checkbox,.form-horizontal .checkbox-inline,.form-horizontal .radio,.form-horizontal .radio-inline{padding-top:7px;margin-top:0;margin-bottom:0}.form-horizontal .checkbox,.form-horizontal .radio{min-height:27px}.form-horizontal .form-group{margin-right:-15px;margin-left:-15px}@media (min-width:768px){.form-horizontal .control-label{padding-top:7px;margin-bottom:0;text-align:right}}.form-horizontal .has-feedback .form-control-feedback{right:15px}@media (min-width:768px){.form-horizontal .form-group-lg .control-label{padding-top:11px;font-size:18px}}@media (min-width:768px){.form-horizontal .form-group-sm .control-label{padding-top:6px;font-size:12px}}.btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.btn.focus,.btn:focus,.btn:hover{color:#333;text-decoration:none}.btn.active,.btn:active{background-image:none;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn.disabled,.btn[disabled],fieldset[disabled] .btn{cursor:not-allowed;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none;opacity:.65}a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none}

/* ======== ESTILOS ESPECÍFICOS PARA USERCP - CUSTOMV1 ======== */

/* Forzar color blanco en todos los módulos del UserCP */
.page-title, .page-title span,
.page-title h1, .page-title h2, .page-title h3,
div[class*="page"] {
    color: #FFFFFF !important;
}

/* Tablas específicas del UserCP */
.myaccount-table, .myaccount-table td, .myaccount-table th,
.general-table-ui, .general-table-ui td, .general-table-ui th,
.table-condensed, .table-condensed td, .table-condensed th {
    color: #FFFFFF !important;
}

/* Contenido de caracteres del usercp */
.myaccount-character-name,
.myaccount-character-block,
.myaccount-character-block-location,
.myaccount-character-block-level {
    color: #FFFFFF !important;
}

/* Divs de información del usercp */
div[class*="myaccount"], 
div[class*="usercp"],
.col-xs-8 div, .col-xs-12 div {
    color: #FFFFFF !important;
}

/* Texto dentro del contenido principal */
article div, article span, article p, article strong,
section div, section span, section p, section strong {
    color: #FFFFFF !important;
}

/* Override específico para elementos b que estaban tomando el color del body */
article b, section b, div b, p b, span b {
    color: #FFFFFF !important;
}

/* Asegurar que los labels mantengan su color */
.label-success { background-color: #5cb85c !important; color: #FFFFFF !important; }
.label-danger { background-color: #d9534f !important; color: #FFFFFF !important; }
.label-default { background-color: #777 !important; color: #FFFFFF !important; }
.label-info { background-color: #5bc0de !important; color: #FFFFFF !important; }
.label-warning { background-color: #f0ad4e !important; color: #000000 !important; }

/* Mensajes de error/éxito */
.alert, .alert-success, .alert-info, .alert-warning, .alert-danger,
.rmsg, .rmsg.error, .rmsg.warn {
    color: #FFFFFF !important;
}

/* Enlaces dentro del usercp */
article a, section a {
    color: #4fc3f7 !important;
}

article a:hover, section a:hover {
    color: #ffffff !important;
}

/* Status indicators */
.online-status-indicator {
    display: inline-block !important;
}

/* ======== ESTILOS ESPECÍFICOS PARA MYACCOUNT CHARACTER DISPLAY ======== */

/* Contenedor principal de personajes */
.myaccount-characters-container {
    background: rgba(0, 0, 0, 0.4);
    padding: 20px;
    border-radius: 8px;
    margin-top: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Tarjetas de personajes mejoradas */
.myaccount-character-card {
    background: linear-gradient(135deg, rgba(20, 12, 23, 0.9) 0%, rgba(40, 30, 45, 0.9) 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 220px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.myaccount-character-card:hover {
    transform: translateY(-5px);
    border-color: rgba(79, 195, 247, 0.6);
    box-shadow: 0 8px 25px rgba(79, 195, 247, 0.2);
}

/* Brillo sutil en el borde */
.myaccount-character-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(79, 195, 247, 0.8), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.myaccount-character-card:hover::before {
    opacity: 1;
}

/* Header con nombre y status */
.myaccount-character-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.myaccount-character-name {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #FFFFFF !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    margin: 0 !important;
}

.myaccount-character-name a {
    color: #4fc3f7 !important;
    text-decoration: none !important;
}

.myaccount-character-name a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(79, 195, 247, 0.8);
}

/* Área central con avatar y stats */
.myaccount-character-content {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

/* Avatar del personaje mejorado */
.myaccount-character-block {
    flex-shrink: 0;
    position: relative;
}

.myaccount-character-block img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50%;
    border: 3px solid rgba(79, 195, 247, 0.6);
    object-fit: cover;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(79, 195, 247, 0.3);
}

.myaccount-character-block:hover img {
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 25px rgba(79, 195, 247, 0.6);
}

/* Información del personaje */
.myaccount-character-info {
    flex: 1;
    color: #FFFFFF !important;
}

/* Nivel prominente */
.myaccount-character-level {
    font-size: 24px !important;
    font-weight: bold !important;
    color: #ffce66 !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    margin-bottom: 8px;
    display: block;
}

.myaccount-character-level::before {
    content: "Lv. ";
    font-size: 14px;
    color: #ffffff;
    font-weight: normal;
}

/* Ubicación del personaje */
.myaccount-character-location {
    color: #b0b0b0 !important;
    font-size: 13px !important;
    line-height: 1.4;
    margin-bottom: 8px;
}

.myaccount-character-location strong {
    color: #4fc3f7 !important;
}

/* Status online/offline indicator mejorado */
.online-status-indicator {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50%;
    margin-left: 8px;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 8px rgba(0, 255, 0, 0.6); }
    50% { box-shadow: 0 0 15px rgba(0, 255, 0, 0.9); }
    100% { box-shadow: 0 0 8px rgba(0, 255, 0, 0.6); }
}

/* Footer con acciones */
.myaccount-character-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.myaccount-character-actions {
    display: flex;
    gap: 10px;
}

.character-action-btn {
    padding: 6px 12px;
    background: rgba(79, 195, 247, 0.2);
    border: 1px solid rgba(79, 195, 247, 0.4);
    border-radius: 6px;
    color: #4fc3f7 !important;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.character-action-btn:hover {
    background: rgba(79, 195, 247, 0.4);
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Vista de tabla alternativa */
.myaccount-characters-table {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 20px;
}

.myaccount-characters-table table {
    width: 100%;
    border-collapse: collapse;
}

.myaccount-characters-table th {
    background: rgba(20, 12, 23, 0.9);
    color: #FFFFFF !important;
    padding: 15px;
    text-align: left;
    font-weight: bold;
    border-bottom: 2px solid rgba(79, 195, 247, 0.6);
}

.myaccount-characters-table td {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #FFFFFF !important;
    vertical-align: middle;
}

.myaccount-characters-table tr:hover {
    background: rgba(79, 195, 247, 0.1);
}

.myaccount-characters-table .character-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(79, 195, 247, 0.6);
}

/* Responsive */
@media (max-width: 768px) {
    .myaccount-character-content {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .myaccount-character-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .myaccount-character-footer {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* Override para asegurar que todos los elementos dentro de myaccount sean blancos */
.myaccount-character-card *,
.myaccount-characters-container *,
.myaccount-characters-table * {
    color: inherit !important;
}

/* ======== ORGANIZACIÓN INTEGRAL DE MYACCOUNT ======== */

/* Contenedor principal mejorado */
.myaccount-main-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 0;
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Header principal de cuenta */
.myaccount-header-section {
    background: linear-gradient(135deg, rgba(20, 12, 23, 0.95) 0%, rgba(40, 30, 45, 0.95) 100%);
    padding: 25px;
    border-bottom: 2px solid rgba(79, 195, 247, 0.3);
    position: relative;
}

.myaccount-header-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(79, 195, 247, 0.8), transparent);
}

/* Grid de información de cuenta */
.myaccount-info-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 25px;
    align-items: start;
}

/* Información básica de la cuenta */
.myaccount-basic-info {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.myaccount-basic-info h3 {
    color: #4fc3f7 !important;
    font-size: 18px;
    margin-bottom: 15px;
    text-align: center;
    text-shadow: 0 0 10px rgba(79, 195, 247, 0.5);
    border-bottom: 1px solid rgba(79, 195, 247, 0.3);
    padding-bottom: 10px;
}

/* Tabla de información de cuenta estilizada */
.myaccount-table {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}

.myaccount-table tr {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.myaccount-table tr:hover {
    background: rgba(79, 195, 247, 0.1) !important;
    transform: translateX(5px);
}

.myaccount-table td {
    color: #FFFFFF !important;
    padding: 12px 15px !important;
    border: none !important;
    vertical-align: middle !important;
}

.myaccount-table td:first-child {
    border-radius: 6px 0 0 6px;
    font-weight: bold;
    color: #b0b0b0 !important;
    width: 40%;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.myaccount-table td:last-child {
    border-radius: 0 6px 6px 0;
    color: #FFFFFF !important;
    font-weight: 500;
}

/* ======== SISTEMA DE COINS/CRÉDITOS MEJORADO ======== */

/* Panel lateral de coins */
.myaccount-coins-panel {
    background: linear-gradient(135deg, rgba(255, 206, 102, 0.1) 0%, rgba(79, 195, 247, 0.1) 100%);
    border-radius: 12px;
    padding: 20px;
    border: 2px solid rgba(255, 206, 102, 0.3);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(255, 206, 102, 0.1);
}

.myaccount-coins-panel::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 206, 102, 0.1) 0%, transparent 70%);
    animation: coinGlow 3s ease-in-out infinite;
    opacity: 0.7;
}

@keyframes coinGlow {
    0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.3; }
    50% { transform: rotate(180deg) scale(1.1); opacity: 0.7; }
}

.coins-header {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.coins-header h3 {
    color: #ffce66 !important;
    font-size: 20px;
    margin: 0;
    text-shadow: 0 0 15px rgba(255, 206, 102, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.coins-header i {
    font-size: 24px;
    color: #ffce66;
    text-shadow: 0 0 10px rgba(255, 206, 102, 0.8);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-5px); }
    60% { transform: translateY(-3px); }
}

/* Lista de créditos */
.coins-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 2;
}

.coin-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 206, 102, 0.2);
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.coin-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: linear-gradient(to bottom, #ffce66, #4fc3f7);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.coin-item:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 206, 102, 0.6);
    box-shadow: 0 5px 15px rgba(255, 206, 102, 0.2);
}

.coin-item:hover::before {
    transform: scaleY(1);
}

.coin-name {
    color: #b0b0b0 !important;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.coin-amount {
    color: #ffce66 !important;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255, 206, 102, 0.6);
    display: flex;
    align-items: center;
    gap: 5px;
}

.coin-amount::before {
    content: '';
    width: 16px;
    height: 16px;
    background: radial-gradient(circle, #ffce66 30%, transparent 70%);
    border-radius: 50%;
    display: inline-block;
    animation: coinSpin 2s linear infinite;
}

@keyframes coinSpin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

/* Total de coins destacado */
.coins-total {
    background: linear-gradient(135deg, rgba(255, 206, 102, 0.2) 0%, rgba(79, 195, 247, 0.2) 100%);
    border: 2px solid rgba(255, 206, 102, 0.5);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    margin-top: 15px;
    position: relative;
    z-index: 2;
}

.coins-total-label {
    color: #b0b0b0 !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.coins-total-amount {
    color: #ffce66 !important;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 0 0 15px rgba(255, 206, 102, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Responsive para coins panel */
@media (max-width: 992px) {
    .myaccount-info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .myaccount-coins-panel {
        order: -1;
    }
}

/* Sección de personajes integrada */
.myaccount-characters-section {
    background: rgba(0, 0, 0, 0.2);
    margin-top: 30px;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.myaccount-characters-section .page-title {
    text-align: center;
    margin-bottom: 25px;
    position: relative;
}

.myaccount-characters-section .page-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #4fc3f7, transparent);
}

/* Historial de conexiones mejorado */
.myaccount-history-section {
    background: rgba(0, 0, 0, 0.2);
    margin-top: 30px;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.myaccount-history-section .page-title {
    color: #4fc3f7 !important;
    text-align: center;
    margin-bottom: 20px;
    font-size: 18px;
    text-shadow: 0 0 10px rgba(79, 195, 247, 0.5);
}

/* Tabla de historial mejorada */
.general-table-ui {
    width: 100% !important;
    background: transparent !important;
    border-radius: 8px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.general-table-ui tr {
    transition: all 0.3s ease;
}

.general-table-ui tr:first-child {
    background: rgba(79, 195, 247, 0.2) !important;
}

.general-table-ui tr:not(:first-child):hover {
    background: rgba(79, 195, 247, 0.1) !important;
}

.general-table-ui td {
    color: #FFFFFF !important;
    padding: 12px 15px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.general-table-ui tr:first-child td {
    font-weight: bold !important;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #FFFFFF !important;
}
.rankings_menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rankings_menu a {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(255,255,255,0.08);
    color: #ddd;
    font-size: 13px;
    transition: all 0.25s ease;
    border: 1px solid rgba(255,255,255,0.12);
}

/* Hover */
.rankings_menu a:hover {
    background: #f28c1f;
    color: #fff;
    border-color: #f28c1f;
    transform: translateY(-1px);
}

/* Activo */
.rankings_menu a.active {
    background: linear-gradient(135deg, #f28c1f, #ffb347);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(242,140,31,0.35);
}