/* ============================================================
   TEMA v2 · 20 · INICIO  ·  centro de control
   Carbón + bronce. KPI protagonista (ventas del día) en bloque oscuro,
   el resto como paneles con cifras grandes y la lista de últimas ventas.
   ============================================================ */
#view[data-route="inicio"] .page-title { background: #1c1815; border: 1px solid #3a322a; }
#view[data-route="inicio"] .page-title::after { border-color: rgba(205, 163, 94, .12); width: 280px; height: 280px; right: -60px; top: -90px; }
#view[data-route="inicio"] .page-title h2 { font-size: 54px; color: #f6eee2; }
#view[data-route="inicio"] .page-title p { color: #cda35e; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; font-weight: 650; }

#view[data-route="inicio"] .grid.cols-4 { grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 18px; }
#view[data-route="inicio"] .grid.cols-4 > .stat:first-child {
  background: #1c1815; border-color: #3a322a; color: #f6eee2; min-height: 190px; padding: 26px 28px; justify-content: space-between;
  box-shadow: 0 16px 34px rgba(28, 24, 21, .35);
}
#view[data-route="inicio"] .grid.cols-4 > .stat:first-child::after { background: linear-gradient(90deg, #cda35e, #8a5d22); height: 5px; }
#view[data-route="inicio"] .grid.cols-4 > .stat:first-child .stat-top { color: #cda35e; }
#view[data-route="inicio"] .grid.cols-4 > .stat:first-child .ico-wrap { background: rgba(205, 163, 94, .16); color: #e8c27a; width: 48px; height: 48px; }
#view[data-route="inicio"] .grid.cols-4 > .stat:first-child .stat-value { font-size: 76px; color: #f2c46d; letter-spacing: -.01em; }
#view[data-route="inicio"] .grid.cols-4 > .stat:first-child .stat-foot { color: rgba(246, 238, 226, .65); font-size: 14px; }
#view[data-route="inicio"] .grid.cols-4 > .stat:not(:first-child) .stat-value { font-size: 46px; }
#view[data-route="inicio"] .dash-top-grid { align-items: stretch; }
#view[data-route="inicio"] .dash-quick-actions { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; min-width: 0; }
#view[data-route="inicio"] .dash-quick { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 0; padding: 10px; border-radius: 18px; border-color: var(--border); background: var(--surface); box-shadow: var(--shadow-sm); font-size: 15px; }
#view[data-route="inicio"] .dash-quick:hover { border-color: var(--accent-solid); color: var(--accent); background: var(--surface); }
#view[data-route="inicio"] .dash-quick .ico { width: 19px; height: 19px; }
#view[data-route="inicio"] .dash-caja-status { min-height: 12px; margin: -12px 0 8px; }

/* medios de pago */
#view[data-route="inicio"] .grid.cols-3 { gap: 18px; }
#view[data-route="inicio"] .grid.cols-3 > .stat { flex-direction: row; align-items: center; gap: 16px; padding: 18px 22px; border-left: 0; }
#view[data-route="inicio"] .grid.cols-3 > .stat::after { top: 0; bottom: 0; left: 0; right: auto; width: 6px; height: auto; border-radius: 0; }
#view[data-route="inicio"] .grid.cols-3 > .stat:nth-child(1)::after { background: #5d6a22; }
#view[data-route="inicio"] .grid.cols-3 > .stat:nth-child(2)::after { background: #1f6f78; }
#view[data-route="inicio"] .grid.cols-3 > .stat:nth-child(3)::after { background: #4d55a8; }
#view[data-route="inicio"] .grid.cols-3 > .stat .stat-top { flex: 1; }
#view[data-route="inicio"] .grid.cols-3 > .stat .ico-wrap { order: -1; margin: 0 12px 0 0; }
#view[data-route="inicio"] .grid.cols-3 > .stat .stat-value { font-size: 40px; text-align: right; margin: 0; }
#view[data-route="inicio"] .grid.cols-3 > .stat { min-width: 0; gap: clamp(8px, 1vw, 12px); padding-inline: clamp(12px, 1.4vw, 18px); }
#view[data-route="inicio"] .grid.cols-3 > .stat .stat-top { min-width: 0; gap: 5px; font-size: 10px; letter-spacing: .02em; white-space: nowrap; }
#view[data-route="inicio"] .grid.cols-3 > .stat .ico-wrap { width: 24px; height: 24px; flex: 0 0 24px; margin: 0 4px 0 0; }
#view[data-route="inicio"] .grid.cols-3 > .stat .stat-value { flex: 0 0 auto; font-size: clamp(18px, 1.6vw, 22px); white-space: nowrap; }
#view[data-route="inicio"] .grid.cols-3 > .stat:nth-child(1) .ico-wrap { background: #e9edd3; color: #5d6a22; }
#view[data-route="inicio"] .grid.cols-3 > .stat:nth-child(2) .ico-wrap { background: #d8ecee; color: #1f6f78; }
#view[data-route="inicio"] .grid.cols-3 > .stat:nth-child(3) .ico-wrap { background: #e1e3f5; color: #4d55a8; }
html[data-theme="dark"] #view[data-route="inicio"] .grid.cols-3 > .stat .ico-wrap { background: var(--surface-2); }

@media (min-width: 901px) and (max-width: 1100px) {
  #view[data-route="inicio"] .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#view[data-route="inicio"] .toolbar .btn { min-height: 54px; padding: 0 26px; font-size: 16px; }
#view[data-route="inicio"] .toolbar .badge { font-size: 14px; padding: 8px 16px; }
#view[data-route="inicio"] .card-head { background: #1c1815; color: #f6eee2; border-bottom: 0; }
#view[data-route="inicio"] .card-head h3 { color: #f2c46d; }
#view[data-route="inicio"] .card { overflow: hidden; }

/* Etapa 10: tarjetas de Inicio que abren su módulo */
.stat-link { cursor: pointer; }
.stat-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg, var(--shadow-md)); }
.stat-link:focus-visible { outline: 3px solid var(--accent-solid, #b02f1e); outline-offset: 2px; }
#view[data-route="inicio"] tr.clickable { cursor: pointer; }
#view[data-route="inicio"] tr.clickable:focus-visible { outline: 3px solid var(--accent-solid, #b02f1e); outline-offset: -3px; }

/* Aviso «TENÉS N ALERTAS PARA HOY» (Inicio, solo administrador): visible pero discreto */
.dash-alertas-hoy { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 16px; border: 1px solid #c9a24a; border-left: 6px solid #c9a24a; border-radius: 14px; background: #fff6df; color: #4a3410; font: inherit; text-align: left; cursor: pointer; }
.dash-alertas-hoy[hidden] { display: none; }
.dash-alertas-hoy > span { display: grid; gap: 1px; flex: 1; min-width: 0; }
.dash-alertas-hoy b { font-size: 15px; letter-spacing: .04em; }
.dash-alertas-hoy small { font-size: 12px; opacity: .85; }
.dash-alertas-hoy em { font-style: normal; font-weight: 800; letter-spacing: .08em; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #c9a24a; color: #fff; }
.dash-alertas-hoy:hover { background: #fff0c4; }