/* =============================================================================
 * Nekton Operador PWA — Estilos
 * Separado de operator.html para modularidad
 * ============================================================================= */

/* ── Base ───────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    html, body {
      margin: 0; padding: 0;
      background: #0b1120;
      color: #f1f5f9;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      min-height: 100vh;
      overscroll-behavior: none;
    }
    /* ── Glass cards ────────────────────────────────────────────── */
    .glass {
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
    .glass-light {
      background: rgba(30, 41, 59, 0.6);
      border: 1px solid rgba(255,255,255,0.07);
    }
    /* ── Inputs ─────────────────────────────────────────────────── */
    .op-input {
      width: 100%;
      background: rgba(15,23,42,0.7);
      border: 1px solid rgba(148,163,184,0.2);
      border-radius: 0.75rem;
      padding: 0.75rem 1rem;
      color: #f1f5f9;
      font-size: 1rem;
      outline: none;
      transition: border-color 0.2s;
    }
    .op-input:focus { border-color: #38bdf8; }
    select.op-input option { background: #1e293b; color: #f1f5f9; }
    /* ── Buttons ────────────────────────────────────────────────── */
    .btn-primary {
      width: 100%;
      padding: 0.85rem 1rem;
      border-radius: 0.875rem;
      background: linear-gradient(135deg, #0ea5e9, #6366f1);
      color: #fff;
      font-weight: 600;
      font-size: 1rem;
      border: none;
      cursor: pointer;
      transition: opacity 0.2s, transform 0.1s;
      touch-action: manipulation;
    }
    .btn-primary:active { opacity: 0.85; transform: scale(0.98); }
    .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
    .btn-action {
      flex: 1;
      padding: 0.85rem 0.5rem;
      border-radius: 0.875rem;
      font-weight: 600;
      font-size: 0.85rem;
      border: none;
      cursor: pointer;
      transition: opacity 0.15s, transform 0.1s;
      touch-action: manipulation;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
      min-height: 68px;
    }
    .btn-action:active { opacity: 0.8; transform: scale(0.97); }
    .btn-dispatch  { background: linear-gradient(135deg, #0ea5e9, #6366f1); color: #fff; }
    .btn-stop      { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; }
    .btn-pause     { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
    .btn-resume    { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
    .btn-stock        { background: rgba(16,185,129,0.15);  border: 1px solid rgba(16,185,129,0.4);  color: #34d399; }
    .btn-stock-warn   { background: rgba(245,158,11,0.15);  border: 1px solid rgba(245,158,11,0.4);  color: #fbbf24; }
    .btn-stock-danger { background: rgba(239,68,68,0.15);   border: 1px solid rgba(239,68,68,0.4);   color: #f87171; }
    .btn-calibrate { background: rgba(168,85,247,0.15); border: 1px solid rgba(168,85,247,0.4); color: #c084fc; }
    .btn-chart     { background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.3); color: #7dd3fc; }
    .btn-secondary {
      padding: 0.75rem 1.5rem;
      border-radius: 0.75rem;
      background: rgba(100,116,139,0.2);
      border: 1px solid rgba(100,116,139,0.3);
      color: #94a3b8;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.2s;
    }
    .btn-secondary:active { background: rgba(100,116,139,0.35); }
    /* ── Status badges ──────────────────────────────────────────── */
    .badge-running  { background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.3); }
    .badge-paused   { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
    .badge-idle     { background: rgba(100,116,139,0.15); color: #94a3b8; border: 1px solid rgba(100,116,139,0.25); }
    .badge-offline  { background: rgba(239,68,68,0.12);  color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
    /* ── Screens ────────────────────────────────────────────────── */
    .screen { display: none; min-height: 100vh; }
    .screen.active { display: flex; flex-direction: column; }
    /* ── Modals ─────────────────────────────────────────────────── */
    .modal-overlay {
      display: none;
      position: fixed; inset: 0; z-index: 60;
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(4px);
      align-items: flex-end;
      justify-content: center;
      padding: 0;
    }
    .modal-overlay.open { display: flex; }
    .modal-sheet {
      width: 100%;
      max-width: 480px;
      background: #0f172a;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 1.5rem 1.5rem 0 0;
      padding: 1.5rem 1.25rem 2rem;
      max-height: 92vh;
      overflow-y: auto;
    }
    .modal-handle {
      width: 2.5rem; height: 0.25rem;
      background: rgba(148,163,184,0.3);
      border-radius: 9999px;
      margin: 0 auto 1.25rem;
    }
    /* ── Header ─────────────────────────────────────────────────── */
    .op-header {
      position: sticky; top: 0; z-index: 40;
      background: rgba(11,17,32,0.95);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      padding: 0.875rem 1rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding-top: max(0.875rem, env(safe-area-inset-top));
    }
    /* ── Severity colors ────────────────────────────────────────── */
    .sev-critical { color: #f87171; }
    .sev-warning  { color: #fbbf24; }
    .sev-info     { color: #60a5fa; }
    /* ── Spinner ────────────────────────────────────────────────── */
    @keyframes spin { to { transform: rotate(360deg); } }
    .spinner {
      width: 1.5rem; height: 1.5rem;
      border: 2px solid rgba(56,189,248,0.2);
      border-top-color: #38bdf8;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
    }
    /* ── Readiness ──────────────────────────────────────────────── */
    .check-ok   { color: #34d399; }
    .check-fail { color: #f87171; }
    .check-warn { color: #fbbf24; }
    /* ── Progress bar ───────────────────────────────────────────── */
    .stock-bar { height: 6px; background: rgba(255,255,255,0.07); border-radius: 9999px; overflow: hidden; }
    .stock-bar-fill { height: 100%; border-radius: 9999px; transition: width 0.4s; }