/* ============================================================
   OX Automação — KDS (Kitchen Display System)
   Interface para TV/tablet em cozinha — legível à distância
   ============================================================ */

:root {
    --primary:      #ff4500;
    --primary-dark: #cc3700;
    --bg:           #0a0a0a;
    --bg-header:    #111111;
    --bg-card:      #141414;
    --bg-card2:     #1c1c1c;
    --bg-sidebar:   #0f0f0f;
    --border:       #2a2a2a;
    --text:         #f0f0f0;
    --text-muted:   #888;
    --text-dim:     #444;

    /* Alertas de tempo */
    --ok:           #1e1e1e;
    --ok-border:    #3a3a3a;
    --warn:         #221e00;
    --warn-border:  #9a7800;
    --warn-text:    #fbbf24;
    --crit:         #220000;
    --crit-border:  #aa0000;
    --crit-text:    #f87171;

    /* Pronto */
    --pronto-bg:    #002210;
    --pronto-border:#008840;
    --pronto-text:  #4ade80;

    --header-h:  54px;
    --sidebar-w: 90px;
    --radius:    10px;
    --transition: 0.2s ease;
}

/* Tema claro */
[data-tema="claro"] {
    --bg:         #efefef;
    --bg-header:  #ffffff;
    --bg-card:    #ffffff;
    --bg-card2:   #f5f5f5;
    --bg-sidebar: #f0f0f0;
    --border:     #dddddd;
    --text:       #111111;
    --text-muted: #666666;
    --text-dim:   #bbbbbb;
    --ok:         #ffffff;
    --ok-border:  #cccccc;
    --warn:       #fffbe6;
    --warn-border:#e6b800;
    --crit:       #fff0f0;
    --crit-border:#cc0000;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

#app { height: 100%; display: flex; flex-direction: column; }
#app > div { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ============================================================
   TELA DE LOGIN — padrão backoffice
   ============================================================ */
.kds-login-root {
    display: flex;
    flex: 1;
    min-height: 0;
    background: #0a0a0a;
}

/* Painel esquerdo — azul petróleo escuro */
.kds-login-branding {
    flex: 0 0 480px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 40% 30%, #041a2e 0%, #020e1a 60%, #010810 100%);
}
.kds-login-branding::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 1px; height: 100%;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(14,116,144,0.5) 30%,
        rgba(14,116,144,0.7) 50%,
        rgba(14,116,144,0.5) 70%,
        transparent 100%
    );
}
.kds-login-branding-inner {
    position: relative;
    z-index: 1;
    padding: 48px;
    max-width: 400px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.kds-login-ox-logo {
    width: 300px;
    height: auto;
    margin-bottom: 24px;
    filter: drop-shadow(0 8px 40px rgba(192,57,43,0.5));
}
.kds-login-brand-tagline {
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    line-height: 1.7;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 48px;
}
.kds-login-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    text-align: left;
}
.kds-login-feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
}
.kds-login-feature-icon {
    width: 36px; height: 36px;
    background: rgba(192,57,43,0.15);
    border: 1px solid rgba(192,57,43,0.3);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: #e74c3c; flex-shrink: 0;
}
.kds-login-feature-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); line-height: 1.3; }
.kds-login-feature-sub   { font-size: 11px; color: rgba(255,255,255,0.40); margin-top: 2px; }

.kds-login-deco { position: absolute; border-radius: 50%; pointer-events: none; }
.kds-login-deco-1 {
    width: 500px; height: 500px; bottom: -200px; left: -150px;
    background: radial-gradient(circle, rgba(14,116,144,0.08) 0%, transparent 70%);
}
.kds-login-deco-2 {
    width: 300px; height: 300px; top: -80px; right: -60px;
    background: radial-gradient(circle, rgba(14,116,144,0.06) 0%, transparent 70%);
}

/* Marca d'água */
.kds-login-watermark { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.kds-login-watermark-icon { position: absolute; color: rgba(14,116,144,0.10); line-height: 1; user-select: none; }
.kds-login-watermark-icon:nth-child(1)  { font-size:120px; top: -20px; left:  -30px; transform: rotate(-15deg); }
.kds-login-watermark-icon:nth-child(2)  { font-size: 80px; top:  40px; right:  20px; transform: rotate(10deg); }
.kds-login-watermark-icon:nth-child(3)  { font-size:100px; top: 160px; left:   60px; transform: rotate(5deg); }
.kds-login-watermark-icon:nth-child(4)  { font-size: 70px; top: 200px; right:  60px; transform: rotate(-20deg); }
.kds-login-watermark-icon:nth-child(5)  { font-size: 90px; top: 360px; left:  -20px; transform: rotate(12deg); }
.kds-login-watermark-icon:nth-child(6)  { font-size:110px; top: 380px; right: -20px; transform: rotate(-8deg); }
.kds-login-watermark-icon:nth-child(7)  { font-size: 75px; top: 540px; left:   80px; transform: rotate(-5deg); }
.kds-login-watermark-icon:nth-child(8)  { font-size: 85px; bottom:80px; right: 80px; transform: rotate(18deg); }
.kds-login-watermark-icon:nth-child(9)  { font-size: 95px; bottom:80px; left:  10px; transform: rotate(-10deg); }
.kds-login-watermark-icon:nth-child(10) { font-size: 65px; bottom:40px; right: 30px; transform: rotate(8deg); }

/* Painel direito */
.kds-login-form-panel {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: #f5f6f8;
}
.kds-login-form-wrap {
    width: 100%;
    max-width: 400px;
    position: relative;
    z-index: 1;
}
.kds-login-mobile-logo {
    display: none;
    flex-direction: column;
    align-items: center;
    margin-bottom: 32px;
}
.kds-login-form-header { margin-bottom: 32px; }
.kds-login-form-title {
    font-size: 26px; font-weight: 800;
    color: #1a1a2e; letter-spacing: -0.02em;
    line-height: 1.2; margin-bottom: 6px;
}
.kds-login-form-sub { font-size: 14px; color: #6b7280; }

.kds-login-brand-divider {
    display: flex; align-items: center; gap: 12px; margin-bottom: 28px;
}
.kds-login-brand-divider::before,
.kds-login-brand-divider::after {
    content: ''; flex: 1; height: 1px; background: #e5e7eb;
}
.kds-login-brand-badge {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 12px;
    border: 1px solid rgba(192,57,43,0.3);
    border-radius: 20px;
    font-size: 11px; font-weight: 700; color: #c0392b;
    letter-spacing: 0.05em; white-space: nowrap;
    background: rgba(192,57,43,0.06);
}

.kds-login-form { display: flex; flex-direction: column; gap: 18px; }
.kds-login-field { display: flex; flex-direction: column; gap: 6px; }
.kds-login-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: #374151;
}
.kds-login-label .fas { font-size: 12px; color: #c0392b; width: 14px; text-align: center; }

.kds-login-input {
    width: 100%; height: 46px; padding: 0 14px;
    font-size: 14px; color: #1a1a2e;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px; outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    font-family: inherit;
}
.kds-login-input::placeholder { color: #9ca3af; }
.kds-login-input:focus {
    border-color: #0e7490;
    box-shadow: 0 0 0 3px rgba(14,116,144,0.15);
    background: #fff;
}
.kds-login-input:hover:not(:focus) { border-color: rgba(14,116,144,0.4); }

.kds-login-input-group { position: relative; }
.kds-login-input-icon-right { padding-right: 44px; }
.kds-login-input-toggle {
    position: absolute; right: 0; top: 0; height: 100%; width: 44px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    color: #9ca3af; font-size: 14px; transition: color 0.15s;
}
.kds-login-input-toggle:hover { color: #374151; }

.kds-login-erro {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: rgba(220,38,38,0.06);
    border: 1px solid rgba(220,38,38,0.25);
    border-radius: 10px; color: #dc2626; font-size: 13px; font-weight: 500;
}

.kds-login-btn {
    height: 48px; width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 15px; font-weight: 700; color: #fff; background: #0e7490;
    border: none; border-radius: 10px; cursor: pointer;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    margin-top: 4px; letter-spacing: 0.01em;
    font-family: inherit;
}
.kds-login-btn:hover:not(:disabled) {
    background: #0c6678;
    box-shadow: 0 4px 20px rgba(14,116,144,0.4);
    transform: translateY(-1px);
}
.kds-login-btn:active:not(:disabled) { background: #0a5565; transform: translateY(0); box-shadow: none; }
.kds-login-btn:disabled { opacity: 0.65; cursor: not-allowed; }

.kds-login-footer {
    text-align: center; font-size: 12px;
    color: #9ca3af; margin-top: 32px;
}

@media (max-width: 900px) {
    .kds-login-branding { display: none; }
    .kds-login-mobile-logo { display: flex; }

    /* Fundo escuro azul petróleo no mobile */
    .kds-login-root { background: #010d17; }
    .kds-login-form-panel { background: #010d17; }

    /* Inputs já são escuros por padrão no KDS — apenas reforçar acento teal */
    .kds-login-input:focus {
        border-color: #0e7490;
        box-shadow: 0 0 0 3px rgba(14,116,144,0.18);
    }
    .kds-login-input:hover:not(:focus) { border-color: rgba(14,116,144,0.4); }
    .kds-login-btn { background: #0e7490; }
    .kds-login-btn:hover:not(:disabled) {
        background: #0c6678;
        box-shadow: 0 4px 20px rgba(14,116,144,0.4);
    }
    .kds-login-btn:active:not(:disabled) { background: #0a5565; }
    .kds-login-form-header { text-align: center; }
    .kds-login-form-wrap { max-width: 420px; }
    .kds-login-watermark-icon { color: rgba(14,116,144,0.10); }
}
@media (max-width: 480px) {
    .kds-login-form-panel { padding: 24px 16px; align-items: flex-start; padding-top: 48px; }
}

/* ============================================================
   BOTÕES BASE
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    border-radius: 5px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}
.btn-full    { width: 100%; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.btn-ghost:hover:not(:disabled) { color: var(--text); border-color: #555; }
.btn-sm  { padding: 6px 12px; font-size: 12px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============================================================
   TELA DE SELEÇÃO DE MODO (ViewModos)
   ============================================================ */
.kds-modos-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg);
}

.kds-modos-header {
    height: var(--header-h);
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 14px;
    flex-shrink: 0;
}

.kds-modos-corpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 32px;
}

.kds-modos-instrucao {
    font-size: 16px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.kds-modos-grid {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.kds-modo-card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 32px 28px;
    width: 200px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), transform var(--transition), background var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.kds-modo-card:hover {
    border-color: var(--primary);
    background: var(--bg-card2);
    transform: translateY(-3px);
}

.kds-modo-icone {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(255, 69, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--primary);
}

.kds-modo-titulo {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.kds-modo-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Troca de tema na tela de modos */
.kds-tema-btns {
    display: flex;
    gap: 6px;
}
.btn-tema {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card2);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all var(--transition);
}
.btn-tema.ativo {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(255, 69, 0, 0.12);
}
.btn-tema:hover { border-color: #555; color: var(--text); }

/* ============================================================
   HEADER DO KDS
   ============================================================ */
.kds-header {
    height: var(--header-h);
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 14px;
    flex-shrink: 0;
}

.kds-logo {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 1px;
    flex-shrink: 0;
    user-select: none;
}

.kds-contadores {
    display: flex;
    gap: 14px;
    flex: 1;
}

.kds-contador {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--text-muted);
}

.kds-contador .num {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}

.kds-clock {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.kds-poll {
    font-size: 11px;
    color: var(--text-dim);
    flex-shrink: 0;
}

/* ============================================================
   LAYOUT BOARD + SIDEBAR
   ============================================================ */
.kds-board-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

/* SIDEBAR */
.kds-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 6px;
    gap: 6px;
    overflow-y: auto;
}

.kds-sidebar-titulo {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 6px;
    align-self: stretch;
    text-align: center;
}

.kds-filtro-btn {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 4px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    transition: all var(--transition);
    text-align: center;
    line-height: 1.2;
}
.kds-filtro-btn i { font-size: 16px; }
.kds-filtro-btn:hover { color: var(--text); background: var(--bg-card2); }
.kds-filtro-btn.ativo {
    color: var(--primary);
    background: rgba(255, 69, 0, 0.12);
    border-color: rgba(255, 69, 0, 0.3);
}

.kds-sidebar-sep {
    width: 60%;
    height: 1px;
    background: var(--border);
    margin: 6px 0;
}

.kds-sidebar-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.stat-num   { font-size: 22px; font-weight: 800; line-height: 1; color: var(--text); }
.stat-label { font-size: 10px; color: var(--text-muted); }

/* Legenda */
.kds-legenda {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-self: stretch;
    padding: 0 4px;
}
.legenda-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: var(--text-muted);
}
.legenda-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dot-recebido { background: #555; }
.dot-preparo  { background: var(--warn-text); }
.dot-pronto   { background: var(--pronto-text); }

/* ÁREA PRINCIPAL */
.kds-board-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kds-modo-label {
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 12px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: var(--bg-header);
    gap: 6px;
}

.kds-contador-inline { font-size: 11px; }

/* Grid de cards */
.kds-grid {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    align-content: start;
}

.kds-vazio {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    gap: 14px;
    padding: 60px;
}
.kds-vazio i { font-size: 56px; }
.kds-vazio p { font-size: 18px; }

/* ============================================================
   CARD DE PRODUÇÃO
   ============================================================ */
.kds-card {
    border-radius: var(--radius);
    border: 2px solid var(--ok-border);
    background: var(--ok);
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition), background var(--transition);
}

.kds-card.ok    { border-color: var(--ok-border); background: var(--ok); }
.kds-card.warn  { border-color: var(--warn-border); background: var(--warn); }
.kds-card.crit  { border-color: var(--crit-border); background: var(--crit); animation: pulso 2s ease-in-out infinite; }
.kds-card.pronto { border-color: var(--pronto-border); background: var(--pronto-bg); opacity: 0.8; }

@keyframes pulso {
    0%, 100% { border-color: var(--crit-border); }
    50%       { border-color: #ff3333; }
}

/* TOPO DO CARD */
.card-topo {
    display: flex;
    align-items: center;
    padding: 7px 10px 6px;
    gap: 7px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    min-width: 0;
}

.card-icone-origem {
    width: 26px; height: 26px;
    border-radius: 6px;
    background: rgba(255, 69, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--primary);
    flex-shrink: 0;
}

/* Bloco central: título + número — cresce mas não empurra o relógio */
.card-topo-centro {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
}

.card-titulo-bloco {
    font-size: 15px;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    letter-spacing: -0.3px;
}

.card-pedido-num {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    padding: 1px 5px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.card-meta {
    padding: 3px 10px 4px;
    overflow: hidden;
    min-width: 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.card-subtitulo {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}

.card-origem-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.card-tempo {
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-left: auto;
    padding-left: 6px;
}
.kds-card.ok     .card-tempo { color: var(--text-muted); }
.kds-card.warn   .card-tempo { color: var(--warn-text); }
.kds-card.crit   .card-tempo { color: var(--crit-text); }
.kds-card.pronto .card-tempo { color: var(--pronto-text); }

/* Badge de status no card */
.badge-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.badge-recebido  { background: rgba(100,100,100,0.2); color: #aaa; }
.badge-em_preparo { background: rgba(251,191,36,0.15); color: var(--warn-text); }
.badge-pronto    { background: rgba(74,222,128,0.15); color: var(--pronto-text); }
.badge-entregue  { background: rgba(100,100,100,0.12); color: #666; }

/* ITENS */
.card-itens {
    padding: 6px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    max-height: 340px;
}

.card-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 13px;
    transition: opacity var(--transition);
}
.card-item:last-child { border-bottom: none; }

/* Status visual por item */
.card-item.item-produzindo { border-left: 3px solid var(--warn-text); padding-left: 8px; }
.card-item.item-pronto     { opacity: 0.6; }
.card-item.item-entregue   { opacity: 0.35; text-decoration: line-through; }

.item-qty {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary);
    min-width: 22px;
    flex-shrink: 0;
}

.item-corpo { flex: 1; min-width: 0; }
.item-nome  { font-size: 13px; line-height: 1.3; color: var(--text); }
.item-obs   {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Botões por item */
.item-acoes {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.btn-item {
    padding: 3px 7px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: all var(--transition);
    white-space: nowrap;
}
.btn-item:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-item-ini  { background: rgba(59,130,246,0.15); color: #60a5fa; border-color: rgba(59,130,246,0.3); }
.btn-item-ini:hover:not(:disabled)  { background: rgba(59,130,246,0.28); }

.btn-item-ok   { background: rgba(34,197,94,0.15); color: #4ade80; border-color: rgba(34,197,94,0.3); }
.btn-item-ok:hover:not(:disabled)   { background: rgba(34,197,94,0.28); }

.btn-item-entg { background: rgba(168,85,247,0.15); color: #c084fc; border-color: rgba(168,85,247,0.3); }
.btn-item-entg:hover:not(:disabled) { background: rgba(168,85,247,0.28); }

.item-ok-badge {
    font-size: 13px;
    color: var(--pronto-text);
    opacity: 0.6;
}

/* Observação geral */
.card-obs-geral {
    margin: 0 12px 8px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.04);
    border-left: 3px solid var(--primary);
    border-radius: 3px;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    display: flex;
    gap: 6px;
    align-items: center;
}

/* RODAPÉ — BOTÕES DE BLOCO */
.card-rodape {
    padding: 6px 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    gap: 6px;
}

.btn-bloco {
    flex: 1;
    padding: 6px 4px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all var(--transition);
    letter-spacing: 0.2px;
}
.btn-bloco:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-bloco-ini  { background: rgba(59,130,246,0.15); color: #60a5fa; border-color: rgba(59,130,246,0.3); }
.btn-bloco-ini:hover:not(:disabled)  { background: rgba(59,130,246,0.28); }

.btn-bloco-ok   { background: rgba(34,197,94,0.15); color: #4ade80; border-color: rgba(34,197,94,0.3); }
.btn-bloco-ok:hover:not(:disabled)   { background: rgba(34,197,94,0.28); }

.btn-bloco-entg { background: rgba(168,85,247,0.15); color: #c084fc; border-color: rgba(168,85,247,0.3); }
.btn-bloco-entg:hover:not(:disabled) { background: rgba(168,85,247,0.28); }

/* ============================================================
   SPINNER
   ============================================================ */
.spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 900px) {
    .kds-grid { grid-template-columns: repeat(2, 1fr); }
    .kds-contadores { display: none; }
}

@media (max-width: 600px) {
    :root { --sidebar-w: 70px; }
    .kds-grid { grid-template-columns: 1fr; }
    .kds-grid { padding: 10px; }
    .card-titulo-bloco { font-size: 18px; }
    .card-tempo        { font-size: 16px; }
    .kds-modos-grid    { flex-direction: column; }
    .kds-modo-card     { width: 100%; max-width: 300px; }
}