/* ============================================================
INTEGRA REFRESH — Hoja de estilos de producción (build consolidado)
------------------------------------------------------------
Sistema de diseño "Integra Refresh" en un solo fichero.
Generado a partir de tokens/ + theme del design system.
CÓMO INTEGRAR (Symfony + Bootstrap 5.3):
1. Copia este fichero a assets/styles/integra-refresh.css
2. Copia la carpeta fonts/ junto a él (los .woff2 de Spectral
y Source Sans 3) — ver bloques @font-face más abajo.
3. Enlázalo DESPUÉS de Bootstrap 5.3 y Bootstrap Icons:
Sustituye a theme_narrow.css.
4. Tus plantillas Twig existentes (.btn-primary, .card,
.badge-status, etc.) adoptan el nuevo aspecto sin cambios.
NOTA FUENTES: si aún no auto-hospedas las .woff2, comenta los
bloques @font-face y descomenta la línea @import de Google Fonts
al final de esta cabecera.
============================================================ */
/* ---- Fuentes auto-hospedadas (recomendado, GDPR) ----
Coloca los .woff2 en una carpeta fonts/ junto a este CSS. */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/source-sans-3-400-4h8waTM.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/source-sans-3-500-dzGKx41.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/source-sans-3-600-ZJErGGR.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/source-sans-3-700-rA5Bnnl.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/source-sans-3-400-italic-i7h5l23.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/spectral-500-_M5bGq6.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/spectral-600-f3L0jLc.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/spectral-700-21h2PtX.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/spectral-500-italic-JeaTmeU.woff2") format("woff2"); }
/* ---- Alternativa CDN (descomenta si NO auto-hospedas) ----
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,500;0,600;0,700;1,500&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
*/
/* ===== TOKENS: COLOR ===== */
:root {
/* --- Primario (Integra Teal) --- */
--color-primary: #0F6E7B;
--color-primary-border: #0F6E7B;
--color-primary-hover: #0B5660;
--color-primary-dark: #083F47;
--color-primary-subtle: #E3F0F1; /* fondo suave (paneles, hover de fila) */
--color-primary-lt: #4E9AA4; /* variante clara: badge "pendiente" */
/* --- Acento de marca (oro-sol del logotipo) — uso puntual --- */
--color-accent: #E0A53A;
--color-accent-hover: #C98E26;
--color-accent-subtle: #FBF1DA;
/* --- Peligro / destructivo --- */
--color-danger: #D24A41;
--color-danger-border: #C53C33;
--color-danger-hover: #B83C34;
--color-danger-dark: #9A2F28;
--color-danger-subtle: #FBE8E6;
/* --- Éxito / afirmativo --- */
--color-success: #2F9E5E;
--color-success-border: #28854F;
--color-success-hover: #28854F;
--color-success-dark: #1E6B40;
--color-success-subtle: #E6F4EC;
/* --- Advertencia (texto oscuro encima) --- */
--color-warning: #E0982E;
--color-warning-border: #C8851F;
--color-warning-hover: #C8851F;
--color-warning-dark: #8F5F13;
--color-warning-subtle: #FBF0DC;
/* --- Información --- */
--color-info: #2E83A6;
--color-info-border: #266F8E;
--color-info-hover: #266F8E;
--color-info-dark: #1D5A75;
--color-info-subtle: #E4F1F7;
/* --- Neutros cálidos (tipo papel) --- */
--paper: #FBFAF8; /* fondo de página */
--gray-50: #F7F5F1;
--gray-100: #F2F0EB;
--gray-200: #E7E4DD;
--gray-300: #D6D2C9;
--gray-400: #B6B1A6;
--gray-500: #8C887D;
--gray-600: #6B675E;
--gray-700: #4C4942;
--gray-800: #33312C;
--gray-900: #211F1B; /* casi-negro cálido (texto) */
--white: #ffffff;
--black: #000000;
/* Acento decorativo del logotipo (sol amarillo-verde) */
--brand-sun-yellow: #F4E04D;
--brand-sun-green: #B5C83F;
/* ---------- Alias semánticos ---------- */
--text-body: var(--gray-900);
--text-muted: var(--gray-600);
--text-soft: var(--gray-500);
--text-on-dark: #F7F5F1;
--text-on-primary: #ffffff;
--surface-page: var(--paper);
--surface-card: var(--white);
--surface-navbar: #0C3A3F; /* teal oscuro de marca */
--surface-subtle: var(--gray-50);
--surface-hover: var(--gray-100);
--border-default: var(--gray-200);
--border-subtle: var(--gray-100);
--border-strong: var(--gray-300);
--link-color: var(--color-primary);
--link-hover: var(--color-primary-hover);
--focus-ring: rgba(15, 110, 123, 0.30); /* primario @ 30% */
/* Resaltados de fila / opción de formulario */
--highlight-option: var(--color-primary-subtle);
--highlight-mgmt: var(--gray-100);
--row-alert-bg: var(--color-danger-subtle);
}
/* ===== TOKENS: TIPOGRAFÍA ===== */
:root {
/* Texto y UI */
--font-sans:
"Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
/* Titulares (h1–h3, cifras destacadas, citas) */
--font-serif:
"Spectral", Georgia, "Times New Roman", "Noto Serif", serif;
/* Datos: expedientes, DNI/NIE, importes, código */
--font-mono:
"SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
/* ---------- Escala de tamaños (base 15px) ---------- */
--fs-root: 15px;
--fs-xs: 0.72rem; /* ~10.8px — badges de estado */
--fs-sm: 0.82rem; /* ~12.3px — texto reducido, chips, ayudas */
--fs-base: 1rem; /* 15px — cuerpo */
--fs-md: 1.12rem; /* ~16.8px — subtítulos */
--fs-lg: 1.3rem; /* ~19.5px — apartado_titulo */
--fs-h3: 1.6rem; /* ~24px — título de página (serif) */
--fs-h2: 2.1rem; /* ~31.5px */
--fs-h1: 2.7rem; /* ~40.5px — cifras / portadas (serif) */
/* ---------- Pesos ---------- */
--fw-normal: 400; /* @kind font */
--fw-medium: 500; /* @kind font */
--fw-semibold: 600; /* @kind font */
--fw-bold: 700; /* @kind font */
--fw-heading: 600; /* @kind font */ /* peso por defecto de titulares serif */
/* ---------- Interlineado ---------- */
--lh-tight: 1.12; /* @kind font */
--lh-snug: 1.3; /* @kind font */
--lh-base: 1.55; /* @kind font */
/* ---------- Tracking ---------- */
--ls-caps: 0.07em; /* mayúsculas de badges / etiquetas */
--ls-heading: -0.01em; /* titulares serif: ligero negativo */
}
/* ===== TOKENS: ESPACIADO / RADIOS / SOMBRAS ===== */
:root {
/* ---------- Escala de espaciado (base 1rem = 15px) ---------- */
--space-0: 0;
--space-1: 0.25rem; /* ~3.75px */
--space-2: 0.5rem; /* ~7.5px */
--space-3: 0.75rem; /* ~11px */
--space-4: 1rem; /* 15px — separación estándar */
--space-5: 1.5rem; /* ~22.5px */
--space-6: 2rem; /* 30px */
--space-7: 3rem; /* 45px — secciones */
--space-card-gap: var(--space-5); /* separación entre tarjetas */
/* ---------- Radios (esquinas medias) ---------- */
--radius-xs: 4px;
--radius-sm: 8px; /* botones, inputs, chips cuadrados */
--radius-md: 12px; /* tarjetas */
--radius-lg: 16px; /* contenedores grandes, modales */
--radius-pill: 999px; /* badges de estado, chips */
/* ---------- Sombras (suaves, cálidas) ---------- */
--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(20, 18, 12, 0.05);
--shadow-card: 0 1px 2px rgba(20, 18, 12, 0.05),
0 8px 20px -12px rgba(20, 18, 12, 0.18);
--shadow-md: 0 12px 32px -12px rgba(20, 18, 12, 0.22);
--shadow-lg: 0 24px 56px -20px rgba(20, 18, 12, 0.28);
--shadow-focus: 0 0 0 3px var(--focus-ring);
/* Tarjetas de contenido clave: elevación suave.
Tablas y tarjetas secundarias: plano con hairline. */
--card-border: 1px solid var(--border-default);
--card-radius: var(--radius-md);
--card-shadow: var(--shadow-card);
/* ---------- Anchos de página (contenido estrecho) ---------- */
--ancho-pagina-sm: 520px;
--ancho-pagina-md: 720px;
--ancho-pagina-lg: 900px;
--ancho-pagina-xl: 1200px;
--container-max: 1080px;
/* ---------- Alturas de control ---------- */
--control-height: 42px; /* input/btn por defecto */
--control-height-sm: 34px; /* btn-sm */
--control-height-lg: 52px; /* btn-lg (login) */
/* ---------- Transiciones ---------- */
--ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
--dur-fast: 120ms; /* @kind other */
--dur-base: 180ms; /* @kind other */
}
/* ===== TEMA SOBRE BOOTSTRAP 5.3 ===== */
/* ---------- Variables globales de Bootstrap ---------- */
:root {
--bs-body-font-family: var(--font-sans);
--bs-body-font-size: var(--fs-base);
--bs-body-color: var(--text-body);
--bs-body-bg: var(--surface-page);
--bs-border-color: var(--border-default);
--bs-border-radius: var(--radius-sm);
--bs-border-radius-sm: var(--radius-xs);
--bs-border-radius-lg: var(--radius-md);
--bs-primary: var(--color-primary);
--bs-link-color: var(--link-color);
--bs-link-hover-color: var(--link-hover);
--bs-emphasis-color: var(--text-body);
}
html { font-size: var(--fs-root); }
body {
font-family: var(--font-sans), serif;
color: var(--text-body);
background: var(--surface-page);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ---------- Titulares: serif ---------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--font-serif), serif;
font-weight: var(--fw-heading);
letter-spacing: var(--ls-heading);
color: var(--text-body);
}
h3, .h3 { margin-top: 0; }
a { color: var(--link-color); text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
/* ============================================================
BOTONES — jerarquía clara y coherente por tipo
============================================================ */
.btn {
--bs-btn-border-radius: var(--radius-sm);
--bs-btn-padding-x: 1.1rem;
--bs-btn-padding-y: 0.55rem;
--bs-btn-font-weight: var(--fw-semibold);
--bs-btn-font-size: var(--fs-base);
font-family: var(--font-sans), serif;
letter-spacing: 0;
transition: background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--shadow-focus); }
.btn-sm {
--bs-btn-padding-x: 0.75rem;
--bs-btn-padding-y: 0.35rem;
--bs-btn-font-size: var(--fs-sm);
--bs-btn-border-radius: var(--radius-xs);
}
.btn-lg {
--bs-btn-padding-x: 1.5rem;
--bs-btn-padding-y: 0.8rem;
--bs-btn-font-size: var(--fs-md);
--bs-btn-border-radius: var(--radius-md);
}
/* Sólidos semánticos — relleno + sombra sutil propia del color */
.btn-primary {
--bs-btn-bg: var(--color-primary);
--bs-btn-border-color: var(--color-primary);
--bs-btn-hover-bg: var(--color-primary-hover);
--bs-btn-hover-border-color: var(--color-primary-hover);
--bs-btn-active-bg: var(--color-primary-dark);
--bs-btn-active-border-color: var(--color-primary-dark);
--bs-btn-disabled-bg: var(--color-primary);
--bs-btn-disabled-border-color: var(--color-primary);
box-shadow: 0 1px 2px rgba(8, 63, 71, 0.18);
}
.btn-danger {
--bs-btn-bg: var(--color-danger);
--bs-btn-border-color: var(--color-danger);
--bs-btn-hover-bg: var(--color-danger-hover);
--bs-btn-hover-border-color: var(--color-danger-hover);
--bs-btn-active-bg: var(--color-danger-dark);
--bs-btn-active-border-color: var(--color-danger-dark);
box-shadow: 0 1px 2px rgba(154, 47, 40, 0.18);
}
.btn-success {
--bs-btn-bg: var(--color-success);
--bs-btn-border-color: var(--color-success);
--bs-btn-hover-bg: var(--color-success-hover);
--bs-btn-hover-border-color: var(--color-success-hover);
--bs-btn-active-bg: var(--color-success-dark);
--bs-btn-active-border-color: var(--color-success-dark);
box-shadow: 0 1px 2px rgba(30, 107, 64, 0.18);
}
.btn-warning {
--bs-btn-color: var(--gray-900);
--bs-btn-bg: var(--color-warning);
--bs-btn-border-color: var(--color-warning);
--bs-btn-hover-color: var(--gray-900);
--bs-btn-hover-bg: var(--color-warning-hover);
--bs-btn-hover-border-color: var(--color-warning-hover);
--bs-btn-active-bg: var(--color-warning-dark);
--bs-btn-active-color: #fff;
}
.btn-info {
--bs-btn-color: #fff;
--bs-btn-bg: var(--color-info);
--bs-btn-border-color: var(--color-info);
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: var(--color-info-hover);
--bs-btn-hover-border-color: var(--color-info-hover);
--bs-btn-active-bg: var(--color-info-dark);
}
/* Secundario — contorno neutro, claramente distinto del primario */
.btn-secondary {
--bs-btn-color: var(--gray-800);
--bs-btn-bg: var(--white);
--bs-btn-border-color: var(--border-strong);
--bs-btn-hover-color: var(--gray-900);
--bs-btn-hover-bg: var(--gray-100);
--bs-btn-hover-border-color: var(--gray-400);
--bs-btn-active-bg: var(--gray-200);
--bs-btn-active-color: var(--gray-900);
}
/* Contornos sutiles para acciones de tipo "primario" pero secundario en peso */
.btn-outline-primary {
--bs-btn-color: var(--color-primary);
--bs-btn-border-color: var(--color-primary);
--bs-btn-hover-bg: var(--color-primary);
--bs-btn-hover-border-color: var(--color-primary);
--bs-btn-hover-color: #fff;
--bs-btn-active-bg: var(--color-primary-dark);
}
/* Fantasma / enlace — acción terciaria */
.btn-ghost {
--bs-btn-color: var(--color-primary);
--bs-btn-bg: transparent;
--bs-btn-border-color: transparent;
--bs-btn-hover-color: var(--color-primary-dark);
--bs-btn-hover-bg: var(--color-primary-subtle);
--bs-btn-hover-border-color: transparent;
--bs-btn-active-bg: var(--color-primary-subtle);
box-shadow: none;
}
/* ============================================================
TARJETAS
============================================================ */
.card {
--bs-card-bg: var(--surface-card);
--bs-card-border-color: var(--border-default);
--bs-card-border-radius: var(--radius-md);
--bs-card-inner-border-radius: calc(var(--radius-md) - 1px);
--bs-card-spacer-x: 1.35rem;
--bs-card-spacer-y: 1.2rem;
margin-bottom: var(--space-card-gap);
box-shadow: var(--shadow-card);
}
/* Tarjeta plana (tablas, contenido secundario): sin sombra */
.card--flat { box-shadow: none; }
.card-header {
background: var(--surface-subtle);
border-bottom: 1px solid var(--border-subtle);
font-weight: var(--fw-semibold);
font-family: var(--font-sans), serif;
}
/* Tarjetas con realce semántico (cabecera coloreada) */
.card.border-danger { --bs-card-border-color: var(--color-danger); }
.card.border-success { --bs-card-border-color: var(--color-success); }
.card.border-warning { --bs-card-border-color: var(--color-warning); }
.card.border-info { --bs-card-border-color: var(--color-info-border); border-color: var(--color-info-border) !important; }
.card.border-danger .card-header { background: var(--color-danger-subtle); color: var(--color-danger-dark); border-color: transparent; }
.card.border-success .card-header { background: var(--color-success-subtle); color: var(--color-success-dark); border-color: transparent; }
.card.border-warning .card-header { background: var(--color-warning-subtle); color: var(--color-warning-dark); border-color: transparent; }
.card.border-info .card-header { background: var(--color-info-subtle); color: var(--color-info-dark); border-color: transparent; }
/* ============================================================
FORMULARIOS
============================================================ */
.form-control, .form-select {
--bs-border-radius: var(--radius-sm);
border-color: var(--border-strong);
padding: 0.55rem 0.85rem;
background-color: var(--white);
color: var(--text-body);
transition: border-color var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease);
}
.form-control::placeholder { color: var(--text-soft); }
.form-control:focus, .form-select:focus {
border-color: var(--color-primary);
box-shadow: var(--shadow-focus);
}
.form-label {
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
color: var(--gray-700);
margin-bottom: 0.3rem;
}
.form-text { color: var(--text-muted); }
.form-label.required::after,
legend.required::after {
content: " *";
color: var(--color-danger);
font-weight: var(--fw-bold);
}
.form-check-input:checked {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
.form-check-input:focus { box-shadow: var(--shadow-focus); border-color: var(--color-primary); }
/* ============================================================
NAVBAR — teal oscuro de marca
============================================================ */
.navbar.bg-dark, .navbar-integra {
background-color: var(--surface-navbar) !important;
--bs-navbar-color: rgba(247, 245, 241, 0.78);
--bs-navbar-hover-color: #fff;
--bs-navbar-active-color: #fff;
--bs-navbar-nav-link-padding-x: 0.9rem;
box-shadow: var(--shadow-sm);
}
.navbar-integra .navbar-brand {
font-family: var(--font-serif);
font-weight: var(--fw-bold);
letter-spacing: 0.02em;
color: #fff;
}
.navbar-integra .nav-link { position: relative; font-size: var(--fs-base); }
.navbar-integra .nav-link.active::after {
content: "";
position: absolute;
left: 0.9rem; right: 0.9rem; bottom: 2px;
height: 2px; border-radius: 2px;
background: var(--color-accent);
}
.dropdown-menu {
--bs-dropdown-border-color: var(--border-default);
--bs-dropdown-border-radius: var(--radius-sm);
--bs-dropdown-link-active-bg: var(--color-primary);
--bs-dropdown-link-hover-bg: var(--color-primary-subtle);
box-shadow: var(--shadow-md);
}
/* ============================================================
TABLAS
============================================================ */
.table {
--bs-table-bg: transparent;
--bs-table-hover-bg: var(--color-primary-subtle);
--bs-table-border-color: var(--border-subtle);
vertical-align: middle;
}
.table > thead th {
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
border-bottom: 1px solid var(--border-default);
background: var(--surface-subtle);
padding-top: 0.7rem;
padding-bottom: 0.7rem;
}
.table > tbody > tr.alerta > * {
background-color: var(--row-alert-bg);
}
.table > tbody > tr.inactivo { color: var(--gray-500); font-style: italic; }
.table > tbody > tr.inactivo .fw-semibold { color: var(--gray-600); }
/* ============================================================
PESTAÑAS — subrayado moderno
============================================================ */
.nav-tabs {
--bs-nav-tabs-border-color: var(--border-default);
--bs-nav-tabs-link-active-color: var(--color-primary);
--bs-nav-tabs-link-active-border-color: transparent transparent var(--color-primary);
border-bottom-width: 1px;
gap: 0.25rem;
}
.nav-tabs .nav-link {
color: var(--text-muted);
font-weight: var(--fw-semibold);
border: 0;
border-bottom: 2px solid transparent;
border-radius: 0;
padding: 0.6rem 0.9rem;
margin-bottom: -1px;
}
.nav-tabs .nav-link:hover { color: var(--color-primary); border-bottom-color: var(--border-strong); }
.nav-tabs .nav-link.active { border-bottom-color: var(--color-primary); background: transparent; }
/* ============================================================
ALERTAS / FLASHES — fondo tintado suave (sin barra lateral)
============================================================ */
.alert {
--bs-alert-border-radius: var(--radius-md);
border: 1px solid transparent;
font-size: var(--fs-base);
}
.alert-success { background: var(--color-success-subtle); color: var(--color-success-dark); border-color: color-mix(in srgb, var(--color-success) 25%, transparent); }
.alert-danger { background: var(--color-danger-subtle); color: var(--color-danger-dark); border-color: color-mix(in srgb, var(--color-danger) 25%, transparent); }
.alert-warning { background: var(--color-warning-subtle); color: var(--color-warning-dark); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); }
.alert-info { background: var(--color-info-subtle); color: var(--color-info-dark); border-color: color-mix(in srgb, var(--color-info) 25%, transparent); }
/* ============================================================
ANCHOS DE PÁGINA
============================================================ */
.ancho-pagina { max-width: var(--ancho-pagina-md); margin-inline: auto; }
.ancho-pagina--sm { max-width: var(--ancho-pagina-sm); }
.ancho-pagina--lg { max-width: var(--ancho-pagina-lg); }
.ancho-pagina--xl { max-width: var(--ancho-pagina-xl); }
/* ============================================================
BADGES — estado (pastilla), etiqueta (·), chip
============================================================ */
.badge-status {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
width: auto;
align-self: center;
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
padding: 0.22rem 0.6rem;
border-radius: var(--radius-pill);
line-height: var(--lh-tight);
white-space: nowrap;
vertical-align: middle;
}
.badge-status--activo,
.badge-status--alta,
.badge-status--aceptada { background: var(--color-success-subtle); color: var(--color-success-dark); }
.badge-status--inactivo,
.badge-status--baja,
.badge-status--rechazada { background: var(--color-danger-subtle); color: var(--color-danger-dark); }
.badge-status--pendiente { background: var(--color-primary-subtle); color: var(--color-primary-dark); }
.badge-status--alerta { background: var(--color-danger-subtle); color: var(--color-danger-dark); }
.badge-tag {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: inherit;
color: var(--gray-800);
padding: 0;
white-space: nowrap;
margin-right: 0.5rem;
}
.badge-tag + .badge-tag::before {
content: "·";
color: var(--gray-400);
margin-right: 0.5rem;
margin-left: -0.25rem;
}
.badge-chip {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
width: auto;
align-self: center;
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--gray-800);
background: var(--gray-100);
border: 1px solid var(--border-default);
padding: 0.22rem 0.65rem;
border-radius: var(--radius-pill);
line-height: var(--lh-snug);
white-space: nowrap;
margin-right: 0.3rem;
}
/* ---------- Separadores entre pares dt/dd en fichas ---------- */
.card-body dl.row > dt,
.card-body dl.row > dd {
padding-top: 0.55rem;
padding-bottom: 0.55rem;
border-top: 1px solid var(--border-subtle);
margin-bottom: 0;
}
.card-body dl.row > dt { color: var(--text-muted); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.card-body dl.row > dt:first-of-type,
.card-body dl.row > dt:first-of-type + dd { border-top: 0; }
/* ---------- Resaltados de opción de formulario ---------- */
.opcion_resaltado { background-color: var(--highlight-option); font-weight: var(--fw-semibold); border-radius: var(--radius-xs); }
.opcion_gestion { background-color: var(--highlight-mgmt); border-radius: var(--radius-xs); }