/* COPIA de src/AgroStudio.Web/wwwroot/css/minimal.css: la ayuda no comparte archivos con la app (igual que su styles.css).
   Si se cambia uno, cambiar el otro. Lo propio de la ayuda va en docs.css, no acá. */

/* AgroStudio — overrides minimal sobre Metronic 9. Se carga DESPUÉS de assets/css/styles.css (Master.cshtml).
   Regla: separar con espacio y con tono de fondo, no con líneas. Las únicas líneas que quedan son el divisor
   entre filas de tabla/lista y el borde de los controles (inputs, botones).

   Dónde va cada cosa, y por qué:
   - Tokens y cromo (página, sidebar, header): SIN capa. styles.css declara sus tokens fuera de capa y las
     utilidades del layout (bg-background, border-e) dentro de @layer utilities; una regla sin capa les gana a las dos.
   - Componentes (card, tabla, badge): en @layer components, la misma capa de Metronic. Ganan por orden de
     carga, y una utilidad puesta a mano en una vista (border, bg-*) sigue ganando.
   Todo color nuevo tiene su par en .dark. No hay hex ni rgba fijos salvo la sombra de la card. */

/* ---------- 1. Tokens ---------- */
:root {
  --agro-canvas: oklch(97.2% 0.002 286);      /* fondo de página: en Metronic era el mismo blanco de la card */
  --agro-chrome: var(--color-white);          /* sidebar + header */
  --agro-inset: oklch(97.2% 0.002 286);       /* card dentro de card */
  --agro-card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --border: oklch(95.3% 0.003 286);           /* era 94% */
  --muted-foreground: oklch(52% 0.016 286);   /* era zinc-500 (55.2%): AA también sobre el fondo gris */
}
.dark {
  --agro-canvas: var(--color-zinc-950);
  --agro-chrome: oklch(18.5% 0.006 286);
  --agro-inset: oklch(22.5% 0.006 286);
  --agro-card-shadow: 0 0 #0000;
  --card: oklch(18.5% 0.006 286);             /* era zinc-950, igual al fondo: la card dependía del borde */
  --popover: var(--color-zinc-900);
  --muted: oklch(24% 0.006 286);              /* era zinc-900: sobre la card nueva no se veía el hover */
  --accent: oklch(24% 0.006 286);
  --border: oklch(24.5% 0.006 286);           /* era zinc-800 */
  --muted-foreground: var(--color-zinc-400);  /* era zinc-500: no llegaba a AA */
}

/* ---------- 2. Cromo: página, sidebar, header ---------- */
body { background-color: var(--agro-canvas); }

/* Header más bajo (Metronic: 70 px, 60 en móvil). El breadcrumb es una línea de texto; la altura del logo del sidebar
   sale de la misma variable, así que se achican a la par. */
.demo1 { --header-height: 56px; }
@media (max-width: 64rem) { .demo1 { --header-height: 52px; } }

.demo1 .kt-sidebar {
  background-color: var(--agro-chrome);
  border-inline-end-width: 0;
}
.demo1 .kt-header {
  background-color: var(--agro-chrome);
  border-bottom-width: 0;                     /* la que agrega data-kt-sticky-class al hacer scroll */
}
/* El primer bloque de cada página pega más arriba: el header ya separa, no hace falta tanto aire antes de las pestañas o
   el título. Los wrappers de las vistas traen p-5 / lg:p-8 en los cuatro lados; acá solo se baja el de arriba. */
#contentContainer > .flex.flex-col { padding-top: calc(var(--spacing) * 3); }

/* Guía vertical de los submenús: la sangría ya dice que son hijos. */
.demo1 .kt-sidebar .kt-menu-accordion::before { border-inline-start-width: 0; }

/* ---------- 3. Componentes ---------- */
@layer components {
  .kt-card {
    border-width: 0;
    --tw-shadow: var(--agro-card-shadow);
    box-shadow: var(--agro-card-shadow);
  }
  /* Card dentro de card: no hay contraste de fondo que la separe, pasa a superficie hundida. */
  .kt-card .kt-card {
    background-color: var(--agro-inset);
    box-shadow: none;
  }
  .kt-card-header {
    border-bottom-width: 0;
    min-height: calc(var(--spacing) * 13);
  }
  .kt-card-header + .kt-card-content { padding-top: calc(var(--spacing) * 1); }
  .kt-card-footer {
    border-top-width: 0;
    padding-top: calc(var(--spacing) * 1);
  }

  /* Tabla: solo el divisor horizontal entre filas (el de la última ya lo saca Metronic). */
  .kt-table-border { border-width: 0; }
  .kt-table-border td,
  .kt-table-border th { border-inline-end-width: 0; }
  .kt-table thead th {
    background-color: transparent;
    color: var(--muted-foreground);
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .kt-table tbody tr:has(td):hover {
    background-color: color-mix(in oklab, var(--muted) 45%, transparent);
  }
  .kt-table tfoot { background-color: transparent; }

  /* Badge "outline": queda el tinte, se va la línea. Las variantes de color fijan su propio borde con más
     especificidad; apagar el estilo las cubre a todas de una vez. */
  .kt-badge-outline { --tw-border-style: none; }
}

/* ---------- 4. Utilidades que las vistas usan y el CSS compilado no trae ----------
   Sin regla de color, border-b / border-t caen a currentColor: líneas del color del texto. */
@layer utilities {
  .border-border\/60 { border-color: var(--border); }
  .border-primary\/30 { border-color: color-mix(in oklab, var(--primary) 30%, transparent); }
}