/* Estilos base para el panel principal con estética Marvel */
.root-pane {
    -fx-background-color: linear-gradient(to bottom, #0a0f1f, #141c30);
    -fx-background-image: url("../../../images/Fondos/cosmic-fondo.png");
    -fx-background-size: cover;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
}

/* Estilos para los contenedores de equipo - Aspecto más Premium */
.container-seleccion {
    -fx-background-color: rgba(15, 25, 40, 0.85);
    -fx-padding: 20px 15px;
    -fx-spacing: 15px;
    -fx-border-color: linear-gradient(to bottom, #3f87ff, #2157b0);
    -fx-border-width: 2px;
    -fx-border-radius: 15px;
    -fx-background-radius: 15px;
    -fx-effect: dropshadow(gaussian, rgba(0, 100, 255, 0.4), 15, 0.5, 0, 0);
}

/* Estilos para títulos con estilo Marvel */
.title-text {
    -fx-fill: white;
    -fx-font-weight: 900;
    -fx-font-size: 28px;
    -fx-font-family: "Roboto Condensed", "Arial Black", sans-serif;
    -fx-letter-spacing: 1.5px;
    -fx-effect: dropshadow(gaussian, rgba(0, 150, 255, 0.6), 8, 0.5, 0, 2);
    -fx-text-fill: transparent;
    -fx-stroke: white;
    -fx-stroke-width: 0.5px;
}

/* Botones con estilo Marvel - Inspirados en los botones del MCU */
.button-normal {
    -fx-background-color: linear-gradient(to bottom, #3472e0, #1e4bad);
    -fx-text-fill: white;
    -fx-font-weight: bold;
    -fx-font-family: "Roboto", sans-serif;
    -fx-font-size: 14px;
    -fx-border-color: linear-gradient(to bottom, #4a8aff, #2157b0);
    -fx-border-width: 2px;
    -fx-border-radius: 10px;
    -fx-background-radius: 10px;
    -fx-padding: 12px 25px;
    -fx-cursor: hand;
    -fx-effect: dropshadow(gaussian, rgba(0, 50, 150, 0.6), 10, 0.5, 0, 0);
    -fx-letter-spacing: 0.8px;
    -fx-text-transform: uppercase;
}

.button-normal:hover {
    -fx-background-color: linear-gradient(to bottom, #4a8aff, #2674e8);
    -fx-border-color: #6babff;
    -fx-effect: dropshadow(gaussian, rgba(50, 150, 255, 0.7), 15, 0.6, 0, 0);
    -fx-translate-y: -1px;
    -fx-scale-x: 1.03;
    -fx-scale-y: 1.03;
    -fx-transition: all 0.2s ease;
}

.button-normal:pressed {
    -fx-background-color: #1e4bad;
    -fx-translate-y: 1px;
    -fx-scale-x: 0.98;
    -fx-scale-y: 0.98;
    -fx-effect: dropshadow(gaussian, rgba(0, 50, 150, 0.4), 5, 0.3, 0, 0);
}

/* Panel de información de personajes - Estilo holográfico moderno */
.character-info-container {
    -fx-background-color: rgba(10, 20, 40, 0.92);
    -fx-background-radius: 20px;
    -fx-border-color: linear-gradient(to right, #2157b0, #4a8aff, #2157b0);
    -fx-border-width: 2px;
    -fx-border-radius: 20px;
    -fx-effect: dropshadow(gaussian, rgba(50, 150, 255, 0.7), 20, 0.5, 0, 0);
}

.character-info-container .text {
    -fx-fill: #e0e0e0 !important;
}

/* ScrollPane dentro del panel de información - Barra más delgada */
.info-scrollpane {
    -fx-background-color: transparent;
    -fx-background: transparent;
    -fx-border-color: transparent;
    -fx-padding: 0 5 0 0; /* Dar un poco de espacio a la derecha */
}

.info-scrollpane > .viewport {
    -fx-background-color: transparent;
}

.info-scrollpane .scroll-bar:vertical {
    -fx-background-color: rgba(20, 40, 80, 0.3);
    -fx-background-radius: 6px;
    -fx-min-width: 10px; /* Barra más delgada */
    -fx-pref-width: 10px;
    -fx-max-width: 10px;
}

.info-scrollpane .scroll-bar:vertical .thumb {
    -fx-background-color: rgba(66, 165, 245, 0.6); /* Menos opaco */
    -fx-background-radius: 6px;
}

.info-scrollpane .scroll-bar:vertical .track {
    -fx-background-color: transparent; /* Fondo de la pista transparente */
}

.info-scrollpane .scroll-bar .increment-button,
.info-scrollpane .scroll-bar .decrement-button {
    -fx-background-color: transparent;
    -fx-opacity: 0.6;
    -fx-padding: 0 3 0 3; /* Botones más pequeños */
}

.info-scrollpane .scroll-bar .increment-button .increment-arrow,
.info-scrollpane .scroll-bar .decrement-button .decrement-arrow {
    -fx-background-color: rgba(255, 255, 255, 0.5);
    -fx-scale-x: 0.8;
    -fx-scale-y: 0.8;
}

/* Efecto de resplandor para elementos interactivos */
.glow-effect {
    -fx-effect: dropshadow(gaussian, rgba(0, 150, 255, 0.5), 10, 0.5, 0, 0);
}

/* Nombre del personaje en el panel de información */
.character-name {
    -fx-fill: #ffffff !important;
    -fx-font-size: 28px !important;
    -fx-font-weight: bold !important;
    -fx-font-family: "Roboto Condensed", "Segoe UI", sans-serif !important;
    -fx-effect: dropshadow(gaussian, rgba(0, 150, 255, 0.7), 8, 0.5, 0, 0) !important;
    -fx-letter-spacing: 1px !important;
    -fx-alignment: center !important;
    -fx-text-alignment: center !important;
}

/* Títulos de sección más elegantes */
.section-title {
    -fx-fill: #42a5f5 !important;
    -fx-font-size: 16px !important;
    -fx-font-weight: bold !important;
    -fx-font-family: "Roboto", sans-serif !important;
    -fx-underline: false !important;
    -fx-border-color: transparent transparent rgba(66, 165, 245, 0.5) transparent !important;
    -fx-border-width: 0 0 1px 0 !important;
    -fx-padding: 0 0 5px 0 !important;
    -fx-letter-spacing: 0.8px !important;
}

/* Estadísticas en formato mejorado - Estilo holográfico */
.stat-box {
    -fx-background-color: linear-gradient(to bottom, rgba(20, 40, 80, 0.7), rgba(15, 30, 60, 0.7));
    -fx-background-radius: 12px;
    -fx-border-color: linear-gradient(to bottom, rgba(100, 150, 255, 0.6), rgba(70, 120, 220, 0.6));
    -fx-border-width: 1.5px;
    -fx-border-radius: 12px;
    -fx-min-width: 90px;
    -fx-min-height: 80px;
    -fx-effect: dropshadow(gaussian, rgba(0, 100, 200, 0.4), 5, 0.3, 0, 0);
    -fx-padding: 5px;
}

.stat-value {
    -fx-fill: #ff5252;
    -fx-font-size: 32px;
    -fx-font-weight: bold;
    -fx-font-family: "Roboto Condensed", "Segoe UI", sans-serif;
    -fx-effect: dropshadow(gaussian, rgba(255, 82, 82, 0.7), 3, 0.3, 0, 0);
}

.stat-name {
    -fx-fill: #90caf9;
    -fx-font-size: 13px;
    -fx-font-weight: bold;
    -fx-font-family: "Roboto", sans-serif;
    -fx-letter-spacing: 0.5px;
}

/* Estilo para las filas de estadísticas */
.stat-name-row {
    -fx-fill: #90caf9 !important;
    -fx-font-size: 13px !important;
    -fx-font-weight: bold !important;
    -fx-font-family: "Roboto", sans-serif !important;
}

.stat-value-row {
    -fx-fill: #ffd54f !important;
    -fx-font-size: 17px !important;
    -fx-font-weight: bold !important;
    -fx-font-family: "Roboto Condensed", sans-serif !important;
    -fx-effect: dropshadow(gaussian, rgba(255, 213, 79, 0.4), 2, 0.3, 0, 0) !important;
}

/* Ataques y habilidades con estilo impactante */
.attack-name, .ability-name {
    -fx-fill: #ff9e80 !important;
    -fx-font-size: 15px !important;
    -fx-font-weight: bold !important;
    -fx-font-family: "Roboto Condensed", sans-serif !important;
    -fx-effect: dropshadow(gaussian, rgba(255, 158, 128, 0.4), 2, 0.3, 0, 0) !important;
}

/* Mejorar la visibilidad del texto de descripción de las pasivas */
.ability-description {
    -fx-fill: #ffffff !important; /* Blanco puro */
    -fx-font-size: 13px !important;
    -fx-font-family: "Roboto", sans-serif !important;
    -fx-text-alignment: justify !important;
    -fx-wrap-text: true !important;
    -fx-line-spacing: 2px !important;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.7), 1.5, 0.5, 0, 0) !important;
}

/* Valores de daño y otros textos pequeños */
.attack-damage, .attack-description, .damage-text, .small-text {
    -fx-fill: #eeeeee !important; /* Un blanco ligeramente menos brillante */
    -fx-font-size: 12px !important;
    -fx-font-family: "Roboto", sans-serif !important;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.6), 1, 0.5, 0, 0) !important;
}

/* Descripción del ataque */
.attack-description {
    -fx-fill: #e0e0e0 !important;
    -fx-font-size: 13px !important;
    -fx-wrap-text: true !important;
    -fx-text-alignment: justify !important;
}

/* Texto de daño específico - destacar un poco */
.attack-damage {
    -fx-fill: #ffcc80 !important; /* Naranja claro para resaltar daño */
    -fx-font-weight: bold !important;
}

/* Cualquier otro texto que pueda estar negro */
.text {
    -fx-fill: #e0e0e0 !important;
}

/* Texto genérico dentro de tarjetas de ataques y pasivas */
.attack-card .text, .pasiva-card .text {
    -fx-fill: #ffffff !important;
}

/* Etiquetas de tipos de ataque */
.attack-type-label {
    -fx-fill: #90caf9 !important; /* Azul claro */
    -fx-font-size: 12px !important;
    -fx-font-style: italic !important;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.6), 1, 0.5, 0, 0) !important;
}

/* Para cualquier estadística o texto de valor numérico */
.numeric-value {
    -fx-fill: #ffeb3b !important; /* Amarillo */
    -fx-font-weight: bold !important;
    -fx-font-family: "Roboto Condensed", sans-serif !important;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.7), 1, 0.5, 0, 0) !important;
}

/* Color más claro para el tipo de pasiva */
.ability-type {
    -fx-fill: #8aff9e !important; /* Verde más brillante */
    -fx-font-size: 12px !important;
    -fx-font-style: italic !important;
    -fx-font-family: "Roboto", sans-serif !important;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.7), 1, 0.5, 0, 0) !important;
}

/* Color más claro para el poder de la pasiva */
.ability-power {
    -fx-fill: #ffcc60 !important; /* Amarillo más brillante */
    -fx-font-size: 13px !important;
    -fx-font-family: "Roboto", sans-serif !important;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.7), 1, 0.5, 0, 0) !important;
}

/* Mejorar la legibilidad de información especial de pasivas */
.special-ability-info {
    -fx-fill: #e0aaff !important; /* Púrpura más claro */
    -fx-font-size: 13px !important;
    -fx-font-style: italic !important;
    -fx-font-weight: bold !important;
    -fx-font-family: "Roboto", sans-serif !important;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.7), 1, 0.5, 0, 0) !important;
}

/* Descripción del personaje con mejor legibilidad */
.description-text {
    -fx-fill: #f0f0f0 !important; /* Casi blanco */
    -fx-font-size: 14px !important;
    -fx-font-family: "Roboto", sans-serif !important;
    -fx-text-alignment: justify !important;
    -fx-wrap-text: true !important;
    -fx-line-spacing: 3px !important;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.5), 1, 0.5, 0, 0) !important;
}

/* Botón para cerrar la ventana de información */
.close-button {
    -fx-background-color: linear-gradient(to bottom, #f44336, #d32f2f) !important;
    -fx-text-fill: white !important;
    -fx-font-weight: bold !important;
    -fx-font-family: "Roboto", sans-serif !important;
    -fx-border-color: #ff5252 !important;
    -fx-border-width: 1.5px !important;
    -fx-border-radius: 50% !important;
    -fx-background-radius: 50% !important;
    -fx-min-width: 30px !important;
    -fx-min-height: 30px !important;
    -fx-max-width: 30px !important;
    -fx-max-height: 30px !important;
    -fx-padding: 0 !important;
    -fx-effect: dropshadow(gaussian, rgba(244, 67, 54, 0.5), 5, 0.3, 0, 0) !important;
}

.close-button:hover {
    -fx-background-color: #f44336 !important;
    -fx-cursor: hand !important;
    -fx-scale-x: 1.1 !important;
    -fx-scale-y: 1.1 !important;
    -fx-effect: dropshadow(gaussian, rgba(244, 67, 54, 0.7), 8, 0.5, 0, 0) !important;
}

/* Botón de selección con diseño inspirado en Marvel */
.select-button {
    -fx-background-color: linear-gradient(to bottom, #4caf50, #388e3c) !important;
    -fx-text-fill: white !important;
    -fx-font-weight: bold !important;
    -fx-font-size: 16px !important;
    -fx-font-family: "Roboto", sans-serif !important;
    -fx-border-color: #66bb6a !important;
    -fx-border-width: 2px !important;
    -fx-border-radius: 10px !important;
    -fx-background-radius: 10px !important;
    -fx-padding: 12px 25px !important;
    -fx-effect: dropshadow(gaussian, rgba(76, 175, 80, 0.5), 7, 0.3, 0, 0) !important;
    -fx-letter-spacing: 0.8px !important;
    -fx-text-transform: uppercase !important;
}

.select-button:hover {
    -fx-background-color: #4caf50 !important;
    -fx-scale-x: 1.05 !important;
    -fx-scale-y: 1.05 !important;
    -fx-cursor: hand !important;
    -fx-effect: dropshadow(gaussian, rgba(76, 175, 80, 0.7), 10, 0.5, 0, 0) !important;
}

.select-button:pressed {
    -fx-background-color: #388e3c !important;
    -fx-scale-x: 0.98 !important;
    -fx-scale-y: 0.98 !important;
    -fx-translate-y: 1px !important;
}

/* Tarjetas de personajes seleccionados - Estilo Marvel moderno */
.character-card {
    -fx-background-color: linear-gradient(to bottom, rgba(30, 50, 90, 0.8), rgba(20, 40, 70, 0.8)) !important;
    -fx-background-radius: 12px !important;
    -fx-border-color: linear-gradient(to bottom, rgba(100, 150, 255, 0.6), rgba(70, 120, 220, 0.6)) !important; 
    -fx-border-width: 2px !important;
    -fx-border-radius: 12px !important;
    -fx-padding: 12px !important;
    -fx-effect: dropshadow(gaussian, rgba(0, 100, 255, 0.5), 8, 0.3, 0, 0) !important;
    -fx-transition: all 0.3s ease !important;
    -fx-shape-clip: true; /* Asegura que el contenido no se desborde */
    -fx-background-color: rgba(30, 50, 90, 0.8);
}

.character-card:hover {
    -fx-background-color: linear-gradient(to bottom, rgba(40, 70, 120, 0.85), rgba(30, 60, 100, 0.85)) !important;
    -fx-border-color: rgba(100, 200, 255, 0.8) !important;
    -fx-effect: dropshadow(gaussian, rgba(100, 150, 255, 0.7), 12, 0.5, 0, 0) !important;
    -fx-cursor: hand !important;
}

/* Nombre del personaje en la tarjeta - Modificado para ser más claro */
.character-name-label {
    -fx-text-fill: #ffffff; /* Blanco puro */
    -fx-stroke: #1a1a1a; /* Borde oscuro muy sutil */
    -fx-stroke-width: 0.2px; /* Muy fino */
    -fx-stroke-type: outside;
    -fx-font-size: 14px;
    -fx-font-weight: bold;
    -fx-font-family: "Roboto Condensed", sans-serif;
    -fx-alignment: center;
    -fx-text-alignment: center;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.7), 1.5, 0.5, 0, 1); /* Sombra más marcada para mejor legibilidad */
}

/* ScrollPane transparente mejorado */
.transparent-scrollpane {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
}

.transparent-scrollpane > .viewport {
    -fx-background-color: transparent;
}

.transparent-scrollpane .scroll-bar:vertical {
    -fx-background-color: rgba(20, 30, 50, 0.3);
    -fx-background-radius: 6px;
}

.transparent-scrollpane .scroll-bar:vertical .thumb {
    -fx-background-color: rgba(66, 165, 245, 0.8);
    -fx-background-radius: 6px;
}

.transparent-scrollpane .scroll-bar:vertical .track {
    -fx-background-color: rgba(15, 25, 45, 0.5);
    -fx-background-radius: 6px;
}

.transparent-scrollpane .scroll-bar .increment-button,
.transparent-scrollpane .scroll-bar .decrement-button {
    -fx-background-color: transparent;
    -fx-padding: 0 5 0 5;
}

.transparent-scrollpane .scroll-bar .increment-button .increment-arrow,
.transparent-scrollpane .scroll-bar .decrement-button .decrement-arrow {
    -fx-background-color: rgba(255, 255, 255, 0.7);
}

/* Botones de personajes - Estilo moderno de galería */
.character-button {
    -fx-background-color: transparent;
    -fx-padding: 8px;
    -fx-border-color: transparent;
    -fx-border-width: 2.5px;
    -fx-border-radius: 15px;
    -fx-background-radius: 15px;
    -fx-transition: all 0.3s ease;
}

.character-button:hover {
    -fx-border-color: linear-gradient(to bottom, #ffb300, #fb8c00);
    -fx-effect: dropshadow(gaussian, rgba(255, 179, 0, 0.6), 12, 0.4, 0, 0);
    -fx-cursor: hand;
    -fx-scale-x: 1.05;
    -fx-scale-y: 1.05;
}

.character-button.selected-character {
    -fx-border-color: linear-gradient(to bottom, #29b6f6, #0288d1);
    -fx-effect: dropshadow(gaussian, rgba(41, 182, 246, 0.6), 15, 0.5, 0, 0);
}

/* Panel de personajes seleccionables - Aspecto más Marvel moderno */
#characterSelectionPane {
    -fx-background-color: rgba(10, 20, 35, 0.7);
    -fx-background-radius: 15px;
    -fx-border-color: linear-gradient(to bottom, rgba(100, 150, 255, 0.4), rgba(70, 120, 220, 0.4));
    -fx-border-radius: 15px;
    -fx-border-width: 1.5px;
    -fx-effect: dropshadow(gaussian, rgba(0, 50, 150, 0.3), 10, 0.3, 0, 0);
}

/* Tarjetas de ataques y pasivas con estilo futurista */
.attack-card, .pasiva-card {
    -fx-background-color: linear-gradient(to bottom, rgba(30, 50, 90, 0.4), rgba(20, 40, 70, 0.4));
    -fx-background-radius: 8px;
    -fx-border-color: linear-gradient(to bottom, rgba(100, 150, 255, 0.5), rgba(70, 120, 220, 0.5));
    -fx-border-width: 1.5px;
    -fx-border-radius: 8px;
    -fx-padding: 8px 12px;
    -fx-effect: dropshadow(gaussian, rgba(0, 100, 200, 0.3), 5, 0.2, 0, 0);
}

.attack-card:hover, .pasiva-card:hover {
    -fx-background-color: linear-gradient(to bottom, rgba(40, 70, 120, 0.5), rgba(30, 60, 100, 0.5));
    -fx-border-color: rgba(120, 170, 255, 0.7);
    -fx-effect: dropshadow(gaussian, rgba(0, 100, 200, 0.4), 8, 0.3, 0, 0);
}

.attack-card .text, .pasiva-card .text {
    -fx-fill: #ffffff !important;
}

/* Fondo "holográfico" para algunos elementos clave - Estilo tecnología Stark */
.holo-background {
    -fx-background-color: linear-gradient(to bottom, rgba(30, 50, 90, 0.5), rgba(20, 40, 70, 0.5));
    -fx-background-radius: 10px;
    -fx-border-color: linear-gradient(to bottom, rgba(41, 182, 246, 0.6), rgba(2, 136, 209, 0.6));
    -fx-border-width: 1px;
    -fx-border-radius: 10px;
    -fx-effect: dropshadow(gaussian, rgba(41, 182, 246, 0.4), 8, 0.3, 0, 0);
}

/* Mensaje informativo y de error con estilo cinemático */
.info-message {
    -fx-background-color: rgba(10, 20, 40, 0.9);
    -fx-background-radius: 10px;
    -fx-border-color: linear-gradient(to right, #2196f3, #0d47a1);
    -fx-border-width: 2px;
    -fx-border-radius: 10px;
    -fx-padding: 10px 15px;
    -fx-effect: dropshadow(gaussian, rgba(33, 150, 243, 0.5), 10, 0.4, 0, 0);
}

.error-message {
    -fx-background-color: rgba(10, 20, 40, 0.9);
    -fx-background-radius: 10px;
    -fx-border-color: linear-gradient(to right, #f44336, #b71c1c);
    -fx-border-width: 2px;
    -fx-border-radius: 10px;
    -fx-padding: 10px 15px;
    -fx-effect: dropshadow(gaussian, rgba(244, 67, 54, 0.5), 10, 0.4, 0, 0);
}

/* Estilos para los mensajes de texto */
.info-text {
    -fx-fill: white;
    -fx-font-size: 15px;
    -fx-font-weight: bold;
    -fx-font-family: "Roboto", sans-serif;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.5), 2, 0.5, 0, 0);
}

/* Para el botón de luchar - Estilo destacado */
#onLucharButton {
    -fx-background-color: linear-gradient(to bottom, #f44336, #d32f2f);
    -fx-border-color: linear-gradient(to bottom, #ff5252, #e53935);
    -fx-effect: dropshadow(gaussian, rgba(244, 67, 54, 0.6), 12, 0.5, 0, 0);
}

#onLucharButton:hover {
    -fx-background-color: linear-gradient(to bottom, #ef5350, #e53935);
    -fx-border-color: #ff8a80;
    -fx-effect: dropshadow(gaussian, rgba(244, 67, 54, 0.8), 15, 0.6, 0, 0);
}

#onLucharButton:disabled {
    -fx-background-color: linear-gradient(to bottom, #bdbdbd, #9e9e9e);
    -fx-border-color: #e0e0e0;
    -fx-text-fill: #f5f5f5;
    -fx-opacity: 0.8;
    -fx-effect: none;
}

/* Añadir estas reglas para asegurar la transparencia en imágenes */
.image-view {
    -fx-background-color: transparent;
    -fx-preserve-ratio: true;
}

/* Asegurarnos que los contenedores de imágenes sean transparentes */
.character-image-container {
    -fx-background-color: transparent;
    -fx-padding: 0;
}

.image-stack-pane {
    -fx-background-color: transparent;
}

/* Add/modify these rules */
.character-image {
    -fx-background-color: transparent;
}

.image-container {
    -fx-background-color: transparent;
}

/* Estilos para mensajes flotantes */
.mensaje-flotante {
    -fx-fill: #ffffff;
    -fx-font-size: 16px;
    -fx-font-weight: bold;
    -fx-font-family: "Roboto", sans-serif;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.7), 3, 0.5, 0, 1);
    -fx-text-alignment: center;
    -fx-background-color: rgba(40, 70, 120, 0.8);
    -fx-padding: 10px;
    -fx-border-radius: 8px;
    -fx-background-radius: 8px;
}

.mensaje-error {
    -fx-fill: #ff5252;
    -fx-effect: dropshadow(gaussian, rgba(255, 0, 0, 0.4), 3, 0.5, 0, 1);
    -fx-background-color: rgba(80, 20, 20, 0.8);
}