/**
 * midia.css · 49cb.142c · F2 PWA Movers
 *
 * Estilos de la pantalla "Mi día" (mockup pantalla 2).
 * Variables vienen de app.css (--bg, --txt, --pri, --surface, etc.).
 */

/* ── Wrapper main ─────────────────────────────────────────────── */
/* El padding vertical lo gestiona el shell (topbar arriba, tabbar
   abajo). Aquí solo padding lateral y gap entre bloques. */
.midia-main {
  padding: 18px;
  display: flex; flex-direction: column; gap: 18px;
}

/* ── Aviso "cache stale" mientras revalida ────────────────────── */
.midia-stale {
  font-size: 12px; color: var(--text-dim, #b1adb0);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px; padding: 6px 10px;
  text-align: center;
}

/* ── Saludo ──────────────────────────────────────────────────── */
.midia-saludo .saludo-h1 {
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--txt, #f5f3ed);
  margin: 4px 0 4px;
}
.midia-saludo .saludo-h1 strong { color: var(--pri-soft, #7B6FE8); font-weight: 700; }
.midia-saludo .saludo-sub {
  font-size: 13px; color: var(--text-dim, #b1adb0);
}

/* ── Card próxima visita ─────────────────────────────────────── */
.midia-proxima {
  display: block; width: 100%; text-align: left;
  background: linear-gradient(135deg, rgba(74,63,184,0.20), rgba(123,111,232,0.10));
  border: 1px solid rgba(123,111,232,0.32);
  border-radius: 16px;
  padding: 18px 18px 16px;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  color: inherit; font-family: inherit;
}
.midia-proxima:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(74,63,184,0.18); }
.midia-proxima:active { transform: translateY(0); }
.midia-proxima .proxima-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--text-dim, #b1adb0);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.midia-proxima .proxima-hora {
  font-weight: 700; color: var(--pri-soft, #7B6FE8);
  font-size: 13px; letter-spacing: 0;
}
.midia-proxima .proxima-tipo { color: var(--text-dim, #b1adb0); }
.midia-proxima .proxima-cliente {
  font-size: 17px; font-weight: 600; margin: 2px 0 4px;
  color: var(--txt, #f5f3ed);
}
.midia-proxima .proxima-ciudad {
  font-size: 13px; color: var(--text-dim, #b1adb0); margin: 2px 0 8px;
}
.midia-proxima .proxima-countdown {
  font-size: 13px; font-weight: 500;
}
.midia-proxima .cd-ahora,
.midia-proxima .cd-pronto { color: #FFC857; font-weight: 600; }
.midia-proxima .cd-pasada { color: #ef4444; }
.midia-proxima .cd-mas    { color: var(--text-dim, #b1adb0); }

/* Estado vacío "no hay visitas hoy" */
.midia-proxima-vacia {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  text-align: center;
  padding: 24px 18px;
}
.midia-proxima-vacia .proxima-icono { font-size: 28px; margin-bottom: 6px; }
.midia-proxima-vacia .proxima-titulo {
  font-size: 16px; font-weight: 600; color: var(--txt, #f5f3ed);
  margin-bottom: 4px;
}
.midia-proxima-vacia .proxima-sub {
  font-size: 13px; color: var(--text-dim, #b1adb0);
}

/* ── KPIs ─────────────────────────────────────────────────────── */
.midia-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.midia-kpi {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px 8px; text-align: center;
}
.midia-kpi .kpi-icono { font-size: 18px; margin-bottom: 2px; }
.midia-kpi .kpi-valor {
  font-size: 20px; font-weight: 700; line-height: 1.1;
  color: var(--txt, #f5f3ed);
  letter-spacing: -0.02em;
}
.midia-kpi .kpi-label {
  font-size: 11px; color: var(--text-dim, #b1adb0);
  margin-top: 3px; text-transform: uppercase; letter-spacing: 0.5px;
}

/* ── Acciones rápidas ─────────────────────────────────────────── */
.midia-acciones-titulo {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-dim, #b1adb0);
  margin: 6px 0 8px;
}
.acciones-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.accion-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px 14px 12px;
  text-align: left; cursor: pointer;
  color: var(--txt, #f5f3ed); font-family: inherit;
  transition: transform .12s, background .12s;
}
.accion-card:hover { background: rgba(255,255,255,0.06); transform: translateY(-1px); }
.accion-card.accion-pri {
  background: linear-gradient(135deg, var(--pri, #4A3FB8), var(--pri-soft, #7B6FE8));
  border-color: transparent;
}
.accion-card.accion-pri .accion-sub { color: rgba(255,255,255,0.85); }
.accion-card .accion-icono { font-size: 22px; margin-bottom: 6px; }
.accion-card .accion-titulo {
  font-size: 14px; font-weight: 600; margin-bottom: 2px;
}
.accion-card .accion-sub {
  font-size: 12px; color: var(--text-dim, #b1adb0);
}

/* ── Skeleton loading ─────────────────────────────────────────── */
.midia-skeleton { padding: 4px 0; display: flex; flex-direction: column; gap: 14px; }
.midia-skeleton .sk-line {
  height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
.midia-skeleton .sk-w60 { width: 60%; }
.midia-skeleton .sk-w40 { width: 40%; }
.midia-skeleton .sk-card {
  height: 110px; border-radius: 16px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
.midia-skeleton .sk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.midia-skeleton .sk-kpis > div {
  height: 76px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
@keyframes sk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ════════════════════════════════════════════════════════════ */
/*  iPad / tablet · 768-1199px                                  */
/*  Aprovechamos el ancho con padding generoso, KPIs grandes y  */
/*  acciones en 4 columnas en lugar de 2.                       */
/* ════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .midia-main {
    padding: 32px 40px;
    gap: 28px;
    max-width: 1024px;       /* tope práctico · evita líneas larguísimas */
    margin: 0 auto;
  }
  .midia-saludo .saludo-h1 { font-size: 28px; }
  .midia-saludo .saludo-sub { font-size: 14px; }

  .midia-proxima { padding: 24px 26px 22px; }
  .midia-proxima .proxima-cliente { font-size: 20px; }
  .midia-proxima .proxima-hora    { font-size: 14px; }
  .midia-proxima .proxima-ciudad  { font-size: 14px; }
  .midia-proxima .proxima-countdown { font-size: 14px; }

  .midia-kpis { gap: 16px; }
  .midia-kpi { padding: 20px 14px; }
  .midia-kpi .kpi-icono { font-size: 26px; margin-bottom: 6px; }
  .midia-kpi .kpi-valor { font-size: 28px; }
  .midia-kpi .kpi-label { font-size: 12px; }

  .midia-acciones-titulo { font-size: 13px; }
  /* 4 columnas en tablet — caben todas las cards en una fila */
  .acciones-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .accion-card { padding: 20px 18px 16px; }
  .accion-card .accion-icono { font-size: 28px; margin-bottom: 10px; }
  .accion-card .accion-titulo { font-size: 15px; }
  .accion-card .accion-sub    { font-size: 13px; }
}

/* ── Error sin conexión ──────────────────────────────────────── */
.midia-error {
  text-align: center; padding: 40px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.midia-error .error-icono { font-size: 38px; }
.midia-error .error-titulo {
  font-size: 18px; font-weight: 600; color: var(--txt, #f5f3ed);
}
.midia-error .error-sub {
  font-size: 13px; color: var(--text-dim, #b1adb0);
  max-width: 280px;
}
.midia-error .btn { margin-top: 10px; }