/* ==========================================================================
   TEMA DE CORES PADRÃO DO SISTEMA
   Para mudar a cor principal, altere os códigos hexadecimais APENAS aqui.
   ========================================================================== */
:root {
    /* Exemplo com um tom de Azul (você pode trocar por qualquer cor) */
    --cor-principal-500: #3b82f6; /* Equivalente a blue-500 do Tailwind */
    --cor-principal-600: #2563eb; /* Equivalente a blue-600 do Tailwind */
    --cor-principal-700: #1d4ed8; /* Equivalente a blue-700 do Tailwind */
}

/* ==========================================================================
   SUBSTITUIÇÃO DAS CLASSES DO TEMA ATUAL (INDIGO)
   Não é preciso mexer aqui. Este bloco força as classes antigas a usarem as novas cores.
   ========================================================================== */
.bg-indigo-600 {
    background-color: var(--cor-principal-600) !important;
}
.hover\:bg-indigo-700:hover {
    background-color: var(--cor-principal-700) !important;
}
.text-indigo-600 {
    color: var(--cor-principal-600) !important;
}
.hover\:text-indigo-600:hover {
    color: var(--cor-principal-700) !important;
}
.border-indigo-500 {
    border-color: var(--cor-principal-500) !important;
}
.focus\:ring-indigo-500:focus {
    --tw-ring-color: var(--cor-principal-500) !important;
}
.has-[:checked]:border-indigo-400 {
    border-color: var(--cor-principal-500) !important;
}
.has-[:checked]:bg-indigo-50 {
    background-color: rgba(59, 130, 246, 0.1) !important; /* Um azul bem clarinho */
}
.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border: solid 1px lightgrey;
    padding: 12px;
    box-sizing: border-box;
    height: auto;
}
.shadow-md {
    --tw-shadow: 0px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)!important;
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    
}
/* Estilo base para os botões de ação com ícones */
.acao-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;  /* Largura do botão */
    height: 32px; /* Altura do botão */
    border-radius: 50%; /* Deixa o botão redondo */
    border: 1px solid transparent;
    font-size: 0.8rem; /* Tamanho do ícone */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Efeito de hover geral */
.acao-btn:hover {
    transform: translateY(-2px); /* Efeito de "saltar" */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Cores específicas para cada ação */
.acao-ver {
    color: #4A5568; /* Cinza escuro */
    background-color: #F7FAFC; /* Fundo cinza muito claro */
    border-color: #E2E8F0;
}
.acao-ver:hover {
    background-color: #E2E8F0;
}

.acao-editar {
    color: #2b6cb0; /* Azul */
    background-color: #ebf8ff;
    border-color: #bee3f8;
}
.acao-editar:hover {
    background-color: #bee3f8;
}

.acao-excluir {
    color: #c53030; /* Vermelho */
    background-color: #fff5f5;
    border-color: #fed7d7;
}
.acao-excluir:hover {
    background-color: #fed7d7;
}
.acoes-da-tabela {
    display: flex;
    align-items: center;   /* Alinha verticalmente ao centro */
    justify-content: flex-end; /* Já está usando justify-end, pode manter */
    gap: 0.5rem;
    height: 100%;
}
.ts-wrapper:not(.form-control, .form-select) {
    padding: 0;
    border: solid;
    height: auto;
    box-shadow: none;
    background: none;
border: 1px solid lightgrey;
    padding: 2.5px;
    /* border-color: lightgray; */
    border-radius: 5px;
    background: white;
}
.ts-dropdown-content {
    padding: 5px 0;
    background: white;
}
/* --- BADGES DE STATUS --- */
.badge-green, .badge-red, .badge-yellow, .badge-orange, .badge-blue {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.25rem 0.5rem; /* px-2 py-1 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    box-shadow: inset 0 0 0 1px var(--tw-ring-color); /* ring-1 ring-inset */
}

.badge-green {
    background-color: #F0FDF4; /* bg-green-50 */
    color: #15803D; /* text-green-700 */
    --tw-ring-color: rgba(22, 163, 74, 0.2); /* ring-green-600/20 */
}
.badge-red {
    background-color: #FEF2F2; /* bg-red-50 */
    color: #B91C1C; /* text-red-700 */
    --tw-ring-color: rgba(220, 38, 38, 0.2); /* ring-red-600/20 */
}
.badge-yellow {
    background-color: #FEFCE8; /* bg-yellow-50 */
    color: #854D0E; /* text-yellow-800 */
    --tw-ring-color: rgba(202, 138, 4, 0.2); /* ring-yellow-600/20 */
}
.badge-orange {
    background-color: #FFF7ED; /* bg-orange-50 */
    color: #9A3412; /* text-orange-800 */
    --tw-ring-color: rgba(234, 88, 12, 0.2); /* ring-orange-600/20 */
}
.badge-blue {
    background-color: #EFF6FF; /* bg-blue-50 */
    color: #1D4ED8; /* text-blue-700 */
    --tw-ring-color: rgba(29, 78, 216, 0.2); /* ring-blue-600/20 */
}

/* Padrão para Botões Primários (Ação Principal) */
.btn-primary {
    @apply px-3 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700;
}

/* Padrão para Botões Secundários (Ações Rápidas) */
.btn-secondary {
    @apply inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50;
}

/* Garante que o formulário dentro do dropdown não adicione espaços indesejados */
.dropdown-menu form {
    margin: 0;
    padding: 0;
}

/* Estilo final e correto para os itens do menu dropdown */
.dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 1rem; /* 8px vertical, 16px horizontal */
    font-size: 0.875rem; /* 14px */
    color: #374151; /* Cinza escuro */
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.dropdown-item:hover {
    background-color: #f3f4f6; /* Cinza claro no hover */
}
.text-blue-800 {
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity, 1));
    DISPLAY: inline-block;
    TEXT-ALIGN: CENTER;
}

.ts-dropdown-content {
    background: white;!important
}

.ts-dropdown [data-selectable].option {
    opacity: 1;
    cursor: pointer;
    background: white;
}

/* =========================================================
   ALTURA PADRÃO DOS CAMPOS (inputs, selects, TomSelect)
   ========================================================= */
:root{
  --field-h: 40px;          /* altura total desejada */
  --field-py: 0.5rem;       /* padding vertical */
  --field-px: 0.75rem;      /* padding horizontal */
  --field-radius: .375rem;  /* rounded-md */
  --field-border: #d1d5db;  /* gray-300 */
}

/* Inputs e selects nativos */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select {
  min-height: var(--field-h);
  height: var(--field-h);
  border-radius: var(--field-radius);
}

/* TomSelect – wrapper e controle interno */
.ts-wrapper:not(.form-control, .form-select) {
  padding: 0 !important;                 /* tira aquele 2.5px */
  border: 1px solid var(--field-border) !important;
  border-radius: var(--field-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
}

.ts-wrapper .ts-control {
  min-height: var(--field-h) !important;
  height: var(--field-h) !important;
  padding: 0 var(--field-px) !important;
  display: flex;
  align-items: center;                   /* centraliza verticalmente o texto */
  gap: .375rem;
  border: 0 !important;                 /* a borda fica no wrapper */
  background: transparent !important;
}

.ts-wrapper.single.has-items .ts-control > .item {
  margin: 0; line-height: 1.25rem;
}

.ts-wrapper .ts-control input {
  height: 1.25rem;                      /* mesma altura da linha do texto */
}

/* Ícone dentro do campo com lupa: garante alinhamento */
.has-left-icon {
  position: relative;
}
.has-left-icon > .icon {
  position: absolute; inset: 0 auto 0 .75rem;
  display: flex; align-items: center; pointer-events: none;
  color: #9ca3af;                       /* gray-400 */
}
.has-left-icon > input {
  padding-left: 2.25rem;                /* espaço para a lupa */
}

/* --- BOTÕES DE AÇÃO RÁPIDA PARA O DASHBOARD --- */
.btn-action-dash {
    padding: 0.25rem 0.6rem; /* 4px vertical, 10px horizontal */
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    border-radius: 0.375rem; /* 6px */
    border: 1px solid #E5E7EB; /* gray-200 */
    background-color: #F9FAFB; /* gray-50 */
    color: #4B5563; /* gray-600 */
    transition: all 0.2s;
}
.btn-action-dash:hover {
    background-color: #F3F4F6; /* gray-100 */
    border-color: #D1D5DB; /* gray-300 */
}

.pl-12 {
    padding-left: 1rem !important;
}

.text-indigo-700 {
    --tw-text-opacity: 1;
    color: var(--cor-principal-700) !important;
}


/* Badges */
.badge-blue {
  background-color: #e0e7ff;
  color: #4338ca;
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  border-radius: 0.375rem;
  display: inline-block;
}
.badge-yellow {
  background-color: #fef9c3;
  color: #a16207;
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  border-radius: 0.375rem;
}
.badge-green {
  background-color: #dcfce7;
  color: #166534;
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  border-radius: 0.375rem;
}
.badge-red {
  background-color: #fee2e2;
  color: #991b1b;
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  border-radius: 0.375rem;
}

/* Ações (botões pequenos) */
.acao-btn {
  font-size: 0.675rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.acao-ver {
  background-color: #dbeafe;
  color: #1d4ed8;
}
.acao-ver:hover {
  background-color: #c7ddfd;
}
.acao-editar {
  background-color: #e0e7ff;
  color: #4338ca;
}
.acao-editar:hover {
  background-color: #c7d2fe;
}
.acao-excluir {
  background-color: #fee2e2;
  color: #b91c1c;
}
.acao-excluir:hover {
  background-color: #fecaca;
}

/* Foto responsável padrão */
.foto-responsavel {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  object-fit: cover;
  border: 2px solid white;
  display: inline-block;
}

/* Força quebra */
.force-wrap { word-break: break-word; }

@media (min-width: 1280px) {
    .xl\:grid-cols-2 {
    }

    @media (min-width: 640px) {
    .sm\:grid-cols-2 {
    }
}


/* ==========================================================================
   TEMA DE CORES PADRÃO DO SISTEMA
   Para mudar a cor principal, altere os códigos hexadecimais APENAS aqui.
   ========================================================================== */
:root {
    /* Exemplo com um tom de Azul (você pode trocar por qualquer cor) */
    --cor-principal-500: #3b82f6; /* Equivalente a blue-500 do Tailwind */
    --cor-principal-600: #2563eb; /* Equivalente a blue-600 do Tailwind */
    --cor-principal-700: #1d4ed8; /* Equivalente a blue-700 do Tailwind */
}

/* ==========================================================================
   SUBSTITUIÇÃO DAS CLASSES DO TEMA ATUAL (INDIGO)
   Não é preciso mexer aqui. Este bloco força as classes antigas a usarem as novas cores.
   ========================================================================== */
.bg-indigo-600 {
    background-color: var(--cor-principal-600) !important;
}
.hover\:bg-indigo-700:hover {
    background-color: var(--cor-principal-700) !important;
}
.text-indigo-600 {
    color: var(--cor-principal-600) !important;
}
.hover\:text-indigo-600:hover {
    color: var(--cor-principal-700) !important;
}
.border-indigo-500 {
    border-color: var(--cor-principal-500) !important;
}
.focus\:ring-indigo-500:focus {
    --tw-ring-color: var(--cor-principal-500) !important;
}
.has-[:checked]:border-indigo-400 {
    border-color: var(--cor-principal-500) !important;
}
.has-[:checked]:bg-indigo-50 {
    background-color: rgba(59, 130, 246, 0.1) !important; /* Um azul bem clarinho */
}
.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border: solid 1px lightgrey;
    padding: 12px;
    box-sizing: border-box;
    height: auto;
}
.shadow-md {
    --tw-shadow: 0px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)!important;
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    
}
/* Estilo base para os botões de ação com ícones */
.acao-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;  /* Largura do botão */
    height: 32px; /* Altura do botão */
    border-radius: 50%; /* Deixa o botão redondo */
    border: 1px solid transparent;
    font-size: 0.8rem; /* Tamanho do ícone */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Efeito de hover geral */
.acao-btn:hover {
    transform: translateY(-2px); /* Efeito de "saltar" */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Cores específicas para cada ação */
.acao-ver {
    color: #4A5568; /* Cinza escuro */
    background-color: #F7FAFC; /* Fundo cinza muito claro */
    border-color: #E2E8F0;
}
.acao-ver:hover {
    background-color: #E2E8F0;
}

.acao-editar {
    color: #2b6cb0; /* Azul */
    background-color: #ebf8ff;
    border-color: #bee3f8;
}
.acao-editar:hover {
    background-color: #bee3f8;
}

.acao-excluir {
    color: #c53030; /* Vermelho */
    background-color: #fff5f5;
    border-color: #fed7d7;
}
.acao-excluir:hover {
    background-color: #fed7d7;
}
.acoes-da-tabela {
    display: flex;
    align-items: center;   /* Alinha verticalmente ao centro */
    justify-content: flex-end; /* Já está usando justify-end, pode manter */
    gap: 0.5rem;
    height: 100%;
}
.ts-wrapper:not(.form-control, .form-select) {
    padding: 0;
    border: solid;
    height: auto;
    box-shadow: none;
    background: none;
border: 1px solid lightgrey;
    padding: 2.5px;
    /* border-color: lightgray; */
    border-radius: 5px;
    background: white;
}
.ts-dropdown-content {
    padding: 5px 0;
    background: white;
}
/* --- BADGES DE STATUS --- */
.badge-green, .badge-red, .badge-yellow, .badge-orange, .badge-blue {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.25rem 0.5rem; /* px-2 py-1 */
    font-size: 0.75rem; /* text-xs */
    font-weight: 500; /* font-medium */
    box-shadow: inset 0 0 0 1px var(--tw-ring-color); /* ring-1 ring-inset */
}

.badge-green {
    background-color: #F0FDF4; /* bg-green-50 */
    color: #15803D; /* text-green-700 */
    --tw-ring-color: rgba(22, 163, 74, 0.2); /* ring-green-600/20 */
}
.badge-red {
    background-color: #FEF2F2; /* bg-red-50 */
    color: #B91C1C; /* text-red-700 */
    --tw-ring-color: rgba(220, 38, 38, 0.2); /* ring-red-600/20 */
}
.badge-yellow {
    background-color: #FEFCE8; /* bg-yellow-50 */
    color: #854D0E; /* text-yellow-800 */
    --tw-ring-color: rgba(202, 138, 4, 0.2); /* ring-yellow-600/20 */
}
.badge-orange {
    background-color: #FFF7ED; /* bg-orange-50 */
    color: #9A3412; /* text-orange-800 */
    --tw-ring-color: rgba(234, 88, 12, 0.2); /* ring-orange-600/20 */
}
.badge-blue {
    background-color: #EFF6FF; /* bg-blue-50 */
    color: #1D4ED8; /* text-blue-700 */
    --tw-ring-color: rgba(29, 78, 216, 0.2); /* ring-blue-600/20 */
}

/* Padrão para Botões Primários (Ação Principal) */
.btn-primary {
    @apply px-3 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700;
}

/* Padrão para Botões Secundários (Ações Rápidas) */
.btn-secondary {
    @apply inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50;
}

/* Garante que o formulário dentro do dropdown não adicione espaços indesejados */
.dropdown-menu form {
    margin: 0;
    padding: 0;
}

/* Estilo final e correto para os itens do menu dropdown */
.dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 1rem; /* 8px vertical, 16px horizontal */
    font-size: 0.875rem; /* 14px */
    color: #374151; /* Cinza escuro */
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.dropdown-item:hover {
    background-color: #f3f4f6; /* Cinza claro no hover */
}
.text-blue-800 {
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity, 1));
    DISPLAY: inline-block;
    TEXT-ALIGN: CENTER;
}

.ts-dropdown-content {
    background: white;!important
}

.ts-dropdown [data-selectable].option {
    opacity: 1;
    cursor: pointer;
    background: white;
}

/* =========================================================
   ALTURA PADRÃO DOS CAMPOS (inputs, selects, TomSelect)
   ========================================================= */
:root{
  --field-h: 40px;          /* altura total desejada */
  --field-py: 0.5rem;       /* padding vertical */
  --field-px: 0.75rem;      /* padding horizontal */
  --field-radius: .375rem;  /* rounded-md */
  --field-border: #d1d5db;  /* gray-300 */
}

/* Inputs e selects nativos */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select {
  min-height: var(--field-h);
  height: var(--field-h);
  border-radius: var(--field-radius);
}

/* TomSelect – wrapper e controle interno */
.ts-wrapper:not(.form-control, .form-select) {
  padding: 0 !important;                 /* tira aquele 2.5px */
  border: 1px solid var(--field-border) !important;
  border-radius: var(--field-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
}

.ts-wrapper .ts-control {
  min-height: var(--field-h) !important;
  height: var(--field-h) !important;
  padding: 0 var(--field-px) !important;
  display: flex;
  align-items: center;                   /* centraliza verticalmente o texto */
  gap: .375rem;
  border: 0 !important;                 /* a borda fica no wrapper */
  background: transparent !important;
}

.ts-wrapper.single.has-items .ts-control > .item {
  margin: 0; line-height: 1.25rem;
}

.ts-wrapper .ts-control input {
  height: 1.25rem;                      /* mesma altura da linha do texto */
}

/* Ícone dentro do campo com lupa: garante alinhamento */
.has-left-icon {
  position: relative;
}
.has-left-icon > .icon {
  position: absolute; inset: 0 auto 0 .75rem;
  display: flex; align-items: center; pointer-events: none;
  color: #9ca3af;                       /* gray-400 */
}
.has-left-icon > input {
  padding-left: 2.25rem;                /* espaço para a lupa */
}

/* --- BOTÕES DE AÇÃO RÁPIDA PARA O DASHBOARD --- */
.btn-action-dash {
    padding: 0.25rem 0.6rem; /* 4px vertical, 10px horizontal */
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    border-radius: 0.375rem; /* 6px */
    border: 1px solid #E5E7EB; /* gray-200 */
    background-color: #F9FAFB; /* gray-50 */
    color: #4B5563; /* gray-600 */
    transition: all 0.2s;
}
.btn-action-dash:hover {
    background-color: #F3F4F6; /* gray-100 */
    border-color: #D1D5DB; /* gray-300 */
}

.pl-12 {
    padding-left: 1rem !important;
}

.text-indigo-700 {
    --tw-text-opacity: 1;
    color: var(--cor-principal-700) !important;
}


/* Badges */
.badge-blue {
  background-color: #e0e7ff;
  color: #4338ca;
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  border-radius: 0.375rem;
  display: inline-block;
}
.badge-yellow {
  background-color: #fef9c3;
  color: #a16207;
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  border-radius: 0.375rem;
}
.badge-green {
  background-color: #dcfce7;
  color: #166534;
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  border-radius: 0.375rem;
}
.badge-red {
  background-color: #fee2e2;
  color: #991b1b;
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  border-radius: 0.375rem;
}

/* Ações (botões pequenos) */
.acao-btn {
  font-size: 0.675rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.acao-ver {
  background-color: #dbeafe;
  color: #1d4ed8;
}
.acao-ver:hover {
  background-color: #c7ddfd;
}
.acao-editar {
  background-color: #e0e7ff;
  color: #4338ca;
}
.acao-editar:hover {
  background-color: #c7d2fe;
}
.acao-excluir {
  background-color: #fee2e2;
  color: #b91c1c;
}
.acao-excluir:hover {
  background-color: #fecaca;
}

/* Foto responsável padrão */
.foto-responsavel {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  object-fit: cover;
  border: 2px solid white;
  display: inline-block;
}

/* Força quebra */
.force-wrap { word-break: break-word; }

@media (min-width: 1280px) {
    .xl\:grid-cols-2 {
    }

    @media (min-width: 640px) {
    .sm\:grid-cols-2 {
    }
}

/* =========================================================
   UI (cards, filtros segmentados, badges pequenos) — padrão novo
   ========================================================= */

/* Card padrão (estilo do print) */
.ui-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.ui-card-header{
  padding:20px 22px;
  border-bottom:1px solid #f1f5f9;
}
.ui-card-body{
  padding:20px 22px;
}

/* Filtros segmentados */
.ui-seg{
  display:inline-flex;
  flex-wrap:wrap;
  gap:6px;
  padding:6px;
  border-radius:12px;
  background:#f3f4f6;
}
.ui-seg a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.45rem .8rem;
  border-radius:10px;
  font-size:.875rem;
  font-weight:600;
  color:#4b5563;
  transition:all .15s ease;
  text-decoration:none;
}
.ui-seg a:hover{
  background:rgba(255,255,255,.7);
  color:#111827;
}
.ui-seg a.is-active{
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  border:1px solid #e5e7eb;
  color:#111827;
}

/* Badge compacto */
.badge-lembrete{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2px;
  text-transform:uppercase;
}

/* =========================================================
   CONSISTÊNCIA MOBILE/DESKTOP — não depender de @apply
   ========================================================= */

/* Fundo padrão do "miolo" do sistema (não some no mobile) */
.page-surface{
  background:#f6f7fb; /* leve, elegante, igual ao print */
}

/* Garante que o container principal tenha respiro no mobile */
.page-container{
  padding:16px;
}
@media (min-width: 640px){
  .page-container{ padding:24px; }
}

/* Card padrão (reforça borda/sombra sempre) */
.ui-card{
  background:#fff !important;
  border:1px solid #e5e7eb !important;
  border-radius:14px !important;
  box-shadow:0 1px 2px rgba(0,0,0,.05) !important;
}

/* Botões: definir “na unha” (sem @apply) */
.btn-primary,
.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius:10px;
  font-weight:700;
  font-size:14px;
  line-height:1;
  padding:10px 14px;
  white-space:nowrap;
  transition:all .15s ease;
  border:1px solid transparent;
  text-decoration:none;
}

/* Primário */
.btn-primary{
  background: var(--cor-principal-600, #4f46e5);
  border-color: var(--cor-principal-600, #4f46e5);
  color:#fff;
}
.btn-primary:hover{ filter:brightness(.97); }
.btn-primary:active{ transform:translateY(1px); }

/* Secundário */
.btn-secondary{
  background:#f3f4f6;
  border-color:#e5e7eb;
  color:#111827;
}
.btn-secondary:hover{ background:#e5e7eb; }
.btn-secondary:active{ transform:translateY(1px); }

/* Botões de ação (editar/excluir) consistentes no mobile */
.acao-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:all .15s ease;
}
.acao-btn:hover{ background:#f9fafb; }
.acao-btn:active{ transform:translateY(1px); }

/* Segmented control não “quebra” aparência */
.ui-seg{
  background:#f3f4f6 !important;
  border-radius:12px !important;
}
.ui-seg a{
  min-height:36px;
}

/* Evitar “sumir” fundo e cards por overflow/padding do layout */
html, body{ background:#f6f7fb; }