/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║ TIPOGRAFÍAS HELVETICA NOW DISPLAY                                        ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
@font-face {
  font-family: 'Barlow-Regular';
  src: url('../fonts/Barlow-Regular.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Barlow-Medium';
  src: url('../fonts/Barlow-Medium.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Barlow-SemiBold';
  src: url('../fonts/Barlow-SemiBold.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Barlow-ExtraBold';
  src: url('../fonts/Barlow-ExtraBold.ttf') format('truetype');
  font-display: swap;
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║ VARIABLES GLOBALES                                                       ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */
:root {
	--color-black: #191E26;
	--color-texto-oscuro: var(--color-black);
	--color-texto-medio: #202731;
	--color-texto-claro: #353542;
    --color-blanco: #ffffff;
	--color-gris-claro: #f9f9f9;
	--color-gris-medio: #9e9d9d;
    --color-bordes: #00000030;
	--color-tooltip-bg: #111827;
    --color-tooltip-text: #ffffff;
	
	--color-alineamiento-claro: #d9ffdc;
	--color-esencia-claro: #bbedff;
	--color-trascendencia-claro: #d8dbf8;
	--color-evolucion-claro: #f9eccf;
	--color-alineamiento: #aefcac;
	--color-esencia: #8fe4f7;
	--color-trascendencia: #b4abfd;
	--color-evolucion: #ffebb8;
	--color-alineamiento-sa: #90fe7b;
	--color-esencia-sa: #31d8ff;
	--color-trascendencia-sa: #8578ff;
	--color-evolucion-sa: #FFF84B;
	--color-alineamiento-oscuro: #25bf67;
	--color-esencia-oscuro: #00a6cc;
	--color-trascendencia-oscuro: #6652dd;
	--color-evolucion-oscuro: #e5b738;
	--color-alineamiento-rgb: 174, 252, 172;
	--color-esencia-rgb: 143, 228, 247;
	--color-trascendencia-rgb: 180, 171, 253;
	--color-evolucion-rgb: 255, 235, 184;
	--transparencia-hover: 0.1;
	
	--color-section: var(--color-alineamiento);
    --color-section-claro: var(--color-alineamiento-claro);
    --color-section-oscuro: var(--color-alineamiento-oscuro);
    --color-section-sa: var(--color-alineamiento-sa);
	--color-section-rgb: var(--color-alineamiento-rgb);
    --color-section-hover: var(--color-alineamiento-rgb), var(--transparencia-hover);
	
	
	--color-success-claro: var(--color-alineamiento-claro);
	--color-success: var(--color-alineamiento-sa);
	--color-success-oscuro: var(--color-alineamiento-oscuro);
	--color-error-claro: #ffd8cf;
	--color-error: #ff7866;
	--color-error-oscuro: #bc3f26;
	--color-info-claro: var(--color-esencia-claro);
	--color-info: var(--color-esencia-sa);
	--color-info-oscuro: var(--color-esencia-oscuro);
	--color-warning-claro: var(--color-evolucion-claro);
	--color-warning: var(--color-evolucion-sa);
	--color-warning-oscuro: var(--color-evolucion-oscuro);
	--color-neutral-claro: var(--color-trascendencia-claro);
	--color-neutral: var(--color-trascendencia-sa);
	--color-neutral-oscuro: var(--color-trascendencia-oscuro);
	
	body.jarv-alineamiento {
		--color-section: var(--color-alineamiento);
		--color-section-claro: var(--color-alineamiento-claro);
		--color-section-oscuro: var(--color-alineamiento-oscuro);
		--color-section-sa: var(--color-alineamiento-sa);
		--color-section-rgb: var(--color-alineamiento-rgb);
		--color-section-hover: var(--color-alineamiento-rgb), var(--transparencia-hover);
	}

	body.jarv-esencia {
		--color-section: var(--color-esencia);
		--color-section-claro: var(--color-esencia-claro);
		--color-section-oscuro: var(--color-esencia-oscuro);
		--color-section-sa: var(--color-esencia-sa);
		--color-section-rgb: var(--color-esencia-rgb);
		--color-section-hover: var(--color-esencia-rgb), var(--transparencia-hover);
	}

	body.jarv-trascendencia {
		--color-section: var(--color-trascendencia);
		--color-section-claro: var(--color-trascendencia-claro);
		--color-section-oscuro: var(--color-trascendencia-oscuro);
		--color-section-sa: var(--color-trascendencia-sa);
		--color-section-rgb: var(--color-trascendencia-rgb);
		--color-section-hover: var(--color-trascendencia-rgb), var(--transparencia-hover);
	}

	body.jarv-evolucion {
		--color-section: var(--color-evolucion);
		--color-section-claro: var(--color-evolucion-claro);
		--color-section-oscuro: var(--color-evolucion-oscuro);
		--color-section-sa: var(--color-evolucion-sa);
		--color-section-rgb: var(--color-evolucion-rgb);
		--color-section-hover: var(--color-evolucion-rgb), var(--transparencia-hover);
	}
	

    --tipografia-titular: 'Barlow-ExtraBold', Helvetica, Arial, sans-serif;
	--tipografia-subtitulos: 'Barlow-SemiBold', Helvetica, Arial, sans-serif;
	--tipografia-medium: 'Barlow-Medium', Helvetica, Arial, sans-serif;
    --tipografia-parrafos: 'Barlow-Regular', Helvetica, Arial, sans-serif;
}


/* =========================
   PANEL WRAPPER FULL WIDTH
========================= */

.jarvtr-panel {
    width: 100vw;
	min-height: 90vh;
    margin-left: calc(-50vw + 50%);
    background: var(--color-gris-claro);
    padding: 40px 20px;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--color-blanco);
}

/* =========================
   INNER CONTAINER (1140px)
========================= */

.jarvtr-panel > * {
    max-width: 1140px;
    margin: 0 auto;
}

/* =========================
   NAV TABS
========================= */
.jarvtr-panel-nav {
    display: flex;
    gap: 12px;
    margin-bottom: 25px;
    padding: 10px;
    background: var(--color-black);
    border-radius: 10px;
}

.jarvtr-panel-nav a {
    text-decoration: none;
    color: var(--color-blanco);
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.2s ease;
    background: transparent;
}

.jarvtr-panel-nav a:hover {
    background: #1f2937;
    color: var(--color-evolucion-sa);
}

.jarvtr-panel-nav a.active {
    background: var(--color-evolucion-sa);
    color: var(--color-black);
}

/* =========================
   CONTENT WRAPPER
========================= */

.jarvtr-panel-content {
    background: var(--color-gris-claro);
    border-radius: 10px;
    padding: 25px;
    min-height: 400px;
    box-shadow: none;
}

.jarvtr-panel-content h2 {
    margin: 0 0 40px 0;
    font-size: 25px;
    color: var(--color-black);
}

/* =========================
   SUBSCRIPTION CARDS
========================= */

.jarvtr-card {
    background: transparent;
    border: 1px solid var(--color-bordes) !important;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 15px;
    transition: transform 0.2s ease, border 0.2s ease;
}

.jarvtr-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-gris-medio);
}

.jarvtr-card h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: var(--color-black);
}

.jarvtr-card p {
    margin: 5px 0;
    color: var(--color-black);
    font-size: 13px;
}

.jarvtr-card ul {
    margin: 10px 0 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.jarvtr-card ul li {
    background: transparent;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 20px;
	font-weight: 700;
    color: var(--color-gris-medio);
    border: 1px solid var(--color-gris-medio);
}

/* =========================
   RATES SECTION
========================= */

.rate-block {
    background: #0b1220;
    border: 1px solid #1f2937;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 15px;
}

.rate-block h3 {
    margin: 0 0 10px 0;
    font-size: 15px;
    color: #ffffff;
}

.rate-block p {
    margin: 5px 0;
    color: #9ca3af;
    font-size: 13px;
}

/* =========================
   EMPTY STATES
========================= */

.jarvtr-empty {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {

    .jarvtr-panel {
        padding: 20px 12px;
    }

    .jarvtr-panel-nav {
        flex-direction: column;
    }

    .jarvtr-card ul {
        flex-direction: column;
        gap: 8px;
    }
}



/* =========================
   TABLA DE TARIFAS
========================= */
.jarvtr-rates-table{
    width:100%;
    border-collapse:collapse;
    margin-top:15px;
}

.jarvtr-rates-table th,
.jarvtr-rates-table td{
    padding:12px;
    border-bottom:1px solid #e5e7eb;
    text-align:left;
}

.jarvtr-rates-table thead th{
    background:#f8fafc;
    font-weight:600;
}

.jarvtr-rates-table tfoot th{
    background:#f8fafc;
    font-weight:700;
}

.jarvtr-rates-table tbody tr:hover{
    background:#fafafa;
}