/*
 * css/components/mc.css — tarjetas de contadores (prefijo mc-) del kit puro-ui-kit (docs/standard/ui-kit/assets/css/
 * components.css, sección "tarjetas de contadores"), copiadas tal cual para la página de inicio (#/home, estándar
 * Dashboard 1.0, DASH-3). 4-nov. Nuestra copia del kit (vendor/style-kit) no trae la capa de aplicación (UI_ES.md §1).
 * Variables: las del kit (--mc-*, --fam-*); nuestro :root es el tema claro y [data-theme="dark"] el oscuro.
 */
:root {
  --mc-surface: var(--chrome-bg-raised);
  --mc-surface-2: color-mix(in srgb, var(--chrome-fg) 7%, var(--chrome-bg-raised));
  --mc-border: var(--chrome-border-strong, var(--chrome-border));
  --mc-text: var(--chrome-fg);
  --mc-dim: var(--chrome-fg-muted);
  --mc-accent: var(--chrome-accent);
  --mc-mono: var(--chrome-font-mono-stack);
  --mc-radius: 10px;
  --mc-tint: 11%;
  --fam-blue: #2563eb;
  --fam-amber: #b45309;
  --fam-accent: var(--chrome-accent);
  --fam-violet: #7c3aed;
  --fam-gray: #5b6b7c;
}
:root[data-theme="dark"] {
  --mc-tint: 16%;
  --fam-blue: #60a5fa;
  --fam-amber: #f59e0b;
  --fam-violet: #a78bfa;
  --fam-gray: #a9b6c4;
}

/* ---- tarjetas de contadores (prefijo mc-) ----
 * Un color por familia (--lc) pinta la franja superior, el degradé del encabezado, el borde del recuadro de
 * tamaño y la barra izquierda de cada contador. --lbg (fondo tenue) se deriva de --lc. */
.mc-area { transition: opacity 0.2s; margin-bottom: 14px; }
.mc-area.loading { opacity: 0.45; }
.mc-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; margin-bottom: 16px; }
.mc-tot, .mc-card {
  --lc: var(--mc-accent);
  --lbg: color-mix(in srgb, var(--lc) var(--mc-tint), var(--mc-surface));
  border: 1px solid var(--mc-border); border-top: 5px solid var(--lc); border-radius: var(--mc-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); min-width: 0;
}
.mc-tot { background: linear-gradient(180deg, var(--lbg) 0, var(--mc-surface) 110px); padding: 14px 18px; }
.mc-tot .k { color: var(--mc-dim); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.mc-tot .v { font-family: var(--mc-mono); font-variant-numeric: tabular-nums; font-size: 2.6rem; font-weight: 700;
  line-height: 1.1; color: var(--lc); margin: 2px 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .mc-tot .v { font-size: 2rem; } .mc-size .v, .mc-stat.main .v { font-size: 1.6rem; } }
.mc-tot .v .unit { font-size: 1.2rem; font-weight: 600; margin-left: 5px; }
.mc-tot .sub { color: var(--mc-dim); font-size: 0.78rem; line-height: 1.45; }
.mc-tot .sub b, .mc-card .range b { color: var(--mc-text); font-weight: 600; }

/* familias de datos (significado fijo por proyecto) y estados */
.mc-blue   { --lc: var(--fam-blue); }
.mc-amber  { --lc: var(--fam-amber); }
.mc-accent { --lc: var(--fam-accent); }
.mc-violet { --lc: var(--fam-violet); }
.mc-gray   { --lc: var(--fam-gray); }
.mc-ok   { --lc: var(--ok); }
.mc-warn { --lc: var(--warn); }
.mc-err  { --lc: var(--err); }
.mc-pend { --lc: var(--info); }

/* columnas por familia: alto natural; una sola columna debajo de 900 px */
.mc-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mc-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
@media (max-width: 900px) { .mc-cols { grid-template-columns: minmax(0, 1fr); } }
.mc-col-head { padding: 0 2px; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--lc) 78%, var(--mc-text)); }

.mc-card { background: linear-gradient(180deg, var(--lbg) 0, var(--mc-surface) 150px); padding: 16px;
  display: flex; flex-direction: column; gap: 12px; }
.mc-card .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mc-card .head .name { font-weight: 700; font-size: 1.05rem; }
.mc-card .head .type { color: var(--mc-dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
  overflow-wrap: anywhere; }
.mc-badge { font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; text-transform: uppercase;
  letter-spacing: 0.03em; color: color-mix(in srgb, var(--lc) 78%, var(--mc-text)); background: var(--lbg); white-space: nowrap; }
.mc-badge.source { color: var(--mc-dim); background: var(--mc-surface-2); text-transform: none; font-weight: 500; }

.mc-size { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: var(--mc-surface); border: 1px solid var(--lc); border-radius: 8px; padding: 8px 14px; }
.mc-size .k { color: var(--mc-dim); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.mc-size .v { font-family: var(--mc-mono); font-variant-numeric: tabular-nums; font-size: 2.1rem; font-weight: 700;
  line-height: 1.1; color: var(--lc); }
.mc-size .v .unit { font-size: 1rem; font-weight: 600; margin-left: 4px; }
.mc-size .hint { color: var(--mc-dim); font-size: 0.75rem; flex-basis: 100%; }

.mc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.mc-stat { border-left: 4px solid var(--lc); padding-left: 10px; min-width: 0; }
.mc-stat.main { grid-column: 1 / -1; }
.mc-stat .v { font-family: var(--mc-mono); font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.mc-stat.main .v { font-size: 2rem; }
.mc-stat.grouped .v { color: var(--lc); }
.mc-stat .v.na { color: var(--mc-dim); font-weight: 400; }
.mc-stat .k { color: var(--mc-dim); font-size: 0.76rem; font-weight: 600; }
.mc-stat .k.ratio { font-weight: 400; }

.mc-card .range { font-size: 0.78rem; color: var(--mc-dim); border-top: 1px solid var(--mc-border); padding-top: 8px; line-height: 1.6; }
.mc-notes { font-size: 0.76rem; color: var(--mc-dim); }
.mc-notes summary { cursor: pointer; font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 4px; user-select: none; }
.mc-notes summary::-webkit-details-marker { display: none; }
.mc-notes summary::before { content: '▸'; font-size: 0.7rem; transition: transform 0.15s; }
.mc-notes[open] summary::before { transform: rotate(90deg); }
.mc-notes summary:hover { color: var(--mc-text); }
.mc-notes-body { font-style: italic; margin-top: 4px; }