/* =====================================================================
   BCRD UI Kit — Componentes
   Clases con el sufijo -bcrd tal como están nombradas en el Figma.
   Se pueden usar solas o combinadas con Bootstrap:
       <button class="btn btn-primary-bcrd">Guardar</button>
   Requiere bcrd-tokens.css y bcrd-fonts.css.
   ===================================================================== */

/* =====================================================================
   1. BOTONES
   Geometría común (Figma): alto 35px, padding 12px 30px, radio 5px.
   ===================================================================== */

.btn-primary-bcrd,
.btn-secondary-bcrd,
.btn-tertiary-bcrd,
.btn-pdf-bcrd,
.btn-excel-bcrd,
.btn-primary-icon-bcrd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--bcrd-button-height);
    min-width: 60px;
    padding: 12px 30px;
    border-radius: var(--bcrd-radius);
    font-family: var(--bcrd-font-family);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--bcrd-transition),
                border-color var(--bcrd-transition),
                color var(--bcrd-transition),
                box-shadow var(--bcrd-transition);
}

.btn-primary-bcrd:disabled,
.btn-secondary-bcrd:disabled,
.btn-tertiary-bcrd:disabled,
.btn-pdf-bcrd:disabled,
.btn-excel-bcrd:disabled,
.btn-primary-icon-bcrd:disabled,
.btn-menu-bcrd:disabled,
.btn-primary-bcrd.disabled,
.btn-secondary-bcrd.disabled,
.btn-tertiary-bcrd.disabled,
.btn-pdf-bcrd.disabled,
.btn-excel-bcrd.disabled,
.btn-primary-icon-bcrd.disabled,
.btn-menu-bcrd.disabled {
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

/* Anillo de foco accesible — se añade a TODOS los botones del kit.
   El Figma define además un relleno propio en el estado Focus, que se
   aplica más abajo en cada variante. */
.btn-primary-bcrd:focus-visible,
.btn-secondary-bcrd:focus-visible,
.btn-tertiary-bcrd:focus-visible,
.btn-pdf-bcrd:focus-visible,
.btn-excel-bcrd:focus-visible,
.btn-primary-icon-bcrd:focus-visible,
.btn-menu-bcrd:focus-visible {
    outline: none;
    box-shadow: var(--bcrd-focus-ring);
}

/* ---------- 1.1 btn-primary ---------- */
.btn-primary-bcrd {
    background-color: var(--color-primary-fill);
    border: none;
    color: var(--color-surface);
    font-size: var(--bcrd-label);
    font-weight: var(--bcrd-font-medium);
}

.btn-primary-bcrd:hover {
    background-color: var(--color-primary-fill-hover);
    color: var(--color-surface);
}

.btn-primary-bcrd:active,
.btn-primary-bcrd.active {
    background-color: var(--color-primary-fill-active);
    color: var(--color-surface);
    box-shadow: var(--bcrd-shadow-pressed);
}

.btn-primary-bcrd:focus-visible {
    background-color: var(--color-primary-fill);
    color: var(--color-surface);
}

.btn-primary-bcrd:disabled,
.btn-primary-bcrd.disabled {
    background-color: var(--color-border-strong);
    color: var(--color-text-disabled);
}

/* ---------- 1.2 btn-secondary ---------- */
.btn-secondary-bcrd {
    background-color: var(--color-surface);
    border: var(--bcrd-border-width-strong) solid var(--color-secondary);
    color: var(--color-secondary);
    font-size: var(--bcrd-label-lg);
    font-weight: var(--bcrd-font-medium);
}

.btn-secondary-bcrd:hover {
    background-color: var(--color-surface);
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

.btn-secondary-bcrd:active,
.btn-secondary-bcrd.active {
    background-color: var(--color-border);
    border-color: var(--color-secondary);
    color: var(--color-secondary);
    box-shadow: var(--bcrd-shadow-pressed);
}

.btn-secondary-bcrd:focus-visible {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-surface);
}

.btn-secondary-bcrd:disabled,
.btn-secondary-bcrd.disabled {
    background-color: var(--color-surface-subtle);
    border-color: var(--color-text-disabled);
    color: var(--color-text-disabled);
}

/* ---------- 1.3 btn-tertiary ---------- */
.btn-tertiary-bcrd {
    background-color: var(--color-surface-subtle);
    border: var(--bcrd-border-width) solid var(--color-border-strong);
    color: var(--color-secondary);
    font-size: var(--bcrd-text-body);
    font-weight: var(--bcrd-font-book);
}

.btn-tertiary-bcrd:hover {
    background-color: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-secondary);
}

.btn-tertiary-bcrd:active,
.btn-tertiary-bcrd.active {
    background-color: var(--color-surface-subtle);
    border-color: var(--color-border-strong);
    box-shadow: var(--bcrd-shadow-pressed);
}

.btn-tertiary-bcrd:focus-visible {
    background-color: var(--color-border);
    border-color: var(--color-border-strong);
}

.btn-tertiary-bcrd:disabled,
.btn-tertiary-bcrd.disabled {
    background-color: var(--color-surface);
    border-color: var(--color-surface-muted);
    color: var(--color-text-disabled);
}

/* ---------- 1.4 btn-primary-icon ---------- */
.btn-primary-icon-bcrd {
    background-color: var(--color-surface-subtle);
    border: var(--bcrd-border-width-strong) solid var(--color-primary);
    color: var(--color-secondary);
    font-size: var(--bcrd-text-body);
    font-weight: var(--bcrd-font-book);
}

.btn-primary-icon-bcrd:hover {
    background-color: var(--color-surface);
    color: var(--color-secondary);
}

.btn-primary-icon-bcrd:active,
.btn-primary-icon-bcrd.active {
    background-color: var(--color-surface-subtle);
    color: var(--color-primary-text);
    box-shadow: var(--bcrd-shadow-pressed);
}

.btn-primary-icon-bcrd:focus-visible {
    background-color: var(--color-primary-fill);
    color: var(--color-surface);
}

.btn-primary-icon-bcrd:disabled,
.btn-primary-icon-bcrd.disabled {
    background-color: var(--color-border);
    border-color: var(--color-primary-disabled-border);
    color: var(--color-text-disabled);
}

/* ---------- 1.5 btn-pdf ---------- */
.btn-pdf-bcrd {
    background-color: var(--color-surface-subtle);
    border: var(--bcrd-border-width-strong) solid var(--color-danger-text);
    color: var(--color-secondary);
    font-size: var(--bcrd-text-body);
    font-weight: var(--bcrd-font-book);
}

.btn-pdf-bcrd:hover {
    background-color: var(--color-surface);
    border-color: var(--color-danger-text);
    color: var(--color-secondary);
}

.btn-pdf-bcrd:active,
.btn-pdf-bcrd.active {
    background-color: var(--color-surface-subtle);
    border-color: var(--color-danger-text);
    box-shadow: var(--bcrd-shadow-pressed);
}

.btn-pdf-bcrd:focus-visible {
    background-color: var(--color-danger-text);
    border-color: var(--color-danger-text);
    color: var(--color-surface);
}

.btn-pdf-bcrd:disabled,
.btn-pdf-bcrd.disabled {
    background-color: var(--color-surface);
    border-color: var(--color-danger-soft);
    color: var(--color-text-disabled);
}

/* ---------- 1.6 btn-excel ---------- */
.btn-excel-bcrd {
    background-color: var(--color-surface-subtle);
    border: var(--bcrd-border-width-strong) solid var(--color-success-text);
    color: var(--color-secondary);
    font-size: var(--bcrd-text-body);
    font-weight: var(--bcrd-font-book);
}

.btn-excel-bcrd:hover {
    background-color: var(--color-surface);
    border-color: var(--color-success-text);
    color: var(--color-secondary);
}

.btn-excel-bcrd:active,
.btn-excel-bcrd.active {
    background-color: var(--color-surface-subtle);
    border-color: var(--color-success-text);
    box-shadow: var(--bcrd-shadow-pressed);
}

.btn-excel-bcrd:focus-visible {
    background-color: var(--color-success-text);
    border-color: var(--color-success-text);
    color: var(--color-surface);
}

.btn-excel-bcrd:disabled,
.btn-excel-bcrd.disabled {
    background-color: var(--color-surface);
    border-color: var(--color-success-soft);
    color: var(--color-text-disabled);
}

/* Íconos dentro de los botones: 20px según Figma */
.btn-pdf-bcrd > i,
.btn-pdf-bcrd > svg,
.btn-excel-bcrd > i,
.btn-excel-bcrd > svg,
.btn-primary-icon-bcrd > i,
.btn-primary-icon-bcrd > svg {
    width: 20px;
    height: 20px;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- 1.7 btn-menu (ítem de menú lateral) ---------- */
.btn-menu-bcrd {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 15px;
    background-color: var(--color-border-strong);
    border: var(--bcrd-border-width) solid transparent;
    border-radius: var(--bcrd-radius);
    color: var(--color-secondary);
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-label-lg);
    font-weight: var(--bcrd-font-medium);
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--bcrd-transition),
                border-color var(--bcrd-transition);
}

.btn-menu-bcrd:hover {
    background-color: var(--color-surface);
    border-color: var(--color-border-interactive);
    color: var(--color-secondary);
}

.btn-menu-bcrd:active,
.btn-menu-bcrd.active {
    background-color: var(--color-border-strong);
    color: var(--color-secondary);
    box-shadow: var(--bcrd-shadow-pressed);
}

.btn-menu-bcrd:disabled,
.btn-menu-bcrd.disabled {
    background-color: var(--color-surface-muted);
    color: var(--color-text-disabled);
}

.btn-menu-bcrd > i,
.btn-menu-bcrd > svg {
    width: 16px;
    height: 16px;
    font-size: 14px;
    flex-shrink: 0;
}

/* ---------- 1.8 Agrupaciones ---------- */
.btn-group-bcrd {
    display: inline-flex;
    align-items: center;
}

.btn-group-bcrd > .btn-primary-bcrd,
.btn-group-bcrd > .btn-secondary-bcrd,
.btn-group-bcrd > .btn-tertiary-bcrd {
    border-radius: 0;
}

.btn-group-bcrd > :first-child {
    border-top-left-radius: var(--bcrd-radius);
    border-bottom-left-radius: var(--bcrd-radius);
}

.btn-group-bcrd > :last-child {
    border-top-right-radius: var(--bcrd-radius);
    border-bottom-right-radius: var(--bcrd-radius);
}

.btn-pills-bcrd {
    display: inline-flex;
    align-items: center;
    gap: var(--bcrd-spacing-2);
}

.btn-pills-bcrd > * {
    border-radius: var(--bcrd-radius-pill);
}

/* =====================================================================
   2. FORMULARIOS
   ===================================================================== */

.form-group-bcrd {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: var(--bcrd-spacing-3);
}

.label-bcrd {
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-label-lg);
    font-weight: var(--bcrd-font-medium);
    color: var(--color-secondary);
    line-height: 1.2;
}

.label-bcrd.required::after,
.label-bcrd[data-required]::after {
    content: ' *';
    color: var(--color-danger-text);
}

.input-bcrd,
.textarea-bcrd,
.select-bcrd {
    width: 100%;
    padding: 6px 8px;
    background-color: var(--color-surface);
    border: var(--bcrd-border-width) solid var(--color-border-interactive);
    border-radius: var(--bcrd-radius);
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-text-body-sm);
    font-weight: var(--bcrd-font-book);
    color: var(--color-secondary);
    line-height: var(--bcrd-line-height);
    transition: border-color var(--bcrd-transition),
                box-shadow var(--bcrd-transition);
}

.select-bcrd {
    height: var(--bcrd-control-height);
    padding: 5px 15px;
    font-size: var(--bcrd-text-input);
}

.textarea-bcrd {
    min-height: 90px;
    resize: vertical;
}

.input-bcrd::placeholder,
.textarea-bcrd::placeholder {
    color: var(--color-text-placeholder);
}

.input-bcrd:hover,
.textarea-bcrd:hover,
.select-bcrd:hover {
    border-color: var(--color-text-muted);
}

.input-bcrd:focus,
.textarea-bcrd:focus,
.select-bcrd:focus {
    outline: none;
    border-color: var(--color-primary-fill);
    box-shadow: var(--bcrd-shadow-focus);
}

.input-bcrd.is-invalid,
.textarea-bcrd.is-invalid,
.select-bcrd.is-invalid {
    border-color: var(--color-danger-text);
}

.input-bcrd:disabled,
.textarea-bcrd:disabled,
.select-bcrd:disabled {
    background-color: var(--color-border);
    border-color: var(--color-border);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

.form-help-bcrd {
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-text-caption);
    font-weight: var(--bcrd-font-light);
    color: var(--color-text-muted);
}

.form-error-bcrd {
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-text-caption);
    color: var(--color-danger-text);
}

/* ---------- 2.1 Checkbox y radio ---------- */
.check-bcrd {
    display: inline-flex;
    align-items: center;
    gap: var(--bcrd-spacing-2);
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-text-body-sm);
    font-weight: var(--bcrd-font-book);
    color: var(--color-secondary);
    cursor: pointer;
}

.check-bcrd > input[type='checkbox'],
.check-bcrd > input[type='radio'] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    background-color: var(--color-surface-subtle);
    border: var(--bcrd-border-width) solid var(--color-border-interactive);
    border-radius: var(--bcrd-radius);
    cursor: pointer;
    transition: background-color var(--bcrd-transition),
                border-color var(--bcrd-transition);
}

.check-bcrd > input[type='radio'] {
    border-radius: 50%;
}

.check-bcrd > input[type='checkbox']:checked {
    background-color: var(--color-primary-fill);
    border-color: var(--color-primary-fill);
    /* check blanco dibujado en SVG inline — sin dependencia de íconos */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23fff' d='M7.6 14.2 3.8 10.4l1.4-1.4 2.4 2.4 6.2-6.2 1.4 1.4z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.check-bcrd > input[type='radio']:checked {
    background-color: var(--color-surface);
    border-color: var(--color-primary-fill);
    box-shadow: inset 0 0 0 4px var(--color-primary-fill);
}

.check-bcrd > input:focus-visible {
    outline: none;
    box-shadow: var(--bcrd-focus-ring);
}

.check-bcrd > input:disabled {
    background-color: var(--color-border);
    border-color: var(--color-text-disabled);
    cursor: not-allowed;
}

.check-bcrd:has(> input:disabled) {
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

/* ---------- 2.2 Switch ---------- */
.switch-bcrd {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 64px;
    height: 32px;
    padding: 0;
    background-color: var(--color-surface);
    border: var(--bcrd-border-width) solid var(--color-border-interactive);
    border-radius: var(--bcrd-radius-pill);
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-text-caption);
    font-weight: var(--bcrd-font-book);
    color: var(--color-secondary);
    cursor: pointer;
    transition: background-color var(--bcrd-transition),
                border-color var(--bcrd-transition);
}

.switch-bcrd::before {
    /* etiqueta Off / On */
    content: 'Off';
    position: absolute;
    right: 9px;
    line-height: 1;
}

.switch-bcrd::after {
    /* perilla */
    content: '';
    position: absolute;
    left: 3px;
    width: 26px;
    height: 26px;
    background-color: var(--color-border-strong);
    border-radius: 50%;
    transition: left var(--bcrd-transition),
                background-color var(--bcrd-transition);
}

.switch-bcrd.is-on,
.switch-bcrd[aria-checked='true'] {
    background-color: var(--color-primary-fill);
    border-color: var(--color-primary-fill);
    color: var(--color-surface);
}

.switch-bcrd.is-on::before,
.switch-bcrd[aria-checked='true']::before {
    content: 'On';
    right: auto;
    left: 11px;
}

.switch-bcrd.is-on::after,
.switch-bcrd[aria-checked='true']::after {
    left: 35px;
    background-color: var(--color-surface);
}

.switch-bcrd:disabled {
    background-color: var(--color-surface-muted);
    border-color: var(--color-border);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

.switch-bcrd:focus-visible {
    outline: none;
    box-shadow: var(--bcrd-focus-ring);
}

/* ---------- 2.3 Barra de búsqueda ---------- */
.search-bar-bcrd {
    display: flex;
    align-items: center;
    gap: var(--bcrd-spacing-2);
    height: 37px;
    padding: 6px 12px;
    background-color: var(--color-surface);
    border: var(--bcrd-border-width) solid var(--color-border-interactive);
    border-radius: var(--bcrd-radius);
}

.search-bar-bcrd:focus-within {
    border-color: var(--color-primary-fill);
    box-shadow: var(--bcrd-shadow-focus);
}

.search-bar-bcrd > i,
.search-bar-bcrd > svg {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.search-bar-bcrd > input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-text-input);
    color: var(--color-secondary);
}

.search-bar-bcrd > input::placeholder {
    color: var(--color-text-placeholder);
}

/* =====================================================================
   3. CONTENEDORES
   ===================================================================== */

/* ---------- 3.1 Tabla ---------- */
.table-bcrd {
    width: 100%;
    border: var(--bcrd-border-width) solid var(--color-border);
    border-radius: var(--bcrd-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-family: var(--bcrd-font-family);
}

.table-bcrd > thead > tr > th {
    height: var(--bcrd-control-height);
    padding: 10px;
    background-color: var(--color-surface-muted);
    border-bottom: var(--bcrd-border-width) solid var(--color-border);
    font-size: var(--bcrd-h5);
    font-weight: var(--bcrd-font-medium);
    color: var(--color-secondary);
    text-align: left;
    vertical-align: middle;
}

.table-bcrd > tbody > tr > td {
    height: var(--bcrd-control-height);
    padding: 5px 10px;
    background-color: var(--color-surface);
    border-bottom: var(--bcrd-border-width) solid var(--color-border);
    font-size: var(--bcrd-text-body-sm);
    font-weight: var(--bcrd-font-book);
    color: var(--color-secondary);
    vertical-align: middle;
}

.table-bcrd > tbody > tr:last-child > td {
    border-bottom: none;
}

.table-bcrd.table-striped-bcrd > tbody > tr:nth-child(even) > td {
    background-color: var(--color-surface-subtle);
}

.table-bcrd > tbody > tr:hover > td {
    background-color: var(--color-primary-soft);
}

/* ---------- 3.2 Card ---------- */
.card-bcrd {
    padding: 15px;
    background-color: var(--color-surface-muted);
    border-radius: var(--bcrd-radius);
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-text-body);
    font-weight: var(--bcrd-font-book);
    color: var(--color-secondary);
}

.card-bcrd.card-bcrd--white {
    background-color: var(--color-surface);
    border: var(--bcrd-border-width) solid var(--color-border);
}

/* ---------- 3.3 Panel (colapsable) ---------- */
.panel-bcrd {
    border-radius: var(--bcrd-radius);
}

.panel-bcrd > .panel-bcrd__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bcrd-spacing-2);
    min-height: var(--bcrd-control-height);
    padding: 5px 15px;
    background-color: var(--color-surface-muted);
    border: var(--bcrd-border-width) solid var(--color-border);
    border-radius: var(--bcrd-radius);
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-label-lg);
    font-weight: var(--bcrd-font-medium);
    color: var(--color-secondary);
    cursor: pointer;
}

.panel-bcrd.is-open > .panel-bcrd__title {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.panel-bcrd > .panel-bcrd__content {
    display: none;
    padding: 15px;
    background-color: var(--color-surface);
    border: var(--bcrd-border-width) solid var(--color-border);
    border-top: none;
    border-bottom-left-radius: var(--bcrd-radius);
    border-bottom-right-radius: var(--bcrd-radius);
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-text-body);
    color: var(--color-secondary);
}

.panel-bcrd.is-open > .panel-bcrd__content {
    display: block;
}

/* ---------- 3.4 Accordion ---------- */
.accordion-bcrd > .panel-bcrd + .panel-bcrd {
    margin-top: var(--bcrd-spacing-1);
}

/* ---------- 3.5 Callout ---------- */
.callout-bcrd {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: var(--color-primary-soft);
    border-left: var(--bcrd-border-accent) solid var(--color-primary);
    border-radius: var(--bcrd-radius-sm);
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-text-input);
    font-weight: var(--bcrd-font-book);
    color: var(--color-secondary);
}

.callout-bcrd.callout-bcrd--white {
    background-color: var(--color-surface);
    box-shadow: var(--bcrd-shadow-card);
}

.callout-bcrd.callout-bcrd--success {
    border-left-color: var(--color-success);
    background-color: rgba(var(--bcrd-success-rgb), 0.08);
}

.callout-bcrd.callout-bcrd--danger {
    border-left-color: var(--color-danger);
    background-color: rgba(var(--bcrd-danger-rgb), 0.06);
}

/* ---------- 3.6 Modal ---------- */
.modal-bcrd {
    background-color: var(--color-surface);
    border: var(--bcrd-border-width) solid var(--color-border);
    border-radius: var(--bcrd-radius);
    font-family: var(--bcrd-font-family);
    box-shadow: var(--bcrd-shadow-panel);
}

.modal-bcrd > .modal-bcrd__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bcrd-spacing-2);
    padding: 10px 15px;
    background-color: var(--color-surface-muted);
    border-bottom: var(--bcrd-border-width) solid var(--color-border);
    border-top-left-radius: var(--bcrd-radius);
    border-top-right-radius: var(--bcrd-radius);
    font-size: var(--bcrd-h5);
    font-weight: var(--bcrd-font-medium);
    color: var(--color-secondary);
}

.modal-bcrd > .modal-bcrd__body {
    padding: 15px;
    font-size: var(--bcrd-text-body);
    color: var(--color-secondary);
}

.modal-bcrd > .modal-bcrd__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--bcrd-spacing-2);
    padding: 10px 15px;
    border-top: var(--bcrd-border-width) solid var(--color-border);
}

/* =====================================================================
   4. NAVEGACIÓN
   ===================================================================== */

/* ---------- 4.1 Tabs ---------- */
.tabs-bcrd {
    display: flex;
    flex-direction: column;
    font-family: var(--bcrd-font-family);
}

.tabs-bcrd > .tabs-bcrd__nav {
    display: flex;
    align-items: flex-end;
    gap: 0;
    margin-bottom: -1px;
}

.tabs-bcrd__tab {
    display: inline-flex;
    align-items: center;
    height: var(--bcrd-control-height);
    padding: 10px;
    background-color: var(--color-surface-subtle);
    border: var(--bcrd-border-width) solid var(--color-border);
    border-bottom: none;
    border-top-left-radius: var(--bcrd-radius);
    border-top-right-radius: var(--bcrd-radius);
    font-size: var(--bcrd-label);
    font-weight: var(--bcrd-font-medium);
    color: var(--color-secondary);
    text-decoration: none;
    cursor: pointer;
}

.tabs-bcrd__tab + .tabs-bcrd__tab {
    margin-left: -1px;
}

.tabs-bcrd__tab.active,
.tabs-bcrd__tab[aria-selected='true'] {
    background-color: var(--color-surface);
    position: relative;
    z-index: 1;
}

.tabs-bcrd > .tabs-bcrd__content {
    padding: 10px;
    background-color: var(--color-surface);
    border: var(--bcrd-border-width) solid var(--color-border);
    border-radius: 0 var(--bcrd-radius) var(--bcrd-radius) var(--bcrd-radius);
    font-size: var(--bcrd-text-input);
    color: var(--color-secondary);
}

/* ---------- 4.2 Paginación ---------- */
.pagination-bcrd {
    display: inline-flex;
    align-items: center;
    border-radius: var(--bcrd-radius);
    overflow: hidden;
    font-family: var(--bcrd-font-family);
}

.pagination-bcrd__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background-color: var(--color-surface-muted);
    border: none;
    border-right: var(--bcrd-border-width) solid var(--color-border-strong);
    font-size: var(--bcrd-text-input);
    font-weight: var(--bcrd-font-book);
    color: var(--color-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--bcrd-transition);
}

.pagination-bcrd__item:last-child {
    border-right: none;
}

.pagination-bcrd__item:hover {
    background-color: var(--color-border);
    color: var(--color-secondary);
}

.pagination-bcrd__item.active,
.pagination-bcrd__item[aria-current='page'] {
    background-color: var(--color-primary-fill);
    color: var(--color-surface);
}

.pagination-bcrd__item.disabled,
.pagination-bcrd__item:disabled {
    color: var(--color-text-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------- 4.3 Breadcrumb ---------- */
.breadcrumb-bcrd {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--bcrd-spacing-2);
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-text-input);
    font-weight: var(--bcrd-font-book);
    color: var(--color-text-muted);
}

.breadcrumb-bcrd > li + li::before {
    content: '/';
    margin-right: var(--bcrd-spacing-2);
    color: var(--color-border-strong);
}

.breadcrumb-bcrd a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.breadcrumb-bcrd a:hover {
    color: var(--color-primary-text);
    text-decoration: underline;
}

.breadcrumb-bcrd > li[aria-current='page'],
.breadcrumb-bcrd > li.active {
    color: var(--color-secondary);
    font-weight: var(--bcrd-font-medium);
}

/* ---------- 4.4 Menú vertical ---------- */
.menu-bcrd {
    display: flex;
    flex-direction: column;
    gap: var(--bcrd-spacing-1);
    padding: var(--bcrd-spacing-2);
    margin: 0;
    list-style: none;
}

.menu-bcrd > li > a {
    display: flex;
    align-items: center;
    gap: var(--bcrd-spacing-2);
    padding: 10px 15px;
    border-radius: var(--bcrd-radius);
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-label-lg);
    font-weight: var(--bcrd-font-medium);
    color: var(--color-secondary);
    text-decoration: none;
    transition: background-color var(--bcrd-transition);
}

.menu-bcrd > li > a:hover {
    background-color: var(--color-surface-muted);
}

.menu-bcrd > li.active > a,
.menu-bcrd > li > a.active {
    background-color: var(--color-primary-soft);
    color: var(--color-primary-text);
}

/* =====================================================================
   5. INDICADORES
   ===================================================================== */

/* ---------- 5.1 Badge ---------- */
.badge-bcrd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    background-color: var(--color-primary-fill);
    border-radius: var(--bcrd-radius-sm);
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-label-sm);
    font-weight: var(--bcrd-font-medium);
    color: var(--color-surface);
    line-height: 1;
    white-space: nowrap;
}

.badge-bcrd.badge-bcrd--md {
    padding: 3px 8px;
    font-size: 11px;
}

.badge-bcrd.badge-bcrd--sm {
    padding: 2px 5px;
    font-size: 10px;
}

.badge-bcrd.badge-bcrd--success { background-color: var(--color-success-text); }
.badge-bcrd.badge-bcrd--danger  { background-color: var(--color-danger-text); }
.badge-bcrd.badge-bcrd--primary { background-color: var(--color-primary-fill); }
.badge-bcrd.badge-bcrd--muted   { background-color: var(--color-text-muted); }
.badge-bcrd.badge-bcrd--neutral {
    background-color: var(--color-surface-muted);
    color: var(--color-secondary);
}

/* ---------- 5.1.b Badge suave (.badge-bcrd--soft) ----------
   Variante para las columnas cuyo valor es una etiqueta y no un control:
   la columna "Acción" del historial de cambios (Agregado / Editado /
   Eliminado / Pendiente / Rechazado), por ejemplo.

   A diferencia del badge sólido de arriba, aquí el relleno va con
   transparencia y el color lo llevan el borde y el texto. En una tabla con
   muchas filas, una columna entera de badges sólidos pesa demasiado; con el
   relleno suave el dato sigue leyéndose primero.

   El texto va sobre un relleno casi blanco, así que el contraste es el del
   propio color sobre blanco: verde 6.77:1, rojo 5.07:1, dorado 5.53:1 y
   gris 5.32:1. Todos por encima del 4.5:1 de WCAG AA. */
.badge-bcrd.badge-bcrd--soft {
    padding: 3px 10px;
    border: var(--bcrd-border-width) solid currentColor;
    border-radius: var(--bcrd-radius-pill);
    line-height: 1.4;
}

.badge-bcrd.badge-bcrd--soft.badge-bcrd--success {
    background-color: var(--bcrd-badge-success-bg);
    color: var(--color-success-text);
}

.badge-bcrd.badge-bcrd--soft.badge-bcrd--danger {
    background-color: var(--bcrd-badge-danger-bg);
    color: var(--color-danger-text);
}

.badge-bcrd.badge-bcrd--soft.badge-bcrd--primary {
    background-color: var(--color-primary-soft);
    color: var(--color-primary-text);
}

.badge-bcrd.badge-bcrd--soft.badge-bcrd--muted {
    background-color: var(--color-surface-muted);
    color: var(--color-text-muted);
}

@media (prefers-contrast: more) {
    .badge-bcrd.badge-bcrd--soft {
        border-width: var(--bcrd-border-width-strong);
    }
}

/* ---------- 5.2 Pill ---------- */
.pill-bcrd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bcrd-spacing-1);
    height: 30px;
    padding: 5px 15px;
    background-color: var(--color-surface-muted);
    border: var(--bcrd-border-width) solid var(--color-border);
    border-radius: var(--bcrd-radius-pill);
    font-family: var(--bcrd-font-family);
    font-size: var(--bcrd-text-input);
    font-weight: var(--bcrd-font-book);
    color: var(--color-secondary);
    white-space: nowrap;
}

.pill-bcrd.active,
.pill-bcrd.pill-bcrd--primary {
    background-color: var(--color-primary-fill);
    border-color: var(--color-primary-fill);
    color: var(--color-surface);
}

/* =====================================================================
   6. UTILIDADES TIPOGRÁFICAS
   ===================================================================== */

.bcrd-display  { font-size: var(--bcrd-text-display);  font-weight: var(--bcrd-font-medium); }
.bcrd-section  { font-size: var(--bcrd-text-section);  font-weight: var(--bcrd-font-medium); }
.bcrd-subtitle { font-size: var(--bcrd-text-subtitle); font-weight: var(--bcrd-font-medium); }
.bcrd-body-lg  { font-size: var(--bcrd-text-body-lg);  font-weight: var(--bcrd-font-book); }
.bcrd-body     { font-size: var(--bcrd-text-body);     font-weight: var(--bcrd-font-book); }
.bcrd-body-sm  { font-size: var(--bcrd-text-body-sm);  font-weight: var(--bcrd-font-book); }
.bcrd-body-2   { font-size: var(--bcrd-text-body-2);   font-weight: var(--bcrd-font-light); }
.bcrd-caption  { font-size: var(--bcrd-text-caption);  font-weight: var(--bcrd-font-light); }
.bcrd-label-lg { font-size: var(--bcrd-label-lg);      font-weight: var(--bcrd-font-medium); }
.bcrd-label    { font-size: var(--bcrd-label);         font-weight: var(--bcrd-font-medium); }
.bcrd-label-sm { font-size: var(--bcrd-label-sm);      font-weight: var(--bcrd-font-medium); }

.bcrd-text-primary  { color: var(--color-primary-text) !important; }
.bcrd-text-muted    { color: var(--color-text-muted) !important; }
.bcrd-text-disabled { color: var(--color-text-disabled) !important; }
.bcrd-text-success  { color: var(--color-success-text) !important; }
.bcrd-text-danger   { color: var(--color-danger-text) !important; }

.bcrd-bg-primary-soft { background-color: var(--color-primary-soft) !important; }
.bcrd-bg-subtle       { background-color: var(--color-surface-subtle) !important; }
.bcrd-bg-muted        { background-color: var(--color-surface-muted) !important; }

.bcrd-link {
    font-size: var(--bcrd-text-body-2);
    font-weight: var(--bcrd-font-light);
    color: var(--color-primary-text);
    text-decoration: none;
}

.bcrd-link:hover {
    color: var(--color-primary-fill-active);
    text-decoration: underline;
}