:root {
  /* Dynamic Mesh Gradient Palette */
  --color-bg-base: #e0c3fc;
  --color-bg-alt: #8ec5fc;
  
  /* Glassmorphism Surface */
  --color-surface: rgba(255, 255, 255, 0.6);
  --color-surface-solid: #ffffff;
  --color-surface-hover: rgba(255, 255, 255, 0.8);
  --color-glass-border: rgba(255, 255, 255, 0.5);
  --glass-blur: blur(16px);
  
  --color-border: rgba(255, 255, 255, 0.3);
  --color-border-strong: rgba(0, 0, 0, 0.1);
  --color-text: #111827;
  --color-text-muted: #4b5563;
  --color-primary: #4f46e5;
  --color-primary-hover: #4338ca;
  --color-primary-soft: rgba(79, 70, 229, 0.15);
  --color-danger: #ef4444;
  --color-danger-soft: rgba(239, 68, 68, 0.15);
  --color-success: #10b981;
  --color-warning-bg: rgba(255, 251, 235, 0.8);
  --color-warning-border: rgba(253, 230, 138, 0.8);
  --color-warning-text: #92400e;
  --color-bg: #f4f6f9;

  --topbar-height: 64px;
  --sidebar-width: 260px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 10px 25px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-glass: inset 0 0 0 1px var(--color-glass-border), 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}

* {
  box-sizing: border-box;
}

/* Varios componentes fijan su propio "display" (flex, etc.) con la misma
   especificidad que la regla nativa [hidden]{display:none}; al ser CSS de
   autor, esa regla gana sobre la del user-agent y el atributo hidden deja de
   ocultar el elemento. Esta regla restaura el comportamiento esperado. */
[hidden] {
  display: none !important;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(135deg, var(--color-bg-base) 0%, var(--color-bg-alt) 100%);
  background-attachment: fixed;
  color: var(--color-text);
  font-size: 14px;
}

/* ---------- App shell: sidebar + main ---------- */

.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--color-border);
  box-shadow: var(--shadow-glass);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
  z-index: 10;
}

.sidebar.collapsed {
  width: 0;
  border-right-color: transparent;
}

.sidebar__brand {
  padding: 18px 20px;
  font-size: 19px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.sidebar-nav {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.sidebar-nav__item:hover {
  background: var(--color-surface-hover);
  transform: translateX(4px);
}

.sidebar-nav__item.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.sidebar-nav__icon {
  font-size: 18px;
}

.app-shell__main {
  flex: 1;
  min-width: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- Topbar ---------- */

.topbar {
  height: var(--topbar-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  background: var(--color-surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  z-index: 5;
}

.topbar__toggle {
  font-size: 22px;
  transition: transform 0.2s ease;
}
.topbar__toggle:hover {
  transform: scale(1.1);
}

.topbar__title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  background: linear-gradient(90deg, var(--color-text), var(--color-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.topbar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.folder-status {
  font-size: 12.5px;
  color: var(--color-text-muted);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}

.folder-status.linked {
  color: var(--color-success);
  background: #eafaf0;
  border-color: #c7ecd6;
}

/* ---------- Reconnect banner ---------- */

.reconnect-banner {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--color-warning-bg);
  border-bottom: 1px solid var(--color-warning-border);
  color: var(--color-warning-text);
  font-size: 13px;
}

/* ---------- Buttons ---------- */

.btn {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
}

.btn:active {
  transform: scale(0.96);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px 0 rgba(79, 70, 229, 0.39);
}

.btn-primary:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.23);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--color-surface);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--color-text);
  border: 1px solid var(--color-glass-border);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-surface-hover);
  border-color: rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
}

.btn-sm {
  padding: 5px 12px;
  font-size: 12.5px;
}

.btn-danger-text {
  background: transparent;
  color: var(--color-danger);
  border: none;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
}

.btn-danger-text:hover {
  text-decoration: underline;
}

.btn-icon {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.btn-icon:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

/* ---------- Main / Grid section ---------- */

.app-main {
  flex: 1;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.grid-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

.btn-icon-text {
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.dirty-badge {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-warning-text);
  white-space: nowrap;
}

#btn-toggle-filters.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.grid-toolbar__count {
  color: var(--color-text-muted);
  font-size: 13px;
  margin-right: 8px;
}

.save-indicator {
  font-size: 12.5px;
  color: var(--color-success);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.save-indicator.visible {
  opacity: 1;
}

.save-indicator.error {
  color: var(--color-danger);
}

.grid-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* ---------- Data grid ---------- */

.data-grid {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: max-content;
}

.data-grid thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-text-muted);
  font-weight: 600;
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  border-right: none;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

.data-grid thead th.col-field {
  padding: 0;
  text-transform: none;
}

.data-grid thead th.col-rownum,
.data-grid tbody td.col-rownum {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 11;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  text-align: center;
  border-right: 1px solid var(--color-border);
}

.data-grid thead th.col-rownum {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 12;
}

.data-grid tbody td.col-rownum {
  z-index: 1;
  background: rgba(255, 255, 255, 0.4);
  color: var(--color-text-muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  padding: 9px 4px;
}

.data-grid tbody tr:hover td.col-rownum {
  background: #fafbfd;
}

.data-grid thead th.col-add,
.data-grid tbody td.col-add {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  padding: 0;
  text-align: center;
}

.col-add__btn {
  width: 28px;
  height: 28px;
  margin: 4px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-muted);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.col-add__btn:hover:not(:disabled) {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
}

.col-add__btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  box-shadow: none;
}

.data-grid thead th.col-actions {
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  z-index: 12;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
  border-left: none;
}

.data-grid tbody td {
  padding: 0;
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  min-width: 140px;
  max-width: 320px;
  transition: background 0.15s ease;
}

.data-grid tbody tr {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.data-grid tbody tr:hover {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
  z-index: 1;
  position: relative;
}

.data-grid tbody td.col-actions {
  position: sticky;
  right: 0;
  background: rgba(255, 255, 255, 0.4);
  text-align: center;
  min-width: 44px;
  border-left: 1px solid var(--color-border);
}

.data-grid tbody tr:hover td.col-actions {
  background: transparent;
}

/* ---------- Column header content (nombre + menú ⋮) ---------- */

.th-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 12px 4px 14px;
}

.th-name {
  background: transparent;
  border: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 11.5px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  cursor: pointer;
  padding: 6px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.th-name:hover {
  color: var(--color-primary);
}

.th-menu-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}

.th-menu-btn:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

/* ---------- Column popover (menú de columna / agregar columna) ---------- */

.col-popover {
  position: fixed;
  z-index: 200;
  width: 260px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.col-popover__label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.col-popover__select,
.col-popover__name-input,
.col-popover__options-row input {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--color-text);
}

.col-popover__select:focus,
.col-popover__name-input:focus,
.col-popover__options-row input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.col-popover__note {
  font-size: 12px;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-radius: 6px;
  padding: 8px 10px;
  line-height: 1.4;
}

.col-popover__error {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: 6px;
}

.col-popover__apply {
  width: 100%;
}

.col-popover__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 4px 0;
}

.col-popover__delete {
  width: 100%;
  text-align: center;
}

.col-popover__allow-others {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--color-text);
  cursor: pointer;
}

.col-popover__allow-others input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.col-popover__allow-others-hint {
  display: block;
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-text-muted);
  margin-top: -2px;
}

/* ---------- Cells ---------- */

.cell-display {
  display: block;
  width: 100%;
  height: 100%;
  padding: 9px 14px;
  cursor: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 36px;
}

.cell-display:hover {
  background: var(--color-primary-soft);
}

.cell-display.empty {
  color: #b7c0cd;
  font-style: italic;
}

.cell-input {
  width: 100%;
  height: 100%;
  border: 2px solid var(--color-primary);
  outline: none;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
  border-radius: 0;
}

.cell-boolean {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
}

.cell-boolean input[type="checkbox"] {
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

/* ---------- Celda bloqueada (ID/Clave ya asignado) ---------- */

.data-grid tbody td.cell-locked .cell-display {
  cursor: not-allowed;
  color: var(--color-text-muted);
}

.data-grid tbody td.cell-locked {
  background: rgba(15, 23, 42, 0.025);
}

/* ---------- Modal (aviso de sincronización inicial) ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadeIn 0.3s ease;
}

.modal {
  background: var(--color-surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  box-shadow: var(--shadow-md);
  padding: 32px;
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.first-run-modal h2 {
  margin: 0 0 12px;
  font-size: 18px;
}

.first-run-modal p {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.first-run-modal code {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12.5px;
  color: var(--color-text);
}

.first-run-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.first-run-actions .btn {
  width: 100%;
}

.form-error {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
}

/* ---------- Insignias ID/Clave y Etiqueta en el encabezado ---------- */

.field-badge {
  font-size: 11px;
  margin-right: 3px;
}

/* ---------- Reordenar columnas (arrastrar y soltar) ---------- */

.data-grid thead th.col-field {
  position: relative;
  cursor: grab;
}

/* Al pasar el cursor, el <th> sube su z-index para que su handle de
   "insertar columna" (ver abajo) quede por encima de la columna vecina. */
.data-grid thead th.col-field:hover {
  z-index: 7;
}

.data-grid thead th.col-field.dragging {
  opacity: 0.4;
}

.data-grid thead th.col-field.drag-over-left {
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.data-grid thead th.col-field.drag-over-right {
  box-shadow: inset -3px 0 0 var(--color-primary);
}

/* ---------- Insertar columna entre dos existentes ---------- */

/* Se centra verticalmente DENTRO de los límites del <th> (en vez de
   sobresalir por arriba, como antes) sólo se descentra hacia la derecha,
   sobre el borde con la columna vecina. El encabezado de la tabla es
   "position: sticky; top: 0" dentro de un contenedor con overflow:auto
   (.grid-scroll); cualquier contenido que sobresalga por ARRIBA de un
   elemento sticky pegado al borde superior queda recortado por ese overflow,
   así que el botón terminaba oculto justo bajo la barra de encabezados. */
.col-insert-handle {
  position: absolute;
  bottom: -4px;
  right: -12px;
  width: 24px;
  height: 24px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.data-grid thead th.col-field:hover .col-insert-handle,
.col-insert-handle:hover {
  opacity: 1;
}

.col-insert-handle__btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.4);
  border: 2px solid #fff;
  transform: scale(0.8);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

.data-grid thead th.col-field:hover .col-insert-handle__btn {
  transform: scale(0.9);
}

.col-insert-handle:hover .col-insert-handle__btn {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.5);
}

/* ---------- Selección de celda (para copiar/pegar) ---------- */

.data-grid tbody td.cell-selected {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  position: relative;
  z-index: 2;
}

/* ---------- Fila de filtros ---------- */

/* Los <th> normales son sticky (top:0) para fijar el encabezado principal al
   hacer scroll; sin este reseteo, la fila de filtros (que va justo debajo)
   heredaría la misma regla y quedaría superpuesta encima del encabezado. */
.data-grid thead tr.filter-row th {
  position: static !important;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.filter-input {
  width: 100%;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 400;
  text-transform: none;
  padding: 6px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--color-text);
}

.filter-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* ---------- Botones ID/Clave y Etiqueta en el menú de columna ---------- */

.col-popover__flag {
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
}

.col-popover__flag:hover:not(:disabled) {
  background: var(--color-bg);
}

.col-popover__flag.active {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
  cursor: default;
}

/* ---------- Redimensionar columnas ---------- */

.col-resize-handle {
  position: absolute;
  top: 0;
  bottom: 20px; /* Deja espacio para el botón de insertar abajo */
  right: -3px; /* Centrado en el borde */
  width: 6px;
  cursor: col-resize;
  z-index: 8;
}

.col-resize-handle:hover {
  background: var(--color-primary-soft);
}

body.col-resizing {
  cursor: col-resize !important;
  user-select: none;
}

/* ---------- Ordenar por encabezado ---------- */

.sort-arrow {
  margin-left: 4px;
  font-size: 10px;
  color: var(--color-primary);
}

/* ---------- Selección múltiple de filas ---------- */

.data-grid thead th.col-select,
.data-grid tbody td.col-select {
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  text-align: center;
  padding: 0;
}

.col-select input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

#btn-multi-select.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

#btn-delete-selected:not(:disabled) {
  color: var(--color-danger);
}

#delete-selected-count {
  font-weight: 700;
  font-size: 12px;
}

/* ---------- Rango de selección de celdas, relleno, cortar ---------- */

.data-grid tbody td.cell-selected {
  background: var(--color-primary-soft);
  outline: 1.5px solid var(--color-primary);
  outline-offset: -1.5px;
  position: relative;
  z-index: 2;
}

.data-grid tbody td.cell-anchor {
  outline-width: 2px;
}

.data-grid tbody td.cell-fill-preview {
  outline: 1.5px dashed var(--color-primary);
  outline-offset: -1.5px;
  position: relative;
  z-index: 2;
}

.data-grid tbody td.cell-cut-preview {
  outline: 1.5px dashed var(--color-text-muted);
  outline-offset: -1.5px;
  opacity: 0.6;
}

.fill-handle {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border: 1.5px solid #fff;
  border-radius: 1px;
  cursor: crosshair;
  z-index: 9;
}

/* ---------- Campo de tipo Imagen ---------- */

.data-grid tbody td.cell-image {
  text-align: center;
  padding: 6px;
}

.cell-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  flex-shrink: 0;
}

.cell-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cell-avatar--empty {
  color: var(--color-text-muted);
  font-size: 16px;
  font-weight: 600;
}

.cell-avatar:hover {
  border-color: var(--color-primary);
}

.image-modal {
  width: 360px;
  text-align: center;
  position: relative;
}

.image-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 20px;
}

.image-modal__body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  margin: 12px 0 20px;
}

.image-modal__preview {
  max-width: 100%;
  max-height: 260px;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.image-modal__placeholder {
  color: var(--color-text-muted);
  font-size: 13.5px;
  padding: 40px 0;
}

.image-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.image-modal__delete {
  color: var(--color-danger);
}

/* ---------- Modal: pegar datos desde Excel ---------- */

.paste-import-modal {
  width: 560px;
  max-width: calc(100vw - 32px);
}

.paste-import-note {
  font-size: 12.5px;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-radius: 6px;
  padding: 8px 10px;
}

.paste-import-textarea {
  width: 100%;
  min-height: 160px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12.5px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  resize: vertical;
  margin-bottom: 12px;
  background: #fff;
  color: var(--color-text);
}

.paste-import-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* ---------- Filtro de fecha (rango o Año/Mes/Día específico) ---------- */

.date-filter {
  display: flex;
}

.date-filter__btn {
  text-align: left;
  cursor: pointer;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.date-filter__btn.active {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  font-weight: 600;
}

.date-filter__mode-row {
  display: flex;
  gap: 6px;
}

.date-filter__mode-row .col-popover__flag {
  text-align: center;
  font-size: 12px;
  padding: 7px 8px;
}

.date-filter__panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.date-filter__panel input,
.date-filter__panel select {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--color-text);
}

.date-filter__field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.date-filter__actions {
  display: flex;
  gap: 8px;
}

.date-filter__actions .btn {
  flex: 1;
}

/* ---------- Ficha de registro ("hoja de vida") ---------- */

.record-modal {
  width: 640px;
  max-width: calc(100vw - 32px);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #ffffff; /* Override .modal glassmorphism */
  border: none;
}

/* El contenido puede exceder el alto del modal (muchos campos); sólo esta
   franja interna hace scroll, para que el botón de cerrar quede siempre fijo
   arriba a la derecha en vez de desplazarse junto con el contenido. */
.record-modal__scroll {
  min-height: 0;
  overflow-y: auto;
  padding: 32px;
}

.record-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 20px;
  z-index: 1;
  background: var(--color-surface);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 50%;
}

.record-modal__header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 100%);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 8px 32px rgba(0,0,0,0.05);
}

.record-modal__photo {
  flex-shrink: 0;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg);
  border: 4px solid #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.record-modal__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.record-modal__photo--clickable {
  cursor: pointer;
}

.record-modal__photo--clickable:hover {
  border-color: var(--color-primary);
}

.record-modal__photo--empty {
  color: var(--color-text-muted);
  font-size: 32px;
}

.record-modal__heading {
  min-width: 0;
  flex: 1;
}

.record-modal__label {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  line-height: 1.15;
}

.record-modal__key {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 4px 12px;
  border-radius: 12px;
  display: inline-block;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.record-modal__key-name {
  font-weight: 700;
  display: none; /* Hide the prefix name to make it look cleaner like a badge */
}

.record-modal__label-input,
.record-modal__key-input {
  font-family: inherit;
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  background: rgba(255,255,255,0.8);
  color: var(--color-text);
  padding: 6px 10px;
  outline: none;
}

.record-modal__label-input {
  width: 100%;
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 8px;
}

.record-modal__key-input {
  font-size: 13px;
  font-weight: 600;
  padding: 4px 8px;
}

.record-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  padding: 0;
}

.record-modal__field {
  min-width: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.record-modal__field-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 4px;
}

.record-modal__field-value {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: break-word;
}

.record-modal__field-value.empty {
  color: #b7c0cd;
  font-style: italic;
}

.record-modal__field-value input[type="text"],
.record-modal__field-value input[type="number"],
.record-modal__field-value input[type="date"] {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  color: var(--color-text);
  transition: all 0.2s ease;
}

.record-modal__field-value input:hover {
  border-color: #94a3b8;
  background: #ffffff;
}

.required-asterisk {
  color: #ef4444;
  margin-left: 2px;
}

.record-modal__field-value input[type="text"]:focus,
.record-modal__field-value input[type="number"]:focus,
.record-modal__field-value input[type="date"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.record-modal__field-value input[type="checkbox"] {
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.record-modal__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.record-modal__actions-spacer {
  flex: 1;
}

/* ---------- Campana flotante de alertas (# de fila) ---------- */

.rownum-text {
  display: inline-block;
}

.row-alert-bell {
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%) scale(0.85);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--color-surface-solid);
  box-shadow: var(--shadow-sm);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 6;
}

.data-grid tbody td.col-rownum:hover .row-alert-bell {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.row-alert-bell:hover:not(:disabled) {
  background: var(--color-primary-soft);
}

.row-alert-bell:disabled {
  cursor: not-allowed;
  opacity: 0.5 !important;
}

/* ---------- Alertas pendientes dentro de la ficha de registro ---------- */

.record-modal__alerts {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.record-modal__alerts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.record-modal__alerts-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.record-modal__alerts-add {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
}

.record-modal__alerts-add:hover:not(:disabled) {
  text-decoration: underline;
}

.record-modal__alerts-add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.record-modal__alerts-empty {
  font-size: 13px;
  color: var(--color-text-muted);
  font-style: italic;
  padding: 8px 0;
}

.record-modal__alerts-list {
  display: flex;
  flex-direction: column;
}

.pending-alert-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.pending-alert-item__icon {
  font-size: 14px;
  flex-shrink: 0;
}

.pending-alert-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 0;
}

.pending-alert-item__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.pending-alert-item__info:hover .pending-alert-item__name {
  color: var(--color-primary);
  text-decoration: underline;
}

.pending-alert-item__date {
  font-size: 11.5px;
  color: var(--color-text-muted);
}

.pending-alert-item__select {
  flex-shrink: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--color-border-strong);
  background: #fff;
  color: var(--color-text);
}

.pending-alert-item.removing {
  animation: alertCollapse 0.32s ease forwards;
}

@keyframes alertCollapse {
  from {
    opacity: 1;
    max-height: 80px;
  }
  to {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
  }
}

/* ---------- Modal de Alerta (crear / ver / editar) ---------- */

.alert-modal {
  width: 480px;
  max-width: calc(100vw - 32px);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.alert-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 20px;
  z-index: 1;
  background: var(--color-surface);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 50%;
}

.alert-modal__scroll {
  min-height: 0;
  overflow-y: auto;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.alert-modal__title {
  margin: 0;
  padding-right: 32px;
  font-size: 19px;
  font-weight: 700;
}

.alert-modal__origin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-radius: 6px;
  padding: 8px 10px;
}

.alert-modal__origin-link {
  background: transparent;
  border: none;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}

.alert-modal__origin-link:hover {
  text-decoration: underline;
}

.alert-modal__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.alert-modal__input,
.alert-modal__select,
.alert-modal__textarea {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--color-text);
}

.alert-modal__textarea {
  min-height: 70px;
  resize: vertical;
}

.alert-modal__input:focus,
.alert-modal__select:focus,
.alert-modal__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* ---------- Agenda (calendario de alertas) ---------- */

.agenda-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  overflow: hidden;
}

.agenda-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
}

.agenda-toolbar__label {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  min-width: 160px;
  text-transform: capitalize;
}

/* Chip "filtrado por registro de origen" — lo usan tanto Agenda como
   Documentos (ver switchModuleWithFilter en main.js). */
.agenda-filter-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 12px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.agenda-filter-chip__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.18);
  color: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.agenda-filter-chip__clear:hover {
  background: rgba(79, 70, 229, 0.3);
}

.agenda-calendar {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 0 12px 12px;
}

.agenda-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2;
}

.agenda-weekday {
  padding: 10px 8px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.agenda-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(110px, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.agenda-day {
  background: rgba(255, 255, 255, 0.55);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  transition: background 0.15s ease;
}

.agenda-day:hover {
  background: rgba(255, 255, 255, 0.8);
}

.agenda-day--outside {
  background: rgba(255, 255, 255, 0.25);
  opacity: 0.55;
}

.agenda-day--today .agenda-day__number {
  background: var(--color-primary);
  color: #fff;
}

.agenda-day__number {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.agenda-day__chips {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
  overflow: hidden;
}

.agenda-chip {
  --chip-color: var(--color-primary);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--chip-color) 16%, transparent);
  border-left: 3px solid var(--chip-color);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.agenda-chip--closed {
  opacity: 0.55;
  text-decoration: line-through;
}

.agenda-more-btn {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-primary);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 2px 4px;
}

.agenda-more-btn:hover {
  text-decoration: underline;
}

.agenda-popover-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
}

.agenda-popover-item {
  --chip-color: var(--color-primary);
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--chip-color);
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
}

.agenda-popover-item:hover {
  background: var(--color-bg);
}

.agenda-popover-item--closed {
  opacity: 0.6;
  text-decoration: line-through;
}

/* ---------- Premium Alert Modal ---------- */

.alert-modal {
  width: 520px;
  max-width: calc(100vw - 32px);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  border: none;
}

.alert-modal__scroll {
  min-height: 0;
  overflow-y: auto;
  padding: 32px;
}

.alert-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 20px;
  z-index: 10;
  background: var(--color-surface);
  backdrop-filter: blur(4px);
  border-radius: 50%;
}

.alert-modal__title {
  margin: 0 0 24px;
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.alert-modal__origin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-bg);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.alert-modal__origin-link {
  background: transparent;
  border: none;
  color: var(--color-primary);
  font-weight: 700;
  cursor: pointer;
}

.alert-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}

.alert-modal__field {
  min-width: 0;
}

.alert-modal__field--full {
  grid-column: 1 / -1;
}

.alert-modal__input,
.alert-modal__select,
.alert-modal__textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14.5px;
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--color-text);
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
  transition: all 0.2s ease;
}

.alert-modal__input:hover,
.alert-modal__select:hover,
.alert-modal__textarea:hover {
  border-color: #94a3b8;
  background: #ffffff;
}

.alert-modal__input:focus,
.alert-modal__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.alert-modal__textarea {
  min-height: 100px;
  resize: vertical;
}

/* ---------- Premium Select Dropdowns ---------- */

select, .col-popover__select, .date-filter__panel select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 36px 10px 14px !important;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  transition: all 0.2s ease;
  cursor: pointer;
}

select:hover, .col-popover__select:hover, .date-filter__panel select:hover {
  border-color: var(--color-primary-soft);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

select:focus, .col-popover__select:focus, .date-filter__panel select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.alert-modal__select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding: 10px 36px 10px 14px !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

/* ---------- Módulo Documentos: layout (panel jerárquico + tabla) ---------- */

.documents-section {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.documents-hierarchy {
  position: relative;
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--color-border);
  overflow: hidden;
  transition: width 0.2s ease, border-color 0.2s ease;
}

.documents-hierarchy.collapsed {
  width: 0;
  border-right-color: transparent;
}

.documents-hierarchy__header {
  flex-shrink: 0;
  padding: 14px 16px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.documents-hierarchy__tree {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 6px;
}

.documents-hierarchy__empty {
  font-size: 12.5px;
  color: var(--color-text-muted);
  padding: 10px 8px;
  line-height: 1.5;
}

.documents-hierarchy__footer {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding: 8px;
  border-top: 1px solid var(--color-border);
}

.documents-hierarchy__resize {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  z-index: 2;
}

.documents-hierarchy__resize:hover {
  background: var(--color-primary-soft);
}

.documents-hierarchy.collapsed .documents-hierarchy__resize {
  display: none;
}

.documents-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.documents-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
}

.documents-toolbar__spacer {
  flex: 1;
}

.documents-date-filter {
  display: flex;
  gap: 4px;
}

.documents-date-filter input {
  min-width: 0;
}

/* ---------- Árbol de jerarquía ---------- */

.hierarchy-tree {
  display: flex;
  flex-direction: column;
}

.hierarchy-node__row {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
}

.hierarchy-node__arrow {
  flex-shrink: 0;
  width: 18px;
  height: 22px;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 10px;
  cursor: pointer;
  border-radius: 4px;
}

.hierarchy-node__arrow:hover:not(:disabled) {
  background: var(--color-bg);
}

.hierarchy-node__arrow:disabled {
  visibility: hidden;
}

.hierarchy-node__label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.hierarchy-node__label:hover {
  background: var(--color-bg);
}

.hierarchy-node__label.active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.hierarchy-node__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hierarchy-node__count {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-radius: 999px;
  padding: 1px 6px;
}

.hierarchy-node__label.active .hierarchy-node__count {
  background: #fff;
  color: var(--color-primary);
}

.hierarchy-node__children {
  display: flex;
  flex-direction: column;
}

/* ---------- Configurar jerarquía (⚙) ---------- */

.hierarchy-config-modal {
  width: 420px;
  max-width: calc(100vw - 32px);
}

.hierarchy-config-modal__hint {
  margin: 0 0 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.hierarchy-config-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.hierarchy-config-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  cursor: grab;
}

.hierarchy-config-item.dragging {
  opacity: 0.4;
}

.hierarchy-config-item.drag-over {
  border-color: var(--color-primary);
  box-shadow: inset 0 2px 0 var(--color-primary);
}

.hierarchy-config-item__handle {
  color: var(--color-text-muted);
  font-size: 14px;
  cursor: grab;
}

.hierarchy-config-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.hierarchy-config-item__label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
}

/* ---------- Estado de vigencia (Documentos): insignia semáforo ---------- */

.doc-vigencia-badge {
  display: inline-flex;
  align-self: flex-start; /* no estirarse dentro de .alert-modal__field (flex-column) */
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.doc-vigencia-badge--vigente {
  background: rgba(16, 185, 129, 0.15);
  color: #067a55;
}

.doc-vigencia-badge--por-vencer {
  background: var(--color-warning-border);
  color: var(--color-warning-text);
}

.doc-vigencia-badge--vencido {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* ---------- Selector de origen/registro al crear un Documento libre ---------- */

.document-modal__origin-picker {
  display: flex;
  gap: 8px;
}

.document-modal__origin-picker select {
  flex: 1;
  min-width: 0;
}

/* ---------- Custom Select Component ----------
   Regla de diseño generalizada: TODO campo tipo "Lista desplegable" (celdas
   de Trabajadores, filtros, ficha de registro, modal de Documentos) usa este
   único componente — ver createCustomSelect en customSelect.js — para que la
   apariencia y el comportamiento sean siempre los mismos en toda la app. */

.custom-select-container {
  position: relative;
  width: 100%;
}

.custom-select-input {
  width: 100%;
  padding: 8px 32px 8px 12px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--color-text);
  background-color: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: text;
}

.custom-select-input::placeholder {
  color: #9aa4b2;
}

.custom-select-container.open .custom-select-input,
.custom-select-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.custom-select-arrow {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #94a3b8;
  pointer-events: none;
  transition: transform 0.2s ease, color 0.15s ease;
}

.custom-select-container.open .custom-select-arrow {
  color: var(--color-primary);
  transform: translateY(-50%) rotate(180deg);
}

.custom-select-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 264px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-glass-border);
  border-radius: 10px;
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  z-index: 1000;
  padding: 6px;
  transform-origin: top center;
  animation: customSelectPop 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes customSelectPop {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.custom-select-dropdown::-webkit-scrollbar {
  width: 8px;
}

.custom-select-dropdown::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.15);
  border-radius: 999px;
}

.custom-select-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border-strong);
}

.custom-select-toolbar__btn {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: none;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.custom-select-toolbar__btn:hover:not(:disabled) {
  background: rgba(79, 70, 229, 0.25);
}

.custom-select-toolbar__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.custom-select-toolbar__count {
  font-size: 11.5px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.custom-select-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--color-text);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.custom-select-item:hover {
  background-color: var(--color-primary-soft);
}

.custom-select-item.selected {
  color: var(--color-primary);
  font-weight: 600;
}

.custom-select-item__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select-item__check {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--color-primary);
}

.custom-select-item--add {
  color: var(--color-primary);
  font-style: italic;
}

.custom-select-checkbox {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 1.5px solid var(--color-border-strong);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
}

.custom-select-checkbox svg {
  width: 11px;
  height: 11px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.1s ease, transform 0.1s ease;
}

.custom-select-checkbox.checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.custom-select-checkbox.checked svg {
  opacity: 1;
  transform: scale(1);
}

.custom-select-empty {
  padding: 14px 10px;
  text-align: center;
  font-size: 13px;
  color: #94a3b8;
  font-style: italic;
}

/* Modificador para uso dentro de una celda de la grilla (misma altura que
   .cell-input, para no saltar el layout de la fila al entrar en edición). */
.custom-select--cell .custom-select-input {
  border: 2px solid var(--color-primary);
  border-radius: 0;
  padding: 6px 32px 6px 11px;
  font-size: 14px;
  box-shadow: none;
}

.custom-select--cell .custom-select-input:focus {
  box-shadow: none;
}