/*!
 * ============================================
 * BELLA SYSTEM - MAIN STYLESHEET
 * ============================================
 * 
 * Sistema de Saúde e Bem-estar
 * Tema: Minimalista e Profissional
 * 
 * Estrutura:
 * 1. Variáveis CSS (Design Tokens)
 * 2. Reset e Base Styles
 * 3. Layout e Grid
 * 4. Componentes
 * 5. Utilitários
 * 6. Responsividade
 * 
 * Versão: 2.0.0
 * Data: Janeiro 2026
 * ============================================
 */

/* ============================================
   1. DESIGN TOKENS - VARIÁVEIS CSS
   ============================================ */

:root {
  /* Cores Principais - Saúde e Bem-estar */
  --verde-primario: #4caf50;
  --verde-escuro: #2e7d32;
  --verde-claro: #81c784;
  --azul-calma: #4fc3f7;
  --roxo-equilibrio: #9575cd;

  /* Cores Neutras - Sofisticação */
  --branco: #ffffff;
  --cinza-claro: #f5f5f5;
  --cinza-medio: #e0e0e0;
  --cinza-escuro: #616161;
  --preto-suave: #212121;

  /* Cores de Feedback */
  --sucesso: #66bb6a;
  --alerta: #ffa726;
  --erro: #ef5350;
  --info: #42a5f5;



        /* Espaçamentos */

        --espacamento-xs: 4px;

        --espacamento-sm: 8px;

        --espacamento-md: 16px;

        --espacamento-lg: 24px;

        --espacamento-xl: 32px;

        --espacamento-xxl: 48px;



        /* Tipografia */

        --fonte-principal: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

        --tamanho-pequeno: 0.875rem;

        --tamanho-normal: 1rem;

        --tamanho-medio: 1.25rem;

        --tamanho-grande: 1.5rem;

        --tamanho-titulo: 2rem;



        /* Sombras */

        --sombra-suave: 0 2px 8px rgba(0, 0, 0, 0.08);

        --sombra-media: 0 4px 16px rgba(0, 0, 0, 0.12);

        --sombra-forte: 0 8px 24px rgba(0, 0, 0, 0.16);



        /* Border Radius */

        --radius-pequeno: 4px;

        --radius-medio: 8px;

        --radius-grande: 12px;

        --radius-completo: 50%;

      }



      /* ============================================

           RESET E BASE

           ============================================ */



      * {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

      }



      body {

        font-family: var(--fonte-principal);

        font-size: var(--tamanho-normal);

        line-height: 1.6;

        color: var(--preto-suave);

        background: linear-gradient(135deg, #f5f7fa 0%, #e8f5e9 100%);

        min-height: 100vh;

      }



      /* ============================================

           LAYOUT PRINCIPAL

           ============================================ */



      .container {

        max-width: 1200px;

        margin: 0 auto;

        padding: var(--espacamento-lg);

      }



      /* ============================================

           NAVEGAÇÃO

           ============================================ */



      .navbar {

        background: var(--branco);

        box-shadow: var(--sombra-suave);

        position: sticky;

        top: 0;

        z-index: 100;

      }



      .navbar-content {

        max-width: 1200px;

        margin: 0 auto;

        display: flex;

        justify-content: space-between;

        align-items: center;

        padding: var(--espacamento-md) var(--espacamento-lg);

      }



      .navbar-brand {

        font-size: var(--tamanho-medio);

        font-weight: 700;

        color: var(--verde-primario);

        text-decoration: none;

        display: flex;

        align-items: center;

        gap: var(--espacamento-sm);

      }



      .navbar-brand span {

        font-size: var(--tamanho-titulo);

      }



      .navbar-menu {

        display: flex;

        gap: var(--espacamento-lg);

        align-items: center;

        list-style: none;

      }



      .navbar-menu a {

        color: var(--cinza-escuro);

        text-decoration: none;

        font-weight: 500;

        transition: color 0.3s ease;

        padding: var(--espacamento-sm) var(--espacamento-md);

        border-radius: var(--radius-medio);

        text-align: center;

        white-space: nowrap;

      }



      .navbar-menu a:hover {

        color: var(--verde-primario);

        background: var(--cinza-claro);

      }



      .navbar-menu a.active {

        color: var(--verde-primario);

        background: #e8f5e9;

      }



      /* Menu Hamburguer */

      .menu-toggle {

        display: none;

        background: none;

        border: none;

        cursor: pointer;

        padding: 8px;

        z-index: 1002;

        position: relative;

      }



      .menu-toggle span {

        display: block;

        width: 25px;

        height: 3px;

        background: var(--verde-primario);

        margin: 5px 0;

        transition: 0.3s;

        border-radius: 3px;

      }



      .menu-toggle.active span:nth-child(1) {

        transform: rotate(-45deg) translate(-5px, 6px);

      }



      .menu-toggle.active span:nth-child(2) {

        opacity: 0;

      }



      .menu-toggle.active span:nth-child(3) {

        transform: rotate(45deg) translate(-5px, -6px);

      }

      

      /* SEM OVERLAY - apenas menu deslizando */

      body.menu-open {

        overflow: hidden; /* Evita scroll quando menu aberto */

      }



      /* ============================================

           CARDS

           ============================================ */



      .card {

        background: var(--branco);

        border-radius: var(--radius-grande);

        box-shadow: var(--sombra-suave);

        padding: var(--espacamento-xl);

        margin-bottom: var(--espacamento-lg);

        transition: box-shadow 0.3s ease, transform 0.3s ease;

      }



      .card:hover {

        box-shadow: var(--sombra-media);

        transform: translateY(-2px);

      }



      .card-header {

        display: flex;

        justify-content: space-between;

        align-items: center;

        margin-bottom: var(--espacamento-lg);

        padding-bottom: var(--espacamento-md);

        border-bottom: 2px solid var(--cinza-claro);

      }



      .card-title {

        font-size: var(--tamanho-grande);

        font-weight: 700;

        color: var(--verde-escuro);

      }



      /* ============================================

           FORMULÁRIOS

           ============================================ */



      .form-group {

        margin-bottom: var(--espacamento-lg);

      }



      .form-label {

        display: block;

        margin-bottom: var(--espacamento-sm);

        font-weight: 600;

        color: var(--cinza-escuro);

      }



      .form-control {

        width: 100%;

        padding: var(--espacamento-md);

        font-size: var(--tamanho-normal);

        border: 2px solid var(--cinza-medio);

        border-radius: var(--radius-medio);

        transition: all 0.3s ease;

        font-family: var(--fonte-principal);

      }



      .form-control:focus {

        outline: none;

        border-color: var(--verde-primario);

        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);

      }



      /* ============================================

           BOTÕES

           ============================================ */



      .btn {

        display: inline-block;

        padding: var(--espacamento-md) var(--espacamento-xl);

        font-size: var(--tamanho-normal);

        font-weight: 600;

        text-align: center;

        text-decoration: none;

        border: none;

        border-radius: var(--radius-medio);

        cursor: pointer;

        transition: all 0.3s ease;

      }



      .btn-primary {

        background: var(--verde-primario);

        color: var(--branco);

      }



      .btn-primary:hover {

        background: var(--verde-escuro);

        transform: translateY(-2px);

        box-shadow: var(--sombra-media);

      }



      .btn-secondary {

        background: var(--cinza-medio);

        color: var(--cinza-escuro);

      }



      .btn-secondary:hover {

        background: var(--cinza-escuro);

        color: var(--branco);

      }



      .btn-danger {

        background: var(--erro);

        color: var(--branco);

      }



      .btn-danger:hover {

        background: #c62828;

      }



      .btn-full {

        width: 100%;

      }



      /* ============================================

           ALERTAS

           ============================================ */



      .alert {

        padding: var(--espacamento-md) var(--espacamento-lg);

        border-radius: var(--radius-medio);

        margin-bottom: var(--espacamento-lg);

        display: flex;

        align-items: center;

        gap: var(--espacamento-md);

      }



      .alert-success {

        background: #e8f5e9;

        color: #2e7d32;

        border-left: 4px solid var(--sucesso);

      }



      .alert-danger {

        background: #ffebee;

        color: #c62828;

        border-left: 4px solid var(--erro);

      }



      .alert-warning {

        background: #fff3e0;

        color: #e65100;

        border-left: 4px solid var(--alerta);

      }



      .alert-info {

        background: #e3f2fd;

        color: #1565c0;

        border-left: 4px solid var(--info);

      }



      /* ============================================

           TABELAS

           ============================================ */



      .table-container {

        overflow-x: auto;

      }



      .table {

        width: 100%;

        border-collapse: collapse;

      }



      .table thead {

        background: var(--cinza-claro);

      }



      .table th {

        padding: var(--espacamento-md);

        text-align: left;

        font-weight: 600;

        color: var(--cinza-escuro);

        border-bottom: 2px solid var(--cinza-medio);

      }



      .table td {

        padding: var(--espacamento-md);

        border-bottom: 1px solid var(--cinza-claro);

      }



      .table tbody tr:hover {

        background: #f1f8f4;

      }



      /* ============================================

           BADGES

           ============================================ */



      .badge {

        display: inline-block;

        padding: var(--espacamento-xs) var(--espacamento-md);

        font-size: var(--tamanho-pequeno);

        font-weight: 600;

        border-radius: var(--radius-pequeno);

      }



      .badge-success {

        background: #e8f5e9;

        color: #2e7d32;

      }



      .badge-admin {

        background: #f3e5f5;

        color: #6a1b9a;

      }



      /* ============================================

           LANGUAGE SELECTOR

           ============================================ */



      .lang-selector {

        position: relative;

        display: inline-block;

      }



      .lang-btn {

        background: none;

        border: none;

        cursor: pointer;

        font-size: 1.3rem;

        padding: 8px 12px;

        border-radius: var(--radius-medio);

        transition: background 0.3s ease;

      }



      .lang-btn:hover {

        background: var(--cinza-claro);

      }



      .lang-dropdown {

        display: none;

        position: absolute;

        right: 0;

        top: 100%;

        margin-top: 8px;

        background: white;

        box-shadow: var(--sombra-media);

        border-radius: var(--radius-medio);

        min-width: 160px;

        z-index: 1000;

        overflow: hidden;

      }



      .lang-dropdown.show {

        display: block;

      }



      .lang-dropdown a {

        display: block !important;

        padding: 12px 16px !important;

        text-decoration: none !important;

        color: var(--cinza-escuro) !important;

        transition: background 0.3s ease !important;

        border-radius: 0 !important;

      }



      .lang-dropdown a:hover {

        background: var(--cinza-claro) !important;

      }



      /* ============================================

           GRID

           ============================================ */



      .grid {

        display: grid;

        gap: var(--espacamento-lg);

      }



      .grid-2 {

        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

      }



      .grid-3 {

        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

      }



      /* ============================================

           STATS CARDS

           ============================================ */



      .stat-card {

        background: linear-gradient(

          135deg,

          var(--verde-primario) 0%,

          var(--verde-escuro) 100%

        );

        color: var(--branco);

        padding: var(--espacamento-xl);

        border-radius: var(--radius-grande);

        text-align: center;

        box-shadow: var(--sombra-suave);

      }



      .stat-card h3 {

        font-size: var(--tamanho-titulo);

        margin-bottom: var(--espacamento-sm);

      }



      .stat-card p {

        opacity: 0.9;

      }



      /* ============================================

           RESPONSIVIDADE MOBILE-FIRST

           ============================================ */



      @media (max-width: 768px) {

        /* Navbar mobile */

        .navbar-content {

          flex-direction: row;

          justify-content: space-between;

          align-items: center;

          padding: var(--espacamento-sm);

          gap: 0;

        }



        .navbar-brand {

          font-size: 1.1rem;

          gap: 4px;

        }



        .navbar-brand span {

          font-size: 1.3rem;

        }



        /* Mostrar botão hamburguer */

        .menu-toggle {

          display: flex;

          flex-direction: column;

          order: 3;

          position: relative;

          z-index: 1002;

        }



        /* Esconder menu por padrão */

        .navbar-menu {

          position: fixed;

          top: 60px;

          right: -100%;

          width: 280px;

          max-width: 85vw;

          height: calc(100vh - 60px);

          background: white;

          flex-direction: column;

          padding: var(--espacamento-lg);

          gap: 0;

          box-shadow: -4px 0 16px rgba(0,0,0,0.1);

          transition: right 0.3s ease;

          overflow-y: auto;

          overflow-x: hidden;

          z-index: 1001;  /* ACIMA do overlay (998) */

          pointer-events: auto;  /* Sempre aceita cliques */

        }



        .navbar-menu.active {

          right: 0;

        }



        .navbar-menu li {

          width: 100%;

          margin: 0;

        }



        .navbar-menu a {

          display: block;

          padding: var(--espacamento-md);

          font-size: var(--tamanho-normal);

          text-align: left;

          white-space: normal;

          border-bottom: 1px solid var(--cinza-claro);

          word-wrap: break-word;

        }



        /* Seletor de idioma mobile */

        #languageSelect {

          width: 100% !important;

          margin-top: var(--espacamento-sm);

          font-size: 0.9rem !important;

          padding: 10px !important;

          max-width: 100%;

        }



        /* Cards mais compactos */

        .card {

          padding: var(--espacamento-md);

          margin-bottom: var(--espacamento-md);

        }



        .card-header {

          flex-direction: column;

          align-items: flex-start;

          gap: var(--espacamento-sm);

        }



        .card-title {

          font-size: var(--tamanho-medio);

        }



        /* Container mobile */

        .container {

          padding: var(--espacamento-sm);

        }



        /* Formulários mobile */

        .form-control {

          font-size: 16px; /* Evita zoom no iOS */

        }



        /* Botões mobile */

        .btn {

          padding: var(--espacamento-md);

          font-size: var(--tamanho-normal);

          width: 100%;

        }



        /* Grid mobile */

        .grid-2,

        .grid-3 {

          grid-template-columns: 1fr;

        }



        /* Tabelas mobile - scroll horizontal */

        .table-container {

          overflow-x: auto;

          -webkit-overflow-scrolling: touch;

        }



        .table {

          min-width: 600px;

        }



        /* Gráficos responsivos mobile */

        canvas {

          max-width: 100% !important;

          height: auto !important;

        }



        .chart-container {

          position: relative;

          width: 100%;

          max-width: 100%;

          overflow: hidden;

          padding: 0 !important;

          margin: 0 auto;

        }

        

        .chart-container canvas {

          display: block;

          width: 100% !important;

          max-width: 100% !important;

          height: auto !important;

        }



        /* Stats cards mobile */

        .stat-card h3 {

          font-size: var(--tamanho-grande);

        }



        /* Footer mobile - 2 colunas centralizadas */

        footer {

          padding: 1.5rem 0 !important;

        }



        footer .container > div {

          grid-template-columns: 1fr 1fr !important;

          gap: 1.5rem !important;

          text-align: center !important;

        }

        

        footer .container > div > div {

          text-align: center !important;

        }

        

        footer .container > div > div ul {

          padding: 0 !important;

        }

          gap: 1.5rem !important;

        }

      }



      /* Extra small devices (phones < 400px) */

      @media (max-width: 400px) {

        .navbar-brand {

          font-size: var(--tamanho-normal);

        }



        .card {

          padding: var(--espacamento-sm);

        }



        .stat-card {

          padding: var(--espacamento-lg);

        }

      }



      /* ============================================

           ADMIN STYLES

           ============================================ */

      

      .admin-container {

        max-width: 1400px;

        margin: 0 auto;

        padding: 30px;

      }



      .admin-header {

        display: flex;

        justify-content: space-between;

        align-items: center;

        margin-bottom: 30px;

        padding-bottom: 20px;

        border-bottom: 2px solid #e0e0e0;

      }



      .admin-header h1 {

        margin: 0;

        color: #333;

        font-size: 28px;

        font-weight: 700;

      }



      .admin-actions {

        display: flex;

        gap: 10px;

      }



      .btn-primary {

        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

        color: white;

        border: none;

        padding: 12px 24px;

        border-radius: 8px;

        font-weight: 600;

        cursor: pointer;

        transition: all 0.3s;

        text-decoration: none;

        display: inline-block;

      }



      .btn-primary:hover {

        transform: translateY(-2px);

        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);

      }



      .btn-secondary {

        background: #6c757d;

        color: white;

        border: none;

        padding: 12px 24px;

        border-radius: 8px;

        font-weight: 600;

        cursor: pointer;

        transition: all 0.3s;

        text-decoration: none;

        display: inline-block;

      }



      .btn-edit, .btn-delete {

        background: none;

        border: none;

        font-size: 18px;

        cursor: pointer;

        padding: 6px 10px;

        border-radius: 4px;

        transition: all 0.2s;

      }



      .btn-edit:hover {

        background: #e3f2fd;

      }



      .btn-delete:hover {

        background: #ffebee;

      }



      .filters-bar {

        display: flex;

        gap: 15px;

        margin-bottom: 25px;

        background: white;

        padding: 20px;

        border-radius: 10px;

        box-shadow: 0 2px 8px rgba(0,0,0,0.08);

        flex-wrap: wrap;

      }



      .filter-group {

        flex: 1;

        min-width: 200px;

      }



      .table-container {

        background: white;

        border-radius: 10px;

        box-shadow: 0 2px 8px rgba(0,0,0,0.08);

        overflow: hidden;

      }



      .table-container table {

        width: 100%;

        border-collapse: collapse;

      }



      .table-container thead {

        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;

        color: white !important;

      }



      .table-container th {

        padding: 16px;

        text-align: left;

        font-weight: 600;

        font-size: 14px;

        color: white !important;

      }

      

      /* Garantir que tabelas dentro de table-container tenham cabeçalhos brancos */

      .table-container table thead {

        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;

      }

      

      .table-container table thead th {

        color: white !important;

      }



      .table-container td {

        padding: 14px 16px;

        border-bottom: 1px solid #f0f0f0;

        font-size: 14px;

      }



      .table-container tbody tr:hover {

        background: #f8f9fa;

      }



      .pagination-container {

        display: flex;

        justify-content: space-between;

        align-items: center;

        padding: 20px;

        background: #f8f9fa;

        border-top: 1px solid #e0e0e0;

        flex-wrap: wrap;

        gap: 15px;

      }



      .pagination-info {

        color: #666;

        font-size: 14px;

      }



      .pagination {

        display: flex;

        gap: 5px;

      }



      .page-link {

        padding: 8px 14px;

        border-radius: 6px;

        background: white;

        color: #667eea;

        text-decoration: none;

        border: 1px solid #ddd;

        transition: all 0.2s;

        font-size: 14px;

      }



      .page-link:hover:not(.disabled) {

        background: #667eea;

        color: white;

        border-color: #667eea;

      }



      .page-link.active {

        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

        color: white;

        border-color: #667eea;

      }



      .page-link.disabled {

        opacity: 0.5;

        cursor: not-allowed;

        pointer-events: none;

      }



      @media (max-width: 768px) {

        .admin-header {

          flex-direction: column;

          align-items: flex-start;

          gap: 15px;

        }

        

        .admin-header h1 {

          font-size: 1.5rem;

          word-wrap: break-word;

          max-width: 100%;

        }

        

        .admin-actions {

          width: 100%;

          flex-direction: column;

        }

        

        .admin-actions .btn-primary,

        .admin-actions .btn-secondary {

          width: 100%;

          text-align: center;

        }



        .filters-bar {

          flex-direction: column;

        }



        .filter-group {

          width: 100%;

        }



        .table-container {

          overflow-x: auto;

          -webkit-overflow-scrolling: touch;

        }

        

        .table-container table {

          min-width: 600px;

        }



        .pagination-container {

          flex-direction: column;

          text-align: center;

        }

        

        /* Gráficos admin mobile */

        .admin-container canvas {

          max-width: 100% !important;

          height: auto !important;

        }

        

        .admin-container .chart-container {

          width: 100%;

          max-width: 100%;

          overflow: hidden;

          padding: 0 !important;

        }

      }