/* Ajustes propios sobre main.css de Kulvio. */
.brand-mark { height: 1.2em; vertical-align: -0.2em; }
.stack > * + * { margin-top: 1rem; }
.tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.status { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.status--pending { background: #fff4d6; color: #7a5200; }
.status--operations_response { background: #e3efff; color: #1f4f8f; }
.status--closed { background: #e2f5e9; color: #1d6b3a; }
.status--answered { background: #e2f5e9; color: #1d6b3a; }
/* Vencimiento atrasado (R10): rojo, con los colores de Kulvio. */
.status--overdue { background: var(--color-danger-light); color: var(--color-danger); }
.error-page { max-width: 560px; margin: 4rem auto; text-align: center; }

/* Encabezado (pantallas.md, «Encabezado, menú de usuario y menú izquierdo»). */
.navbar-brand { text-decoration: none; }
.navbar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); cursor: pointer; }
.navbar-toggle:hover { background: var(--color-bg); }
.navbar-center { font-weight: 600; }
.navbar-actions form { margin: 0; }
.header-icon { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.4rem; color: var(--color-text-secondary); }
.header-dropdown { position: relative; }
.header-dropdown > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-sm); padding: 0.4rem; border-radius: var(--radius-sm); font-size: var(--text-sm); }
.header-dropdown > summary::-webkit-details-marker { display: none; }
.header-dropdown > summary:hover { background: var(--color-bg); }
.dropdown-panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 260px; padding: var(--space-md); background: var(--color-bg-card); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 200; }
.dropdown-title { font-weight: 600; margin: 0 0 var(--space-sm); }
.avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.avatar-sm { width: 28px; height: 28px; }
.avatar-lg { width: 72px; height: 72px; }
.user-menu-panel { text-align: center; }
.user-menu-name { font-weight: 600; margin: var(--space-sm) 0 0; }
.user-menu-actions { display: flex; gap: var(--space-sm); justify-content: center; margin-top: var(--space-md); }
/* Usuarios en línea: el fragmento llega después de la página (Task 11). */
.online-count { display: inline-block; min-width: 1.2rem; padding: 0 0.35rem; border-radius: 999px; background: var(--color-success); color: #fff; font-size: 0.7rem; font-weight: 700; text-align: center; }
.online-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.online-list li { display: flex; gap: var(--space-sm); align-items: center; padding: var(--space-xs) 0; }
.online-list p { margin: 0; }
.online-name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Contadores de atrasados del menú (R14): insignia roja a la derecha, como la label-danger de
   PlanVital, solo si hay atrasados. Llegan después de la página. */
.menu-counter { margin-left: auto; min-width: 1.2rem; padding: 0 0.35rem; border-radius: 999px; background: var(--color-danger); color: #fff; font-size: 0.7rem; font-weight: 700; text-align: center; }
.menu-counter:empty { display: none; }

/* Panel del menú izquierdo. */
.sidebar-user { display: flex; gap: var(--space-sm); align-items: center; padding: 0 var(--space-lg) var(--space-md); }
.sidebar-user-name { font-weight: 600; margin: 0; }
.sidebar-user-status { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }
.sidebar-group > summary { list-style: none; }
.sidebar-group > summary::-webkit-details-marker { display: none; }
.sidebar-group[open] > .sidebar-group-items { display: block; }
.sidebar-group[open] > .sidebar-group-toggle > .sidebar-chevron { transform: rotate(-90deg); }
.fa.sidebar-icon { font-size: 1rem; }
.sidebar-footer p { margin: 0; }

/* Menú colapsado, guardado en el navegador (docs/alcance/diferencias.md). */
@media (min-width: 769px) {
  body.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width); }
  body.sidebar-collapsed .main-content { margin-left: var(--sidebar-collapsed-width); }
  body.sidebar-collapsed .navbar-brand { width: calc(var(--sidebar-collapsed-width) - var(--space-lg) * 2); }
  body.sidebar-collapsed .app-logo-long,
  body.sidebar-collapsed .sidebar-group-toggle > span,
  body.sidebar-collapsed .sidebar-user > div,
  body.sidebar-collapsed .sidebar-section,
  body.sidebar-collapsed .sidebar-chevron,
  body.sidebar-collapsed .sidebar-footer { display: none; }
  /* Con el menú colapsado solo quedan los íconos de grupo. Los ítems del grupo abierto se ven al
     pasar el mouse (o con el foco), en un panel que sale a la derecha, como AdminLTE. */
  body.sidebar-collapsed .sidebar,
  body.sidebar-collapsed .sidebar-nav { overflow: visible; }
  body.sidebar-collapsed .sidebar-group { position: relative; }
  body.sidebar-collapsed .sidebar-group > .sidebar-group-items { display: none; }
  body.sidebar-collapsed .sidebar-group:hover > .sidebar-group-items,
  body.sidebar-collapsed .sidebar-group:focus-within > .sidebar-group-items { display: block; position: absolute; left: 100%; top: 0; z-index: 100; min-width: 220px; background: var(--color-bg-card); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-xs) 0; }
  body.sidebar-collapsed .sidebar-group-items > .sidebar-item a { padding-left: var(--space-lg); }
}

/* Título, subtítulo y migas de cada pantalla. */
.page-header h1 small { font-size: var(--text-base); font-weight: 400; color: var(--color-text-muted); margin-left: var(--space-sm); }
.breadcrumbs { font-size: var(--text-sm); color: var(--color-text-muted); }
.breadcrumbs a { color: inherit; }

/* Inicio: la caja «Soluciones que suman» se pliega con su botón (Task 10). */
.home-box > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.home-box > summary::-webkit-details-marker { display: none; }
.home-box-toggle::before { content: "−"; font-weight: 700; }
.home-box:not([open]) .home-box-toggle::before { content: "+"; }
.home-logo { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); padding: var(--space-2xl) var(--space-lg); background: var(--color-primary); color: #fff; border-radius: var(--radius-md); }
.home-logo-mark { width: 96px; height: 96px; }
.home-logo-text { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 800; }

/* Modales (<dialog>), los de PlanVital con el aspecto de Kulvio. */
.modal-dialog { border: none; border-radius: var(--radius-lg); background: var(--color-bg-card); box-shadow: var(--shadow-lg); padding: var(--space-xl); width: min(560px, calc(100% - 2 * var(--space-lg))); color: var(--color-text); }
.modal-dialog::backdrop { background: rgba(15, 36, 64, 0.35); }
.modal-title { font-size: var(--text-lg); margin: 0 0 var(--space-lg); }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-lg); }

/* Tablas como DataTables (app.js, setupTable). */
.dt-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-sm); font-size: var(--text-sm); }
.dt-toolbar label { display: inline-flex; align-items: center; gap: var(--space-xs); }
.dt-length, .dt-search { display: inline-block; width: auto; }
.dt-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-sm); }
.dt-pager { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
th.dt-sortable { cursor: pointer; user-select: none; }
th.dt-asc::after { content: " ▲"; font-size: 0.7em; }
th.dt-desc::after { content: " ▼"; font-size: 0.7em; }

/* Un elemento con el atributo hidden no se ve, aunque su clase diga display. */
[hidden] { display: none !important; }

/* Árbol de casillas (Menú por rol). */
.check-tree ul { list-style: none; margin: 0; padding-left: 1.5rem; }
.check-tree > ul { padding-left: 0; }
.check-tree li { margin: 0.2rem 0; }
.check-tree label { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.check-tree-group { font-weight: 600; }

/* Selector doble con buscador. */
.dual-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.dual-list-title { font-weight: 600; margin: 0 0 var(--space-xs); }
.dual-list-options { list-style: none; margin: var(--space-xs) 0 0; padding: 0; height: 220px; overflow-y: auto; border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); }
.dual-list-option { display: block; width: 100%; padding: 0.35rem 0.6rem; border: none; background: transparent; text-align: left; cursor: pointer; }
.dual-list-option:hover { background: var(--color-bg); }

/* Área de texto temporal para copiar sin la API del portapapeles. */
.copy-buffer { position: fixed; top: 0; left: 0; opacity: 0; }

/* Interruptor SI/NO de PlanVital (bootstrapSwitch): verde SI, amarillo NO. Es una casilla. */
.switch { position: relative; display: inline-flex; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { display: inline-block; min-width: 3.5rem; padding: 0.3rem 0.9rem; border-radius: 999px; background: var(--color-warning); color: #1F2937; font-weight: 600; text-align: center; }
.switch-track::after { content: attr(data-off); }
.switch input:checked + .switch-track { background: var(--color-success); }
.switch input:checked + .switch-track::after { content: attr(data-on); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Indicadores económicos (S9.1). En Inicio: Noticias 8 columnas (S9.2) e Indicadores 4. */
.home-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-lg); margin-top: var(--space-lg); }
.home-indicators { grid-column: 9 / span 4; }
.home-indicators .indicator-grid { grid-template-columns: 1fr; }
.home-indicators .kpi-value { font-size: var(--text-xl); }
@media (max-width: 992px) { .home-indicators { grid-column: 1 / -1; } }
.indicator-grid { margin-bottom: var(--space-md); }
.indicator-card p { margin: 0; }
.indicator-date, .indicator-source { font-size: var(--text-sm); color: var(--color-text-muted); }
.indicator-source { margin: 0; }
/* Menú de barras de la caja «Indicadores» (Plataforma › Indicadores). */
.box-tools { display: flex; justify-content: flex-end; margin-bottom: var(--space-sm); }
.box-tools-panel { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-xs); min-width: 220px; }
.box-tools-panel form { margin: 0; }
/* S2.3 · Pestañas con botones (app.js, data-tabs). */
button.tab { background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: inherit; }
button.tab--active { border-bottom-color: var(--color-primary); }
.tabs[data-tabs] { gap: 0; margin-bottom: var(--space-lg); }

/* Botón verde de PlanVital («Buscar» del Timeline), más oscuro que --color-success para que el
   texto blanco se lea. */
.btn-success { background: #0B7A45; border-color: #0B7A45; color: #fff; }
.btn-success:hover { background: #096538; border-color: #096538; color: #fff; }

/* Avatares: 42 px en la lista de Usuarios, como PlanVital, y grandes en los perfiles. */
.avatar-42 { width: 42px; height: 42px; }
.avatar-xl { width: 128px; height: 128px; }
.avatar-xxl { width: 256px; height: 256px; }

/* Asistente Gestión Usuario: pasos, resumen y botones. */
.wizard-steps { display: flex; gap: var(--space-md); flex-wrap: wrap; list-style: none; margin: 0 0 var(--space-lg); padding: 0; }
.wizard-step { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-text-muted); font-weight: 600; }
.wizard-step-number { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--color-bg-muted); }
.wizard-step--active { color: var(--color-primary); }
.wizard-step--active .wizard-step-number { background: var(--color-primary); color: #fff; }
.wizard-step--done .wizard-step-number { background: var(--color-success-light); color: var(--color-success); }
/* «Siguiente» va primero en el HTML (Enter lo usa) y se ve a la derecha de «Anterior». */
.wizard-actions { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: var(--space-sm); margin-top: var(--space-lg); }
.wizard-title { font-size: var(--text-base); margin: 0 0 var(--space-sm); }
.wizard-summary dt { font-weight: 600; margin-top: var(--space-sm); }
.wizard-summary dd { margin: 0; }

/* Mi Perfil y Perfil de otro usuario. */
.profile-layout { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: var(--space-lg); align-items: start; }
@media (max-width: 900px) { .profile-layout { grid-template-columns: 1fr; } }
.profile-card { text-align: center; }
.profile-name { font-size: var(--text-lg); margin: var(--space-sm) 0; }
.profile-facts { list-style: none; margin: 0; padding: 0; text-align: left; }
.profile-facts li { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) 0; border-top: 1px solid var(--color-border-light); }
.profile-photo { display: flex; justify-content: center; padding: var(--space-lg); }
.image-preview { margin-top: var(--space-sm); }

/* Línea de tiempo (Perfil de otro usuario y Timeline), con los colores de par_log. */
.activity { list-style: none; margin: 0; padding: 0; }
.activity-day { margin: var(--space-md) 0 var(--space-xs); }
.activity-item { display: flex; gap: var(--space-sm); padding: var(--space-xs) 0; }
.activity-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; flex-shrink: 0; }
.activity-icon--aqua { background: #007F9C; }
.activity-icon--red { background: var(--color-danger); }
.activity-icon--green { background: #0B7A45; }
.activity-icon--blue { background: #1F4F8F; }
.activity-icon--gray { background: var(--color-text-secondary); }
.activity-icon--orange { background: #C2410C; }
.activity-body p { margin: 0; }
.activity-title { font-weight: 600; }
.activity-text { overflow-wrap: anywhere; }

/* Timeline: búsqueda y tarjetas de ingresos. */
.timeline-search { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.timeline-search select { max-width: 420px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); margin: var(--space-lg) 0; }
.stat-label { font-weight: 600; margin: 0; }
.stat-value { font-size: var(--text-2xl); font-weight: 700; margin: var(--space-xs) 0; }
.progress { height: 0.5rem; border-radius: 999px; background: var(--color-bg-muted); overflow: hidden; }
.progress > .progress-bar { display: block; height: 100%; background: var(--color-primary); }

/* Modal «Usuarios» de los roles de respuesta: lista numerada, como PlanVital. */
.members-list { list-style: decimal; margin: 0; padding-left: 1.5rem; }
.members-list li { padding: 0.15rem 0; }

/* Modal ancho (modal-lg de PlanVital): el selector doble de Usuarios - Rol. */
.modal-dialog--wide { width: min(800px, calc(100% - 2 * var(--space-lg))); }

/* Noticias (S9.2). El interruptor «Activo» es el bootstrapSwitch de PlanVital: azul ON, rojo OFF. */
.switch--news .switch-track { background: var(--color-danger); color: #fff; }
.switch--news input:checked + .switch-track { background: var(--color-primary); }
.switch input:disabled + .switch-track { opacity: 0.6; cursor: not-allowed; }
.news-actions { white-space: nowrap; }
.news-actions form { display: inline; margin: 0; }

/* Formulario «Noticia»: el editor Quill (alto de TinyMCE en PlanVital) y sus botones. */
.news-editor .ql-editor { min-height: 300px; }
.form-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); }

/* Inicio, caja «Noticias» (S9.2): 8 columnas y el cuerpo en 587 px con barra, como PlanVital. */
.home-news { grid-column: 1 / span 8; }
@media (max-width: 992px) { .home-news { grid-column: 1 / -1; } }
.home-news-body { height: 587px; overflow-y: auto; }
.news-post + .news-post { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border-light); }
.news-post-header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-sm); }
.news-post-title { color: var(--color-primary); }
.news-post-date { color: var(--color-text-muted); font-size: var(--text-sm); }
/* El contenido, con el formato del editor: las reglas de quill.core.css para sus clases. */
.news-body { line-height: 1.42; text-align: justify; overflow-wrap: anywhere; }
.news-body p, .news-body h1, .news-body h2, .news-body h3, .news-body h4, .news-body h5, .news-body h6 { margin: 0; }
.news-body ol, .news-body ul { margin: 0; padding-left: 1.5em; }
.news-body img { max-width: 100%; height: auto; }
.news-body table { border-collapse: collapse; }
.news-body td, .news-body th { border: 1px solid var(--color-border); padding: 2px 5px; }
.news-body .ql-align-center { text-align: center; }
.news-body .ql-align-right { text-align: right; }
.news-body .ql-align-justify { text-align: justify; }
.news-body .ql-size-small { font-size: 0.75em; }
.news-body .ql-size-large { font-size: 1.5em; }
.news-body .ql-size-huge { font-size: 2.5em; }
.news-body .ql-font-serif { font-family: Georgia, "Times New Roman", serif; }
.news-body .ql-font-monospace { font-family: Monaco, "Courier New", monospace; }
.news-body .ql-indent-1 { padding-left: 3em; }
.news-body .ql-indent-2 { padding-left: 6em; }
.news-body .ql-indent-3 { padding-left: 9em; }
.news-body .ql-indent-4 { padding-left: 12em; }
.news-body .ql-indent-5 { padding-left: 15em; }
.news-body .ql-indent-6 { padding-left: 18em; }
.news-body .ql-indent-7 { padding-left: 21em; }
.news-body .ql-indent-8 { padding-left: 24em; }

/* Paridad tanda 1: una alerta con varios errores los apila, uno por línea (`.alert` es flex en
   fila y los <p> quedaban en columnas angostas). */
.alert { flex-wrap: wrap; }
.alert > p { flex: 1 1 100%; margin: 0; }

/* Aviso de la suplantación (S2.6): arriba del contenido, en todas las pantallas. */
.impersonation-banner { position: sticky; top: var(--navbar-height); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin: 0 0 var(--space-md); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-warning); border-radius: var(--radius-sm); background: var(--color-warning-light); color: var(--color-warning-text); }
.impersonation-banner p, .impersonation-banner form { margin: 0; }

/* Crear Solicitud (S4.1): la barra de avance de la subida y los dos botones. */
.upload-progress { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-xs); }
.upload-progress progress { flex: 1; height: 0.6rem; accent-color: var(--color-primary); }
.form-actions { display: flex; justify-content: space-between; gap: var(--space-sm); }

.attachment-list { list-style: none; margin: 0; padding: 0; }
.attachment-list li { padding: 0.15rem 0; overflow-wrap: anywhere; }

/* Adjuntos de noticia (S9.3): los documentos a la izquierda y «Subir Documento» a la derecha. */
.attachments-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
@media (max-width: 768px) { .attachments-layout { grid-template-columns: 1fr; } }
.attachments-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-md); align-content: start; }
.attachment-thumb { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: var(--space-md); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); text-align: center; }
.attachment-icon { font-size: 3rem; color: var(--color-text-secondary); }
.attachment-name { font-weight: 600; overflow-wrap: anywhere; }
.attachment-thumb form { width: 100%; margin: 0; }
.attachments-upload { text-align: center; border-left: 1px solid var(--color-border-light); padding-left: var(--space-lg); }
.attachments-upload form { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-sm); }
.upload-loading { display: none; }
.upload-loading.htmx-request { display: inline-block; }
.news-upload-progress { position: relative; height: 20px; max-width: 400px; margin: var(--space-sm) auto; }
.news-upload-progress-text { position: absolute; inset: 0; font-size: var(--text-xs); line-height: 20px; color: var(--color-text); }
.upload-output { margin-top: var(--space-sm); }

/* Inicio (S9.3): los adjuntos bajo el contenido y el video a pantalla completa. */
.news-attachments { margin-top: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--color-bg-muted); border-radius: var(--radius-md); color: var(--color-text-muted); }
.news-attachments ul { margin: 0; padding-left: 1.2em; list-style: none; }
.news-attachments li + li { margin-top: var(--space-xs); }
.video-dialog { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: none; background: #000; }
.video-dialog::backdrop { background: rgba(0, 0, 0, 0.8); }
.video-dialog video { width: 100%; height: 100%; }
.video-dialog-close { position: absolute; top: var(--space-sm); right: var(--space-sm); z-index: 1; background: #fff; }



/* Segundo factor (S2.7): el QR en un fondo blanco, para que la cámara lo lea también en tema
   oscuro, y los códigos de respaldo en dos columnas. */
.mfa-steps { margin: 0 0 var(--space-md); padding-left: 1.25rem; }
.mfa-steps li + li { margin-top: var(--space-xs); }
.mfa-qr { display: flex; justify-content: center; margin: 0 0 var(--space-md); }
.mfa-qr-svg { width: 240px; height: 240px; max-width: 100%; border-radius: var(--radius-sm); background: #fff; }
.mfa-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-lg); margin: 0 0 var(--space-md); padding-left: 1.5rem; font-family: var(--font-mono, monospace); }

/* Paridad tanda 2. `.table td { text-align: left }` (0,1,1) pisaba a `.text-center` y
   `.text-right` (0,1,0): con `.table` delante pesan más y las celdas se alinean como en PlanVital. */
.table .text-center { text-align: center; }
.table .text-right { text-align: right; }

/* Enlace de edición de la primera columna (carpeta y nombre): del tamaño y peso de la tabla,
   no un botón chico. El ícono no se separa del nombre; el nombre largo parte entre palabras. */
.row-link { display: inline-flex; align-items: baseline; gap: 0.4em; max-width: 100%; background: none; border: 0; padding: 0; font: inherit; text-align: left; color: var(--color-primary); cursor: pointer; }
.row-link:hover { text-decoration: underline; }
.row-link > .fa { flex-shrink: 0; }

/* Mi Perfil mientras se entra como otro usuario: «Seleccionar Imagen» (una etiqueta) también se apaga. */
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* S4.2: los botones de página que no se pueden usar, y el «…» entre páginas. */
.table-pagination-btn[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.table-pagination-ellipsis { padding: 6px 4px; color: var(--color-text-secondary); }
/* S4.2: los avisos de un ingreso masivo pueden ser cientos: la caja se recorre. */
.import-errors { max-height: 16rem; overflow-y: auto; }

/* S4.3 · Detalle del caso (Respuesta Detalle). La cabecera con las insignias de la
   retroalimentación a la derecha; tres columnas de datos, cuatro con la de Alimentaria. */
.case-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.case-feedback { display: flex; gap: var(--space-xs); flex-wrap: wrap; justify-content: flex-end; }
.case-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-lg); }
.case-columns--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .case-columns, .case-columns--4 { grid-template-columns: 1fr; } }
.case-column p { margin: 0 0 var(--space-xs); overflow-wrap: anywhere; }
.case-column-title { font-size: var(--text-lg); margin: 0 0 var(--space-sm); }
.case-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-lg); margin-bottom: var(--space-lg); }
.case-files-description { grid-column: span 2; }
@media (max-width: 900px) { .case-files-description { grid-column: auto; } }
/* well well-sm de PlanVital: el texto en una caja gris. */
.case-well { padding: var(--space-sm); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text-secondary); white-space: pre-line; overflow-wrap: anywhere; }
.case-actions { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.case-log-text { white-space: pre-line; overflow-wrap: anywhere; }
/* Botón celeste de PlanVital (btn-info: Derivar Solicitud), oscuro para que el blanco se lea
   (4,6:1). */
.btn-info { background: #007F9C; border-color: #007F9C; color: #fff; }
.btn-info:hover { background: #006A82; border-color: #006A82; color: #fff; }
/* La etiqueta de cada interacción, con los colores de getTipoInterracion de PlanVital. */
.event-label { display: inline-block; padding: 0.1rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 700; color: #fff; }
.event-label--green { background: #0B7A45; }
.event-label--aqua { background: #007F9C; }
.event-label--red { background: var(--color-danger); }
.event-label--blue { background: #1F4F8F; }
.event-label--yellow { background: #B45309; }
.event-label--gray { background: var(--color-text-secondary); }

/* S4.3 · Interacciones Ticket: «Acciones por Ejecutar», con el «+» al lado del rótulo y la «×»
   de cada fila agregada. */
.action-items-head { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.action-items { display: flex; flex-direction: column; gap: var(--space-xs); }
.action-item-row { display: flex; gap: var(--space-xs); }
.action-item-row .form-input { flex: 1; }

/* Celdas de fecha que no se parten (detalle del caso). */
.text-nowrap { white-space: nowrap; }

/* Ayuda (S6.2): los videos en dos columnas, como los col-sm-6 de PlanVital; uno sin archivo,
   con el borde rojo de su caja de peligro. La descripción conserva sus saltos de línea. */
.help-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
@media (max-width: 768px) { .help-videos { grid-template-columns: minmax(0, 1fr); } }
.help-video { padding: var(--space-md); border: 1px solid var(--color-border-light); border-top: 3px solid var(--color-primary); border-radius: var(--radius-md); }
.help-video--missing { border-top-color: var(--color-danger); }
.help-video-title { margin: 0 0 var(--space-sm); font-size: var(--text-base); font-weight: 600; overflow-wrap: anywhere; }
.help-video-description { white-space: pre-line; overflow-wrap: anywhere; }
.help-video video { max-width: 100%; height: auto; }
/* «Cargar Videos» va en media columna, como el col-md-6 de PlanVital, y su botón a la derecha. */
.help-upload { width: 50%; margin-bottom: var(--space-lg); }
@media (max-width: 768px) { .help-upload { width: 100%; } }
.help-upload-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-sm); }
.help-video-actions { margin-top: var(--space-sm); }
/* Barra de comprobantes del detalle (S4.4), alineada a la derecha como en PlanVital. */
.case-receipts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.case-receipts form { display: contents; }

/* «Adjuntar documento» de Respuesta Operaciones, con la «×» que vacía la selección. */
.file-clear-row { display: flex; gap: var(--space-xs); }
.file-clear-row .form-input { flex: 1; }

/* Atención por RUT (S6.1): la columna izquierda (Gestión, Datos Atención e Historial) y la caja
   principal, como los col-md-3 y col-md-9 de PlanVital. Los pasos y el historial con los colores
   de PlanVital: verde hecho o terminado, azul el actual o Respuesta Operaciones, gris lo que
   falta, rojo atrasado y amarillo pendiente. */
.attention-layout { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr); gap: var(--space-lg); align-items: start; }
@media (max-width: 900px) { .attention-layout { grid-template-columns: minmax(0, 1fr); } }
.attention-side { display: grid; gap: var(--space-md); }
.attention-box .card-header { margin-bottom: var(--space-sm); }
.attention-steps, .attention-history { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.attention-step { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: var(--radius-sm); font-weight: 600; color: #fff; }
.attention-step--done { background: var(--color-success); }
.attention-step--current { background: var(--color-primary); }
.attention-step--pending { background: var(--color-bg-muted); color: var(--color-text-secondary); }
.attention-history-item { padding: 6px 10px; border-radius: var(--radius-sm); font-size: var(--text-sm); color: #fff; overflow-wrap: anywhere; }
.attention-history-item--closed { background: var(--color-success); }
.attention-history-item--overdue { background: var(--color-danger); }
.attention-history-item--operations_response { background: var(--color-primary); }
/* El amarillo con texto oscuro: el ámbar de texto sobre el amarillo no llegaba a 4,5:1. */
.attention-history-item--pending { background: var(--color-warning); color: var(--color-text); }
.attention-rut { display: flex; gap: var(--space-sm); }
.attention-rut .form-input { flex: 1; }
.attention-loading { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: var(--space-sm); background: rgba(0, 0, 0, 0.6); color: #fff; font-size: var(--text-xl); font-weight: 700; }
.attention-loading[hidden] { display: none; }

/* La ficha: el aviso de origen y las insignias A, I y O arriba a la derecha de la caja. */
.attention-header { flex-wrap: wrap; align-items: flex-start; gap: var(--space-sm); }
.attention-header-info { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-xs); margin-left: auto; text-align: right; }
.attention-notice { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }
.attention-badges { display: flex; gap: var(--space-xs); margin: 0; }
/* Editor de plantilla (S5.2): el editor a la izquierda y el previsualizador a la derecha, como
   PlanVital (7 y 5 de 12 columnas); en pantallas angostas, uno debajo del otro. Los altos de
   «Título», «Cuerpo» y «Pie de Página» son los de PlanVital: 100, 200 y 100 px. */
.mail-editor-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg); align-items: start; }
@media (max-width: 1024px) { .mail-editor-layout { grid-template-columns: minmax(0, 1fr); } }
.mail-editor--100 { height: 100px; }
.mail-editor--200 { height: 200px; }
.mail-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.mail-tags .form-label { flex: 1 1 100%; margin: 0; }
.mail-tag { border: 0; cursor: pointer; }
.mail-tag:disabled { cursor: default; opacity: 0.6; }
.mail-preview-frame { display: block; width: 100%; height: 1000px; border: 1px solid var(--color-border); background: #fff; }

/* Las acciones faltantes numeradas del detalle (S4.5): el texto conserva sus saltos de línea. */
.missing-action-list { margin: 0 0 var(--space-sm) 1.25rem; padding: 0; }
.missing-action-list li { white-space: pre-line; overflow-wrap: anywhere; }
/* «Continuar como:» de la ficha (S6.3). */
.attention-continue { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.attention-continue > .alert { flex-basis: 100%; }
.attention-continue-label { font-weight: 700; }
/* Datos Atención y Gestión Contacto (S6.3). */
.attention-data { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs) var(--space-sm); margin: 0; font-size: var(--text-sm); }
.attention-data dt { font-weight: 700; }
.attention-data dd { margin: 0; overflow-wrap: anywhere; }
.attention-classifications { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.attention-radio { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 600; }

/* Comprobante de ingreso (S6.3): los datos por bloque y los botones como PlanVital. */
.receipt-title { margin: 0 0 var(--space-md); text-align: center; font-size: var(--text-lg); }
.receipt-block { margin-bottom: var(--space-md); }
.receipt-block-title { margin: 0 0 var(--space-xs); font-size: var(--text-base); }
.receipt-data { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs) var(--space-sm); margin: 0; font-size: var(--text-sm); }
.receipt-data dt { font-weight: 700; }
.receipt-data dd { margin: 0; overflow-wrap: anywhere; }
.receipt-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); }
.receipt-text { margin: var(--space-md) 0; }
.receipt-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); }
.receipt-actions-right { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-left: auto; }

/* Los filtros de las bandejas de equipo (S4.6): Estado Solicitud, Supervisores y Responsables. */
.team-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
@media (max-width: 768px) { .team-filters { grid-template-columns: 1fr; } }

/* La atención por RUT (S6.4): «Cierre» y el Historial enlazan; la carita del Historial y las del
   cierre, que se ven atenuadas hasta que se elige una, como PlanVital. */
.attention-step-link, .attention-history-link { display: flex; flex: 1; justify-content: space-between; gap: var(--space-xs); color: inherit; text-decoration: none; }
.attention-step-link:hover, .attention-history-link:hover { text-decoration: underline; }
.attention-history-item { display: flex; justify-content: space-between; gap: var(--space-xs); }
.attention-history-face { flex: none; }
.attention-survey { border: 0; margin: 0; padding: 0; }
.attention-survey-title { margin-bottom: var(--space-sm); font-size: var(--text-lg); font-weight: 600; }
.attention-faces { display: flex; gap: var(--space-md); }
.attention-faces input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.attention-face { cursor: pointer; padding: var(--space-xs); border-radius: var(--radius-sm); filter: grayscale(1) opacity(0.5); transition: filter 100ms ease-in; }
.attention-face:hover { filter: grayscale(0.5) opacity(0.9); }
.attention-faces input:checked + .attention-face { filter: none; }
.attention-faces input:focus-visible + .attention-face { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.attention-face--red { color: var(--color-danger); }
.attention-face--orange { color: var(--color-warning); }
.attention-face--green { color: var(--color-success); }
.attention-radio--block { display: block; margin: var(--space-xs) 0; }

/* Derivación Múltiple (S10.10): el estado de cada acción faltante en el detalle. */
.missing-action-states { list-style: none; margin: 0 0 var(--space-sm); padding: 0; }
.missing-action-states li { margin-bottom: var(--space-xs); }

/* S10.9: el basurero de un adjunto va en la línea del clip y el nombre. */
.attachment-delete { display: inline; }
/* Marca del cliente (S10.5): la vista del logo guardado y el color guardado junto a su código. */
.brand-logo-preview { max-height: 80px; max-width: 320px; padding: var(--space-sm); border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); background: var(--color-bg-card); }
.brand-color { display: flex; gap: var(--space-sm); align-items: center; max-width: 240px; }
.brand-swatch { width: 2.5rem; height: 2.25rem; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); flex-shrink: 0; }
/* El logo del cliente en el encabezado, en lugar del de Soluticket (S10.5). */
.brand-logo { display: block; max-height: 40px; max-width: 100%; object-fit: contain; }
/* Terminar Ticket como en Fundación (S10.11): el formulario a la izquierda y la vista previa del
   correo a la derecha; en pantallas angostas, uno debajo del otro. */
.modal-dialog--xl { width: min(1100px, calc(100% - 2 * var(--space-lg))); }
.close-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-lg); }
.close-layout > [hidden] { display: none; }
.close-available { border: none; padding: 0; margin: 0 0 var(--space-md); }
.close-preview-frame { width: 100%; height: 560px; border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); background: #fff; }
@media (max-width: 900px) { .close-layout { grid-template-columns: minmax(0, 1fr); } }

/* Contraste y celular (04-10-2026). Una tabla que se desplaza a lo ancho toma el foco (app.js,
   setupScrollRegion), y el foco se ve. */
.table-wrapper:focus-visible, .table-responsive:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Casillas apiladas a 24 px o más, centro a centro, y lejos del campo de arriba (WCAG 2.5.8). */
.form-check { min-height: 24px; }
.form-check + .form-check { margin-top: var(--space-xs); }
.form-input + .form-check { margin-top: var(--space-sm); }

/* El encabezado y el menú en un teléfono. El botón del menú no se achica. */
.navbar-toggle { flex-shrink: 0; }
@media (max-width: 640px) {
  .navbar { gap: var(--space-sm); padding: 0 var(--space-sm) 0 var(--space-md); }
  .navbar-center { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .navbar-actions { gap: var(--space-xs); flex-shrink: 0; }
  .brand-logo { max-width: 96px; }
  /* «Cambiar Avatar» y el nombre quedan para el lector de pantalla: se ven sus íconos. */
  .header-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  /* Los desplegables del encabezado, pegados al borde derecho de la pantalla y sin salirse. */
  .header-dropdown .dropdown-panel { position: fixed; top: calc(var(--navbar-height) + var(--space-xs)); right: var(--space-sm); left: auto; max-width: calc(100vw - 2 * var(--space-sm)); }
  /* Más ancho para el contenido: tarjetas y modales con menos relleno. */
  .card { padding: var(--space-md); }
  .modal-dialog { padding: var(--space-md); }
  /* Una columna, y los botones y filtros pasan a la línea siguiente. */
  .kpi-grid { grid-template-columns: minmax(0, 1fr); }
  .dual-list { grid-template-columns: minmax(0, 1fr); }
  .card-header { flex-wrap: wrap; gap: var(--space-sm); }
  .form-actions { flex-wrap: wrap; }
  .modal-actions { flex-wrap: wrap; }
  .user-menu-actions { flex-wrap: wrap; }
  .wizard-actions { flex-wrap: wrap; }
  /* Campos de 16 px: con menos, Safari agranda la página al enfocarlos. */
  .form-input { font-size: 16px; }
}