/* ============================================================
   BELA TEMPLATE — Light Mode Variables
   Paleta: crema cálida, terracota, verde petróleo
   ============================================================ */

:root,
[data-theme="light"] {
  /* Backgrounds */
  --bg:             #F7F3ED;
  --bg2:            #EEE8DF;
  --bg3:            #E6DDD3;
  --surface:        #FFFFFF;
  --surface2:       #FAF7F2;

  /* Borders */
  --border:         rgba(45,41,38,0.09);
  --border2:        rgba(45,41,38,0.18);

  /* Accent — terracota cálido */
  --accent:         #D97757;
  --accent-rgb:     217,119,87;
  --accent-hover:   #C4663E;
  --accent-light:   rgba(217,119,87,0.11);
  --accent-text:    #FFFFFF;
  --accent-hover-text: #FFFFFF;

  /* Text */
  --text:           #2D2926;
  --text2:          #6B5E54;
  --text3:          #A39286;
  --white:          #2D2926;
  --white-real:     #FFFFFF;

  /* Brand */
  --brand-color-1:  #2D2926;
  --brand-color-2:  #D97757;

  /* Status */
  --success:        #2A7D5E;
  --warning:        #B07D1A;
  --danger:         #B83333;
  --purple:         #7C5CBF;
  --blue:           #315C6B;

  /* Navbar */
  --navbar-bg:      rgba(247,243,237,0.88);
  --mobile-menu-bg: rgba(247,243,237,0.98);

  /* Shadows */
  --shadow:    0 1px 3px rgba(0,0,0,0.05), 0 8px 28px rgba(0,0,0,0.07);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.05);

  /* Radii — más redondeados que Lex */
  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 20px;

  /* Bottom nav */
  --bottom-nav-bg:    rgba(255,255,255,0.92);
  --bottom-nav-border: rgba(45,41,38,0.08);
  --bottom-nav-active: var(--brand-color-2);
  --bottom-nav-create-bg: #2D2926;
  --bottom-nav-create-color: #FFFFFF;
}

/* ── Component overrides para modo claro ────────────────────── */

/* Links */
[data-template="bela"][data-theme="light"] a:not(.btn):not([class*="-btn"]) { color: var(--accent); }
[data-template="bela"][data-theme="light"] a:not(.btn):not([class*="-btn"]):hover { color: var(--accent-hover); }
[data-template="bela"][data-theme="light"] table a:not(.btn):not([class*="-btn"]) { color: var(--text2); }

/* Navbar: fondo crema, texto oscuro */
[data-template="bela"][data-theme="light"] .navbar {
  background: var(--navbar-bg);
  border-bottom-color: var(--brand-color-2);
}
/* La marca conserva sus colores de brand variables — NO sobreescribir */
[data-template="bela"][data-theme="light"] .navbar-brand {
  color: var(--brand-color-1);
}
[data-template="bela"][data-theme="light"] .brand-accent {
  color: var(--brand-color-2) !important;
}
[data-template="bela"][data-theme="light"] .navbar-nav a {
  color: var(--text2);
}
[data-template="bela"][data-theme="light"] .navbar-nav a:hover,
[data-template="bela"][data-theme="light"] .navbar-nav a.active {
  color: var(--text);
}
[data-template="bela"][data-theme="light"] .btn-ghost {
  color: var(--text2);
  border-color: var(--border2);
}
[data-template="bela"][data-theme="light"] .btn-secondary {
  background: var(--bg3);
  color: var(--text);
  border-color: var(--border2);
}

/* Cards y contenedores */
[data-template="bela"][data-theme="light"] .card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

/* Formularios */
[data-template="bela"][data-theme="light"] .form-control {
  background: var(--surface);
  border-color: var(--border2);
  color: var(--text);
}
[data-template="bela"][data-theme="light"] .form-control::placeholder {
  color: var(--text3);
}
[data-template="bela"][data-theme="light"] .form-label {
  color: var(--text2);
}

/* Badges y chips */
[data-template="bela"][data-theme="light"] .badge-comun    { background: rgba(107,94,84,.12); color: #6B5E54; }
[data-template="bela"][data-theme="light"] .badge-raro     { background: rgba(49,92,107,.15); color: #315C6B; }
[data-template="bela"][data-theme="light"] .badge-epico    { background: rgba(124,92,191,.15); color: #7C5CBF; }
[data-template="bela"][data-theme="light"] .badge-legendario { background: rgba(176,125,26,.15); color: #B07D1A; }
[data-template="bela"][data-theme="light"] .badge-diamante { background: rgba(49,92,107,.18); color: #315C6B; }

/* Alerts */
[data-template="bela"][data-theme="light"] .alert-success {
  background: rgba(42,125,94,.1);
  border-color: rgba(42,125,94,.25);
  color: var(--success);
}
[data-template="bela"][data-theme="light"] .alert-danger {
  background: rgba(184,51,51,.1);
  border-color: rgba(184,51,51,.25);
  color: var(--danger);
}

/* Texto genérico */
[data-template="bela"][data-theme="light"] h1,
[data-template="bela"][data-theme="light"] h2,
[data-template="bela"][data-theme="light"] h3,
[data-template="bela"][data-theme="light"] h4 {
  color: var(--text);
}
[data-template="bela"][data-theme="light"] p {
  color: var(--text2);
}

/* Page / app background */
[data-template="bela"][data-theme="light"] body,
[data-template="bela"][data-theme="light"] #main-content {
  background: var(--bg);
  color: var(--text);
}

/* Sidebar admin */
[data-template="bela"][data-theme="light"] .adm-sidebar {
  background: var(--surface);
  border-right-color: var(--border);
}
[data-template="bela"][data-theme="light"] .adm-sidebar a {
  color: var(--text2);
}
[data-template="bela"][data-theme="light"] .adm-sidebar a:hover,
[data-template="bela"][data-theme="light"] .adm-sidebar a.active {
  color: var(--accent);
  background: var(--accent-light);
}