/*
  ═══════════════════════════════════════════════════════
  02-COMPONENTS.CSS
  ═══════════════════════════════════════════════════════
  Componentes reutilizáveis: cards, botões, inputs, badges, chips, alertas, métricas, overlays e modais.

  COMO EDITAR:
  - Altere variáveis de cor, espaçamento e sombras preferencialmente em 01-base.css.
  - Evite duplicar classes: procure primeiro se já existe um componente equivalente.
  - Comentários com 'AJUSTE AQUI' indicam pontos comuns de personalização.
*/

/* ── Cards ── */
      /* Card base: usado em praticamente todas as telas para blocos de conteúdo. */
      .card {
        background: var(--surface);
        border-radius: var(--r-lg);
        padding: 24px;
        box-shadow: var(--sh);
        border: 1px solid rgba(14, 33, 64, 0.06);
      }
      .card-sm {
        background: var(--surface);
        border-radius: var(--r);
        padding: 12px 16px;
        box-shadow: var(--sh);
        border: 1px solid rgba(14, 33, 64, 0.06);
      }
      .card-soft {
        background: var(--surface-2);
        border-radius: var(--r-lg);
        padding: 24px;
        border: 1px solid rgba(14, 33, 64, 0.05);
      }
      .card-dark {
        background: var(--navy);
        border-radius: var(--r-lg);
        padding: 24px;
        color: #fff;
      }
      .card-gold {
        background: var(--teal-lt);
        border-radius: var(--r-lg);
        padding: 20px 24px;
        border: 1px solid rgba(13, 143, 110, 0.18);
      }
      .box {
        padding: 14px 16px;
        border-radius: var(--r);
      }
      .box-light {
        background: var(--surface-2);
        border: 1px solid rgba(14, 33, 64, 0.06);
      }
      .box-gold {
        background: var(--teal-lt);
        border: 1px solid rgba(13, 143, 110, 0.18);
      }
      .box-grn {
        background: var(--grn-t);
        border: 1px solid rgba(13, 122, 86, 0.15);
      }
      .badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 10px;
        border-radius: 100px;
        font-size: 11px;
        font-weight: 600;
      }

      /* ── Category Chips ── */
      .chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 10px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.03em;
      }
      .chip-e {
        background: var(--cat-e-t);
        color: var(--cat-e);
      }
      .chip-p {
        background: var(--cat-p-t);
        color: var(--cat-p);
      }
      .chip-v {
        background: var(--cat-v-t);
        color: var(--cat-v);
      }
      .chip-f {
        background: var(--cat-f-t);
        color: var(--cat-f);
      }

      /* ── Forms ── */
      .form-group {
        margin-bottom: 18px;
      }
      .form-input,
      .input-rich {
        width: 100%;
        padding: 10px 14px;
        border: 1.5px solid var(--grey-l);
        border-radius: var(--r);
        font-size: 14px;
        color: var(--navy);
        background: var(--surface);
        transition:
          border-color var(--trans),
          box-shadow var(--trans);
        -webkit-appearance: none;
        touch-action: manipulation;
      }
      .form-input:focus,
      .input-rich:focus {
        outline: none;
        border-color: var(--navy);
        box-shadow: 0 0 0 3px rgba(14, 33, 64, 0.08);
      }
      .form-select {
        width: 100%;
        padding: 10px 14px;
        border: 1.5px solid var(--grey-l);
        border-radius: var(--r);
        font-size: 14px;
        color: var(--navy);
        background: var(--surface);
        appearance: none;
        cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%235C6B7A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
      }
      .form-select:focus {
        outline: none;
        border-color: var(--navy);
      }
      .form-textarea {
        width: 100%;
        padding: 10px 14px;
        border: 1.5px solid var(--grey-l);
        border-radius: var(--r);
        font-size: 14px;
        color: var(--navy);
        resize: vertical;
        min-height: 80px;
        background: var(--surface);
      }
      .form-textarea:focus {
        outline: none;
        border-color: var(--navy);
        box-shadow: 0 0 0 3px rgba(14, 33, 64, 0.08);
      }
      .input-money {
        position: relative;
      }
      .input-money span {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--grey);
        font-weight: 600;
        font-size: 14px;
        pointer-events: none;
      }
      .input-money input {
        padding-left: 36px !important;
      }

      /* ── Buttons ── */
      /* Botão base: todas as variações (.btn-primary, .btn-ghost etc.) herdam deste estilo. */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 10px 18px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        transition: all var(--trans);
        cursor: pointer;
        border: none;
        white-space: nowrap;
        letter-spacing: 0.01em;
      }
      .btn-primary {
        background: var(--navy);
        color: #fff;
      }
      .btn-primary:hover {
        background: var(--navy2);
        box-shadow: var(--sh-md);
      }
      .btn-gold {
        background: var(--teal);
        color: #fff;
      }
      .btn-gold:hover {
        background: var(--teal-d);
      }
      .btn-outline {
        background: transparent;
        color: var(--navy);
        border: 1.5px solid var(--navy);
      }
      .btn-outline:hover {
        background: var(--navy);
        color: #fff;
      }
      .btn-ghost {
        background: var(--surface);
        color: var(--grey);
        border: 1.5px solid var(--grey-l);
      }
      .btn-ghost:hover {
        background: var(--surface-2);
        color: var(--navy);
        border-color: var(--grey);
      }
      .btn-danger {
        background: var(--red-t);
        color: var(--red);
        border: 1px solid rgba(190, 58, 49, 0.2);
      }
      .btn-danger:hover {
        background: var(--red);
        color: #fff;
      }
      .btn-sm {
        padding: 6px 12px;
        font-size: 12px;
      }
      .btn-lg {
        padding: 12px 22px;
        font-size: 14px;
        font-weight: 700;
      }
      .btn-full {
        width: 100%;
      }
      .btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }

      /* ── Progress ── */
      .progress-wrap {
        background: var(--grey-xl);
        border-radius: 100px;
        height: 6px;
        overflow: hidden;
      }
      .progress-bar {
        height: 100%;
        border-radius: 100px;
        background: var(--navy);
        transition: width 0.5s ease;
      }

      /* ── Signal Badge ── */
      .widget-sinal {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 6px 14px;
        border-radius: 100px;
        font-weight: 600;
        font-size: 12px;
      }
      .widget-sinal::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .widget-sinal.verde {
        background: var(--grn-t);
        color: var(--green);
        border: 1px solid rgba(13, 122, 86, 0.2);
      }
      .widget-sinal.verde::before {
        background: var(--green);
      }
      .widget-sinal.amber {
        background: var(--amb-t);
        color: var(--amber);
        border: 1px solid rgba(168, 94, 16, 0.2);
      }
      .widget-sinal.amber::before {
        background: var(--amber);
      }
      .widget-sinal.red {
        background: var(--red-t);
        color: var(--red);
        border: 1px solid rgba(190, 58, 49, 0.2);
      }
      .widget-sinal.red::before {
        background: var(--red);
      }

      /* ── Alert Items ── */
      .alert-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 14px;
        border-radius: var(--r);
        margin-bottom: 8px;
      }
      .alert-item.warn {
        background: var(--amb-t);
        border-left: 3px solid var(--amber);
      }
      .alert-item.info {
        background: var(--blue-t);
        border-left: 3px solid var(--blue);
      }
      .alert-item.danger {
        background: var(--red-t);
        border-left: 3px solid var(--red);
      }
      .alert-item.success {
        background: var(--grn-t);
        border-left: 3px solid var(--green);
      }
      .alert-icon {
        font-size: 16px;
        flex-shrink: 0;
        margin-top: 1px;
      }
      .alert-title {
        font-size: 13px;
        font-weight: 700;
        color: var(--navy);
      }
      .alert-desc {
        font-size: 12px;
        color: var(--grey);
        margin-top: 2px;
        line-height: 1.5;
      }

      /* ── Metrics ── */
      .metric-card {
        background: var(--surface);
        border-radius: var(--r-lg);
        padding: 20px;
        box-shadow: var(--sh);
        border: 1px solid rgba(14, 33, 64, 0.06);
      }
      .metric-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--grey);
        margin-bottom: 10px;
      }
      .metric-value {
        font-size: 26px;
        font-weight: 700;
        color: var(--navy);
        letter-spacing: -0.02em;
        line-height: 1;
      }
      .metric-sub {
        font-size: 11px;
        color: var(--grey);
        margin-top: 8px;
        line-height: 1.4;
      }

      /* ── Toast ── */
      .toast {
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--navy);
        color: #fff;
        padding: 10px 18px;
        border-radius: var(--r);
        font-size: 13px;
        font-weight: 600;
        z-index: 9999;
        box-shadow: var(--sh-lg);
        animation: toastIn 0.18s ease;
        pointer-events: none;
      }
      @keyframes toastIn {
        from {
          opacity: 0;
          transform: translateX(-50%) translateY(6px);
        }
        to {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
        }
      }

      /* ── Overlay / Sheet ── */
      .overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(10, 20, 38, 0.45);
        z-index: 500;
        display: flex;
        align-items: flex-end;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
      }
      .overlay.center {
        align-items: center;
        justify-content: center;
      }
      .sheet {
        background: var(--surface);
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        padding: 8px 20px
          calc(40px + max(env(safe-area-inset-bottom, 0px), 8px));
        width: 100%;
        max-height: 92vh;
        overflow-y: auto;
        animation: sheetUp 0.22s ease;
      }
      @keyframes sheetUp {
        from {
          transform: translateY(100%);
        }
        to {
          transform: translateY(0);
        }
      }
      .sheet-handle {
        width: 36px;
        height: 3px;
        background: var(--grey-l);
        border-radius: 100px;
        margin: 12px auto 22px;
      }
      .modal {
        background: var(--surface);
        border-radius: var(--r-xl);
        padding: 0;
        width: min(540px, 92vw);
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: var(--sh-xl);
        animation: fadeUp 0.18s ease;
      }
      .panel-modal {
        width: min(620px, 94vw);
      }
      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 22px 26px 18px;
        border-bottom: 1px solid var(--grey-xl);
      }
      .modal-title {
        font-size: 17px;
        font-weight: 700;
        color: var(--navy);
      }
      .modal-subtitle {
        font-size: 13px;
        color: var(--grey);
        margin-top: 3px;
      }
      .modal-close {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--surface-2);
        color: var(--grey);
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all var(--trans);
        line-height: 1;
      }
      .modal-close:hover {
        background: var(--grey-xl);
        color: var(--navy);
      }
      .modal-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        padding: 16px 26px;
        border-top: 1px solid var(--grey-xl);
      }