/* ===== Kiosk — Estilo premium minimal (v2) ===== */
:root{
  --bg: #f2f1f0;           /* fondo */
  --ink: #202124;          /* texto principal (Google-like) */
  --muted:#6b7280;         /* texto secundario */
  --card:#ffffff;          /* tarjeta central */
  --tile:#f9f9f9;          /* tile */
  --tile-press:#efefef;    /* tile presionado */
  --border:#e7e7e7;        /* borde sutil */
  --radius-card: 30px;
  --radius-tile: 16px;
  --shadow-card: 0 2px 10px rgba(0,0,0,.04); /* sombra muy ligera */
  --font-title: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-ui: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

html, body{
  height:100%;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family:var(--font-ui);
  color:var(--ink);
}

.screen{
  min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}

/* Tarjeta tipo tablet: borde sutil + sombra muy discreta */
.kiosk{
  background:var(--card);
  border-radius:var(--radius-card);
  padding:40px 42px 34px;
  width:100%;
  max-width:444px;              /* un poco más ancho para respirar */
  text-align:center;
  box-shadow: var(--shadow-card);
  border:1px solid #f1f1f1;     /* halo blanco */
  outline:1px solid var(--border); /* línea sutil tipo iPad marco */
  outline-offset:-1px;
  position:relative;
}

/* Header */
.kiosk .brand{
  font: 500 13px/1 var(--font-ui);
  letter-spacing:.18em;         /* más fino y elegante */
  color:#4b5563;
  text-transform:uppercase;
  margin:0;
}
.kiosk .title{
  font: 700 30px/1.05 var(--font-title);
  letter-spacing:.18em;
  margin:12px 0 26px;
}

/* Grid 2x3 con tiles más altos y proporción constante */
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.tile{
  background:var(--tile);
  border:1px solid var(--border);
  border-radius:var(--radius-tile);
  height:108px;                 /* **alto fijo** para cuadrar exacto */
  padding:18px 10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
  transition: transform .08s ease, background .15s ease, border-color .2s ease;
  cursor:pointer;
}
.tile:active, .tile.k-press{ transform:scale(.985); background:var(--tile-press); }

/* Íconos: trazos uniformes + centrados */
.tile svg{
  width:38px; height:38px; margin-bottom:10px;
  stroke:#2d2f31; stroke-width:1.4; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}

/* Texto del tile: intermedio, no tan pesado */
.tile span{
  font: 600 14.5px/1.1 var(--font-ui);
  color:var(--ink);
}

/* Mensaje */
.k-alert{ font: 500 13px/1.2 var(--font-ui); color:#0e7a57; text-align:center; margin-top:16px; display:none; }
.k-alert.show{ display:block; }

/* Loader */
.k-loader{
  position:absolute; inset:0; display:none; place-items:center;
  background:rgba(255,255,255,.6);
  border-radius:var(--radius-card);
}
.k-loader .spin{
  width:26px; height:26px; border:2px solid #e5e7eb; border-top-color:#111827;
  border-radius:999px; animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* Sheet confirmación */
.k-sheet{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.k-sheet.open{ opacity:1; pointer-events:auto; }
.k-sheet .box{
  width:100%; max-width:444px; background:#fff;
  border-radius:22px 22px 0 0; padding:22px 18px;
  transform:translateY(16px); transition:transform .2s ease;
  text-align:center;
}
.k-sheet.open .box{ transform:none; }
.k-btn{
  margin-top:14px; display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px; background:#111827; color:#fff;
  font: 600 14px/1 var(--font-ui);
}


/* ==== Dashboard responsive charts & table ==== */
.dash-container{ max-width:1100px; margin:0 auto; padding:20px; }
.charts{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width: 900px){ .charts{ grid-template-columns:1fr 1fr; } }

/* tarjeta contenedora del canvas */
.chart-card{
  background:#fff; border:1px solid #eee; border-radius:14px;
  padding:16px; height:320px; /* controla altura visual */
}
/* el canvas debe llenar el contenedor */
.chart-card canvas{ width:100% !important; height:100% !important; }

/* tablas con scroll horizontal suave en móviles */
.table-wrap{ overflow-x:auto; border:1px solid #eee; border-radius:12px; background:#fff; }
.table-wrap table{ width:100%; border-collapse:collapse; font-size:14px; }
.table-wrap th, .table-wrap td{ padding:10px 12px; border-bottom:1px solid #f0f0f0; text-align:left; white-space:nowrap; }