/* Electro — 05-polish.css */
     REFINAMIENTO VISUAL · capa de pulido minimalista
     (va al final del archivo: con igual especificidad gana por cascada)
     ════════════════════════════════════════════════════════════════ */

  /* — Render de texto más nítido y legible — */
  html { scroll-behavior: smooth; }
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.45;
  }
  ::selection { background: var(--blue-light); color: var(--blue-text); }

  /* — Barras de scroll finas y discretas — */
  * { scrollbar-width: thin; scrollbar-color: var(--border-md) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background: var(--hint); background-clip: padding-box; }

  /* — Cabeceras y etiquetas con tracking afinado — */
  .content-title, .modal-title, .login-title { letter-spacing: -0.015em; }
  .logo, .login-logo { letter-spacing: -0.01em; }
  .sidebar-label, .card-label, .settings-section-label, .inst-group-head { letter-spacing: 0.07em; }

  /* — Tarjetas: sombra muy sutil que reemplaza el ruido de bordes duros — */
  .card { padding: 18px; box-shadow: var(--shadow); }
  .my-card, .inst-team-card, .inst-card, .wcal-wrap, .login-box { box-shadow: var(--shadow); }
  .modal-body { gap: 16px; }

  /* Más aire en escritorio (sin tocar el responsive de móvil) */
  @media (min-width: 769px) {
    .content-body { padding: 22px 28px; gap: 16px; }
    .content-head { padding: 18px 28px; }
  }

  /* — Botones: transición completa + micro-feedback al pulsar — */
  .btn, .btn-xs, .btn-new, .cal-nav-btn, .chip, .quick-btn, .user-btn, .role-tab {
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
  }
  .btn { padding: 7px 15px; }
  .btn:active, .btn-xs:active, .btn-new:active, .cal-nav-btn:active, .quick-btn:active { transform: translateY(1px); }
  .btn-primary { box-shadow: 0 1px 2px rgba(12,68,124,0.18); }
  .btn-primary:hover { box-shadow: 0 3px 10px rgba(12,68,124,0.22); }
  [data-theme="dark"] .btn-primary { box-shadow: none; }

  /* — Chips de filtro un poco más cómodos — */
  .chip { padding: 4px 11px; }

  /* — Lista de pedidos: un punto más de aire — */
  .pedido-item { padding: 13px 16px; }

  /* — Campos: anillo de foco suave (gran ayuda de usabilidad) — */
  input:focus, textarea:focus, select:focus,
  input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: none;
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px var(--blue-light);
  }
  /* Foco accesible por teclado en elementos pulsables */
  button:focus-visible, .btn:focus-visible, .chip:focus-visible,
  .inst-opt:focus-visible, .user-btn:focus-visible, a:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
  }

  /* — Badges y estado urgente coherentes con el tema (claro y oscuro) — */
  .badge { padding: 3px 9px; letter-spacing: 0.01em; }
  .s-urgente { background: var(--red-light); color: var(--red); font-weight: 600; border: none; }
  .s-urgente::before { content: '🔴 '; font-size: 8px; }

  /* — Pestaña de rol activa más sutil — */
  .role-tab.active { box-shadow: 0 1px 2px rgba(20,18,12,0.06); }

  /* — Tarjetas pulsables: leve elevación al pasar el ratón — */
  .inst-card { transition: border-color .15s ease, background .15s ease, transform .12s ease, box-shadow .15s ease; }
  .inst-team-card:hover, .inst-card:hover { transform: translateY(-1px); }

  /* — Modales y paneles: overlay con desenfoque sutil + entrada pulida — */
  .modal-overlay { background: rgba(20,18,14,0.40); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  #settings-overlay { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  .modal-overlay.open .modal { animation: modalIn .22s cubic-bezier(.2,.7,.2,1); }
  @keyframes modalIn { from { transform: translateY(12px) scale(.985); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

  /* — Login: entrada amable — */
  .login-box { animation: loginIn .4s cubic-bezier(.2,.7,.2,1); }
  @keyframes loginIn { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

  /* — Detalle del pedido: aparece con un fundido suave la primera vez — */
  #detail-panel { animation: fadeUp .28s ease; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

  /* — Toast con borde sutil para legibilidad en cualquier tema — */
  .toast { border: 0.5px solid rgba(255,255,255,0.08); }

  /* — Respeta la preferencia del sistema de reducir movimiento — */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* ── ESTADÍSTICAS ── */
  .stats-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  @media (max-width: 640px) { .stats-kpi-grid { grid-template-columns: repeat(2, 1fr); } }