/*
 * css/views/dashboard.css — Sección Dashboard: columnas por capa, tarjetas, selector de período, totales.
 *
 * 12-oct, fase 3 del kit de estilo: extraído del <style> de index.html (mismas reglas). El orden
 * de carga (index.html) es base -> components -> views; la verificación comparó los estilos
 * calculados de toda la página antes y después.
 */

/* Dashboard: una COLUMNA por capa, de izquierda a derecha Bronze | Silver | Gold; si una capa
   tiene varias tarjetas (Gold), van apiladas en su columna. Angosto: una sola columna, en ese orden. */
.layer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.layer-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.layer-cols > .empty { grid-column: 1 / -1; }
@media (max-width: 900px) { .layer-cols { grid-template-columns: 1fr; } }
/* Encabezado de columna (nombre de la capa + ícono de actividad diaria) --
   una fila chica arriba de las tarjetas de esa columna. */
.layer-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2px;
}
.layer-col-head .lname { font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lct, var(--lc)); }
/* 18-oct: --lct = color para TEXTO chico (contraste 4,5:1, ver base.css) */
.layer-col-head.bronze { --lc: var(--bronze); --lct: var(--bronze-text); }
.layer-col-head.silver { --lc: var(--silver); --lct: var(--silver-text); }
.layer-col-head.gold   { --lc: var(--gold);   --lct: var(--gold-text); }
.cal-icon-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-dim);
  border-radius: 7px; width: 28px; height: 28px; font-size: 0.9rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.cal-icon-btn:hover { color: var(--lc); border-color: var(--lc); }
.cal-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Tarjetas del Dashboard: cada capa (Bronze/Silver/Gold) pinta la suya --
   franja superior, degradé del encabezado, borde del tamaño y barra de
   cada contador -- para distinguirlas de un vistazo. */
.card {
  --lc: var(--accent); --lbg: var(--accent-dim);
  background: linear-gradient(180deg, var(--lbg) 0, var(--surface) 150px);
  border: 1px solid var(--border); border-top: 5px solid var(--lc);
  border-radius: var(--radius); padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.card.bronze { --lc: var(--bronze); --lbg: var(--bronze-bg); }
.card.silver { --lc: var(--silver); --lbg: var(--silver-bg); }
.card.gold   { --lc: var(--gold);   --lbg: var(--gold-bg); }
.card .head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card .head .name { font-weight: 700; font-size: 1.05rem; }
.card .head .type { color: var(--text-dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.size-hero {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  background: var(--surface); border: 1px solid var(--lc); border-radius: 8px; padding: 8px 14px;
}
.size-hero .k { color: var(--text-dim); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.size-hero .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 2.1rem; font-weight: 700; line-height: 1.1; color: var(--lc); }
.size-hero .v .unit { font-size: 1rem; font-weight: 600; margin-left: 4px; }
.size-hero .v.na { font-size: 1.3rem; font-weight: 400; color: var(--text-dim); }
.size-hero .hint { color: var(--text-dim); font-size: 0.75rem; text-align: right; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.stat { border-left: 4px solid var(--lc); padding-left: 10px; }
.stat.main { grid-column: 1 / -1; }
.stat .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.stat.main .v { font-size: 2rem; }
.stat .k .ratio { font-weight: 400; }
.stat.grouped .v { color: var(--lc); }
.stat .k { color: var(--text-dim); font-size: 0.76rem; font-weight: 600; }
.stat .v.na { color: var(--text-dim); font-weight: 400; }
.range { font-size: 0.78rem; color: var(--text-dim); border-top: 1px solid var(--border); padding-top: 8px; }
.range b { color: var(--text); font-weight: 600; }
.notes { font-size: 0.76rem; color: var(--text-dim); }
/* 14-oct: notas plegadas por defecto (<details>) */
.notes summary { cursor: pointer; font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 4px; user-select: none; }
.notes summary::-webkit-details-marker { display: none; }
.notes summary::before { content: '▸'; font-size: 0.75rem; transition: transform .15s; }
.notes[open] summary::before { transform: rotate(90deg); }
.notes summary:hover { color: var(--text); }
.notes-body { font-style: italic; margin-top: 4px; }
/* combobox multi-selección con búsqueda (Run): flotas / unidades / establecimiento / parcela */
/* selector de período + totalizador del Dashboard */
.range-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
/* 18-oct, usabilidad: el período y las flotas quedan a la vista al bajar por las tarjetas (en pantallas bajas no:
   ocuparía media pantalla). */
@media (min-height: 700px) {
  .range-panel { position: sticky; top: 0; z-index: 5; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .18); }
}
.range-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.range-lbl { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); }
.range-row label { font-size: 0.8rem; font-weight: 600; }
.range-row .lang-toggle button { text-transform: uppercase; letter-spacing: 0.03em; }
.range-row select, .range-row input[type="datetime-local"], .range-row input[type="date"] {   /* 4-nov: + date (Inicio) */
  padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
  color: var(--text); font: inherit; font-size: 0.82rem;
}
.range-status { font-size: 0.8rem; color: var(--text-dim); }
.range-status b { color: var(--text); }
.range-status.err { color: var(--err); }
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }
.tot {
  --lc: var(--accent); --lbg: var(--accent-dim);
  background: linear-gradient(180deg, var(--lbg) 0, var(--surface) 110px); border: 1px solid var(--border);
  border-top: 5px solid var(--lc); border-radius: var(--radius); padding: 14px 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.tot.rec { --lc: var(--ok); --lbg: var(--ok-bg); }
.tot.grp { --lc: var(--gold); --lbg: var(--gold-bg); }
.tot .k { color: var(--text-dim); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.tot .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 2.6rem; font-weight: 700; line-height: 1.1; color: var(--lc); margin: 2px 0; }
.tot .v .unit { font-size: 1.2rem; font-weight: 600; margin-left: 5px; }
.tot .sub { color: var(--text-dim); font-size: 0.78rem; line-height: 1.45; }
.tot-note { grid-column: 1 / -1; color: var(--text-dim); font-size: 0.75rem; margin-top: -6px; }