/* ============================================================
   MESH — tema "Cultivar" (el tema de Mesh, siempre activo)
   Fuente: proyecto "Mesh UI Design System" de claude.ai/design
   (colors_and_type.css + preview/components-*).

   Aplica con body.mesh-theme, que base.html pone siempre (en Atlas
   era solo para el usuario MESH). Se carga DESPUÉS de
   base.css y de mesh-auto.css (traducción automática de los
   colores de base.css); acá van los tokens y los componentes
   que el sistema define explícitamente.

   Los selectores van con :where(body.mesh-theme): no suman
   especificidad, así una regla genérica (button, input) no le
   gana a la clase propia de un componente.
   ============================================================ */

body.mesh-theme {
  /* ---- Familias ---- */
  --font-body:    "Space Grotesk", "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-serif:   "Petrona", Georgia, serif;

  /* ---- Superficies ---- */
  --bg:       #F7F4EF;
  --bg-soft:  #EFEDE5;
  --card:     #FFFFFF;
  --card-2:   #FBFAF6;
  --panel:    #FFFFFF;
  --inset:    #F2EFE8;

  /* ---- Tinta ---- */
  --text:   #2A2D27;
  --ink-2:  #565A4E;
  --muted:  #8A8C80;
  --faint:  #AEB0A2;

  /* ---- Líneas ---- */
  --border:   #E8E2D7;
  --border-2: #D8D2C4;

  /* ---- Marca ---- */
  --primary:     #5A6E72;
  --primary-700: #44565A;
  --primary-soft:#E4E9EA;
  --accent:      #7A3B3F;
  --accent-soft: #EEDDDE;
  --wheat:       #965D60;
  --wheat-soft:  #EDDCDD;

  /* ---- Estados ---- */
  --ok:   #5C7A52;   --ok-soft:   #E7EEE3;
  --warn: #B98A3C;   --warn-soft: #F4E9D2;
  --bad:  #B3503F;   --bad-soft:  #F5E0DA;
  --info: #5A7A92;   --info-soft: #E2EAEF;
  --neutral: #7A7D70; --neutral-soft: #EAE7DD;

  /* ---- Radios ---- */
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---- Elevación ---- */
  --shadow-sm:    0 1px 2px rgba(42,45,39,.05);
  --shadow-card:  0 6px 20px rgba(42,45,39,.07);
  --shadow-pop:   0 14px 36px rgba(42,45,39,.12);
  --shadow-modal: 0 24px 60px rgba(42,45,39,.20);
  --ring: 0 0 0 3px rgba(90,110,114,.20);

  /* ---- Ritmo de layout ---- */
  --topbar-h:  3.75rem;
  --footer-h:  2.85rem;
  --sidebar-w: clamp(13.5rem, 17vw, 16.5rem);
  --content-pad-y: clamp(1.25rem, 2.6vw, 2.25rem);
  --content-pad-x: clamp(1.25rem, 3vw, 2.5rem);

  font-family: var(--font-body);
  color: var(--text);
  background:
    radial-gradient(1200px 560px at 50% -12%, rgba(90,110,114,.06), transparent 62%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

:where(body.mesh-theme) button,
:where(body.mesh-theme) input,
:where(body.mesh-theme) select,
:where(body.mesh-theme) textarea {
  font-family: var(--font-body);
}

/* ---- Scrollbars ---- */
:where(body.mesh-theme) * { scrollbar-color: #CFCABA transparent; }
:where(body.mesh-theme) *::-webkit-scrollbar-track { background: transparent; }
:where(body.mesh-theme) *::-webkit-scrollbar-thumb {
  background: #CFCABA;
  border: 2px solid var(--bg);
  border-radius: 999px;
}
:where(body.mesh-theme) *::-webkit-scrollbar-thumb:hover { background: #B9B3A2; }

/* ============================================================
   SHELL — barra superior, menú lateral, pie
   ============================================================ */

:where(body.mesh-theme) .dash-topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* Lockup: racimo + "Mesh" en Space Grotesk 700 */
:where(body.mesh-theme) .dash-brand {
  gap: 10px;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}
:where(body.mesh-theme) .dash-brand svg.mesh-mark { width: 30px; height: 30px; }

:where(body.mesh-theme) .dash-user-display,
:where(body.mesh-theme) .dash-action-btn {
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink-2);
  font-size: .82rem;
  font-weight: 600;
}
:where(body.mesh-theme) .dash-user-display {
  background: var(--primary-soft);
  border-color: transparent;
  color: var(--primary-700);
}
:where(body.mesh-theme) .dash-action-btn:hover {
  background: var(--bg-soft);
  border-color: var(--border-2);
  transform: none;
  filter: none;
}

:where(body.mesh-theme) .sidebar {
  background: var(--card);
  border-right: 1px solid var(--border);
}

:where(body.mesh-theme) .group-title {
  margin-top: 14px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
}

:where(body.mesh-theme) .nav-link,
:where(body.mesh-theme) .nav-link.nav-sub {
  margin-left: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--r-md);
  color: var(--ink-2);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
}
:where(body.mesh-theme) .nav-link.nav-sub::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #C9C7BA;
}
:where(body.mesh-theme) .nav-link:hover {
  background: var(--bg-soft);
  border-color: transparent;
  color: var(--text);
}
:where(body.mesh-theme) .nav-link.active {
  background: var(--primary-soft);
  border-color: transparent;
  color: var(--primary-700);
}
:where(body.mesh-theme) .nav-link.active::before { background: var(--primary); }

:where(body.mesh-theme) .footer {
  border-top: 1px solid var(--border);
  color: var(--muted);
  background: transparent;
}

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */

:where(body.mesh-theme) .title,
:where(body.mesh-theme) .config-title {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.5vw, 2.4rem);
  letter-spacing: -0.022em;
  line-height: 1.08;
}

:where(body.mesh-theme) .subtitle { color: var(--muted); line-height: 1.5; }

:where(body.mesh-theme) label { color: var(--muted); font-size: .82rem; font-weight: 600; }

/* Acento editorial: Petrona italic, una vez por vista como máximo */
:where(body.mesh-theme) .t-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--primary-700);
}

/* ============================================================
   SUPERFICIES
   ============================================================ */

:where(body.mesh-theme) .card,
:where(body.mesh-theme) .config-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

/* ============================================================
   CONTROLES DE FORMULARIO
   ============================================================ */

:where(body.mesh-theme) input,
:where(body.mesh-theme) select,
:where(body.mesh-theme) textarea {
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background-color: var(--card);
  color: var(--text);
}
:where(body.mesh-theme) input::placeholder,
:where(body.mesh-theme) textarea::placeholder { color: var(--faint); }

:where(body.mesh-theme) input:focus,
:where(body.mesh-theme) select:focus,
:where(body.mesh-theme) textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}

:where(body.mesh-theme) select:hover { border-color: var(--border-2); }
:where(body.mesh-theme) select option { background: var(--card); color: var(--text); }

:where(body.mesh-theme) input[type="checkbox"],
:where(body.mesh-theme) input[type="radio"] { accent-color: var(--primary); box-shadow: none; }

/* ============================================================
   BOTONES — pill sólido slate, sin degradé ni brillo
   ============================================================ */

:where(body.mesh-theme) button {
  border-radius: var(--r-pill);
  background: var(--primary);
  border: 1px solid transparent;
  color: #FFFFFF;
  font-weight: 700;
  padding: 0 20px;
}
:where(body.mesh-theme) button:hover {
  transform: none;
  filter: brightness(1.06);
}
:where(body.mesh-theme) button:active { transform: translateY(1px); }

:where(body.mesh-theme) button.secondary {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}
:where(body.mesh-theme) button.secondary:hover { background: var(--bg-soft); filter: none; }

:where(body.mesh-theme) button.soft,
:where(body.mesh-theme) .search-btn {
  background: var(--primary-soft);
  border-color: transparent;
  color: var(--primary-700);
}
:where(body.mesh-theme) .search-btn:hover { background: #D6DEDF; }

/* ============================================================
   TABLAS
   ============================================================ */

:where(body.mesh-theme) .table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

:where(body.mesh-theme) th,
:where(body.mesh-theme) td { border-bottom: 1px solid #EFEAE0; font-size: .86rem; }

:where(body.mesh-theme) th {
  background: var(--card-2);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

:where(body.mesh-theme) tr:hover td { background: var(--card-2); }
:where(body.mesh-theme) td { font-variant-numeric: tabular-nums; }

/* ============================================================
   BADGES — tinte suave + borde fino + texto oscurecido
   ============================================================ */

:where(body.mesh-theme) .badge {
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 700;
}
/* En celdas de tabla el pill se achica: columnas angostas partían "Vigente" */
:where(body.mesh-theme) td .badge { padding: 3px 8px; }
:where(body.mesh-theme) .badge.ok   { background: #E7EEE3; border-color: #5C7A5240; color: #46603E; }
:where(body.mesh-theme) .badge.warn  { background: #F4E9D2; border-color: #B98A3C40; color: #8A6526; }
:where(body.mesh-theme) .badge.err   { background: #F5E0DA; border-color: #B3503F40; color: #8E3E30; }
:where(body.mesh-theme) .badge.info  { background: #E2EAEF; border-color: #5A7A9240; color: #456179; }
:where(body.mesh-theme) .badge.admin { background: #EEDDDE; border-color: #7A3B3F40; color: #683236; }
:where(body.mesh-theme) .badge.muted { background: #EAE7DD; border-color: #7A7D7040; color: #5D6054; }

/* ============================================================
   DASHBOARD — tarjetas de módulo
   ============================================================ */

:where(body.mesh-theme) .module-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 18px;
}
:where(body.mesh-theme) .module-card.active { border-color: var(--border); }
:where(body.mesh-theme) .module-card:not(.disabled):hover {
  transform: translateY(-4px);
  background: var(--card);
  border-color: var(--border-2);
  box-shadow: var(--shadow-pop);
}

/* Ícono dentro de un tile redondeado con tinte slate */
:where(body.mesh-theme) .module-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--bg-soft);
  color: var(--muted);
}
:where(body.mesh-theme) .module-icon svg { width: 21px; height: 21px; }
:where(body.mesh-theme) .module-icon svg path { stroke-width: 1.7; }
:where(body.mesh-theme) .module-card.active .module-icon {
  background: var(--primary-soft);
  color: var(--primary-700);
}

:where(body.mesh-theme) .module-card h3 {
  margin: 16px 0 6px;
  color: var(--text);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
:where(body.mesh-theme) .module-card p { color: var(--muted); font-size: .86rem; line-height: 1.45; }

:where(body.mesh-theme) .module-empty {
  background: var(--card);
  border: 1px dashed var(--border-2);
  border-radius: var(--r-lg);
}

/* ============================================================
   CAPAS — modales, toasts, carga
   ============================================================ */

:where(body.mesh-theme) .pdf-modal-backdrop {
  background: rgba(42,45,39,.4);
  backdrop-filter: blur(2px);
}
:where(body.mesh-theme) .pdf-modal-dialog {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-modal);
}

:where(body.mesh-theme) .toast,
:where(body.mesh-theme) .toast-floating {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  box-shadow: var(--shadow-pop);
  backdrop-filter: none;
}

:where(body.mesh-theme) .loading-overlay { background: rgba(247,244,239,.55); }
:where(body.mesh-theme) .loading-overlay-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  color: var(--ink-2);
}

@media (prefers-reduced-motion: reduce) {
  :where(body.mesh-theme) *,
  :where(body.mesh-theme) *::before,
  :where(body.mesh-theme) *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}