/* ==========================================================================
   crt-tabs-pricipal.css
   COMPONENTE: navegación por pestañas (segmented tabs).
   Ubicación: /docs-bin/css/general/crt-tabs-pricipal.css
   Reutilizable en cualquier apartado del portal.

   Funciona igual si los botones son <button> o <a>. Los estados de enlace
   van blindados con !important porque site.css y main.css del portal
   aplican color guinda y subrayado a todos los a:hover / a:focus.

   MARCADO MÍNIMO:
     <div class="crt-tabs-wrap">
       <div class="crt-tabs" role="tablist" aria-label="...">
         <button class="crt-tabs__btn crt-tabs__btn--active" type="button"
                 data-target="uno" role="tab" aria-selected="true">Uno</button>
         <button class="crt-tabs__btn" type="button"
                 data-target="dos" role="tab" aria-selected="false">Dos</button>
       </div>
     </div>
     <div data-view="uno"> ... </div>
     <div data-view="dos" hidden> ... </div>

   PALETA:
     activo   #004D40
     inactivo #D9D9D9
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Contenedor del bloque de pestañas
   -------------------------------------------------------------------------- */
.crt-tabs-wrap {
  max-width: 800px;
  margin: 0 auto 8px;
  margin-top: 40px;
}

/* --------------------------------------------------------------------------
   2. La barra
   -------------------------------------------------------------------------- */
.crt-tabs {
  --crt-tabs-activo: #004D40;
  --crt-tabs-inactivo: #D9D9D9;
  --crt-tabs-texto: #4a4a4a;
  --crt-tabs-texto-activo: #fff;
  --crt-tabs-radio: 10px;
  --crt-tabs-ancho: 640px;

  box-sizing: border-box;
  display: flex;
  max-width: var(--crt-tabs-ancho);
  margin: 0 auto clamp(20px, 3vw, 32px);
  background: var(--crt-tabs-inactivo);
  border-radius: var(--crt-tabs-radio);
  overflow: hidden;
  font-family: "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* --------------------------------------------------------------------------
   3. Los botones
   -------------------------------------------------------------------------- */
.crt-tabs__btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  border: 0;
  cursor: pointer;
  padding: clamp(9px, 1.4vw, 13px) 14px;
  background: var(--crt-tabs-inactivo);
  font-family: inherit;
  font-size: clamp(1rem, 1.7vw, 1.6rem);
  font-weight: 600;
  line-height: 1.2;
  transition: background-color .18s ease, color .18s ease;
}

/* --------------------------------------------------------------------------
   4. Blindaje contra site.css / main.css del portal
   Evita el guinda y el subrayado en hover/focus cuando el botón es <a>.
   -------------------------------------------------------------------------- */
.crt-tabs .crt-tabs__btn,
.crt-tabs .crt-tabs__btn:link,
.crt-tabs .crt-tabs__btn:visited,
.crt-tabs .crt-tabs__btn:hover,
.crt-tabs .crt-tabs__btn:focus,
.crt-tabs .crt-tabs__btn:active {
  color: var(--crt-tabs-texto) !important;
  text-decoration: none !important;
}

.crt-tabs .crt-tabs__btn--active,
.crt-tabs .crt-tabs__btn--active:link,
.crt-tabs .crt-tabs__btn--active:visited,
.crt-tabs .crt-tabs__btn--active:hover,
.crt-tabs .crt-tabs__btn--active:focus,
.crt-tabs .crt-tabs__btn--active:active {
  background: var(--crt-tabs-activo);
  color: var(--crt-tabs-texto-activo) !important;
  text-decoration: none !important;
}

/* Único cambio permitido en hover del inactivo: el color del texto */
.crt-tabs .crt-tabs__btn:hover:not(.crt-tabs__btn--active) {
  color: var(--crt-tabs-activo) !important;
}

.crt-tabs__btn:focus-visible {
  outline: 2px solid var(--crt-tabs-activo);
  outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   5. Vistas asociadas
   -------------------------------------------------------------------------- */
[data-view][hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   6. Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .crt-tabs {
    flex-direction: column;
  }

  .crt-tabs--secciones .crt-tabs__btn {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crt-tabs__btn {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   7. Botones Derecho / Mecanismo / Consulta
   Variante "secciones": estilo segmentado (fondo compartido, sin gap),
   con radio de esquinas 8px y tamaño de fuente fijo.
   -------------------------------------------------------------------------- */
.crt-tabs--secciones {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  margin-bottom: 36px;
}

.crt-tabs--secciones .crt-tabs__btn {
  font-size: 14px;
  padding: 10px 20px;
  line-height: 1.3;
  white-space: nowrap;
}