/* Definições de Temas Dinâmicos expandidos para total fidelidade visual */
    :root {
      --color-main1: #D67425;
      --color-main2: #D67425;
      --color-textMain1: #ffffff;
      --color-textMain2: #ffffff;
      --color-eletivo1: #FCD1A7;
      --color-eletivo2: #FCD1A7;
      --color-textEletivo1: #333333;
      --color-textEletivo2: #333333;
      --color-urg1: #B45E1A;
      --color-urg2: #B45E1A;
      --color-textUrg1: #ffffff;
      --color-textUrg2: #ffffff;
      --color-acomod1: #EEAC6D;
      --color-acomod2: #D67425;
      --color-textAcomod1: #333333;
      --color-textAcomod2: #ffffff;
      --color-sub1: #F7C18F;
      --color-sub2: #DB8437;
      --color-textSub1: #333333;
      --color-textSub2: #ffffff;
      --color-data1: #FAD9B9;
      --color-data2: #E49649;
      --color-textData1: #333333;
      --color-textData2: #ffffff;

      --color-header-gray-bg: #eaeaea;
      --color-text-white: #ffffff;
      --color-border-white: #ffffff;
    }

  /*  * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
*/
    /* Layout dos Containers */
    .selector-container {
      margin-bottom: 24px;
      font-family: 'Inter', sans-serif;
    }

    .selector-container label {
      display: block;
      font-weight: 600;
      margin-bottom: 8px;
      color: #334155;
    }

    .plan-btn-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    /* Estilo Base dos Botões */
    .plan-btn {
      padding: 12px 20px;
      font-size: 0.95rem;
      font-weight: 600;
      border: 2px solid transparent;
      border-radius: 8px;
      background-color: #ffffff;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .plan-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }

    /* --- CORES ESPECÍFICAS DOS PLANOS --- */

    /* 1. UniRede Recife (Verde) */
    .btn-unirede-recife {
      border-color: #10b981;
      color: #10b981;
    }

    .btn-unirede-recife.active {
      background: linear-gradient(90deg, #10b981, #1c603e);
      color: #fff;
      border-color: transparent;        
    }

    /* 2. UniSaúde Recife (Laranja / Magenta) */
    .btn-unisaude-recife {
      border-color: #f97316;
      color: #f97316;
      /*color: #d946ef;*/
    }

    .btn-unisaude-recife.active {
      background: linear-gradient(90deg, #f97316, #d946ef);
      color: #fff;
      border-color: transparent;
    }

    /* 3. UniRede Pernambuco (Azul Claro) */
    .btn-unirede-pernambuco {
      border-color: #0ea5e9;
      color: #0ea5e9;
    }

    .btn-unirede-pernambuco.active {
      background: linear-gradient(90deg, #0ea5e9, #2b6484);
      color: #fff;
      border-color: transparent;        
        
    }

    /* 4. Prata Extra / Diamante (Roxo / Escuro) */
    .btn-prata-diamante {
      border-color: #6b21a8;
      color: #4c1d95;
    }

    .btn-prata-diamante.active {
      background: linear-gradient(90deg, #6b21a8, #035e53);
      color: #fff;
      border-color: transparent;
    }

    /* 5. UniFlex Recife (Dourado / Azul) */
    .btn-uniflex-recife {
      border-color: #c49a35;
      color: #c49a35;
    /*  color: #1e40af;*/
    }

    .btn-uniflex-recife.active {
      background: linear-gradient(90deg, #eab308, #927222);
      color: #fff;
      border-color: transparent;
    }

    /* 6. UniSaúde Flex Recife (Verde Limão) */
    .btn-unisaude-flex {
      border-color: #84cc16;
      color: #4d7c0f;
    }

    /* Texto escuro no ativo para garantir contraste acessível (WCAG) */
    .btn-unisaude-flex.active {        
      background: linear-gradient(90deg, #84cc16, #4f813a);  
      color: #fff;
      border-color: transparent;
      /*color: #1a2e05;*/
    }

    /* 7. UniFlex Pernambuco (Laranja / Terracota) */
    .btn-uniflex-pernambuco {
      border-color: #ea580c;
      color: #c2410c;
    }

    .btn-uniflex-pernambuco.active {
      background: linear-gradient(135deg, #f97316, #c2410c);
      color: #fff;
      border-color: transparent;
    }

/*
    body {
      font-family: 'Montserrat', sans-serif;
      background-color: #f4f6f8;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
*/

    /* Estrutura das Áreas */
    .panel-area {
      width: 100%;
      max-width: 1200px;
      margin-bottom: 50px;
    }

    .panel-area h2 {
    font-family: 'Trebuchet MS' !important;
    font-size: 1vw !important;
      font-size: 20px;
      color: #333;
      margin-bottom: 15px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-left: 5px solid var(--color-main1);
      padding-left: 12px;
    }

    .section-divider {
      width: 100%;
      max-width: 1200px;
      border: 0;
      height: 1px;
      background-color: #ddd;
      margin-bottom: 40px;
    }

    /* Seletor Interativo Superior */
    .selector-container {
      width: 100%;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .selector-container label {
      font-weight: bold;
      color: #444;
      font-size: 14px;
    }

    .plan-select {
      width: 100%;
      padding: 12px 20px;
      font-size: 16px;
      font-family: 'Montserrat', sans-serif;
      font-weight: bold;
      border: 2px solid #ddd;
      border-radius: 8px;
      background-color: #fff;
      color: #333;
      cursor: pointer;
      outline: none;
      transition: border-color 0.2s;
    }

    .plan-select:focus {
      border-color: #666;
    }

    .plan-select option {
      font-weight: normal;
      padding: 6px;
      color: #333;
    }

    .table-container {
      width: 100%;
      background-color: #ffffff;
      border-radius: 8px;
      overflow-x: auto;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

    /* Abas Mobile */
    .mobile-tabs {
      display: none;
      width: 100%;
      grid-template-columns: 1fr 1fr;
      background-color: var(--color-header-gray-bg);
      border-bottom: 2px solid var(--color-border-white);
    }

    .tab-btn {
      padding: 15px;
      border: none;
      background: none;
      font-size: 14px;
      font-weight: bold;
      color: #333;
      cursor: pointer;
    }

    .tab-btn.active {
      background-color: var(--color-main1);
      color: var(--color-text-white);
    }

    /* Tabela */
    table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;
      font-size: 13px;
    }

    th,
    td {
      border: 1.5px solid var(--color-border-white);
      padding: 10px 6px;
      vertical-align: middle;
    }

    .bg-header-gray {
      background-color: var(--color-header-gray-bg);
      color: #333;
      font-weight: bold;
    }

    /* Estilização Dinâmica Baseada em Classes */
    .bg-main-title {
      background-color: var(--color-main1);
      color: var(--color-textMain1);
      font-size: 18px;
      font-weight: bold;
      font-style: italic;
    }

    .bg-main-title-2 {
      background-color: var(--color-main2);
      color: var(--color-textMain2);
      font-size: 18px;
      font-weight: bold;
      font-style: italic;
    }

    .bg-eletivo-1 {
      background-color: var(--color-eletivo1);
      color: var(--color-textEletivo1);
      font-weight: bold;
    }

    .bg-eletivo-2 {
      background-color: var(--color-eletivo2);
      color: var(--color-textEletivo2);
      font-weight: bold;
    }

    .bg-urg-row {
      background-color: var(--color-urg1);
      color: var(--color-textUrg1);
      font-weight: bold;
    }

    .bg-urg-row-2 {
      background-color: var(--color-urg2);
      color: var(--color-textUrg2);
      font-weight: bold;
    }

    .bg-acomod-1 {
      background-color: var(--color-acomod1);
      color: var(--color-textAcomod1);
      font-weight: bold;
    }

    .bg-acomod-2 {
      background-color: var(--color-acomod2);
      color: var(--color-textAcomod2);
      font-weight: bold;
    }

    .bg-sub-header {
      background-color: var(--color-sub1);
      color: var(--color-textSub1);
      font-weight: bold;
      font-size: 12px;
    }

    .bg-sub-header-2 {
      background-color: var(--color-sub2);
      color: var(--color-textSub2);
      font-weight: bold;
      font-size: 12px;
    }

    .bg-sub-header span,
    .bg-sub-header-2 span {
      font-size: 11px;
      font-weight: normal;
      opacity: 0.85;
    }

    .price-cell.col-enfermaria {
      background-color: var(--color-data1);
      color: var(--color-textData1);
      font-weight: bold;
    }

    .price-cell.col-apartamento {
      background-color: var(--color-data2);
      color: var(--color-textData2);
      font-weight: bold;
    }

    .ans-code {
      font-size: 11px;
      font-weight: normal;
      opacity: 0.9;
    }

    .currency-symbol {
      font-size: 10px;
      opacity: 0.85;
      margin-right: 2px;
    }

    .age-column {
      background-color: var(--color-header-gray-bg);
      color: #333;
      font-weight: bold;
      width: 90px;
    }

    .side-title-cell {
      background-color: var(--color-header-gray-bg);
      color: #333;
      font-weight: bold;
      writing-mode: vertical-lr;
      transform: rotate(180deg);
      width: 40px;
      font-size: 14px;
      letter-spacing: 1px;
    }

    /* Responsividade Desktop/Mobile baseada no container da área */
    @media (max-width: 900px) {
      .mobile-tabs {
        display: grid;
      }

      .panel-area[data-active-tab="enfermaria"] .col-apartamento {
        display: none;
      }

      .panel-area[data-active-tab="apartamento"] .col-enfermaria {
        display: none;
      }

      /* AJUSTE AQUI: Mantém a célula estrutural ativa com tamanho zero para não quebrar o colspan da tabela */
      .side-title-cell {
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        border: none !important;
        font-size: 0 !important;
        line-height: 0 !important;
        visibility: hidden;
      }

      th,
      td {
        padding: 8px 4px;
      }

      table {
        font-size: 12px;
        min-width: 500px;
      }
    }