/* ========================================================= FORMS.CSS — TEMA AZUL/TEAL (SEM ROXO) - Dark padrão - Light via ========================================================= */ /* ========================= PALETA (alinha com main/list) ========================= */ :root{ --accent-primary: #2e9cff; --accent-rgb: 46, 156, 255; /* azul */ --accent2-rgb: 0, 201, 167; /* teal */ --accent-gradient: linear-gradient( 135deg, rgba(var(--accent-rgb), 1) 0%, rgba(var(--accent2-rgb), 1) 100% ); } /* ========================= HEADER DO FORM ========================= */ .form-header { background: rgba(255, 255, 255, 0.07); border-radius: 16px; padding: 2rem; margin-bottom: 2rem; border: 1px solid rgba(255, 255, 255, 0.13); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 4px 24px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.04) inset; animation: slideInDown 0.5s ease; } @keyframes slideInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .form-header h1 { font-size: 2rem; font-weight: 700; background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0; } /* ========================= CARD DO FORM ========================= */ .form-card { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255,255,255,0.04) inset; animation: fadeInUp 0.6s ease; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .form-card .card-body { padding: 2rem; } /* ========================= LABELS ========================= */ .form-label { font-weight: 600; color: rgba(255, 255, 255, 0.9); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; } .form-label::before { content: ''; width: 3px; height: 16px; background: var(--accent-gradient); border-radius: 2px; } /* ========================= INPUTS / SELECTS ========================= */ .form-control, .form-select { background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(var(--accent-rgb), 0.20); border-radius: 12px; padding: 0.75rem 1rem; color: rgba(255, 255, 255, 0.9); transition: all 0.3s ease; font-size: 0.95rem; } .form-control:focus, .form-select:focus { background: rgba(255, 255, 255, 0.08); border-color: rgba(var(--accent-rgb), 1); box-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb), 0.25), 0 4px 12px rgba(var(--accent-rgb), 0.20); transform: translateY(-2px); } .form-control::placeholder { color: rgba(255, 255, 255, 0.4); } .form-text { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; margin-top: 0.5rem; padding-left: 1rem; border-left: 2px solid rgba(var(--accent-rgb), 0.30); } /* ========================= ERROS ========================= */ .text-danger { color: #ef4444 !important; font-weight: 600; padding: 0.5rem; background: rgba(239, 68, 68, 0.1); border-radius: 8px; margin-top: 0.5rem; display: inline-block; animation: shake 0.5s ease; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* ========================= PERMISSÕES (grid & cards) ========================= */ .user-perms .perm-item { background: rgba(255, 255, 255, 0.03); padding: 1rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.3s ease; } .user-perms .perm-item:hover { background: rgba(var(--accent-rgb), 0.05); border-color: rgba(var(--accent-rgb), 0.20); } /* mantém o switch DENTRO do card */ .user-perms .form-switch .form-check-input { margin-left: 5 !important; } /* visual do switch */ .user-perms .form-check-input { width: 3rem; height: 1.5rem; background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(var(--accent-rgb), 0.30); transition: all 0.3s ease; cursor: pointer; box-shadow: inset 0 0 0 8px transparent; } .user-perms .form-check-input:checked { background: var(--accent-gradient); border-color: rgba(var(--accent-rgb), 1); box-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb), 0.25); } /* label e foco */ .user-perms .form-check-label { font-weight: 600; color: rgba(255, 255, 255, 0.9); cursor: pointer; user-select: none; } .user-perms .form-check-input:focus { outline: none; box-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb), 0.25); } /* ========================= FOOTER DO CARD ========================= */ .card-footer { background: linear-gradient( 135deg, rgba(var(--accent-rgb), 0.05) 0%, rgba(var(--accent2-rgb), 0.05) 100% ); border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 1.5rem 2rem; } /* ========================= BOTÕES ========================= */ .btn { border-radius: 12px; padding: 0.75rem 2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; transition: all 0.3s ease; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.2); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .btn:hover::before { width: 300px; height: 300px; } .btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .btn-primary { background: var(--accent-gradient); border: none; box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.40); } .btn-primary:hover { box-shadow: 0 6px 25px rgba(var(--accent-rgb), 0.60); } .btn-outline-secondary { border: 2px solid rgba(255, 255, 255, 0.3); background: transparent; } .btn-outline-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); color: white; } /* ========================= ALERTAS ========================= */ .alert { border-radius: 12px; border: none; padding: 1rem 1.5rem; font-weight: 600; animation: slideInRight 0.5s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } .alert-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); } .alert-danger { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); } .alert-warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } .alert-info { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); } /* ========================= INPUT GROUP + ÍCONE ========================= */ .input-group { position: relative; } .input-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.4); z-index: 10; pointer-events: none; } .has-icon .form-control, .has-icon .form-select { padding-left: 3rem; } /* ========================= DIVISOR DE SEÇÃO ========================= */ .section-divider { height: 2px; background: linear-gradient( 90deg, transparent, rgba(var(--accent-rgb), 0.50), transparent ); margin: 2rem 0; position: relative; } .section-divider::after { content: attr(data-label); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(26, 26, 46, 0.9); padding: 0.5rem 1.5rem; border-radius: 50px; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.7); } /* ========================= SELECT (controle extra — alinhado com .form-control) ========================= */ select, .form-select { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.9); border: 2px solid rgba(var(--accent-rgb), 0.20); border-radius: 12px; } select:focus, .form-select:focus { background: rgba(255, 255, 255, 0.08); border-color: rgba(var(--accent-rgb), 1); box-shadow: 0 0 0 .25rem rgba(var(--accent-rgb), .25), 0 4px 12px rgba(var(--accent-rgb), .20); } /* options precisam de fundo sólido para legibilidade no dropdown nativo */ select option, .form-select option { background: #1a1f35; color: #e8eaf0; } select option:checked, .form-select option:checked { background: rgba(var(--accent-rgb), 0.6) !important; color: #fff; } /* ========================= ANIMAÇÃO CAMPOS ========================= */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeOutDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(20px); } } .anim-field { will-change: transform, opacity; } .anim-enter { animation: fadeInUp .35s ease-out both; } .anim-exit { animation: fadeOutDown .25s ease-in both; } .anim-exit, .anim-hidden { pointer-events: none; } .anim-hidden { opacity: 0; transform: translateY(20px); height: 0; margin: 0 !important; overflow: hidden; } @media (prefers-reduced-motion: reduce) { .anim-enter, .anim-exit { animation: none !important; } .anim-hidden { transition: none !important; } } /* Dropdown dark legível para optgroup */ .form-select optgroup { background-color: #353a52; color: #b7c2e6; font-weight: 600; } /* ========================= RESULTADOS / INPUT XL ========================= */ .input-xl { font-size: 1.8rem !important; font-weight: 700 !important; line-height: 1.2 !important; padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .input-xl[readonly], .input-xl:disabled { background-color: var(--bs-body-bg, #fff) !important; opacity: 1 !important; } .calc-result { background: rgba(var(--accent-rgb),0.06) !important; border-color: rgba(var(--accent-rgb),0.35) !important; } .centered-result { text-align: center !important; padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .centered-result::-webkit-outer-spin-button, .centered-result::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .centered-result { -moz-appearance: textfield; } /* ========================================================= FORMS.CSS — TEMA CLARO (override) ========================================================= */ :root[data-bs-theme="light"]{ --accent-primary: #007aff; --accent-rgb: 0, 122, 255; --accent2-rgb: 0, 168, 150; --accent-gradient: linear-gradient( 135deg, rgba(var(--accent-rgb), 1) 0%, rgba(var(--accent2-rgb), 1) 100% ); } /* Header */ :root[data-bs-theme="light"] .form-header { background: rgba(255,255,255,0.70); border: 1px solid rgba(0,0,0,0.09); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 4px 20px rgba(0,0,0,0.07); } /* Card base */ :root[data-bs-theme="light"] .form-card { background: rgba(255,255,255,0.75); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid rgba(0,0,0,0.09); box-shadow: 0 10px 30px rgba(0,0,0,0.10); } :root[data-bs-theme="light"] .form-card .card-body { color: #101622; } /* Labels */ :root[data-bs-theme="light"] .form-label { color: #1b2130; } :root[data-bs-theme="light"] .form-label::before { background: var(--accent-gradient); } /* Inputs & selects */ :root[data-bs-theme="light"] .form-control, :root[data-bs-theme="light"] .form-select { background: rgba(0,0,0,0.03); border: 2px solid rgba(var(--accent-rgb), 0.22); color: #101622; } :root[data-bs-theme="light"] .form-control:focus, :root[data-bs-theme="light"] .form-select:focus { background: rgba(0,0,0,0.04); border-color: rgba(var(--accent-rgb), 1); box-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb),0.20), 0 4px 12px rgba(var(--accent-rgb),0.18); transform: translateY(-2px); } :root[data-bs-theme="light"] .form-control::placeholder { color: rgba(0,0,0,0.45); } /* Help text */ :root[data-bs-theme="light"] .form-text { color: rgba(0,0,0,0.70); border-left: 2px solid rgba(var(--accent-rgb),0.25); } /* Erros */ :root[data-bs-theme="light"] .text-danger { background: rgba(239,68,68,0.08); color: #b91c1c !important; } /* Permissões */ :root[data-bs-theme="light"] .user-perms .perm-item { background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.08); } :root[data-bs-theme="light"] .user-perms .perm-item:hover { background: rgba(var(--accent-rgb),0.06); border-color: rgba(var(--accent-rgb),0.22); } :root[data-bs-theme="light"] .user-perms .form-check-input { background: rgba(0,0,0,0.06); border: 2px solid rgba(var(--accent-rgb),0.26); box-shadow: inset 0 0 0 8px transparent; } :root[data-bs-theme="light"] .user-perms .form-check-input:checked { background: var(--accent-gradient); border-color: rgba(var(--accent-rgb),1); box-shadow: 0 0 0 0.25rem rgba(var(--accent-rgb),0.20); } :root[data-bs-theme="light"] .user-perms .form-check-label { color: #101622; } /* Rodapé */ :root[data-bs-theme="light"] .card-footer { background: linear-gradient( 135deg, rgba(var(--accent-rgb),0.06) 0%, rgba(var(--accent2-rgb),0.06) 100% ); border-top: 1px solid rgba(0,0,0,0.08); } /* Botões */ :root[data-bs-theme="light"] .btn-primary { background: var(--accent-gradient); box-shadow: 0 6px 20px rgba(var(--accent-rgb),0.25); } :root[data-bs-theme="light"] .btn-primary:hover { box-shadow: 0 10px 28px rgba(var(--accent-rgb),0.32); } :root[data-bs-theme="light"] .btn-outline-secondary { border: 2px solid rgba(0,0,0,0.25); color: #1b2130; } :root[data-bs-theme="light"] .btn-outline-secondary:hover { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.38); color: #101622; } /* Input icon */ :root[data-bs-theme="light"] .input-icon { color: rgba(0,0,0,0.45); } /* Divisor label */ :root[data-bs-theme="light"] .section-divider::after { background: rgba(255,255,255,0.90); color: #1b2130; border: 1px solid rgba(0,0,0,0.06); } /* Selects */ :root[data-bs-theme="light"] select, :root[data-bs-theme="light"] .form-select { background: #f3f6ff; color: #101622; border: 1px solid #c6d2f5; } :root[data-bs-theme="light"] select:focus, :root[data-bs-theme="light"] .form-select:focus { border-color: rgba(var(--accent-rgb),1); box-shadow: 0 0 0 .25rem rgba(var(--accent-rgb),.25); } :root[data-bs-theme="light"] select option, :root[data-bs-theme="light"] .form-select option { background: #f3f6ff; color: #101622; } :root[data-bs-theme="light"] .form-select optgroup { background-color: #eaf0ff; color: #27304a; } /* Campos “XL” */ :root[data-bs-theme="light"] .calc-result { background: rgba(var(--accent-rgb),0.06) !important; border-color: rgba(var(--accent-rgb),0.35) !important; } :root[data-bs-theme="light"] .centered-result { color: #101622; } /* ========================= BOTÃO COLETOR DE DADOS ========================= */ .btn-imv-inteligente { position: relative; background: var(--accent-gradient); border: none; padding: 10px 20px; border-radius: 8px; color: white; font-weight: 600; font-size: 15px; cursor: pointer; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.40); } .btn-imv-inteligente:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.60); } .btn-imv-inteligente:active { transform: translateY(0); } .btn-content { display: flex; align-items: center; gap: 8px; position: relative; z-index: 2; } .btn-content svg { animation: rotate 3s linear infinite; } .star { position: absolute; font-size: 14px; animation: sparkle 2s ease-in-out infinite; pointer-events: none; z-index: 1; } .star-1 { top: -8px; left: 15%; animation-delay: 0s; } .star-2 { top: 50%; left: -10px; animation-delay: 0.5s; } .star-3 { bottom: -8px; left: 40%; animation-delay: 1s; } .star-4 { top: 15%; right: -10px; animation-delay: 1.5s; } @keyframes sparkle { 0%, 100% { opacity: 0; transform: scale(0.5) translateY(0); } 50% { opacity: 1; transform: scale(1.2) translateY(-8px); } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ========================================================= TABELA DE ITENS DO PEDIDO (baseada em list.css .table-soft) ========================================================= */ /* Header */ .itens-table-container .table-soft thead th { position: sticky; top: 0; z-index: 1; background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.10) 100%); color: #f5f8ff; border-bottom: 1px solid rgba(255, 255, 255, 0.25); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem; padding: 0.9rem 1rem; } .itens-table-container .table-soft thead th.text-end { text-align: right; } .itens-table-container .table-soft thead th.text-center { text-align: center; } /* Barra de realce */ .itens-table-container .table-soft thead th::after { content: ""; display: block; height: 2px; width: 0; margin-top: 0.4rem; background: var(--accent-gradient); border-radius: 2px; transition: width 0.25s ease; } .itens-table-container .table-soft thead th:hover::after { width: 36%; } /* Células */ .itens-table-container .table-soft tbody td { padding: 0.85rem 1rem; vertical-align: middle; border-bottom: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.03); color: #dee6fb; } /* Listras */ .itens-table-container .table-soft tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.055); } /* Hover */ .itens-table-container .table-soft tbody tr { transition: transform 0.18s ease, background 0.18s ease; } .itens-table-container .table-soft tbody tr:hover td { background: rgba(255, 255, 255, 0.12); } .itens-table-container .table-soft tbody tr:hover { transform: translateY(-1px); } /* Cantos */ .itens-table-container .table-soft thead th:first-child, .itens-table-container .table-soft tbody tr td:first-child { border-left: 0; } .itens-table-container .table-soft thead th:last-child, .itens-table-container .table-soft tbody tr td:last-child { border-right: 0; } .itens-table-container .table-soft thead tr:first-child th:first-child { border-top-left-radius: 14px; } .itens-table-container .table-soft thead tr:first-child th:last-child { border-top-right-radius: 14px; } .itens-table-container .table-soft tbody tr:last-child td:first-child { border-bottom-left-radius: 14px; } .itens-table-container .table-soft tbody tr:last-child td:last-child { border-bottom-right-radius: 14px; } /* Textarea */ .itens-table-container .table-soft textarea.form-control { min-height: 45px; resize: vertical; } /* Checkbox delete */ .itens-table-container .table-soft input[type="checkbox"] { width: 1.5rem; height: 1.5rem; cursor: pointer; accent-color: #ef4444; transition: all 0.2s ease; } .itens-table-container .table-soft input[type="checkbox"]:hover { transform: scale(1.1); } /* Erros dentro tabela */ .itens-table-container .table-soft .text-danger, .itens-table-container .table-soft .errorlist { font-size: 0.8rem; padding: 0.3rem 0.5rem; margin-top: 0.3rem; display: block; background: rgba(239, 68, 68, 0.1); border-radius: 6px; color: #ef4444 !important; } /* Empty */ .itens-table-container .empty-state { background: rgba(255, 255, 255, 0.04); color: #cfd8ff; text-align: center; padding: 2rem 1rem !important; } .itens-table-container .empty-state i { font-size: 1.7rem; display: block; margin-bottom: 0.25rem; opacity: 0.9; } /* Responsivo */ @media (max-width: 768px) { .itens-table-container .table-soft thead th, .itens-table-container .table-soft tbody td { padding: 0.75rem 0.5rem; font-size: 0.85rem; } .itens-table-container .table-soft .form-control, .itens-table-container .table-soft .form-select { min-width: 120px; font-size: 0.85rem; } } /* ===== TEMA CLARO - TABELA DE ITENS ===== */ :root[data-bs-theme="light"] .itens-header { background: linear-gradient( 135deg, rgba(var(--accent-rgb), 0.10) 0%, rgba(var(--accent2-rgb), 0.10) 100% ); border: 1px solid rgba(0, 0, 0, 0.08); } :root[data-bs-theme="light"] .itens-header h2 { color: #1b2130; } :root[data-bs-theme="light"] .itens-header p { color: rgba(0, 0, 0, 0.65); } :root[data-bs-theme="light"] .itens-table-container .table-soft { background: rgba(255, 255, 255, 0.86); color: #1b2130; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12); } :root[data-bs-theme="light"] .itens-table-container .table-soft thead th { background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.02) 100%); color: #101622; border-bottom: 1px solid rgba(0, 0, 0, 0.10); } :root[data-bs-theme="light"] .itens-table-container .table-soft thead th::after { background: var(--accent-gradient); } :root[data-bs-theme="light"] .itens-table-container .table-soft tbody td { background: rgba(0, 0, 0, 0.02); color: #1b2130; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } :root[data-bs-theme="light"] .itens-table-container .table-soft tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.035); } :root[data-bs-theme="light"] .itens-table-container .table-soft tbody tr:hover td { background: rgba(var(--accent-rgb), 0.08); } :root[data-bs-theme="light"] .itens-table-container .table-soft .form-control, :root[data-bs-theme="light"] .itens-table-container .table-soft .form-select { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(var(--accent-rgb), 0.26); color: #101622; } :root[data-bs-theme="light"] .itens-table-container .table-soft .form-control:focus, :root[data-bs-theme="light"] .itens-table-container .table-soft .form-select:focus { background: rgba(0, 0, 0, 0.06); border-color: rgba(var(--accent-rgb), 1); box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.20); } :root[data-bs-theme="light"] .itens-table-container .empty-state { background: rgba(0, 0, 0, 0.03); color: #33415c; } /* ========================================================= ITENS DA VENDA (ESC) ========================================================= */ #itensContainer { margin-top: 0.75rem; } #itensContainer .item-venda-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); color: #f5f8ff; } #itensContainer .item-venda-card .card-body { padding: 1rem 1.1rem 1.1rem; } #itensContainer .item-venda-card .form-control, #itensContainer .item-venda-card .form-select { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.10); color: #dee6fb; } #itensContainer .item-venda-card .form-control::placeholder { color: rgba(245, 248, 255, 0.6); } #itensContainer .item-venda-card .form-control:focus, #itensContainer .item-venda-card .form-select:focus { border-color: rgba(var(--accent-rgb), 1); box-shadow: 0 0 0 0.15rem rgba(var(--accent-rgb), 0.45); } #itensContainer .item-venda-card .btn-outline-danger { border-radius: 999px; border-width: 1px; } /* ========================================================= DOSES DISPONÍVEIS (ESC) ========================================================= */ .doses-selection-container { margin-top: 0.25rem; background: rgba(255, 255, 255, 0.03); border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.10); padding: 0.75rem 0.9rem 0.9rem; } .doses-selection-container .doses-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-bottom: 0.45rem; border-bottom: 1px solid rgba(255, 255, 255, 0.25); } .doses-selection-container .doses-header strong { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; color: #f5f8ff; } .doses-selection-container .doses-header .doses-count { display: inline-block; margin-left: 0.5rem; font-size: 0.8rem; color: #cfd8ff; opacity: 0.9; } .doses-selection-container .doses-container { margin-top: 0.55rem; max-height: 260px; overflow-y: auto; padding: 0.4rem; background: rgba(255, 255, 255, 0.03); border-radius: 12px; } .doses-selection-container .dose-checkbox { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 0.6rem; margin-bottom: 0.25rem; background: rgba(255, 255, 255, 0.03); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.10); color: #fbdede; font-size: 0.8rem; transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } /* texto dose */ .doses-selection-container .dose-info { display: flex; flex-direction: column; gap: 2px; } .doses-selection-container .dose-codigo { font-weight: 600; color: #f5f8ff; } .doses-selection-container .dose-detalhes { font-size: 0.78rem; color: #cfd8ff; opacity: 0.95; } :root[data-bs-theme="light"] .doses-selection-container .dose-codigo { font-weight: 600; color: #101622; } :root[data-bs-theme="light"] .doses-selection-container .dose-detalhes { font-size: 0.78rem; color: #4b5563; } .doses-selection-container .dose-checkbox:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); } .doses-selection-container input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: rgba(var(--accent-rgb), 1); cursor: pointer; } .doses-selection-container .btn-group .btn { font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 999px; } .doses-selection-container .btn-outline-secondary { border-color: rgba(255, 255, 255, 0.25); color: #e5e7ff; } .doses-selection-container .btn-outline-secondary:hover, .doses-selection-container .btn-outline-secondary:focus { background: linear-gradient( 135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent2-rgb), 0.22) ); color: #f5f8ff; } .doses-selection-container .btn-outline-primary { border-color: rgba(var(--accent-rgb), 1); color: #f5f8ff; background: linear-gradient( 135deg, rgba(var(--accent-rgb), 0.28), rgba(var(--accent2-rgb), 0.32) ); } .doses-selection-container .btn-outline-primary:hover, .doses-selection-container .btn-outline-primary:focus { background: var(--accent-gradient); border-color: rgba(var(--accent2-rgb), 1); color: #ffffff; } /* Erros dentro do card do item */ #itensContainer .item-venda-card .text-danger, #itensContainer .item-venda-card .errorlist { font-size: 0.8rem; padding: 0.3rem 0.5rem; margin-top: 0.3rem; display: block; background: rgba(239, 68, 68, 0.1); border-radius: 6px; color: #ef4444 !important; } /* ===== TEMA CLARO - ITENS DA VENDA E DOSES ===== */ :root[data-bs-theme="light"] #itensContainer .item-venda-card { background: linear-gradient( 135deg, rgba(var(--accent-rgb), 0.10) 0%, rgba(var(--accent2-rgb), 0.10) 100% ); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12); color: #1b2130; } :root[data-bs-theme="light"] #itensContainer .item-venda-card .form-label { color: #1b2130; } :root[data-bs-theme="light"] #itensContainer .item-venda-card .form-control, :root[data-bs-theme="light"] #itensContainer .item-venda-card .form-select { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(var(--accent-rgb), 0.26); color: #101622; } :root[data-bs-theme="light"] #itensContainer .item-venda-card .form-control:focus, :root[data-bs-theme="light"] #itensContainer .item-venda-card .form-select:focus { background: rgba(0, 0, 0, 0.06); border-color: rgba(var(--accent-rgb), 1); box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.20); } :root[data-bs-theme="light"] .doses-selection-container { border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } :root[data-bs-theme="light"] .doses-selection-container .doses-header { border-bottom-color: rgba(0, 0, 0, 0.05); } :root[data-bs-theme="light"] .doses-selection-container .doses-header strong { color: #1b2130; } :root[data-bs-theme="light"] .doses-selection-container .doses-header .doses-count { color: rgba(0, 0, 0, 0.6); } :root[data-bs-theme="light"] .doses-selection-container .doses-container { background: rgba(0, 0, 0, 0.02); } :root[data-bs-theme="light"] .doses-selection-container .dose-checkbox { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.08); color: #1b2130; } :root[data-bs-theme="light"] .doses-selection-container .dose-checkbox:hover { background: rgba(var(--accent-rgb), 0.08); } :root[data-bs-theme="light"] .doses-selection-container .btn-outline-secondary { border-color: rgba(var(--accent-rgb), 0.40); color: #1b2130; } :root[data-bs-theme="light"] .doses-selection-container .btn-outline-secondary:hover, :root[data-bs-theme="light"] .doses-selection-container .btn-outline-secondary:focus { background: rgba(var(--accent-rgb), 0.08); color: #0b1630; } :root[data-bs-theme="light"] .doses-selection-container .btn-outline-primary { border-color: rgba(var(--accent-rgb), 1); background: linear-gradient( 135deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent2-rgb), 0.16) ); color: #101622; } :root[data-bs-theme="light"] .doses-selection-container .btn-outline-primary:hover, :root[data-bs-theme="light"] .doses-selection-container .btn-outline-primary:focus { background: var(--accent-gradient); border-color: rgba(var(--accent2-rgb), 1); color: #ffffff; } /* ========================= CAMPOS SENSOR (readonly) ========================= */ .campo-sensor-ambiental { pointer-events: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; caret-color: transparent; background-color: #ffffff00; cursor: default; font-weight: bold; }