/* Ajustes comunes sobre main.css. La marca de cada proyecto (logo y variables de
   color) va en su static/css/brand.css, que se carga después. */
.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; }
.error-page { max-width: 560px; margin: 4rem auto; text-align: center; }

/* Encabezado. */
.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. */
.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; }

/* 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. */
@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; }

/* Modales (<dialog>) con el aspecto de main.css. */
.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); }
.form-actions { display: flex; justify-content: space-between; gap: var(--space-sm); }

/* 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; }
/* `.table td { text-align: left }` (0,1,1) pisaba a `.text-center` y `.text-right` (0,1,0): con
   `.table` delante pesan más. */
.table .text-center { text-align: center; }
.table .text-right { text-align: right; }
/* Paginación en el servidor (pagination.py): los botones que no se pueden usar y el «…». */
.table-pagination-btn[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.table-pagination-ellipsis { padding: 6px 4px; color: var(--color-text-secondary); }

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

/* 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; }

/* Á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); }

/* Interruptor SI/NO: 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; }
.switch input:disabled + .switch-track { opacity: 0.6; cursor: not-allowed; }

/* 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 («Buscar» de la Bitácora), 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; }
/* 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; }

/* Avatares: 42 px en la lista de Usuarios 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 Bitácora). */
.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: #00829F; }
.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; }

/* Bitácora: 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); }

/* Aviso de la suplantación: 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; }

/* Segundo factor: 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: 180px; height: 180px; padding: var(--space-xs); 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); }