/* =====================================================================
   SISTEMA COMPARTIDO — implementación de docs/ui/guia-estilo-org.md

   ES: Hasta ahora la guía de estilo describía un diseño que no existía en
       ningún sitio compartido: enterprise-1/2.css implementa un lenguaje
       anterior (navy #16406E, radios de 28px, sombras, hover que levanta) y
       cada pantalla rediseñada tenía que reconstruir la guía por su cuenta.
       Así aparecieron dos implementaciones de lo mismo: .oui-tab en
       Organización y .doc-tab en Documentos.

       Este archivo es esa implementación, y es ADITIVO: no modifica ni una
       sola regla ni variable de enterprise-1/2.css. Las pantallas que aún usan
       el lenguaje anterior siguen exactamente igual; las nuevas usan esto.

       PREFIJO `fh-` en todo, variables incluidas. Dos motivos:
       1. `--danger` YA existe en el compartido con otro valor (#dc2626) y lo
          consumen reglas y plantillas vivas: reutilizar el nombre habría
          cambiado pantallas que nadie está mirando.
       2. Un prefijo uniforme deja claro qué pertenece al sistema y evita la
          próxima colisión, en vez de resolverla caso por caso.

   EN: Shared implementation of the style guide. Purely ADDITIVE: it does not
       modify a single rule or variable of enterprise-1/2.css. Everything is
       prefixed `fh-`, variables included, because `--danger` already exists in
       the legacy sheet with a different value and live rules consume it.
   ===================================================================== */

:root {
    /* ES: Paleta de la guía (§1). Convive con la anterior; no la reemplaza. */
    --fh-navy: #16324f;
    --fh-navy-2: #1d4265;
    --fh-navy-soft: #eaf1f8;
    --fh-txt: #22303e;
    --fh-muted: #6b7a89;
    --fh-line: #e3e9f0;
    --fh-ok: #1c7c4a;
    --fh-ok-bg: #e7f2ec;
    --fh-danger: #b3372f;
    --fh-danger-bg: #fdf1f0;
}

/* ---------------------------------------------------------------------
   Botones (§3) — jerarquía única
   ES: Tres variantes y dos tamaños, nada más. El tamaño normal es el de
       formularios y acciones de página; el compacto va SIEMPRE dentro de
       filas de tabla y tarjetas de lista.
   --------------------------------------------------------------------- */

.fh-btn-primary,
.fh-btn-secondary,
.fh-btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    border-radius: 9px;
    border: 1.5px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.fh-btn-primary {
    background: var(--fh-navy);
    border-color: var(--fh-navy);
    color: #fff;
}

.fh-btn-primary:hover {
    background: var(--fh-navy-2);
    border-color: var(--fh-navy-2);
    color: #fff;
}

.fh-btn-secondary {
    background: #fff;
    border-color: var(--fh-navy);
    color: var(--fh-navy);
}

.fh-btn-secondary:hover {
    background: var(--fh-navy-soft);
    color: var(--fh-navy);
}

.fh-btn-danger {
    background: #fff;
    border-color: var(--fh-danger);
    color: var(--fh-danger);
}

.fh-btn-danger:hover {
    background: var(--fh-danger-bg);
    color: var(--fh-danger);
}

/* ES: Tamaño compacto: filas de tabla y tarjetas de lista. */
.fh-btn-sm {
    padding: 5.5px 12px;
    font-size: 12.5px;
    border-radius: 8px;
}

/* ES: Deshabilitado según la guía. El `title` con el motivo lo pone quien
       lo use; el CSS solo comunica que no se puede pulsar. */
.fh-btn-primary:disabled,
.fh-btn-secondary:disabled,
.fh-btn-danger:disabled,
.fh-btn-primary.is-disabled,
.fh-btn-secondary.is-disabled,
.fh-btn-danger.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------------------------------------------------------------------
   Pestañas (§9)
   ES: Valores del mockup de referencia que la propia guía nombra
       (docs/ui/mockup-equipos.html). El `bottom: -1px` es lo que hace que la
       pestaña activa se monte sobre la línea del contenedor.
   --------------------------------------------------------------------- */

.fh-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--fh-line);
    flex-wrap: wrap;
}

.fh-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 11px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    color: #5a6b7c;
    background: none;
    border: 0;
    border-radius: 9px 9px 0 0;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    bottom: -1px;
}

.fh-tab:hover {
    color: var(--fh-navy);
}

.fh-tab.on {
    color: var(--fh-navy);
    background: var(--fh-navy-soft);
    box-shadow: inset 0 -2.5px 0 var(--fh-navy);
}

/* ES: Contador opcional en mini-pill gris; se invierte en la pestaña activa
       para que no compita con el fondo. */
.fh-tab-count {
    background: #e6ebf1;
    color: #5a6b7c;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
}

.fh-tab.on .fh-tab-count {
    background: #fff;
    color: var(--fh-navy);
}

/* ---------------------------------------------------------------------
   Chips de filtros activos
   ES: Hacen visible QUÉ se aplicó. Son informativos: quitar filtros es
       trabajo de un botón "Limpiar", no del chip (ver §7).
   --------------------------------------------------------------------- */

.fh-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fh-chips[hidden] {
    display: none;
}

.fh-chips-label {
    font-size: 12px;
    color: var(--fh-muted);
}

.fh-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 11px;
    background: #edf1f5;
    color: #41586e;
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
}

/* ---------------------------------------------------------------------
   Píldora de contexto (equipo activo)
   ES: Dice en qué equipo estás parado, dentro del encabezado de la página.
       Con el panel acotado al equipo activo, no decirlo convierte una lista
       vacía en un misterio: parece que no hay datos, no que estás en otro
       equipo. El navbar ya lo indica, pero el encabezado es donde se lee.
       Semitransparente porque va sobre el fondo oscuro del banner.
   EN: Shows which team you are standing in, inside the page header. Semi
       transparent because it sits on the banner's dark background.
   --------------------------------------------------------------------- */

.fh-context-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, .18);
    border-radius: 12px;
    padding: 3px 11px;
    font-size: 12px;
    font-weight: 700;
}

/* ---------------------------------------------------------------------
   Shell de área (§11) — encabezado, indicadores, barra lateral, tarjetas

   ES: El "shell" es el marco que comparten las áreas administrativas:
       encabezado que nombra el ÁREA (rótulo + nombre de la organización +
       una línea de para qué sirve), fila de indicadores, barra lateral con
       las secciones, y la sección viva a la derecha.

       Hasta ahora ese marco existía dos veces y ninguna era compartida:
       Organización lo tenía escrito en el `extra_css` de su layout con el
       prefijo `.settings-*`, e Integraciones repetía un trozo (la barra) en
       el `extra_css` de sus CUATRO páginas. Esta es la implementación
       compartida, y por eso vive acá y no en una plantilla.

       Los nombres llevan prefijo `fh-` y NO tocan `.settings-nav` ni
       `.settings-sidebar`, que son de Organización y siguen vivas hasta que
       esa área migre a este mismo shell.
   EN: Shared shell for administrative areas: area header, KPI row, section
       sidebar and content. Lives here because it is shared; the legacy
       `.settings-*` rules of the Organization area are left untouched.
   --------------------------------------------------------------------- */

/* --- Encabezado de área --- */

.fh-area-hero {
    margin-bottom: 0;
}

/* ES: destino de scroll programático (p.ej. #estado-firmantes en el detalle
       del documento). El navbar es sticky (~90px): sin este margen,
       scrollIntoView deja el inicio de la tarjeta escondido debajo de él. */
.fh-area-card[id] {
    scroll-margin-top: 100px;
}

body.theme-compact .welcome-banner.page-hero-compact.fh-area-hero {
    padding: 1.12rem 1.25rem !important;
}

.fh-area-kicker {
    margin-bottom: .15rem;
    color: var(--fh-navy);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.fh-area-title {
    color: var(--fh-navy);
}

body.theme-compact .welcome-banner.page-hero-compact.fh-area-hero h1.fh-area-title {
    font-size: 1.42rem !important;
    line-height: 1.12 !important;
    margin-bottom: .2rem !important;
}

.fh-area-subtitle {
    font-size: .84rem;
    line-height: 1.25;
    color: var(--fh-muted);
}

.fh-area-meta {
    gap: .35rem;
}

/* ES: Línea del plan a la derecha del encabezado. En Integraciones es
       especialmente pertinente: el acceso al área depende de tenerlo. */
.fh-area-plan-badge {
    background: var(--fh-navy);
    color: #fff;
    border-radius: 999px;
    padding: .2rem .56rem;
    font-size: .68rem;
    letter-spacing: .02em;
    font-weight: 700;
}

body.theme-compact .welcome-banner.page-hero-compact.fh-area-hero .fh-area-plan-badge {
    color: #fff !important;
}

.fh-area-plan-note {
    font-size: .72rem;
    line-height: 1.2;
    color: var(--fh-muted);
    display: block;
    max-width: 100%;
}

/* --- Indicadores (§11: solo métricas accionables) --- */

.fh-stats-row {
    margin-top: -.35rem;
}

.fh-stat {
    border: 1px solid rgba(22, 50, 79, .1);
    border-radius: 10px;
    padding: .55rem .62rem;
    background: rgba(255, 255, 255, .9);
    height: 100%;
}

.fh-stat-value {
    color: var(--fh-navy);
    font-size: .95rem;
    font-weight: 800;
    line-height: 1;
}

.fh-stat-label {
    color: #4b5563;
    font-size: .68rem;
    font-weight: 600;
    margin-top: .12rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fh-stat-meta {
    color: var(--fh-muted);
    font-size: .72rem;
    margin-top: .15rem;
    line-height: 1.28;
}

/* ES: Un indicador que pide acción se distingue por color, no por tamaño. */
.fh-stat-value.is-alert {
    color: var(--fh-danger);
}

/* --- Barra lateral del área --- */

.fh-area-sidebar {
    border: 1px solid rgba(22, 50, 79, .12);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(14, 42, 72, .09);
    background: rgba(255, 255, 255, .94);
}

.fh-area-nav {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.fh-area-nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .62rem .82rem;
    border-radius: 10px;
    color: #1f2937;
    text-decoration: none;
    font-size: .84rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.fh-area-nav-link:hover {
    background: rgba(22, 50, 79, .07);
    border-color: rgba(22, 50, 79, .12);
    color: var(--fh-navy);
}

.fh-area-nav-link.is-active {
    background: var(--fh-navy);
    color: #fff;
    box-shadow: 0 10px 24px rgba(22, 50, 79, .18);
}

.fh-area-nav-link > i {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    font-size: .9rem;
}

/* ES: Bloquecito de plan y estado, arriba de las entradas. */
.fh-area-sidebar-meta {
    border-radius: 12px;
    border: 1px solid rgba(22, 50, 79, .08);
    background: rgba(22, 50, 79, .04);
    padding: .68rem .78rem;
    margin-bottom: .85rem;
}

.fh-area-sidebar-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .79rem;
    line-height: 1.3;
    color: #4b5563;
}

.fh-area-sidebar-line + .fh-area-sidebar-line {
    margin-top: .25rem;
}

.fh-area-sidebar-line strong {
    color: var(--fh-navy);
    font-weight: 600;
}

/* --- Tarjeta de sección (§5) --- */

.fh-area-card {
    border: 1px solid rgba(22, 50, 79, .12);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(14, 42, 72, .09);
    background: rgba(255, 255, 255, .94);
}

.fh-area-card + .fh-area-card {
    margin-top: 16px;
}

/* ES: Título y descripción de la SECCIÓN, que bajan del encabezado de página
       al contenido: el encabezado nombra el área, la tarjeta nombra la
       sección. */
.fh-section-title {
    font-size: 16.5px;
    color: var(--fh-navy);
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}

.fh-section-title i {
    font-size: 15px;
}

.fh-section-sub {
    color: var(--fh-muted);
    font-size: 13px;
    margin-top: 5px;
    line-height: 1.5;
}

/* --- Alertas y notas (§8) --- */

.fh-note {
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.55;
    background: var(--fh-navy-soft);
    color: #2c4964;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.fh-note i {
    margin-top: 2px;
    color: var(--fh-navy);
}

.fh-note-body {
    flex: 1;
}

.fh-note-title {
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
}