/* ============================================================================
   ADMIN v3 — capa de marca LayosCamp sobre Gin + pantallas custom
   (FASE 6 rediseño 2026) Port de pages/admin-backend.css (mockup) sobre el
   markup real de /admin/layoscamp/* (dashboard, pedidos, campers, personal,
   solicitudes...) y las tablas Views.

   Reglas: tokens --lca-* (no chocan con --gin-*), CERO !important, gana a
   layoscamp-admin.css/layoscamp-dashboard.css por orden de carga (última en
   la library layoscamp_core/admin). NO se restilean botones/chrome de Gin
   (el acento custom #31562D ya los pinta Gin con sus vars --gin-*).
   El <style> inline del twig del dashboard obliga a prefijo
   .layoscamp-dashboard + 1 nivel en los overrides de dashboard.
   ============================================================================ */

:root {
  --lca-bosque:       #31562D;
  --lca-bosque-2:     #026936;
  --lca-bosque-deep:  #22401F;
  --lca-sol:          #FBBB0E;
  --lca-terracota:    #D2603A;
  --lca-crema:        #FDF8EE;
  --lca-crema-2:      #F8EFDC;
  --lca-arena:        #F0E0C3;
  --lca-ink:          #272725;
  --lca-line:         #E9E4D4;
  --lca-muted:        #6F6D61;
  --lca-muted-2:      #9B988A;
  --lca-tint-bosque:  rgba(49, 86, 45, .10);
  --lca-tint-bosque2: rgba(2, 105, 54, .12);
  --lca-tint-sol:     rgba(251, 187, 14, .24);
  --lca-tint-terra:   rgba(210, 96, 58, .13);
  --lca-on-sol:       #3F3000;
  --lca-amber-text:   #8A6A00;
  --lca-r-sm: 8px; --lca-r-md: 12px; --lca-r-lg: 16px; --lca-r-full: 999px;
  --lca-sh-sm: 0 1px 2px rgba(34, 64, 31, .05), 0 4px 14px -6px rgba(34, 64, 31, .10);
  --lca-sh-md: 0 14px 34px -16px rgba(34, 64, 31, .24);
}

/* ============ §1 · Azules Gin hardcode → bosque ============ */
.layoscamp-page .section-title { color: var(--lca-bosque); border-bottom-color: var(--lca-line); }
.layoscamp-page .note { border-left-color: var(--lca-bosque); }
.layoscamp-page .note--coordinador {
  background: var(--lca-tint-bosque);
  border-left-color: var(--lca-bosque);
  color: var(--lca-bosque-deep);
}
.layoscamp-page .color-primary { color: var(--lca-bosque); }
.layoscamp-page .field .value.accent { color: var(--lca-bosque); }

/* ============ §2 · Badges → pills de marca ============ */
.layoscamp-page .gin-badge,
.layoscamp-dashboard .layoscamp-badge {
  border-radius: var(--lca-r-full);
  padding: 4px 11px;
  font-size: .78rem;
  font-weight: 700;
}
.layoscamp-page .gin-badge--primary { background: var(--lca-tint-bosque); color: var(--lca-bosque); }
.layoscamp-page .gin-badge--success,
.layoscamp-dashboard .layoscamp-badge--success { background: var(--lca-tint-bosque2); color: var(--lca-bosque-2); }
.layoscamp-page .gin-badge--warning,
.layoscamp-dashboard .layoscamp-badge--warning { background: var(--lca-tint-sol); color: var(--lca-amber-text); }
.layoscamp-page .gin-badge--error,
.layoscamp-dashboard .layoscamp-badge--danger { background: var(--lca-tint-terra); color: var(--lca-terracota); }
.layoscamp-dashboard .layoscamp-badge--info { background: var(--lca-tint-bosque); color: var(--lca-bosque); }

/* ============ §3 · KPI / summary cards ============ */
.layoscamp-page .summary-card,
.layoscamp-dashboard .kpi-card {
  border-radius: var(--lca-r-lg);
  border: 1px solid var(--lca-line);
  box-shadow: var(--lca-sh-sm);
  background: #fff;
}
.layoscamp-page .summary-card .value,
.layoscamp-dashboard .kpi-card .kpi-value {
  color: var(--lca-bosque-deep);
  font-variant-numeric: tabular-nums;
}
.layoscamp-page .summary-card .label,
.layoscamp-dashboard .kpi-card .kpi-label {
  text-transform: uppercase;
  font-size: .76rem;
  letter-spacing: .09em;
  color: var(--lca-muted);
}
.layoscamp-dashboard .kpi-card--success .kpi-value { color: var(--lca-bosque-2); }
.layoscamp-dashboard .kpi-card--warning .kpi-value { color: var(--lca-amber-text); }
.layoscamp-dashboard .kpi-card--danger .kpi-value { color: var(--lca-terracota); }

/* ============ §4 · Tablas premium (Views + custom) ============ */
.layoscamp-page .views-table thead th,
.layoscamp-page table.layoscamp-table thead th,
.layoscamp-dashboard .layoscamp-table thead th {
  background: var(--lca-crema);
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .11em;
  color: var(--lca-muted);
  border-bottom: 1px solid var(--lca-line);
}
.layoscamp-page .views-table tbody tr:nth-child(even),
.layoscamp-page table.layoscamp-table tbody tr:nth-child(even),
.layoscamp-dashboard .layoscamp-table tbody tr:nth-child(even) {
  background: rgba(248, 239, 220, .38);
}
.layoscamp-page .views-table tbody tr:hover,
.layoscamp-page table.layoscamp-table tbody tr:hover,
.layoscamp-dashboard .layoscamp-table tbody tr:hover {
  background: var(--lca-crema-2);
}
.layoscamp-page .views-table tbody td,
.layoscamp-page table.layoscamp-table tbody td {
  border-bottom: 1px solid var(--lca-line);
}
.layoscamp-page .views-table td.views-field-total,
.layoscamp-page .views-table td.views-field-paid {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ============ §5 · Empty states ============ */
.layoscamp-page .empty-message,
.layoscamp-dashboard .empty-message {
  background: var(--lca-crema);
  border: 1px dashed var(--lca-line);
  border-radius: var(--lca-r-md);
  padding: 28px;
  color: var(--lca-muted);
  font-style: normal;
  text-align: center;
}

/* ============ §6 · Focus de marca ============ */
.layoscamp-page :focus-visible {
  outline: 2px solid var(--lca-bosque);
  outline-offset: 2px;
}

/* ============ §7 · Dashboard (especificidad extra: el twig lleva <style>
   inline duplicado de layoscamp-dashboard.css que gana por posición) ============ */
.layoscamp-dashboard .layoscamp-tabs .layoscamp-tab-link.is-active {
  color: var(--lca-bosque-deep);
  border-bottom-color: var(--lca-bosque);
}
.layoscamp-dashboard .layoscamp-insights .layoscamp-insight {
  border-left-color: var(--lca-bosque);
  background: var(--lca-crema);
}
.layoscamp-dashboard .day-bar-container .day-bar { background: var(--lca-bosque); }
.layoscamp-dashboard .day-bar-container { background: var(--lca-crema-2); border-radius: var(--lca-r-full); }
.layoscamp-dashboard .yoy-category-header .yoy-cat-badge { background: var(--lca-bosque); }