/* ==========================================================================
SISTEMA DE FORJA D&D - HOJA DE ESTILOS MEDIEVAL COMPLETA (v4.5)
========================================================================== */

/* ==========================================================================
SISTEMA DE FORJA D&D - HOJA DE ESTILOS MEDIEVAL COMPLETA (v4.5)
========================================================================== */

/* 1. VARIABLES GLOBALES Y PALETA DE COLORES */
:root {
/* Paleta Pergamino y Manuscrito */
--parchment-bg: #f4e8d3;
--parchment-light: #fcf8ee;
--parchment-border: #8c6d46;
--parchment-text: #2c1a0e !important;
--parchment-shadow: rgba(139, 69, 19, 0.2);

/* Paleta Hierro Forjado y Fondo Dark */
/* --bg-dark: #0d0f12;
--bg-radial: radial-gradient(circle at 50% 20%, #2a1b12 0%, #0d0f12 70%); */
--iron-dark: #121417;
--iron-panel: #1f242c;
--iron-border: #4a3b2c;
--iron-hover: #2b3038;

/* Paleta Oro, Ámbar y Místicos */
--gold-bright: #fbbf24;
--gold-main: #f59e0b;
--gold-dark: #b45309;
--amber-light: #fef3c7;
--amber-shadow: rgba(245, 158, 11, 0.4);
--purple-arcana: #5b2c6f;
--purple-light: #f4f0f8;
--purple-border: #dcd0e8;

/* Alertas, Estados y Mensajes */
--danger-red: #991b1b;
--danger-light: #fee2e2;
--danger-border: #f5c6cb;
--warning-amber: #856404;
--warning-bg: #fff8e5;
--warning-border: #ffe8a1;
--success-green: #15803d;
--success-light: #dcfce7;
--success-border: #c3e6cb;

/* Tipografías Medievales y de Cuerpo */
--font-medieval: 'MedievalSharp', cursive;
--font-cinzel: 'Cinzel Decorative', serif;
--font-meta: 'Metamorphous', serif;
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* 2. RESET Y BASES GENERALES */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
background-color: var(--bg-dark);
background-image: var(--bg-radial);
color: #eadeca;
font-family: var(--font-body);
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
line-height: 1.5;
}

/* Clases de Utilidad Tipográfica */
.font-medieval { font-family: var(--font-medieval); }
.font-cinzel { font-family: var(--font-cinzel); }
.font-meta { font-family: var(--font-meta); }

.text-gold-gradient {
background: linear-gradient(to right, var(--gold-bright), #fde68a, var(--gold-main));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* 3. ESTRUCTURA DE NAVEGACIÓN Y PESTAÑAS MEDIEVALES */
.forja-header {
background: rgba(18, 20, 23, 0.95);
border-bottom: 2px solid rgba(180, 83, 9, 0.6);
backdrop-filter: blur(8px);
position: sticky;
top: 0;
z-index: 50;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
}

.tab-nav-container {
display: flex;
gap: 0.5rem;
overflow-x: auto;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(180, 83, 9, 0.3);
}

.tab-btn {
background: linear-gradient(to bottom, #2d241c, #1a1410);
border: 1px solid #5a4430;
color: #bfa58a;
padding: 0.625rem 1rem;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
font-family: var(--font-medieval);
font-size: 0.875rem;
letter-spacing: 0.05em;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
white-space: nowrap;
}

.tab-btn:hover {
color: var(--gold-bright);
border-color: var(--gold-dark);
background: linear-gradient(to bottom, #3e3025, #241b14);
}

.tab-btn.active {
background: linear-gradient(to bottom, var(--gold-dark), #78350f);
border-color: var(--gold-bright);
color: #ffffff;
box-shadow: 0 0 15px var(--amber-shadow), inset 0 1px 2px rgba(255, 255, 255, 0.4);
transform: translateY(-2px);
}

/* 4. COMPONENTES: CONTENEDORES PERGAMINO Y HIERRO FORJADO */

/* Tarjeta Pergamino (Manuscrito Medieval) */
.parchment-card {
background: var(--parchment-bg);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.05)),
radial-gradient(ellipse at center, rgba(255, 248, 220, 0.8) 0%, rgba(220, 195, 150, 0.6) 100%);
color: var(--parchment-text);
border: 2px solid var(--parchment-border);
border-radius: 0.5rem;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.7), inset 0 0 40px var(--parchment-shadow);
padding: 1.5rem;
position: relative;
}

/* Panel Gótico de Hierro Forjado */
.iron-panel {
background: linear-gradient(145deg, #1f242c, #13161b);
border: 2px solid var(--iron-border);
border-radius: 0.5rem;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 8px 20px rgba(0, 0, 0, 0.8);
padding: 1.25rem;
}

/* Box Resumen y Formularios Internos */
.forja-receta-box,
.forja-rep-box {
background: #fdfdfd;
border: 1px solid #ccd0d4;
padding: 15px;
border-radius: 6px;
margin-bottom: 20px;
}

.parchment-card .forja-receta-box,
.parchment-card .forja-rep-box {
background: rgba(255, 248, 235, 0.7);
border-color: var(--parchment-border);
}

.forja-receta-title,
.forja-rep-title {
font-size: 1.1em;
font-weight: bold;
border-bottom: 2px solid #2271b1;
padding-bottom: 5px;
margin-bottom: 12px;
font-family: var(--font-medieval);
}

/* 5. FORMULARIOS, INPUTS Y SELECTORES */
input[type="text"],
input[type="number"],
select,
textarea {
background-color: var(--iron-dark);
border: 1px solid var(--iron-border);
color: #eadeca;
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
font-size: 0.875rem;
width: 100%;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
border-color: var(--gold-main);
box-shadow: 0 0 5px rgba(245, 158, 11, 0.4);
}

/* Estilos de inputs dentro de Tarjetas de Pergamino */
.parchment-card input[type="text"],
.parchment-card input[type="number"],
.parchment-card select {
background-color: var(--parchment-light);
border-color: var(--parchment-border);
color: var(--parchment-text);
font-weight: 600;
}

/* 6. BARRAS DE PROGRESO Y SIMULADORES */
.barra-progreso-contenedor,
.progress-container {
width: 100%;
background-color: rgba(44, 26, 14, 0.2);
height: 1.5rem;
border-radius: 9999px;
overflow: hidden;
border: 1px solid rgba(140, 109, 70, 0.4);
padding: 2px;
}

.barra-progreso-fill,
.progress-bar-fill {
background: linear-gradient(to right, #b45309, var(--gold-main));
height: 100%;
border-radius: 9999px;
transition: width 0.3s ease;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 0.5rem;
font-size: 0.75rem;
font-weight: bold;
color: #ffffff;
}

.barra-progreso-fill.completed,
.progress-bar-fill.completed {
background: linear-gradient(to right, #15803d, #22c55e);
}

/* 7. BADGES, CHIPS DE TAGS Y ALERTAS */

/* Chips para Tags de Objetos y Potenciadores */
.tag-chip,
.chip-tag {
display: inline-block;
background: var(--gold-dark);
color: var(--amber-light);
border-radius: 12px;
padding: 3px 9px;
font-size: 11px;
font-weight: bold;
margin-right: 4px;
margin-bottom: 2px;
border: 1px solid rgba(251, 191, 36, 0.3);
}

.tag-chip-purple {
background: var(--purple-arcana);
color: #f3e8ff;
border-color: #a855f7;
}

/* Badges de CD y Daño */
.forja-cd-badge {
background: #2271b1;
color: #fff;
padding: 4px 10px;
border-radius: 12px;
font-weight: bold;
font-size: 13px;
}

.forja-badge-inactiva {
background: #8c8f94 !important;
}

.forja-badge-damage {
padding: 4px 8px;
border-radius: 4px;
font-weight: bold;
font-size: 13px;
display: inline-block;
}

/* Banners y Cajas Informativas */
.warning-banner {
background: rgba(69, 10, 10, 0.95);
border: 2px solid #dc2626;
border-radius: 0.5rem;
padding: 1rem;
color: #ffffff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}

.info-mat-box {
background: var(--warning-bg);
border: 1px solid var(--warning-border);
padding: 10px;
border-radius: 5px;
margin-top: 10px;
font-size: 13px;
color: var(--parchment-text);
}

.info-oro-box {
background: #fffdf0;
border: 1px solid #f0c14b;
padding: 10px;
border-radius: 5px;
margin-top: 10px;
font-size: 13px;
color: var(--warning-amber);
}

.box-durabilidad-potencial {
background: var(--success-light);
border: 1px solid var(--success-border);
border-radius: 5px;
padding: 10px;
text-align: center;
margin-top: 10px;
}

.penalizacion-box {
background: #fdf2f2;
border: 1px solid var(--danger-border);
padding: 10px;
border-radius: 5px;
margin-top: 10px;
font-size: 12px;
color: #721c24;
}

/* 8. SCROLLBAR MEDIEVAL PERSONALIZADA */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}

::-webkit-scrollbar-track {
background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
background: var(--iron-border);
border-radius: 4px;
border: 1px solid var(--gold-dark);
}

::-webkit-scrollbar-thumb:hover {
background: var(--gold-dark);
}