.p-card {
    padding: 6px;
    margin: 2px;
}


.calls-layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  background: rgba(10, 16, 30, 0.55);
}

/* ── Sidebar ────────────────────────────────────────────── */
.calls-sidebar {
  width: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(10, 16, 30, 0.72);
  overflow: hidden;
  transition: width 0.22s ease;
}

.calls-sidebar.is-open {
  width: 248px;
  border-right: 1px solid rgba(148, 163, 184, 0.12);
}

/* ── Main panel ─────────────────────────────────────────── */
.calls-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.calls-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  background: linear-gradient(180deg, rgba(15, 22, 40, 0.98), rgba(15, 22, 40, 0.9));
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  flex-shrink: 0;
}

.calls-main-header-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.calls-main-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.calls-main-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.calls-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  white-space: nowrap;
  padding: 0.3rem 0.6rem;
  min-height: 32px;
}

.calls-action-label {
  font-size: 0.82rem;
}

/* ── Scrollable list ────────────────────────────────────── */
.calls-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.45rem 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.22) transparent;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* ── List items ─────────────────────────────────────────── */
.calls-list-item {
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.1);
  background: rgba(255, 255, 255, 0.022);
  transition: border-color 0.15s ease, background 0.15s ease;
  overflow: hidden;
}

.calls-list-item:hover {
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.038);
}

.calls-list-item.is-selected {
  border-color: rgba(99, 102, 241, 0.38);
  background: rgba(99, 102, 241, 0.055);
}

.calls-list-item-shell {
  display: flex;
  align-items: stretch;
}

.calls-list-item-main {
  flex: 1;
  min-width: 0;
  text-align: left;
  padding: 0.6rem 0.75rem;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  transition: background 0.12s ease;
  width: 100%;
}

.calls-list-item-main:hover,
.calls-list-item-main:focus-visible {
  background: rgba(255, 255, 255, 0.018);
  outline: none;
}

.calls-list-item-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.32rem;
  padding: 0.45rem 0.55rem;
  flex-shrink: 0;
  border-left: 1px solid rgba(148, 163, 184, 0.07);
}

.calls-list-item-actions .btn {
  min-width: 0;
  min-height: 28px;
  padding: 0.25rem 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  border-radius: 6px;
  white-space: nowrap;
}

.calls-list-main {
  display: grid;
  gap: 0.32rem;
  min-width: 0;
}

.calls-list-topline {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  flex-wrap: wrap;
}

.calls-list-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.calls-list-name {
  min-width: 0;
  color: #f1f5f9;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calls-list-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.calls-list-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(229, 237, 247, 0.62);
  font-size: 0.81rem;
  line-height: 1.4;
}

.calls-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.calls-list .memo-list-action-label {
  display: none;
}

@media (min-width: 900px) {
  .calls-list .memo-list-action-label {
    display: inline;
    margin-left: 0.25rem;
  }
}

/* ── Chips ──────────────────────────────────────────────── */
.calls-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(229, 237, 247, 0.72);
  font-size: 0.75rem;
  white-space: nowrap;
}

.calls-chip.is-linked {
  background: rgba(25, 135, 84, 0.14);
  color: #86efac;
}

/* ── Detail card meta (used in workspace modal) ─────────── */
.calls-meta-row,
.calls-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calls-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.calls-detail-heading {
  min-width: 0;
}

.calls-detail-kicker {
  margin-bottom: 0.2rem;
  color: rgba(191, 219, 254, 0.82);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calls-detail-title {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0;
}

.calls-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.calls-detail-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.calls-detail-actions .btn .btn-label {
  white-space: nowrap;
}

.calls-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.9fr);
  gap: 0.85rem;
  align-items: start;
}

.calls-detail-primary,
.calls-detail-secondary {
  display: grid;
  gap: 0.85rem;
}

.calls-detail-card,
.calls-linked-preview {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025));
  padding: 0.9rem 1rem;
}

.calls-detail-card--hero {
  padding: 1rem 1.05rem;
}

.calls-detail-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.calls-detail-card h6 {
  margin: 0;
}

.calls-detail-lead {
  margin: 0;
  color: rgba(239, 246, 255, 0.96);
  font-size: 1rem;
  line-height: 1.65;
}

.calls-inline-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.calls-fact-pill {
  min-width: 180px;
  flex: 1 1 220px;
  display: grid;
  gap: 0.16rem;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.54);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.calls-fact-label,
.calls-keyline-label,
.calls-timeline-label {
  color: rgba(191, 219, 254, 0.74);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.calls-fact-value,
.calls-keyline-value,
.calls-timeline-value {
  color: rgba(229, 237, 247, 0.94);
  font-size: 0.92rem;
  line-height: 1.4;
}

.calls-linked-block {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.calls-linked-title {
  color: #d1fae5;
  font-weight: 700;
  line-height: 1.35;
}

.calls-linked-copy {
  margin-top: 0.28rem;
  color: rgba(209, 250, 229, 0.8);
  font-size: 0.86rem;
  line-height: 1.45;
}

.calls-keyline {
  display: grid;
  gap: 0.16rem;
  margin-bottom: 0.7rem;
}

.calls-timeline {
  display: grid;
  gap: 0.7rem;
}

.calls-timeline-item {
  display: grid;
  gap: 0.16rem;
  padding-left: 0.8rem;
  border-left: 2px solid rgba(96, 165, 250, 0.28);
}

.calls-info-stack {
  display: grid;
  gap: 0.55rem;
}

.calls-info-row {
  display: grid;
  gap: 0.16rem;
}

.calls-info-label {
  color: rgba(191, 219, 254, 0.74);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.calls-info-value {
  color: rgba(229, 237, 247, 0.92);
  font-size: 0.9rem;
  line-height: 1.45;
}

.calls-contact-picker {
  display: grid;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.calls-contact-results {
  margin-top: 0.6rem;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(7, 11, 20, 0.98);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.calls-contact-option {
  width: 100%;
  display: grid;
  gap: 0.25rem;
  padding: 0.8rem 0.95rem;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: inherit;
  text-align: left;
}

.calls-contact-option:last-child {
  border-bottom: 0;
}

.calls-contact-option:hover,
.calls-contact-option:focus-visible {
  background: rgba(13, 110, 253, 0.12);
  outline: none;
}

.calls-contact-option-title {
  color: #fff;
  font-weight: 600;
}

.calls-contact-option-copy {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.84rem;
  line-height: 1.45;
}

#callEditorModal .calls-comments-card {
  min-height: 70vh;
}

.calls-workspace-modal {
  margin-bottom: 0.85rem;
}

.calls-workspace-details {
  display: grid;
  gap: 0.75rem;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
  #pills-calls {
    height: calc(100vh - 80px);
  }

  .calls-layout {
    flex-direction: column;
    border-radius: 8px;
  }

  .calls-sidebar {
    width: 100% !important;
    max-height: 0;
    border-right: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    transition: max-height 0.28s ease;
    overflow: hidden;
  }

  .calls-sidebar.is-open {
    max-height: 480px;
    overflow-y: auto;
  }

  .calls-list-item-shell {
    position: relative;
  }

  .calls-list-item-actions {
    position: absolute;
    top: 0.38rem;
    right: 0.38rem;
    z-index: 2;
    border-left: 0;
    padding: 0;
    background: transparent;
    gap: 0.25rem;
  }

  .calls-list-item-main {
    padding: 0.6rem 5.8rem 0.65rem 0.7rem;
  }

  .calls-detail-layout {
    grid-template-columns: 1fr;
  }

  .calls-detail-card,
  .calls-detail-card--hero {
    padding: 0.8rem 0.85rem;
  }

  .calls-inline-facts {
    display: grid;
  }

  .calls-detail-actions {
    justify-content: stretch;
  }

  .calls-action-label {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .calls-sidebar.is-open {
    width: 230px;
  }

  .calls-detail-layout {
    grid-template-columns: 1fr;
  }

  .calls-detail-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .calls-fact-pill {
    min-width: 0;
    flex-basis: auto;
  }
}

@media (max-width: 1199.98px) {
  .calls-action-label {
    display: none;
  }

  .calls-action-btn {
    padding-inline: 0.5rem;
    min-width: 32px;
    justify-content: center;
  }
}

/* Notes refresh */
.notes-main-hero {
  background: transparent;
  border: 0;
  padding: 0 0 4px;
}

.notes-main-toolbar {
  padding: 0;
  align-items: flex-start;
}

.notes-stats-strip {
  margin-top: 8px;
  opacity: 0.85;
}

.notes-stat-pill {
  background: rgba(255, 255, 255, 0.05);
}

.notes-folder-dropzone {
  display: grid;
  gap: 8px;
  min-height: 12px;
}

.notes-folder-node > .notes-folder-dropzone {
  margin-left: 18px;
  padding-left: 10px;
  border-left: 1px dashed rgba(255, 255, 255, 0.1);
}

.notes-sortable-ghost {
  opacity: 0.45;
}

.notes-note-fallback {
  opacity: 0 !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

.notes-note-chosen {
  opacity: 0.55;
}

.notes-note-dragging {
  opacity: 0.15;
}

.notes-card-grid {
  min-height: 320px;
}

.notes-workspace-layout {
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 360px);
}

.notes-editor-fields {
  align-content: start;
}

.notes-comments-card,
.notes-comments-list {
  min-height: 0;
}

.notes-comments-list {
  padding-bottom: 1rem;
}

@media (max-width: 991.98px) {
  .notes-workspace-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .notes-side-panel {
    grid-template-rows: auto minmax(260px, 1fr);
  }
}

@media (max-width: 767.98px) {
  .notes-image-modal-grid {
    grid-template-columns: 1fr;
  }

  .notes-image-controls-row {
    grid-template-columns: 1fr;
  }

  .notes-image-preview-stage {
    min-height: 260px;
  }

  #noteWorkspaceModal .modal-body {
    padding: 0.75rem;
    overflow: auto;
  }

  .notes-share-add {
    grid-template-columns: 1fr;
  }

  .notes-folder-node > .notes-folder-dropzone {
    margin-left: 12px;
    padding-left: 8px;
  }
}

/* Tabs nav: moderno, oscuro y minimal */
#formTabs .nav-link {
  background-color: #2c2f36;
  color: #ccc;
  border: 1px solid #444;
  border-bottom: none;
  margin-right: 4px;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  padding: 8px 16px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#formTabs .nav-link:hover {
  background-color: #3a3f47;
  color: #fff;
}

#formTabs .nav-link.active {
  background-color: #0d6efd;
  color: #fff;
  font-weight: 500;
  border-color: #0d6efd #0d6efd #212529;
  z-index: 1;
}

/* Tabs content */
#formTabsContent .tab-pane {
  background-color: #212529;
}


/* Contenedor principal */
.sec-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Cada bloque de sección */
.sec-field {
  flex: 1 1 calc(33.333% - 1rem);
  min-width: 200px;
}

/* Etiqueta fija */
.sec-field__label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  color: #495057;
  font-weight: 500;
}

/* Input minimalista: solo underline */
.sec-field__input {
  width: 100%;
  padding: 0.5rem 0;
  border: none;
  border-bottom: 2px solid #ced4da;
  background: transparent;
  font-size: 1rem;
  color: #212529;
  transition: border-color .2s;
}

/* Placeholder visible */
.sec-field__input::placeholder {
  color: #adb5bd;
  opacity: 1;
}

/* Focus state */
.sec-field__input:focus {
  outline: none;
  border-bottom-color: #007bff;
}

#commentsList {
  /* Forzar compositing layer */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);

  /* Alternativa moderna */
  will-change: transform;
}

#sectionNamesContainer {
  /* Forzar compositing layer */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);

  /* Alternativa moderna */
  will-change: transform;
}


/* Contenedor de previews: fila flexible con wrapping */
#filesFlagContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Cada item de preview */
#filesFlagContainer .file-preview-item {
  position: relative;
  display: flex;
  align-items: center;
  background: #2a2b2e;       /* gris oscuro */
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  min-height: 40px;
  max-width: 100%;
}

/* Texto con nombre, tipo y tamaño */
#filesFlagContainer .file-preview-item .file-info {
  font-size: 0.8rem;
  color: #e4e6eb;            /* casi blanco */
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Botón “×” para eliminar */
#filesFlagContainer .file-preview-item .btn-close {
  margin-left: 0.5rem;
  background: #3c3d42;       /* gris medio */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  padding: 0;
  opacity: 0.8;
  transition: opacity 0.2s;
}

#filesFlagContainer .file-preview-item .btn-close:hover {
  opacity: 1;
}

/* Contenedor general */
#commentsList {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 400px;
  padding: 12px;
  background: transparent;
}

/* ————— Burbujas ————— */
.comment-bubble {
  position: relative;
  max-width: 75%;
  padding: 8px 12px;
  margin-bottom: 16px;
  padding-bottom: 28px;
  font-size: 0.9rem;
  line-height: 1.3;
  word-wrap: break-word;
  color: #e4e6eb;
  background-clip: padding-box;
}

/* Propias (derecha) */
.d-flex.justify-content-end .comment-bubble {
  background: #0084ff;
  margin-left: auto;
  border-radius: 18px 4px 18px 18px;
}

/* Otros (izquierda) */
.d-flex.justify-content-start .comment-bubble {
  background: #383c43;
  margin-right: auto;
  border-radius: 4px 18px 18px 18px;
}

.quoted-msg {
    min-width: 100%;
}

/* ————— Cita dentro de la burbuja ————— */
.comment-bubble .quoted-msg {
  display: block;
  max-width: 80%;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.15);
  border-left: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  font-size: 0.8rem;
  color: #ddd;
  margin-bottom: 8px;
  margin-inline-start: 0;
}

/* Si la burbuja es propia, empuja la cita hacia la derecha */
.d-flex.justify-content-end .comment-bubble .quoted-msg {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

/* ————— Botones dentro de la burbuja ————— */
.comment-bubble .btn-action {
  position: absolute;
  border: none;
  background: transparent;
  padding: 4px;
  opacity: 0.6;
  transition: opacity .2s;
}
.comment-bubble .btn-action:hover {
  opacity: 1;
}
.comment-bubble .btn-reply {
  bottom: 4px;
  left: 4px;
}
.comment-bubble .btn-react-more {
  /* ahora flota dentro de comment-actions */
}

/* ————— Reacciones ————— */
.comment-bubble .comment-actions {
  position: absolute;
  bottom: -14px;
  left: 12px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  font-size: 0.8rem;
  z-index: 1;
}
.comment-bubble .comment-actions .reaction {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: background .2s;
}
.comment-bubble .comment-actions .reaction:hover {
  background: rgba(255, 255, 255, 0.3);
}
.comment-bubble .comment-actions .reaction.reacted {
  background: rgba(0, 200, 0, 0.3);
  font-weight: bold;
}

/* Reacciones en burbujas propias */
.d-flex.justify-content-end .comment-bubble .comment-actions {
  left: auto;
  right: 12px;
}

/* ————— Ajuste responsivo ————— */
@media (max-width: 576px) {
  .comment-bubble { max-width: 90%; }
  .comment-bubble .quoted-msg { max-width: 85%; }
}

/* Indicador de nuevos */
#newCommentsIndicator {
  width: 100%;
  text-align: center;
  cursor: pointer;
}

/* ————— Animación de resaltado moderno ————— */
@keyframes glow-highlight {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.0);
  }
  50% {
    box-shadow: 0 0 8px 4px rgba(255, 165, 0, 0.6);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.0);
  }
}

/* Aplicar glow a la burbuja completa */
.focused-comment .comment-bubble,
.comment-bubble.focused-comment {
  animation: glow-highlight 1.5s ease-in-out;
}

/* Cambiar estilo de la cita al resaltar */
.focused-comment .quoted-msg {
  background: rgba(255, 165, 0, 0.1);
  border-color: rgba(255, 165, 0, 0.6);
  transition: background 0.3s, border-color 0.3s;
}


/* Hover y focus genérico, fondo muy sutil */
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: rgba(var(--bs-primary-rgb), 0.05) !important;
  color: white;
}

/* Badges de estado personalizados */
.badge-status-borrador {
  background-color: #6c757d; /* gris bootstrap */
  color: #fff;
}

.badge-status-en-desarrollo {
  background-color: #0dcaf0; /* cyan bootstrap */
  color: white;
}

.badge-status-pendiente {
  background-color: #ffc107; /* amarillo bootstrap */
  color: #000;
}

.badge-status-esperando-respuesta {
  background-color: #ff922b; /* naranja medio */
  color: #000;
}

.badge-status-esperando-correo {
  background-color: #20c997; /* verde agua */
  color: #000;
}

.badge-status-en-produccion {
  background-color: #0d6efd; /* azul bootstrap */
  color: #fff;
}

.badge-status-esperando-por-isa {
  background-color: #adb5bd; /* gris claro */
  color: #000;
}

.badge-status-analizando {
  background-color: #6610f2; /* púrpura bootstrap */
  color: #fff;
}

.badge-status-con-problemas {
  background-color: #dc3545; /* rojo bootstrap */
  color: #fff;
}

.badge-status-esperando-validacion {
  background-color: #fd7e14; /* naranja oscuro */
  color: #000;
}

.badge-status-completado {
  background-color: #198754; /* verde bootstrap */
  color: #fff;
}

.badge-status-cancelado {
  background-color: #d63384; /* magenta */
  color: #fff;
}

.badge-status-revisado {
  background-color: #0f5132; /* verde oscuro */
  color: #fff;
}

.badge-status-archivado {
  background-color: #6f42c1; /* violeta */
  color: #fff;
}

.badge-status-en-revision {
  background-color: #0dcaf0; /* mismo cyan para revisión */
  color: #000;
}

.badge-status-en-proceso {
  background-color: #0d6efd;
  color: #fff;
}

.badge-status-esperando-informacion {
  background-color: #fd7e14;
  color: #000;
}

/* Ejemplo de uso:
   <span class="badge badge-status-completado">Completado</span>
*/


/*.text-primary:not(.collapsed) {
    background-color: rgba(0, 123, 255, 0.2);
}

.text-success:not(.collapsed) {
    background-color: rgba(40, 167, 69, 0.2);
}

.text-danger:not(.collapsed) {
    background-color: rgba(220, 53, 69, 0.2);
}*/


.editing {
    background-color: #fffacd; /* Ejemplo de color amarillo claro */
    border: 1px solid #ccc;
}

.preview-box {
  display: inline-block;
  width: 180px !important;
  height: 180px !important;
  border-radius: 5px;
  transition: .5s;
  margin-left: 5px;
  /*background-image: url("notes-custom-bg-img/gif/drake.gif");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;*/
}

.preview-box:hover {
  box-shadow: 0px 0px 9px 4px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 0px 0px 9px 4px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 9px 4px rgba(0, 0, 0, 0.75);
  cursor: pointer;
  transition: .5s;
}

.selected-preview {
    box-shadow: 0 0 10px 2px #007bff !important; /* Sombra azul alrededor del elemento */
    opacity: 0.9; /* Ajuste de opacidad para un ligero destaque */
    transition: box-shadow 0.3s ease, opacity 0.3s ease; /* Suaviza la transición */
}

.noborder {
    border: none !important;
}

/* Botón de activación del dropdown en tema oscuro */
.dark-dropdown-btn {
    background-color: #343a40; /* Color de fondo oscuro */
    color: #fff; /* Color de texto blanco */
    border: none; /* Sin borde */
}

.dark-dropdown-btn:hover,
.dark-dropdown-btn:focus {
    background-color: #495057; /* Color más claro al hacer hover o focus */
    color: #fff;
}

/* Menú desplegable en tema oscuro */
.dark-dropdown-menu {
    background-color: #343a40 !important; /* Fondo oscuro para el menú */
    border: 1px solid #495057; /* Borde para el menú */
    color: #fff; /* Texto en blanco */
}

/* Elementos dentro del menú desplegable en tema oscuro */
.dark-dropdown-menu .dark-dropdown-item {
    color: #adb5bd; /* Color gris claro para los elementos */
}

.dark-dropdown-menu .dark-dropdown-item:hover,
.dark-dropdown-menu .dark-dropdown-item:focus {
    background-color: #495057; /* Color de fondo al hacer hover */
    color: #fff; /* Color de texto en blanco al hacer hover */
}

.dark-dropdown-menu .dark-dropdown-item:active {
    background-color: #6c757d; /* Color un poco más claro cuando se selecciona */
    color: #fff;
}

.note-color-select {
    background-color: #343a40 !important;
    color:white;
}


/**********************************************************************/

.users-admin-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.users-toolbar-card {
  position: sticky;
  top: 72px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
}

.users-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
  min-height: 0;
  max-height: none;
  overflow: visible;
  padding-right: 0.25rem;
}

.users-toolbar-card,
.user-list-entry,
.users-activity-panel,
.users-stat-card {
  border: 0;
  border-radius: 6px;
  background: rgba(9, 14, 25, 1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.users-toolbar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}

.users-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.users-toolbar-search {
  display: grid;
  gap: 0.35rem;
  /*max-width: 420px;*/
}

.users-toolbar-search .form-label {
  margin-bottom: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

.users-toolbar-search .form-control {
  min-height: 40px;
}

.users-sidebar-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0.85rem;
}

.users-sidebar-panel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.users-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.85rem;
}

.users-filter-grid-sidebar {
  grid-template-columns: 1fr;
}

.users-filter-grid .form-label {
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

.users-filter-grid .form-control,
.users-filter-grid .form-select {
  min-height: 40px;
}

.users-filter-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.users-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.85rem;
  margin-top: 0;
}

.users-stats-grid-sidebar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.users-stat-card {
  padding: 0.85rem 0.95rem;
}

.users-stat-label {
  display: block;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.66);
}

.users-stat-value {
  display: block;
  font-size: 1.2rem;
  margin-top: 4px;
}

.user-list-entry {
  overflow: hidden;
  color: #f8fafc;
  min-height: 64px;
  height: auto;
  display: flex;
}

.user-list-entry.selected {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}

.user-list-entry-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  width: 100%;
  /*height: 100%;*/
  align-items: stretch;
  gap: 0;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(15, 23, 42, 0.94));
}

.users-switch-row,
.tab-permission-row,
.users-activity-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.user-card-subtitle,
.user-card-label,
.tab-permission-key,
.users-inline-note,
.users-activity-entry span {
  color: rgba(255, 255, 255, 0.65);
}

.user-list-badges,
.user-card-badges,
.user-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-list-badges .badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.3rem 0.65rem;
}

.user-list-badges .bg-secondary {
  background: rgba(100, 116, 139, 0.3) !important;
  color: #e2e8f0 !important;
}

.user-list-badges .bg-danger {
  background: rgba(220, 38, 38, 0.22) !important;
  color: #fecaca !important;
}

.user-list-badges .bg-primary {
  background: rgba(37, 99, 235, 0.22) !important;
  color: #bfdbfe !important;
}

.user-list-badges .bg-success-subtle {
  background: rgba(22, 163, 74, 0.2) !important;
}

.user-list-badges .text-success-emphasis {
  color: #bbf7d0 !important;
}

.user-list-badges .bg-warning {
  background: rgba(245, 158, 11, 0.24) !important;
}

.user-list-badges .text-dark {
  color: #fef3c7 !important;
}

.user-list-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  order: 2;
  flex-wrap: nowrap;
  gap: 0.4rem;
  padding: 0.55rem 0.65rem;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  border-top: 0;
  background: rgba(255, 255, 255, 0.018);
}

.user-list-actions .btn,
.calls-list-item-actions .btn,
.doctracker-list .memo-list-actions .btn {
  min-width: 0;
  width: auto;
  flex: 0 0 auto;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  white-space: nowrap;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
}

.user-list-entry-main {
  display: flex;
  align-items: center;
  order: 1;
  min-width: 0;
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: rgba(255, 255, 255, 0.02);
}

.user-list-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.7rem;
  min-width: 0;
  width: 100%;
}

.user-list-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  min-width: 0;
  flex: 1 1 auto;
}

.user-list-title-row {
  display: flex;
  align-items: center;
  gap: 0.4rem 0.55rem;
  min-width: 0;
  flex-wrap: wrap;
}

.user-list-title {
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  min-width: 0;
}

.user-list-login {
  display: inline-block;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.8rem;
}

.user-list-metrics {
  display: none;
}

.user-list-metrics span {
  display: none;
}

.user-list-metrics span strong {
  display: none;
}

.user-list-action-label,
.doctracker-list .memo-list-action-label {
  display: inline;
}

@media (max-width: 991.98px) {
  .user-list-action-label,
  .memo-list-action-label {
    display: none;
  }
}

@media (min-width: 992px) {
  .user-list-action-label,
  .memo-list-action-label {
    display: inline;
    margin-left: 0.35rem;
  }
}

.users-empty-state {
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.03);
}

.users-inline-note {
  border-left: 3px solid rgba(var(--bs-primary-rgb), 1);
  padding-left: 10px;
}

.users-switch-row {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.users-activity-header {
  margin-bottom: 16px;
}

.users-activity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.users-activity-panel {
  min-height: 360px;
  overflow: hidden;
}

.users-activity-panel-head {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.users-activity-panel-head .btn {
  min-height: 34px;
  white-space: nowrap;
}

.users-activity-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 18px;
  max-height: 58vh;
  overflow-y: auto;
}

.users-activity-list-global {
  max-height: 65vh;
}

.users-activity-entry {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.users-activity-entry-head {
  align-items: flex-start;
  margin-bottom: 10px;
}

.users-activity-entry-body {
  display: grid;
  gap: 6px;
}

.users-audit-meta {
  margin: 8px 0 0;
  padding: 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.24);
  color: rgba(255, 255, 255, 0.72);
  white-space: pre-wrap;
  font-size: 0.82rem;
}

.users-audit-filterbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  gap: 0.85rem;
  margin: -0.2rem -0.2rem 0;
  padding: 0.9rem 1rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(8, 12, 22, 0.98), rgba(10, 16, 28, 0.94));
  backdrop-filter: blur(10px);
}

.users-audit-filterbar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.users-audit-filterbar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.16);
  color: #dbeafe;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.users-audit-filterbar-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(160px, 1fr)) auto;
  gap: 0.75rem;
  align-items: end;
}

.users-audit-filterbar-field {
  display: grid;
  gap: 0.35rem;
}

.users-audit-filterbar-field .form-label {
  margin-bottom: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
}

.users-audit-filterbar-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.users-audit-filterbar-actions .btn {
  min-height: 40px;
}

.users-activity-list-global {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  padding-top: 1rem;
}

#usersGlobalAuditModal .modal-dialog {
  margin: 0;
  height: 100dvh;
}

#usersGlobalAuditModal .modal-content {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#usersGlobalAuditModal .modal-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.tab-permissions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#tabPermissionsModal .modal-dialog {
  margin: 0;
  height: 100dvh;
}

#tabPermissionsModal .modal-content {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#tabPermissionsModal .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.tab-permission-row {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
}

.tab-permission-title {
  font-weight: 600;
}

.tab-permission-row .form-select {
  max-width: 220px;
}

@media (max-width: 1199.98px) {
  .users-stats-grid,
  .users-activity-grid {
    grid-template-columns: 1fr;
  }

  .users-toolbar-head,
  .tab-permission-row {
    flex-direction: column;
    align-items: stretch;
  }

  .users-audit-filterbar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .users-audit-filterbar-field-search {
    grid-column: 1 / -1;
  }

  .tab-permission-row .form-select {
    max-width: none;
  }

  .users-toolbar-search {
    max-width: none;
  }

  .users-list {
    max-height: calc(100vh - 240px);
    overflow-y: auto;
  }

  .user-list-actions {
    flex-wrap: nowrap;
  }
}

@media (max-width: 767.98px) {
  .users-admin-shell {
    gap: 10px;
    min-height: 0;
  }

  .users-toolbar-card {
    top: 60px;
    gap: 0.65rem;
    padding: 0.7rem;
  }

  .users-toolbar-head {
    gap: 8px;
    margin-bottom: 8px;
  }

  .users-toolbar-head h3 {
    font-size: 1rem;
  }

  .users-toolbar-head p {
    font-size: 0.82rem;
  }

  .users-toolbar-actions {
    gap: 6px;
  }

  .users-toolbar-actions .btn {
    min-height: 34px;
    padding: 0.35rem 0.55rem;
    font-size: 0.78rem;
  }

  .users-audit-filterbar {
    gap: 0.65rem;
    margin-inline: -0.1rem;
    padding: 0.8rem 0.8rem 0.9rem;
  }

  .users-audit-filterbar-head {
    flex-direction: column;
    align-items: stretch;
  }

  .users-audit-filterbar-grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .users-audit-filterbar-actions .btn,
  .users-audit-filterbar-field .form-control,
  .users-audit-filterbar-field .form-select {
    width: 100%;
    min-height: 34px;
    font-size: 0.82rem;
  }

  .users-toolbar-search {
    gap: 0.25rem;
  }

  .users-toolbar-search .form-label {
    font-size: 0.74rem;
  }

  .users-toolbar-search .form-control {
    min-height: 34px;
    padding: 0.28rem 0.55rem;
    font-size: 0.82rem;
  }

  .users-filter-grid .form-label {
    font-size: 0.74rem;
    margin-bottom: 0.2rem;
  }

  .users-filter-grid .form-control,
  .users-filter-grid .form-select {
    min-height: 34px;
    padding: 0.28rem 0.55rem;
    font-size: 0.82rem;
  }

  .users-filter-actions .btn {
    width: 100%;
    min-height: 34px;
    padding: 0.35rem 0.55rem;
    font-size: 0.78rem;
  }

  .users-stats-grid-sidebar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .users-stat-card {
    padding: 0.55rem 0.45rem;
  }

  .users-stat-label {
    font-size: 0.64rem;
    letter-spacing: 0.03em;
  }

  .users-stat-value {
    font-size: 0.95rem;
    margin-top: 2px;
  }

  .users-list {
    gap: 10px;
    max-height: calc(100vh - 220px);
  }

  .user-list-entry {
    min-height: 64px;
    height: auto;
  }

  .user-list-entry-shell {
    grid-template-columns: 1fr;
    position: relative;
  }

  .user-list-entry-main {
    padding: 0.55rem 6.15rem 0.65rem 0.65rem;
  }

  .user-list-headline {
    align-items: flex-start;
    gap: 0.4rem;
  }

  .user-list-actions {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 2;
    justify-content: flex-end;
    padding: 0;
    border-left: 0;
    border-top: 0;
    background: transparent;
    flex-wrap: nowrap;
  }

  .user-list-title {
    font-size: 0.9rem;
  }

  .user-list-login {
    font-size: 0.74rem;
  }

  .user-list-actions .btn {
    min-height: 30px;
    padding: 0.28rem 0.42rem;
  }
}
#fullScreenModal .modal-content,
#stockAuditModal .modal-content {
  height: 100vh;
}

#fullScreenModal .modal-body,
#stockAuditModal .modal-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  overflow-x: hidden;
}

/* ─── Stock tab – inner-scroll layout ─────────────────── */
#pills-stock {
  flex-direction: column;
  height: calc(100vh - 110px);
  overflow: hidden;
}

/* Only apply flex layout when the tab is actually active */
#pills-stock.active {
  display: flex !important;
}

.stock-layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  background: rgba(10, 16, 30, 0.55);
}

/* ─── Sidebar ──────────────────────────────────────────── */
.stock-sidebar {
  width: 268px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(10, 16, 30, 0.72);
  overflow: hidden;
  transition: width 0.22s ease;
}

.stock-sidebar.is-collapsed {
  width: 0;
}

.stock-sidebar-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 0.85rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
  flex-shrink: 0;
}

.stock-sidebar-search-icon {
  color: rgba(148, 163, 184, 0.55);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.stock-sidebar-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: #e2e8f0;
  outline: none;
  font-size: 0.875rem;
}

.stock-sidebar-search-input::placeholder {
  color: rgba(148, 163, 184, 0.5);
}

.stock-sidebar-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(229, 237, 247, 0.65);
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.stock-sidebar-search-clear:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.stock-sidebar-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

/* ─── Main panel ───────────────────────────────────────── */
.stock-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.stock-main-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 2rem;
  text-align: center;
}

.stock-main-empty-icon {
  font-size: 2.6rem;
  color: rgba(148, 163, 184, 0.28);
}

.stock-main-empty-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(229, 237, 247, 0.48);
}

.stock-main-empty-sub {
  margin: 0;
  font-size: 0.82rem;
  max-width: 300px;
  line-height: 1.5;
  color: rgba(148, 163, 184, 0.42);
}

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

.stock-main-detail-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.82rem 1rem;
  background: linear-gradient(180deg, rgba(15, 22, 40, 0.98), rgba(15, 22, 40, 0.9));
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  flex-shrink: 0;
}

.stock-main-detail-nav {
  flex-shrink: 0;
}

.stock-back-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(229, 237, 247, 0.8);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.stock-back-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(148, 163, 184, 0.38);
  color: #fff;
}

.stock-main-detail-title-wrap {
  flex: 1;
  min-width: 0;
}

.stock-main-detail-title {
  margin: 0 0 0.1rem;
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stock-main-detail-sub {
  display: block;
  font-size: 0.77rem;
  color: rgba(229, 237, 247, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stock-main-detail-actions-wrap {
  flex-shrink: 0;
}

.stock-main-detail-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.1rem;
  display: grid;
  gap: 1rem;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

/* ─── Sticky operations footer ─────────────────────────── */
.stock-main-detail-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(10, 16, 30, 0.9);
}

.stock-main-detail-footer:empty {
  display: none;
}

.stock-main-detail-footer .btn {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

/* ─── Inactive section — hidden by default (JS overrides with style.display) ── */
.stock-section--inactive {
  display: none;
}

/* ─── Sidebar footer (inactive toggle) ────────────────── */
.stock-sidebar-footer {
  flex-shrink: 0;
  padding: 0.5rem;
  border-top: 1px solid rgba(148, 163, 184, 0.10);
}

.stock-inactive-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(229, 237, 247, 0.6);
  font-size: 0.78rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.stock-inactive-toggle:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(148, 163, 184, 0.3);
  color: rgba(229, 237, 247, 0.85);
}

.stock-inactive-toggle[aria-pressed="true"] {
  background: rgba(255, 193, 7, 0.08);
  border-color: rgba(255, 193, 7, 0.28);
  color: #fde68a;
}

.stock-inactive-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  color: rgba(229, 237, 247, 0.7);
  font-size: 0.68rem;
  font-weight: 700;
}

/* ─── Skeleton loader ──────────────────────────────────── */
@keyframes stockSkelShimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

/* ─── Stock item stat badges (sidebar preview) ─────────── */
.stock-item-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.4rem;
}

.stock-item-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.42rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.stock-item-badge--success {
  background: rgba(25, 135, 84, 0.16);
  color: #86efac;
}

.stock-item-badge--warning {
  background: rgba(255, 193, 7, 0.18);
  color: #fde68a;
}

.stock-item-badge--danger {
  background: rgba(220, 53, 69, 0.16);
  color: #fca5a5;
}

/* ─── Skeleton loader ──────────────────────────────────── */
.stock-skel {
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.07) 0%,
    rgba(148, 163, 184, 0.15) 45%,
    rgba(148, 163, 184, 0.07) 100%
  );
  background-size: 600px 100%;
  border-radius: 5px;
  animation: stockSkelShimmer 1.6s ease-in-out infinite;
}

.stock-skel-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

.stock-skel-card {
  border: 1px solid rgba(148, 163, 184, 0.08);
  border-radius: 10px;
  background: rgba(17, 26, 43, 0.55);
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.55rem;
}

.stock-skel-panel {
  border: 1px solid rgba(148, 163, 184, 0.08);
  border-radius: 10px;
  background: rgba(17, 26, 43, 0.45);
  padding: 1rem;
  display: grid;
  gap: 0.85rem;
}

.stock-skel-shoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr));
  gap: 0.75rem;
}

.stock-skel-shoe {
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.07);
  padding: 0.8rem;
  display: grid;
  gap: 0.5rem;
}

/* ─── Content fade-in on load ──────────────────────────── */
@keyframes stockContentIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stock-details-summary.is-loaded {
  animation: stockContentIn 0.22s ease-out both;
}

/* ─── Feedback inline indicator ────────────────────────── */
.stock-feedback {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
}

.stock-feedback--info  { background: rgba(13,110,253,.15);  color: #93c5fd; }
.stock-feedback--success { background: rgba(25,135,84,.16);  color: #86efac; }
.stock-feedback--error { background: rgba(220,53,69,.16);   color: #fca5a5; }

.stock-refresh-icon.is-spinning {
  display: inline-block;
  animation: stockSpin 0.65s linear infinite;
}

@keyframes stockSpin { to { transform: rotate(360deg); } }

/* ─── Legacy (kept for PDF/print template) ─────────────── */
.stock-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0.85rem;
  border: 0;
  border-radius: 6px;
  background: rgba(17, 26, 43, 0.68);
}

.stock-page-subtitle {
  max-width: 780px;
  color: rgba(229, 237, 247, 0.72);
}

.stock-page-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tab-section-header {
  align-items: center;
  row-gap: 0.6rem;
  margin-bottom: 0.75rem;
  padding: 0.95rem 0.85rem;
  border: 0;
  border-radius: 6px;
  background: rgba(17, 26, 43, 0.68);
}

.tab-section-header h3 {
  margin-bottom: 0;
  font-size: 1.2rem;
}

.tab-section-header .col {
  display: flex;
  align-items: center;
  min-width: 0;
}

.tab-section-header .col.text-end,
.tab-section-actions {
  justify-content: flex-end;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.tab-section-header .form-select {
  min-width: 190px;
  max-width: 250px;
}

.tab-section-header-inline {
  padding: 0.95rem 0.85rem;
  border: 0;
  border-radius: 6px;
  background: rgba(17, 26, 43, 0.68);
}

.doctracker-subtitle,
.stock-page-subtitle,
.users-toolbar-head p[hidden] {
  display: none !important;
}

.stock-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.75rem 0 0.35rem;
  padding: 0 0.35rem;
}

.stock-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(229, 237, 247, 0.55);
  margin: 0;
}

.stock-section-copy {
  margin: 0;
  color: rgba(229, 237, 247, 0.68);
}

.stock-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.stock-list-item {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  background: rgba(17, 26, 43, 0.55);
  color: #fff;
  text-align: left;
  padding: 0.62rem 0.82rem;
  display: grid;
  gap: 0.4rem;
  transition: transform 0.14s ease, border-color 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease;
}

.stock-export-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.stock-list-item:hover,
.stock-list-item.is-selected,
.stock-list-item:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(13, 110, 253, 0.38);
  background: rgba(20, 31, 52, 0.92);
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.22);
  outline: none;
}

.stock-list-item.is-selected {
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.26), inset 0 0 0 1px rgba(96, 165, 250, 0.26);
}

.stock-list-item-copy {
  min-width: 0;
  display: grid;
  gap: 0.18rem;
}

.stock-list-item-title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.stock-list-item-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.stock-list-item-meta {
  color: rgba(229, 237, 247, 0.65);
  font-size: 0.82rem;
}

 .stock-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.38rem 0.62rem;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.stock-status-pill--success {
  background: rgba(25, 135, 84, 0.18);
  color: #b6f0cb;
}

.stock-status-pill--warning {
  background: rgba(255, 193, 7, 0.22);
  color: #ffe69c;
}

.stock-status-pill--danger {
  background: rgba(220, 53, 69, 0.2);
  color: #ffb3bd;
}

.stock-summary-tooltip .tooltip-inner {
  min-width: 220px;
  max-width: 300px;
  text-align: left;
  padding: 0.65rem 0.75rem;
}

.stock-alert-tooltip {
  display: grid;
  gap: 0.38rem;
}

.stock-alert-tooltip__row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  column-gap: 0.45rem;
}

.stock-alert-tooltip__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  display: inline-block;
}

.stock-alert-tooltip__dot--danger {
  background: #ff7b88;
}

.stock-alert-tooltip__dot--warning {
  background: #ffd76a;
}

.stock-alert-tooltip__label {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
  white-space: nowrap;
}

.stock-alert-tooltip__value {
  color: #ffffff;
  font-weight: 700;
  min-width: 0;
  word-break: break-word;
}

.stock-alert-tooltip__empty {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 600;
}

.stock-list-item-stats {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

 .stock-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 34px;
  padding: 0.38rem 0.62rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.78rem;
}

.stock-stat-chip--success {
  background: rgba(25, 135, 84, 0.18);
  color: #b6f0cb;
}

.stock-stat-chip--warning {
  background: rgba(255, 193, 7, 0.2);
  color: #ffe69c;
}

.stock-stat-chip--danger {
  background: rgba(220, 53, 69, 0.2);
  color: #ffb3bd;
}

.stock-details-shell {
  display: grid;
  gap: 1rem;
  min-height: 100%;
  align-content: start;
}

#stockDetailsModal .modal-content {
  height: 100vh;
}

#stockDetailsModal .modal-body {
  overflow-y: auto;
  overflow-x: hidden;
}

.stock-details-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: -1rem -1rem 0;
  padding: 1rem 1rem 0.85rem;
  background: linear-gradient(180deg, rgba(33, 37, 41, 0.98), rgba(33, 37, 41, 0.94));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.stock-details-toolbar-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  min-width: 0;
}

.stock-details-modal-title-wrap {
  min-width: 0;
}

.stock-details-summary {
  display: grid;
  gap: 1rem;
}

section.notes-comments-card {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(17, 26, 43, 0.66);
  box-shadow: none;
  overflow: visible;
}

section.notes-comments-card .notes-side-card-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

section.notes-comments-card .notes-side-card-head h6 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(229, 237, 247, 0.7);
}

section.notes-comments-card .notes-comments-meta {
  font-size: 0.78rem;
  color: rgba(229, 237, 247, 0.45);
}

.stock-detail-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
}

.stock-detail-card {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(17, 26, 43, 0.8);
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.35rem;
}

.stock-detail-card-label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(229, 237, 247, 0.62);
}

.stock-detail-card-value {
  font-size: 1.45rem;
  font-weight: 700;
  color: #fff;
}

.stock-detail-card-copy {
  color: rgba(229, 237, 247, 0.62);
  font-size: 0.8rem;
}

.stock-detail-panel {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 10px;
  background: rgba(17, 26, 43, 0.66);
  padding: 1rem;
  display: grid;
  gap: 0.8rem;
}

.stock-detail-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.stock-detail-panel-head h6 {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 700;
}

.stock-detail-panel-copy {
  margin: 0;
  color: rgba(229, 237, 247, 0.66);
  font-size: 0.82rem;
}

.stock-detail-shoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(165px, 100%), 1fr));
  gap: 0.8rem;
}

 .stock-detail-shoe-chip {
  border-radius: 10px;
  padding: 0.8rem 0.82rem;
  background: rgba(255, 255, 255, 0.05);
  display: grid;
  gap: 0.42rem;
  text-align: left;
  border: 2px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  min-width: 0;
  align-content: start;
}

.stock-detail-shoe-chip strong {
  font-size: clamp(0.8rem, 0.72rem + 0.3vw, 0.9rem);
  min-width: 0;
  line-height: 1.2;
}

.stock-detail-shoe-chip small {
  color: rgba(229, 237, 247, 0.72);
  font-size: clamp(0.68rem, 0.62rem + 0.22vw, 0.74rem);
  line-height: 1.25;
}

.stock-detail-shoe-chip-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
}

 .stock-detail-shoe-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0.1rem 0.38rem;
  border-radius: 6px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1;
}

.stock-detail-shoe-value {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.stock-detail-shoe-value-amount {
  font-size: clamp(1.15rem, 1rem + 0.45vw, 1.35rem);
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

.stock-detail-shoe-value-label {
  color: rgba(229, 237, 247, 0.62);
  font-size: clamp(0.68rem, 0.6rem + 0.26vw, 0.74rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stock-detail-shoe-chip--success {
  border-color: rgba(25, 135, 84, 0.28);
  background: linear-gradient(180deg, rgba(25, 135, 84, 0.12), rgba(17, 26, 43, 0.88));
}

.stock-detail-shoe-chip--warning {
  border-color: rgba(255, 193, 7, 0.34);
  background: linear-gradient(180deg, rgba(255, 193, 7, 0.12), rgba(17, 26, 43, 0.88));
}

.stock-detail-shoe-chip--danger {
  border-color: rgba(220, 53, 69, 0.34);
  background: linear-gradient(180deg, rgba(220, 53, 69, 0.12), rgba(17, 26, 43, 0.88));
}

.stock-detail-shoe-chip--success .stock-detail-shoe-status {
  background: rgba(25, 135, 84, 0.22);
  color: #b6f0cb;
}

.stock-detail-shoe-chip--warning .stock-detail-shoe-status {
  background: rgba(255, 193, 7, 0.2);
  color: #ffe69c;
}

.stock-detail-shoe-chip--danger .stock-detail-shoe-status {
  background: rgba(220, 53, 69, 0.22);
  color: #ffb3bd;
}

.stock-details-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}

/* Toolbar header actions: always icon-only */
.stock-details-actions .btn-label {
  display: none;
}

.stock-action-grid {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.stock-action-grid .btn {
  min-width: 0;
  width: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 32px;
  border-radius: 6px;
  white-space: nowrap;
  padding: 0.35rem 0.6rem;
}

/* ─── Stock responsive ─────────────────────────────────── */

/* Tablet/medium: shrink sidebar, hide most btn labels */
@media (max-width: 991.98px) {
  .stock-sidebar {
    width: 220px;
  }

  #pills-stock .tab-section-header .btn-label {
    display: none;
  }

  #pills-stock [data-bs-target="#createStockLocationModal"] .btn-label {
    display: inline;
  }
}

/* Small screens: hide all labels including primary */
@media (max-width: 575.98px) {
  #pills-stock .tab-section-header .btn-label {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  #pills-stock {
    height: calc(100vh - 80px);
  }

  .stock-layout {
    flex-direction: column;
    border-radius: 8px;
  }

  /* Sidebar: full width, explicit height so inner flex children can scroll */
  .stock-sidebar {
    width: 100% !important;
    flex: 0 0 45vh;
    height: 45vh;
    border-right: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  }

  .stock-sidebar.is-collapsed {
    flex-basis: 0;
    height: 0;
    border-bottom: none;
    overflow: hidden;
  }

  /* When detail is open: hide sidebar, show main full height */
  .stock-layout.has-detail .stock-sidebar {
    display: none;
  }

  .stock-main {
    display: none;
  }

  .stock-layout.has-detail .stock-main {
    display: flex;
    flex: 1;
    min-height: 0;
  }

  .stock-back-btn {
    display: inline-flex !important;
  }

  .stock-list-item {
    padding: 0.6rem 0.78rem;
  }

  .stock-detail-overview {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Detail header: wrap actions below title on very narrow screens */
  .stock-main-detail-header {
    gap: 0.5rem;
  }

  .stock-main-detail-actions-wrap {
    max-width: 100%;
  }

  .stock-details-toolbar-main {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .stock-details-actions {
    justify-content: flex-end;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .stock-action-grid {
    justify-content: flex-end;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .stock-action-grid .btn {
    min-height: 30px;
    padding: 0.28rem 0.42rem;
  }

  .stock-detail-shoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .stock-detail-shoe-chip {
    padding: 0.72rem;
  }

  .stock-detail-shoe-chip-head {
    flex-direction: column;
    align-items: flex-start;
  }
}


@media (max-width: 479.98px) {
  .stock-detail-shoes {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  /* Very small phones: overview in 1 col */
  .stock-detail-overview {
    grid-template-columns: 1fr 1fr;
  }

  /* Tighten sidebar search */
  .stock-sidebar-search-wrap {
    padding: 0.6rem 0.7rem;
  }
}

.stock-accordion {
  border-radius: 6px;
}

.stock-accordion-item {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 6px !important;
  margin-bottom: 0.65rem;
  background: rgba(17, 26, 43, 0.78);
}

.stock-accordion .accordion-button {
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  font-weight: 600;
}

.stock-accordion .accordion-button:not(.collapsed) {
  background: rgba(13, 110, 253, 0.14);
  color: #fff;
  box-shadow: inset 0 -1px 0 rgba(148, 163, 184, 0.14);
}

.stock-accordion .accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.18);
}

.stock-accordion-body {
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.stock-action-row {
  flex-wrap: wrap;
  align-items: stretch;
}

.stock-action-row .btn {
  min-width: 180px;
}

.stock-secondary-row {
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-top: 0.15rem;
}

.stock-secondary-row .btn {
  min-width: 150px;
}

.stock-empty-state {
  padding: 1rem 1.1rem;
  border: 1px dashed rgba(148, 163, 184, 0.22);
  border-radius: 6px;
  color: rgba(229, 237, 247, 0.75);
  background: rgba(17, 26, 43, 0.45);
}

.stock-audit-header {
  margin-bottom: 0;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 6px;
  background: rgba(17, 26, 43, 0.72);
}

.stock-audit-entry-copy {
  margin-top: 0.4rem;
  color: rgba(229, 237, 247, 0.84);
  font-size: 0.84rem;
  line-height: 1.45;
}

.stock-audit-entry-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.stock-audit-detail {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.stock-audit-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.stock-audit-snapshot-card {
  padding: 0.9rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
}

.stock-audit-snapshot-title {
  margin-bottom: 0.65rem;
  font-weight: 600;
}

.stock-audit-snapshot-line {
  color: rgba(229, 237, 247, 0.82);
}

.stock-history-app {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}

.stock-history-shell-head {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  flex: 0 0 auto;
}

.stock-history-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 6px;
  background: rgba(17, 26, 43, 0.82);
}

.stock-history-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.stock-history-filter-group .form-label {
  margin-bottom: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

.stock-history-filter-actions {
  justify-content: flex-end;
}

.stock-history-filter-actions .btn {
  margin-top: auto;
}

.stock-history-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.85rem;
  flex: 0 0 auto;
}

.stock-history-layout {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
}

.stock-history-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.stock-history-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  flex: 0 0 220px;
  min-height: 0;
}

.stock-history-sidebar-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.75rem;
  height: 100%;
  min-height: 0;
  padding: 0.85rem;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(17, 26, 43, 0.68);
}

.stock-history-sidebar-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.72);
}

.stock-history-day-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.15rem;
}

.stock-history-day-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  text-align: left;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.stock-history-day-link:hover,
.stock-history-day-link.is-active {
  background: rgba(13, 110, 253, 0.16);
  border-color: rgba(13, 110, 253, 0.5);
  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.14);
  /*transform: translateX(-2px);*/
}

.stock-history-day-link small {
  color: rgba(255, 255, 255, 0.72);
}

.stock-history-day-nav-empty {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

.stock-history-stat {
  padding: 0.9rem 1rem;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(17, 26, 43, 0.72);
}

.stock-history-stat-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.65);
}

.stock-history-stat-value {
  font-size: 1.35rem;
  line-height: 1;
}

.stock-history-results {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.stock-history-day {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 6px;
  background: rgba(17, 26, 43, 0.7);
  overflow: hidden;
}

.stock-history-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  background: rgba(13, 110, 253, 0.14);
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.stock-history-day-title {
  display: grid;
  gap: 0.15rem;
}

.stock-history-day-marker {
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.76);
}

.stock-history-day-header small {
  color: rgba(255, 255, 255, 0.7);
}

.stock-history-list {
  display: grid;
  flex: 1 1 auto;
  gap: 0.75rem;
  padding: 1rem;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
}

.stock-history-toolbar-sidebar {
  padding: 0;
  border: 0;
  background: transparent;
}

#stockHistorySidebar .stock-history-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#stockAuditSidebar .stock-history-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#stockHistorySidebar .stock-history-sidebar-card {
  max-height: min(48vh, 28rem);
}

.stock-history-entry {
  padding: 1rem 1.05rem;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.035);
}

.stock-history-entry-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.stock-history-entry-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.stock-history-user {
  color: #fff;
}

.stock-history-office {
  color: rgba(255, 255, 255, 0.84);
}

.stock-history-time {
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.14);
  font-size: 0.9rem;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.86);
}

.stock-history-separator {
  color: rgba(255, 255, 255, 0.6);
}

.stock-history-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.stock-history-chip,
.stock-history-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1.2;
}

.stock-history-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.14);
  color: #fff;
}

.stock-history-chip-muted {
  color: rgba(255, 255, 255, 0.7);
}

.stock-history-badge {
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.stock-history-day-nav::-webkit-scrollbar,
.stock-history-list::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.stock-history-day-nav::-webkit-scrollbar-thumb,
.stock-history-list::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.32);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.stock-history-day-nav::-webkit-scrollbar-track,
.stock-history-list::-webkit-scrollbar-track {
  background: transparent;
}

.stock-history-empty {
  display: grid;
  place-items: center;
  gap: 0.75rem;
  min-height: 220px;
  padding: 1.5rem;
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 767.98px) {
  .tab-section-header {
    padding: 0 0 0.25rem;
  }

  .tab-section-header .col,
  .tab-section-actions {
    justify-content: flex-start;
  }

  .tab-section-header .form-select {
    min-width: 100%;
    max-width: none;
  }

  .tab-section-actions .btn,
  .tab-section-actions .form-select {
    flex: 1 1 auto;
  }

  .tab-section-actions .btn {
    min-width: 0;
  }

  .stock-page-header {
    flex-direction: column;
  }

  .stock-audit-entry-head,
  .stock-audit-entry-body {
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .stock-history-toolbar {
    grid-template-columns: 1fr;
  }

  .stock-history-layout {
    flex-direction: column;
  }

  .stock-history-sidebar {
    flex: 0 0 auto;
  }

  .stock-history-sidebar-card {
    height: auto;
  }

  #fullScreenModal .modal-body {
    padding: 0.9rem;
  }

  .stock-history-shell-head .btn {
    width: 100%;
  }

  #stockHistorySidebar .stock-history-summary {
    grid-template-columns: 1fr;
  }

  #stockAuditSidebar .stock-history-summary {
    grid-template-columns: 1fr;
  }

  .stock-history-day-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, 1fr);
    flex: 0 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.2rem;
  }
  .stock-history-entry-top {
    flex-direction: column;
  }

  .stock-audit-detail-grid {
    grid-template-columns: 1fr;
  }

  .stock-audit-entry-actions {
    justify-content: flex-start;
  }
}

:root {
  --app-bg: #0b1220;
  --app-bg-soft: #111a2b;
  --app-surface: rgba(17, 26, 43, 0.88);
  --app-surface-strong: rgba(20, 31, 50, 0.96);
  --app-surface-muted: rgba(255, 255, 255, 0.04);
  --app-border: rgba(148, 163, 184, 0.18);
  --app-border-strong: rgba(148, 163, 184, 0.3);
  --app-text: #e5edf7;
  --app-text-muted: #9fb0c7;
  --app-heading: #f8fbff;
  --app-primary: #3b82f6;
  --app-primary-hover: #2563eb;
  --app-primary-soft: rgba(59, 130, 246, 0.16);
  --app-success: #22c55e;
  --app-warning: #f59e0b;
  --app-danger: #ef4444;
  --app-shadow-lg: 0 24px 60px rgba(2, 8, 23, 0.38);
  --app-shadow-md: 0 12px 28px rgba(2, 8, 23, 0.26);
  --app-radius-xl: 6px;
  --app-radius-lg: 6px;
  --app-radius-md: 6px;
  --app-radius-sm: 6px;
}

html,
body {
  min-height: 100%;
}

body.app-body {
  background: #0f172a;
  color: var(--app-text);
  overflow-x: hidden;
  overflow-y: auto;
}

body.app-body::before {
  content: none;
}

.app-main,
.app-login-shell,
.app-workspace,
.app-navbar {
  position: relative;
  z-index: 1;
}

.app-main {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.app-login-shell {
  padding-block: 2rem;
}

.app-loading-card {
  border-radius: 6px !important;
}

.app-loading-spinner {
  width: 2.2rem;
  height: 2.2rem;
  border-width: 0.24rem;
}

.app-loading-card p {
  color: rgba(255, 255, 255, 0.72);
}

.app-auth-card {
  border: 1px solid var(--app-border-strong) !important;
  border-radius: var(--app-radius-xl) !important;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.92)) !important;
  box-shadow: var(--app-shadow-lg);
  backdrop-filter: blur(14px);
}

.app-auth-card .card-title {
  color: var(--app-heading);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.app-navbar.navbar {
  margin: 0.55rem 0.85rem 0;
  padding: 0.38rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #0d6efd !important;
  box-shadow: 0 4px 16px rgba(13, 110, 253, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  position: sticky;
  top: 0;
  z-index: 1020;
}

.app-navbar .navbar-brand {
  font-weight: 700;
  color: var(--app-heading) !important;
  letter-spacing: 0.03em;
  font-size: 1rem;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.app-navbar .navbar-toggler {
  padding: 0.28rem 0.42rem;
  border-radius: 6px;
  border-color: rgba(255, 255, 255, 0.28);
}

.app-navbar .navbar-toggler:focus {
  box-shadow: none;
}

#pills-tab {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  gap: 0.2rem;
}

#pills-tab .nav-item {
  flex: 1 1 0;
  margin: 0 !important;
}

#pills-tab .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 0.35rem;
  width: 100%;
  min-height: 36px;
  padding: 0.45rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
  font-size: 0.9rem;
  line-height: 1.1;
}

#pills-tab .nav-link i.bi {
  font-size: 1rem;
  flex: 0 0 auto;
  line-height: 1;
}

#pills-tab .nav-link small {
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  margin-left: 0.15rem;
}

#pills-tab .nav-link:hover,
#pills-tab .nav-link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

#pills-tab .nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

@media (min-width: 1200px) {
  #navbarNavDesktop .navbar-collapse {
    justify-content: flex-start;
  }

  #pills-tab {
    flex: 0 1 auto;
    width: auto;
    justify-content: flex-start;
    margin-right: auto;
  }

  #pills-tab .nav-item {
    flex: 0 0 auto;
  }

  #pills-tab .nav-link {
    width: auto;
    justify-content: flex-start;
    padding-inline: 0.7rem;
    white-space: nowrap;
  }
}

.app-workspace {
  --app-workspace-gap: 1rem;
  --app-tab-pane-padding: 0.85rem;
  --app-sticky-top: 72px;
  --app-sticky-secondary-top: 146px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin: var(--app-workspace-gap) !important;
}

.app-tab-content {
  display: block;
}

.app-tab-content > .tab-pane {
  width: 100%;
  padding: var(--app-tab-pane-padding);
  border: 1px solid var(--app-border);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(17, 24, 39, 0.92));
  box-shadow: var(--app-shadow-md);
}

.app-tab-content > .tab-pane.active {
  display: block;
}

#pills-telefonos > .tab-section-header,
#pills-calendar > .tab-section-header,
#pills-stock > .tab-section-header,
#pills-calls > .tab-section-header,
#pills-doctracker > .tab-section-header,
#pills-issue > .tab-section-header,
#pills-forms > .tab-section-header,
#pills-bitacora > .tab-section-header,
#pills-users .users-toolbar-card,
#pills-forms .users-toolbar-card,
#pills-notes .notes-sidebar-app {
  position: sticky;
  top: var(--app-sticky-top);
  z-index: 30;
  margin: 0 calc(var(--app-tab-pane-padding) * -1) 0.75rem !important;
}

/* flex-column panes — sticky no aplica; cancelamos top y padding-top del tab-pane */
#pills-doctracker > .tab-section-header,
#pills-calls > .tab-section-header,
#pills-stock > .tab-section-header,
#pills-calendar > .tab-section-header {
  top: unset;
  margin-top: calc(var(--app-tab-pane-padding) * -1) !important;
}

#pills-telefonos > .tab-section-header,
#pills-calendar > .tab-section-header,
#pills-stock > .tab-section-header,
#pills-calls > .tab-section-header,
#pills-doctracker > .tab-section-header,
#pills-issue > .tab-section-header,
#pills-forms > .tab-section-header,
#pills-bitacora > .tab-section-header,
#pills-users .users-toolbar-card,
#pills-forms .users-toolbar-card,
#pills-notes .notes-sidebar-app {
  padding: 0.95rem var(--app-tab-pane-padding);
  background: #0f172a;
  box-shadow: 0 10px 20px rgba(2, 6, 23, 0.22);
}

#pills-telefonos > .row.mb-2.mt-2,
#pills-doctracker > .input-group.mb-2,
#pills-forms > .row.mb-2.mt-2,
#pills-bitacora > .row.mb-2.mt-2,
#pills-issue > .row:not(.tab-section-header) {
  position: sticky;
  top: var(--app-sticky-secondary-top);
  z-index: 25;
  margin: -0.75rem calc(var(--app-tab-pane-padding) * -1) 0.75rem !important;
  padding: 0 var(--app-tab-pane-padding) 0.95rem;
  background: #0f172a;
}

#pills-telefonos > .row.mb-2.mt-2 .col,
#pills-forms > .row.mb-2.mt-2 .col,
#pills-bitacora > .row.mb-2.mt-2 .col,
#pills-issue > .row:not(.tab-section-header) .col {
  padding-left: 0;
  padding-right: 0;
}

#pills-doctracker > .input-group.mb-2 {
  padding-left: calc(1.15rem + var(--app-tab-pane-padding));
  padding-right: calc(1.15rem + var(--app-tab-pane-padding));
}

#pills-telefonos,
#pills-calendar,
#pills-stock,
#pills-doctracker,
#pills-calls,
#pills-issue,
#pills-notes,
#pills-forms,
#pills-bitacora,
#pills-generadores-v2,
#pills-users {
  min-height: 0;
}

#phoneList,
#issue-container,
#formList,
#logList,
#userList {
  flex: initial;
  min-height: 140px;
  max-height: none !important;
  overflow: visible !important;
}

/* #stockContainer is now the sidebar body — needs its own scroll rules */
#stockContainer {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#pills-notes .notes-shell,
#pills-users > .users-page-shell,
#pills-stock > .stock-page-shell {
  min-height: 0;
  height: auto;
}

#pills-notes .notes-shell {
  height: auto;
}

#pills-generadores-v2.show.active {
  display: block !important;
}

#pills-generadores-v2 .tab-content > .tab-pane.active {
  display: block;
}

.app-main h3,
.app-main h4,
.app-main h5,
.app-main .h3,
.app-main .h4,
.app-main .h5 {
  color: var(--app-heading);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.btn {
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: none;
}

.btn-sm {
  border-radius: 6px;
}

.btn-outline-light,
.btn-outline-danger,
.btn-outline-primary {
  border-width: 1px;
}

.form-control,
.form-select,
.input-group-text,
.contenteditable-input,
.contenteditable-input.form-control {
  border-color: var(--app-border);
  border-radius: 6px;
}

.form-control,
.form-select,
textarea.form-control {
  /*min-height: 44px;*/
  color: var(--app-text);
  background-color: rgba(15, 23, 42, 0.8) !important;
}

.form-control.bg-light,
.form-select.bg-light,
textarea.form-control.bg-light {
  color: #dbe7f5 !important;
  background-color: rgba(30, 41, 59, 0.88) !important;
  border-color: var(--app-border) !important;
}

.form-control.bg-dark,
.form-select.bg-dark,
textarea.form-control.bg-dark {
  background-color: rgba(15, 23, 42, 0.88) !important;
  border-color: var(--app-border) !important;
}

.form-control::placeholder,
.form-select::placeholder,
textarea.form-control::placeholder {
  color: #8fa3bd !important;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus,
.contenteditable-input:focus {
  color: var(--app-heading);
  background-color: rgba(20, 31, 50, 0.96) !important;
  border-color: rgba(96, 165, 250, 0.65) !important;
  box-shadow: 0 0 0 0.24rem rgba(59, 130, 246, 0.18);
}

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child),
.input-group > .btn:not(:first-child),
.input-group > .input-group-text:not(:first-child) {
  margin-left: 0;
}

.input-group > .btn:first-child,
.input-group > .input-group-text:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .btn.btn-outline-light:first-child,
.input-group > .btn.btn-outline-danger:first-child,
.input-group > .btn.btn-outline-primary:first-child {
  border-color: var(--app-border);
}

.input-group > .btn:first-child + .form-control,
.input-group > .btn:first-child + .form-select,
.input-group > .input-group-text:first-child + .form-control,
.input-group > .input-group-text:first-child + .form-select {
  border-left-color: var(--app-border) !important;
}

.app-search-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.app-search-input-wrap .form-control,
.app-search-input-wrap .form-select {
  padding-right: 2.4rem !important;
}

.input-group > .app-search-input-wrap:not(:first-child) > .form-control,
.input-group > .app-search-input-wrap:not(:first-child) > .form-select {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .app-search-input-wrap:not(:last-child) > .form-control,
.input-group > .app-search-input-wrap:not(:last-child) > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .btn:first-child + .app-search-input-wrap > .form-control,
.input-group > .btn:first-child + .app-search-input-wrap > .form-select,
.input-group > .input-group-text:first-child + .app-search-input-wrap > .form-control,
.input-group > .input-group-text:first-child + .app-search-input-wrap > .form-select {
  border-left-color: var(--app-border) !important;
}

.app-search-clear {
  position: absolute;
  top: 50%;
  right: 0.65rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(191, 219, 254, 0.74);
  box-shadow: none;
  z-index: 4;
}

.app-search-clear:hover,
.app-search-clear:focus {
  color: #ffffff;
  background: rgba(59, 130, 246, 0.22);
}

.app-search-clear i,
.app-search-clear svg {
  font-size: 0.95rem;
  line-height: 1;
}

.app-search-clear[hidden] {
  display: none !important;
}

.input-group > .btn:first-child:hover,
.input-group > .btn:first-child:focus,
.input-group > .btn:first-child:active {
  position: relative;
  z-index: 2;
}

.accordion-item,
.list-group-item,
.modal-content,
.card,
.dropdown-menu,
.offcanvas,
.toast,
.fc .fc-scrollgrid,
.fc-theme-standard td,
.fc-theme-standard th {
  border-color: var(--app-border) !important;
}

.accordion-item,
.list-group-item,
.modal-content,
.card,
.dropdown-menu,
.offcanvas {
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(15, 23, 42, 0.94)) !important;
  color: var(--app-text) !important;
  box-shadow: none;
}

.accordion-item,
.card,
.modal-content,
.offcanvas {
  border-radius: 6px !important;
}

.accordion-button {
  color: var(--app-heading) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  box-shadow: none !important;
  border-radius: 6px !important;
}

.accordion-button:not(.collapsed) {
  background: rgba(59, 130, 246, 0.16) !important;
  color: #fff !important;
}

.accordion-button::after {
  filter: brightness(1.6);
}

.calendar-search-accordion {
  margin-top: 0.2rem;
}

.calendar-search-accordion-item {
  border: 0;
  border-radius: 10px !important;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 12px 26px rgba(2, 6, 23, 0.22);
}

.calendar-search-toggle {
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem 1rem;
  color: #e5edf7 !important;
  background: rgba(17, 26, 43, 0.9) !important;
}

.calendar-search-toggle:not(.collapsed) {
  color: #f8fafc !important;
  background: rgba(19, 31, 52, 0.96) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
}

.calendar-search-toggle svg {
  flex: 0 0 auto;
  color: #93c5fd;
}

.calendar-search-toggle-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.calendar-search-toggle-title {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
}

.calendar-search-toggle-subtitle {
  margin-top: 0.15rem;
  color: rgba(229, 237, 247, 0.68);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
}

.calendar-search-body {
  padding: 1rem;
  background: rgba(15, 23, 42, 0.9);
}

.calendar-search-body .row.mb-2.mt-2 {
  margin-top: 0.7rem !important;
}

.calendar-search-panel {
  height: 100%;
  padding: 0.95rem 1rem;
  border-radius: 10px;
  background: rgba(17, 26, 43, 0.84);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.calendar-search-panel-title {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
}

.doctracker-search-slot {
  position: relative;
}

.doctracker-search-slot #searchMemoInput {
  padding-right: 4.8rem;
}

.memo-search-feedback {
  position: absolute;
  top: 50%;
  right: 2.45rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.88);
  color: rgba(229, 237, 247, 0.86);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
  z-index: 4;
}

.memo-search-feedback.is-loading {
  color: #bfdbfe;
}

.memo-search-feedback.is-success {
  color: #d1fae5;
}

.memo-search-feedback.is-empty {
  color: #fde68a;
}

.memo-search-feedback.is-error {
  color: #fecaca;
}

.memo-search-feedback .spinner-border {
  width: 0.82rem;
  height: 0.82rem;
  border-width: 0.14rem;
}

.phone-search-slot {
  position: relative;
}

.phone-search-slot #searchInput {
  padding-right: 4.8rem;
}

.phone-search-feedback {
  position: absolute;
  top: 50%;
  right: 2.45rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.88);
  color: rgba(229, 237, 247, 0.86);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
  z-index: 4;
}

.phone-search-feedback.is-loading {
  color: #bfdbfe;
}

.phone-search-feedback.is-success {
  color: #d1fae5;
}

.phone-search-feedback.is-error {
  color: #fecaca;
}

.phone-search-feedback .spinner-border {
  width: 0.82rem;
  height: 0.82rem;
  border-width: 0.14rem;
}

#eventAccordion {
  margin-top: 0.2rem;
  margin-bottom: 1rem !important;
}

#eventAccordion .accordion-item {
  border: 0;
  overflow: hidden;
  border-radius: 10px !important;
  background: rgba(15, 23, 42, 0.92) !important;
  box-shadow: 0 12px 26px rgba(2, 6, 23, 0.22);
}

#eventAccordion .accordion-button {
  gap: 0.9rem;
  padding: 0.95rem 1rem;
  background: rgba(17, 26, 43, 0.9) !important;
}

#eventAccordion .accordion-button:not(.collapsed) {
  background: rgba(19, 31, 52, 0.96) !important;
}

#eventAccordion .accordion-button svg {
  flex: 0 0 auto;
  margin-right: 0 !important;
  color: #93c5fd;
}

#eventAccordion .accordion-body {
  padding: 1rem;
  background: rgba(15, 23, 42, 0.9);
}

#eventAccordion .accordion-body > h5 {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
}

#eventAccordion .input-group {
  margin-bottom: 1rem !important;
}

#eventAccordion .row.mb-2.mt-2 {
  --bs-gutter-x: 0.9rem;
  --bs-gutter-y: 0.9rem;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#eventAccordion .row.mb-2.mt-2 > .col {
  margin: 0 !important;
}

#eventAccordion .row.mb-2.mt-2 > .col > h5 {
  margin: 0 0 0.7rem !important;
  font-size: 0.92rem;
}

#eventContainer,
#nextEventContainer {
  padding: 0.9rem 1rem !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: rgba(17, 26, 43, 0.84);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.list-group-item {
  margin-bottom: 0.55rem;
  border-radius: 6px !important;
  padding: 0.9rem 1rem;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.28) !important;
}

.badge {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.app-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  min-height: 1.55rem;
  margin-left: 0.48rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(59, 130, 246, 0.18);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.16), rgba(37, 99, 235, 0.24));
  color: #dbeafe;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.app-count-badge > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  overflow: hidden;
  box-shadow: var(--app-shadow-lg);
}

.modal-header,
.modal-footer {
  border-color: var(--app-border) !important;
}

#createMemoModal #memoFiles::file-selector-button {
  background: var(--bs-primary);
  color: #fff;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

#createMemoModal #memoFiles:hover::file-selector-button,
#createMemoModal #memoFiles:focus::file-selector-button {
  background: #0b5ed7;
  color: #fff;
}

.toast {
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.96) !important;
  box-shadow: var(--app-shadow-md);
  backdrop-filter: blur(12px);
}

.toast-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.app-navbar .navbar-toggler {
  padding: 0.3rem 0.45rem;
  border-radius: 6px;
  border-color: rgba(255, 255, 255, 0.28);
}

.app-navbar .navbar-toggler:focus {
  box-shadow: none;
}

.offcanvas-header {
  padding: 0.75rem 0.9rem;
}

.offcanvas-backdrop {
  z-index: 1070 !important;
}

.offcanvas {
  z-index: 1080 !important;
}

.offcanvas-title {
  font-size: 0.98rem;
}

.offcanvas-body {
  padding: 0.75rem;
}

.offcanvas .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.95;
}

.offcanvas .btn-close:hover,
.offcanvas .btn-close:focus {
  opacity: 1;
}

/* ── App Drawer (mobile nav offcanvas) ──────────────────────────────────────── */
.app-drawer {
  background: #0d1117 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 0 10px 0;
  color: #e2e8f0;
  bottom: auto !important;
  height: fit-content !important;
  max-height: calc(100dvh - 1rem);
  overflow-y: auto;
}

.app-drawer .offcanvas-header {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.app-drawer-title {
  color: #e2e8f0 !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  margin: 0;
}

.app-drawer .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.5;
  width: 0.75em;
  height: 0.75em;
}

.app-drawer .btn-close:hover {
  opacity: 0.9;
}

.app-drawer .offcanvas-body {
  padding: 0.6rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.app-drawer-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0.1rem 0;
}

.app-drawer-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 33px;
  padding: 0.38rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
  text-decoration: none;
}

.app-drawer-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.app-drawer-action-btn.is-danger {
  border-color: rgba(248, 113, 113, 0.16);
  color: #fca5a5;
}

.app-drawer-action-btn.is-danger:hover {
  background: rgba(248, 113, 113, 0.09);
  border-color: rgba(248, 113, 113, 0.28);
}

.app-drawer-action-btn i.bi {
  font-size: 0.85rem;
  flex-shrink: 0;
}

#mobileOffcanvas .offcanvas-body .navbar-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.35rem;
  width: 100%;
  align-items: flex-start;
}

#mobileOffcanvas .offcanvas-body .navbar-nav.offcanvas-nav-grid {
  flex-direction: row !important;
}

#mobileOffcanvas .offcanvas-body .navbar-nav .nav-item {
  margin: 0 !important;
  flex: 1 1 calc(50% - 0.35rem);
  min-width: 0;
  width: calc(50% - 0.175rem) !important;
  display: flex;
}

#mobileOffcanvas .offcanvas-body .navbar-nav .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start !important;
  min-height: 34px;
  padding: 0.45rem 0.65rem !important;
  font-size: 0.88rem;
  width: 100% !important;
  height: auto;
}

#mobileOffcanvas .offcanvas-body .navbar-nav .nav-link i.bi {
  font-size: 0.96rem;
  line-height: 1;
  flex: 0 0 auto;
}

#mobileOffcanvas .offcanvas-body .navbar-nav .nav-link small {
  font-size: 0.76rem;
}

#mobileOffcanvas .offcanvas-body .navbar-nav .nav-link:hover,
#mobileOffcanvas .offcanvas-body .navbar-nav .nav-link:focus-visible {
  color: #fff;
  background: rgba(13, 110, 253, 0.18);
  border-color: rgba(13, 110, 253, 0.35);
}

#mobileOffcanvas .offcanvas-body .navbar-nav .nav-link.active {
  color: #fff;
  background: rgba(13, 110, 253, 0.28);
  border-color: rgba(13, 110, 253, 0.50);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* #passwordChangeButton and logout now use .app-drawer-action-btn — no overrides needed */

.app-account-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: 0.75rem;
}

.app-bell-anchor {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  margin-right: 0.65rem;
}

.app-password-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 36px;
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
  white-space: nowrap;
}

.app-password-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.app-password-btn span {
  font-size: 0.76rem;
  line-height: 1;
}

.app-logout-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.42rem 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.86);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}

.app-logout-link span {
  color: rgba(255, 255, 255, 0.72);
}

.app-nav-spinner {
  display: flex;
  align-items: center;
  margin-right: 0.75rem;
  flex-shrink: 0;
}

/* Top loading bar — replaces old spinner, same #loadingIndicator id */
#loadingIndicator {
  display: none; /* shown by JS */
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 99999;
  background: linear-gradient(90deg,
    transparent 0%,
    #3b82f6 25%,
    #60a5fa 50%,
    #93c5fd 65%,
    #3b82f6 80%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: app-loading-bar 1.4s ease-in-out infinite;
  border-radius: 0 0 2px 2px;
  box-shadow: 0 0 8px rgba(59,130,246,.6);
}
@keyframes app-loading-bar {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.custom-link {
  color: var(--app-text-muted);
  text-decoration: none;
  font-weight: 600;
}

.custom-link:hover {
  color: var(--app-heading);
}

.app-logout-link:hover,
.app-logout-link:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

.app-logout-link:hover span,
.app-logout-link:focus span {
  color: rgba(255, 255, 255, 0.88);
}

#phoneList,
#issueList,
#memosList,
#userList,
#boards-container,
#calendar,
#taskAccordion,
#formsList,
#bitacoraList {
  min-height: 140px;
}

.calendar-container {
  position: relative;
  min-height: clamp(420px, 68vh, 860px);
}

.calendar-inline-loader {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
  color: #dbe7f5;
}

.calendar-inline-loader .spinner-border {
  width: 1.15rem;
  height: 1.15rem;
  border-width: 0.16rem;
}

.calendar-feedback {
  position: absolute;
  bottom: 0.32rem;
  left: 0.85rem;
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0.1rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

.calendar-feedback-info {
  color: #dbe7f5;
  background: rgba(59, 130, 246, 0.12);
}

.calendar-feedback-success {
  color: #d1fae5;
  background: rgba(16, 185, 129, 0.14);
}

.calendar-feedback-warning {
  color: #fef3c7;
  background: rgba(245, 158, 11, 0.16);
}

.calendar-feedback-danger {
  color: #fee2e2;
  background: rgba(239, 68, 68, 0.16);
}

/* ── Calendar layout ─────────────────────────────────────────────────────── */
.cal-layout {
  display: flex;
  gap: 0;
  align-items: flex-start;
  min-width: 0;
}

.cal-sidebar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cal-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1999;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.cal-sidebar-header {
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  padding: 0.75rem 1rem;
  flex-shrink: 0;
}

.cal-sidebar-header .offcanvas-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #f1f5f9;
}

#calendarSidebar {
  position: fixed !important;
  top: var(--cal-sb-top, 0px) !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(300px, 85vw) !important;
  transform: translateX(110%) !important;
  visibility: hidden !important;
  transition: transform 0.28s ease-in-out, visibility 0s linear 0.28s !important;
  z-index: 2000 !important;
  background: #0f172a !important;
  box-shadow: -6px 0 32px rgba(0, 0, 0, 0.6) !important;
  border-left: 1px solid rgba(148, 163, 184, 0.12) !important;
}

#calendarSidebar.is-open {
  transform: translateX(0) !important;
  visibility: visible !important;
  transition: transform 0.28s ease-in-out, visibility 0s linear 0s !important;
}

#calendarSidebar .cal-panel-body {
  max-height: none;
  flex: 1;
}

.cal-main {
  flex: 1 1 0;
  min-width: 0;
}

.cal-canvas-wrap {
  position: relative;
  width: 100%;
}

/* ── Sidebar search ──────────────────────────────── */
.cal-sidebar-search {
  padding: 0.6rem 0.65rem 0.45rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.cal-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.cal-search-icon {
  position: absolute;
  left: 0.6rem;
  color: rgba(148, 163, 184, 0.45);
  font-size: 0.78rem;
  pointer-events: none;
}

.cal-search-input {
  width: 100%;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 6px;
  color: #f1f5f9;
  font-size: 0.84rem;
  padding: 0.38rem 1.9rem 0.38rem 1.85rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cal-search-input::placeholder {
  color: rgba(148, 163, 184, 0.45);
}

.cal-search-input:focus {
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.11);
}

.cal-search-clear {
  position: absolute;
  right: 0.35rem;
  background: none;
  border: none;
  color: rgba(148, 163, 184, 0.55);
  padding: 0.1rem 0.28rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.88rem;
  line-height: 1;
  transition: color 0.15s;
}

.cal-search-clear:hover {
  color: #f1f5f9;
}

/* ── Panel tabs ──────────────────────────────────── */
.cal-panel-tabs {
  display: flex;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.cal-panel-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: rgba(148, 163, 184, 0.6);
  font-size: 0.77rem;
  font-weight: 600;
  padding: 0.45rem 0.4rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  text-align: center;
}

.cal-panel-tab:hover {
  color: #f1f5f9;
}

.cal-panel-tab.is-active {
  color: #818cf8;
  border-bottom-color: #818cf8;
}

.cal-results-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  background: rgba(99, 102, 241, 0.28);
  border-radius: 10px;
  font-size: 0.66rem;
  font-weight: 700;
  color: #a5b4fc;
}

/* ── Panel content wrapper ───────────────────────── */
.cal-sidebar-panels {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Sidebar loader — overlaid, no layout shift ──── */
.cal-sidebar-loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.77rem;
  color: rgba(148, 163, 184, 0.65);
  background: rgba(15, 23, 42, 0.88);
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  backdrop-filter: blur(4px);
}

/* ── Panel body ──────────────────────────────────── */
.cal-panel-body {
  overflow-y: auto;
  max-height: none;
  padding: 0.45rem 0.5rem;
  flex: 1;
}

.cal-panel-empty {
  text-align: center;
  color: rgba(148, 163, 184, 0.45);
  font-size: 0.81rem;
  padding: 1.5rem 0.5rem;
  margin: 0;
  line-height: 1.5;
}

.cal-results-stale {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

/* ── Event duration info chips ───────────────────── */
.cal-duration-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-dur-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: .75rem; font-weight: 500; line-height: 1.4;
  border: 1px solid transparent;
}
.cal-dur-chip i { font-size: .7rem; }
.cal-dur-chip--total   { background: rgba(100,116,139,.15); border-color: rgba(100,116,139,.3); color: #94a3b8; }
.cal-dur-chip--biz     { background: rgba(59,130,246,.12);  border-color: rgba(59,130,246,.3);  color: #93c5fd; }
.cal-dur-chip--wknd    { background: rgba(245,158,11,.12);  border-color: rgba(245,158,11,.3);  color: #fcd34d; }
.cal-dur-chip--holiday { background: rgba(239,68,68,.12);   border-color: rgba(239,68,68,.3);   color: #fca5a5; }

/* ── Event chip ──────────────────────────────────── */
.cal-chip {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  background: rgba(30, 41, 59, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.3rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.cal-chip:last-child {
  margin-bottom: 0;
}

.cal-chip:hover {
  background: rgba(99, 102, 241, 0.13);
  border-color: rgba(99, 102, 241, 0.28);
}

.cal-chip:active {
  transform: scale(0.985);
}

.cal-chip-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0.28rem;
}

.cal-chip-body {
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
  min-width: 0;
}

.cal-chip-date {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: #93c5fd;
  line-height: 1;
  margin-bottom: 0.05rem;
}

.cal-chip-date-range {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.05rem;
}

.cal-chip-range-bar {
  flex: 1;
  min-width: 14px;
  height: 1px;
  background: #93c5fd;
  opacity: 0.35;
  border-radius: 1px;
}

.cal-chip-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: #f1f5f9;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.cal-chip-time {
  font-size: 0.71rem;
  color: rgba(148, 163, 184, 0.6);
  line-height: 1;
}

.cal-chip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.18rem;
}

.cal-chip-tag {
  display: inline-block;
  font-size: 0.61rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.08rem 0.3rem;
  border-radius: 3px;
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  white-space: nowrap;
}

.cal-chip-tag--holiday {
  background: rgba(245, 158, 11, 0.18);
  color: #fcd34d;
}

.cal-chip-tag--birthday {
  background: rgba(236, 72, 153, 0.18);
  color: #f9a8d4;
}

.cal-chip-tag--license {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
}

/* ── Event color palette ─────────────────────────── */
.cal-color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cal-color-swatch {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: var(--cal-swatch, rgba(255, 255, 255, 0.12));
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.12s ease, border-color 0.12s, box-shadow 0.12s;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-color-swatch:hover {
  transform: translateY(-2px) scale(1.12);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.cal-color-swatch.is-active {
  border-color: #f8f9fa;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.55);
  transform: scale(1.1);
}

.cal-color-swatch--custom {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.65rem;
}

.cal-color-swatch--custom:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.cal-color-swatch--custom.is-active {
  background: rgba(99, 102, 241, 0.3);
  border-color: #818cf8;
  color: #fff;
}

/* ── Calendar header buttons ─────────────────────── */
.cal-hdr-btn {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.32rem 0.65rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

/* slate — sidebar toggle */
.cal-hdr-btn--slate {
  color: rgba(148, 163, 184, 0.7);
  border-color: rgba(148, 163, 184, 0.22);
}
.cal-hdr-btn--slate:hover {
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.45);
  color: #cbd5e1;
}
.cal-hdr-btn--slate.active {
  background: rgba(148, 163, 184, 0.15);
  border-color: rgba(148, 163, 184, 0.55);
  color: #e2e8f0;
}

/* indigo — weekends toggle */
.cal-hdr-btn--indigo {
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.35);
}
.cal-hdr-btn--indigo:hover {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.55);
  color: #818cf8;
}
.cal-hdr-btn--indigo.active {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.65);
  color: #818cf8;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
}

/* rose — events panel */
.cal-hdr-btn--rose {
  color: #fda4af;
  border-color: rgba(244, 63, 94, 0.35);
}
.cal-hdr-btn--rose:hover {
  background: rgba(244, 63, 94, 0.1);
  border-color: rgba(244, 63, 94, 0.55);
  color: #fb7185;
}
.cal-hdr-btn--rose.active {
  background: rgba(244, 63, 94, 0.18);
  border-color: rgba(244, 63, 94, 0.65);
  color: #fb7185;
}

/* primary — new event */
.cal-hdr-btn--primary {
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}
.cal-hdr-btn--primary:hover {
  background: #0b5ed7;
  border-color: #0a58ca;
  color: #fff;
}
.cal-hdr-btn--primary:active,
.cal-hdr-btn--primary.active {
  background: #0a58ca;
  border-color: #0a53be;
  color: #fff;
}

/* ── Unified events modal ────────────────────────── */

/* Sticky header: tabs + search */
.cal-ev-sticky-top {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #212529; /* app-modal-dark surface */
}

/* Tab strip */
.cal-ev-tabs {
  display: flex;
  padding: 0 0.25rem;
  gap: 0.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.cal-ev-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.75rem 0.5rem 0.6rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: rgba(148, 163, 184, 0.55);
  font-size: 0.77rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.12s;
  white-space: nowrap;
}

.cal-ev-tab i {
  font-size: 0.88rem;
}

.cal-ev-tab:hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.04);
}

/* per-type active colors */
.cal-ev-tab[data-cal-type="special"].is-active  { color: #818cf8; border-bottom-color: #818cf8; }
.cal-ev-tab[data-cal-type="birthday"].is-active { color: #fb7185; border-bottom-color: #fb7185; }
.cal-ev-tab[data-cal-type="license"].is-active  { color: #34d399; border-bottom-color: #34d399; }

/* badge */
.cal-ev-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(148, 163, 184, 0.7);
  transition: background 0.15s, color 0.15s;
}

.cal-ev-tab[data-cal-type="special"].is-active  .cal-ev-badge { background: rgba(99,102,241,.25);  color: #a5b4fc; }
.cal-ev-tab[data-cal-type="birthday"].is-active .cal-ev-badge { background: rgba(251,113,133,.2);  color: #fda4af; }
.cal-ev-tab[data-cal-type="license"].is-active  .cal-ev-badge { background: rgba(52,211,153,.18); color: #6ee7b7; }

/* Search toolbar */
.cal-hol-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.12);
}

.cal-ev-year-select {
  width: auto;
  min-width: 88px;
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.82rem;
  padding-top: 0.28rem;
  padding-bottom: 0.28rem;
}
.cal-ev-year-select option { background: #1e293b; color: #fff; }
.cal-ev-year-select:focus { border-color: #0d6efd; box-shadow: 0 0 0 2px rgba(13,110,253,.25); }

/* List container */
.cal-hol-list {
  padding: 0;
}

/* Month group header — divider style */
.cal-hol-group-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem 0.35rem;
}

.cal-hol-group-header:first-child {
  padding-top: 0.6rem;
}

.cal-hol-group-label {
  font-size: 0.63rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(148, 163, 184, 0.4);
  white-space: nowrap;
}

.cal-hol-group-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(148, 163, 184, 0.1);
}

/* List item */
.cal-hol-item {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border-left: 3px solid var(--hol-color, rgba(148, 163, 184, 0.2));
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.12s;
  cursor: default;
}

.cal-hol-item:last-child {
  border-bottom: none;
}

.cal-hol-item:hover {
  background: rgba(255, 255, 255, 0.035);
}

/* Date column */
.cal-hol-date-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.2rem;
  padding: 0.55rem 0;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.1);
  gap: 0;
}

/* Multi-day timeline variant */
.cal-hol-date-col--range {
  justify-content: flex-start;
  min-height: 68px;
}

.cal-hol-date-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.cal-hol-range-bar {
  width: 2px;
  flex: 1;
  min-height: 12px;
  background: var(--hol-color, rgba(148, 163, 184, 0.35));
  border-radius: 1px;
  opacity: 0.5;
  margin: 3px 0;
}

.cal-hol-day {
  font-size: 1.05rem;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1;
}

.cal-hol-mon {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(148, 163, 184, 0.55);
  margin-top: 0.1rem;
}

/* Content */
.cal-hol-body {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}


.cal-hol-dur-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.cal-hol-dur-chips .cal-dur-chip { font-size: .68rem; padding: 1px 6px; }

.cal-hol-title {
  font-size: 0.87rem;
  font-weight: 500;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.cal-hol-item:hover .cal-hol-title {
  color: #f8fafc;
}

.cal-hol-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cal-hol-year {
  font-size: 0.68rem;
  color: rgba(148, 163, 184, 0.45);
  font-weight: 500;
}

.cal-hol-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.05rem 0.32rem;
  border-radius: 3px;
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.25);
}

/* Actions */
.cal-hol-actions {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  padding: 0 0.35rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.cal-hol-item:hover .cal-hol-actions {
  opacity: 1;
}

.cal-hol-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: rgba(148, 163, 184, 0.6);
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.cal-hol-action-btn:hover {
  background: rgba(148, 163, 184, 0.12);
  color: #e2e8f0;
}

.cal-hol-action-btn--danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

.cal-hol-action-btn--view {
  color: #818cf8;
}

.cal-hol-action-btn--view:hover {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
}

/* Empty state */
.cal-hol-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  color: rgba(148, 163, 184, 0.5);
  font-size: 0.84rem;
  padding: 3rem 2rem;
  line-height: 1.7;
}

.cal-hol-empty strong {
  color: rgba(148, 163, 184, 0.7);
  font-weight: 600;
}

.cal-hol-empty span {
  font-size: 0.78rem;
}

.cal-hol-empty-icon {
  font-size: 2.2rem;
  opacity: 0.25;
  margin-bottom: 0.25rem;
  display: block;
}

/* ── Creator/editor note ─────────────────────────── */
.cal-event-creator-note {
  margin-top: 0.75rem;
  padding: 0.6rem 0.85rem;
  background: rgba(99, 102, 241, 0.07);
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-left: 3px solid rgba(99, 102, 241, 0.45);
  border-radius: 0.375rem;
  font-size: 0.77rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.55;
}

.cal-event-creator-note strong {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}

.cal-event-creator-note i {
  opacity: 0.7;
}

/* ── Optimistic event: pulse + spinner overlay ───── */
.cal-optimistic-event {
  opacity: 0.65 !important;
}

.cal-event-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.22);
  border-radius: inherit;
  z-index: 2;
}

.cal-event-loading-overlay::after {
  content: '';
  width: 11px;
  height: 11px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-top-color: transparent;
  border-radius: 50%;
  animation: calSpinAnim 0.65s linear infinite;
  flex-shrink: 0;
}

@keyframes calSpinAnim {
  to { transform: rotate(360deg); }
}

/* ── Responsive ──────────────────────────────────── */

/* sm and below */
@media (max-width: 767.98px) {
  .cal-chip-title {
    max-width: 100%;
  }

  #calToggleWeekendsBtn .btn-label,
  #calendarNewEventBtn .btn-label {
    display: none;
  }

  .fullcalendar-custom .fc-toolbar-title {
    font-size: 1rem;
  }

  .fullcalendar-custom .fc-button {
    padding: 0.25rem 0.45rem;
    font-size: 0.8rem;
  }
}

/* xs */
@media (max-width: 575.98px) {
  .fullcalendar-custom .fc-toolbar-title {
    font-size: 0.9rem;
  }

  .fullcalendar-custom .fc-button {
    padding: 0.18rem 0.38rem;
    font-size: 0.75rem;
  }
}

.tab-pane .row:first-child {
  align-items: center;
  margin-bottom: 0.9rem;
}

.tab-pane .row:first-child h3,
.tab-pane .row:first-child h4 {
  margin-bottom: 0;
}

.tab-pane .input-group,
.tab-pane .collapse,
.tab-pane .accordion,
.tab-pane .list-group {
  border-radius: 6px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 999px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 991.98px) {
  .app-navbar.navbar {
    margin: 0.4rem 0.4rem 0;
    padding: 0.32rem 0.5rem;
    border-radius: 7px;
  }

  .app-workspace {
    --app-workspace-gap: 0.75rem;
    --app-tab-pane-padding: 0.75rem;
    --app-sticky-top: 66px;
    --app-sticky-secondary-top: 132px;
    padding-inline: 0.15rem;
  }

  .app-tab-content > .tab-pane {
    padding: 0.9rem;
    border-radius: 6px;
  }

  #pills-telefonos .tab-section-header .btn,
  #pills-calendar .tab-section-header .btn,
  #pills-stock .stock-page-header .btn,
  #pills-doctracker .tab-section-header .btn,
  #pills-issue .tab-section-header .btn,
  #pills-notes .notes-sidebar-app .btn,
  #pills-forms .tab-section-header .btn,
  #pills-bitacora .tab-section-header .btn,
  #pills-generadores-v2 .tab-section-header .btn,
  #pills-users .users-toolbar-card .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 2.2rem;
    min-height: 2.2rem;
    padding-inline: 0.55rem;
    font-size: 0;
  }

  #pills-telefonos .tab-section-header .btn svg,
  #pills-calendar .tab-section-header .btn svg,
  #pills-stock .stock-page-header .btn svg,
  #pills-doctracker .tab-section-header .btn svg,
  #pills-issue .tab-section-header .btn svg,
  #pills-notes .notes-sidebar-app .btn svg,
  #pills-forms .tab-section-header .btn svg,
  #pills-bitacora .tab-section-header .btn svg,
  #pills-generadores-v2 .tab-section-header .btn svg,
  #pills-users .users-toolbar-card .btn svg,
  #pills-telefonos .tab-section-header .btn i,
  #pills-calendar .tab-section-header .btn i,
  #pills-stock .stock-page-header .btn i,
  #pills-doctracker .tab-section-header .btn i,
  #pills-issue .tab-section-header .btn i,
  #pills-notes .notes-sidebar-app .btn i,
  #pills-forms .tab-section-header .btn i,
  #pills-bitacora .tab-section-header .btn i,
  #pills-generadores-v2 .tab-section-header .btn i,
  #pills-users .users-toolbar-card .btn i {
    font-size: 1rem;
    margin: 0 !important;
  }

  #pills-telefonos .tab-section-header .btn .btn-label,
  #pills-calendar .tab-section-header .btn .btn-label,
  #pills-stock .stock-page-header .btn .btn-label,
  #pills-doctracker .tab-section-header .btn .btn-label,
  #pills-issue .tab-section-header .btn .btn-label,
  #pills-notes .notes-sidebar-app .btn .btn-label,
  #pills-forms .tab-section-header .btn .btn-label,
  #pills-bitacora .tab-section-header .btn .btn-label,
  #pills-generadores-v2 .tab-section-header .btn .btn-label,
  #pills-users .users-toolbar-card .btn .btn-label {
    display: none;
  }
}

@media (max-width: 1399.98px) {
  #pills-tab .nav-link {
    min-height: 34px;
    padding: 0.42rem 0.45rem;
  }

  #pills-tab .nav-link i.bi {
    font-size: 0.92rem;
  }

  #pills-tab .nav-link small {
    font-size: 0.7rem;
  }
}

@media (max-width: 1199.98px) {
  .app-navbar .navbar-brand {
    font-size: 0.95rem;
    margin-right: 0.5rem;
  }

  .app-navbar .navbar-toggler {
    padding: 0.25rem 0.4rem;
  }

  .app-account-actions {
    display: none;
  }

  .app-bell-anchor {
    margin-right: 0.5rem;
  }
}

@media (max-width: 767.98px) {
  .app-workspace {
    --app-workspace-gap: 0.5rem;
    --app-tab-pane-padding: 0.7rem;
    --app-sticky-top: 60px;
    --app-sticky-secondary-top: 122px;
  }
}

@media (max-width: 575.98px) {
  #mobileOffcanvas .offcanvas-body .navbar-nav .nav-item {
    flex-basis: 100%;
    width: 100% !important;
  }
}
/* NOTES COLORS */

.board-primary {
  background-color: #5b9dfd !important; /* Color primario suavizado */
  color: #000 !important;
}

.board-secondary {
  background-color: #a3a8ad !important; /* Color secundario suavizado */
  color: #000 !important;
}

.board-success {
  background-color: #5bc489 !important; /* Color de éxito suavizado */
  color: #000 !important;
}

.board-danger {
  background-color: #e77a87 !important; /* Color de peligro suavizado */
  color: #000 !important;
}

.board-warning {
  background-color: #ffd966 !important; /* Color de advertencia suavizado */
  color: #000 !important;
}

.board-info {
  background-color: #66e4f7 !important; /* Color de información suavizado */
  color: #000 !important;
}

.board-light {
  background-color: #f1f2f3 !important; /* Color claro suavizado */
  color: #000 !important;
}

.board-dark {
  background-color: #2e3135 !important; /* Color oscuro suavizado */
  color: #000 !important;
}

.board-purple {
  background-color: #b19cd9 !important; /* Suavizado púrpura */
  color: #000 !important;
}

.board-pink {
  background-color: #ffb6c1 !important; /* Suavizado rosado */
  color: #000 !important;
}

.board-teal {
  background-color: #66b2b2 !important; /* Suavizado verde azulado */
  color: #000 !important;
}

.board-coral {
  background-color: #ff7f50 !important; /* Suavizado coral */
  color: #000 !important;
}

.board-mint {
  background-color: #98ff98 !important; /* Suavizado menta */
  color: #000 !important;
}

.board-amber {
  background-color: #ffbf00 !important; /* Suavizado ámbar */
  color: #000 !important;
}

.board-lavender {
  background-color: #e6e6fa !important; /* Suavizado lavanda */
  color: #000 !important;
}

.board-olive {
  background-color: #b5c38e !important; /* Suavizado oliva */
  color: #000 !important;
}

.board-navy {
  background-color: #7895b2 !important; /* Suavizado azul marino */
  color: #000 !important;
}

.board-salmon {
  background-color: #ff9e9e !important; /* Suavizado salmón */
  color: #000 !important;
}

.board-cream {
  background-color: #fffdd0 !important; /* Suavizado crema */
  color: #000 !important;
}

.board-peach {
  background-color: #ffdab9 !important; /* Suavizado durazno */
  color: #000 !important;
}

.board-turquoise {
  background-color: #40e0d0 !important; /* Suavizado turquesa */
  color: #000 !important;
}

.board-burgundy {
  background-color: #800020 !important; /* Suavizado borgoña */
  color: #000 !important;
}

.board-lime {
  background-color: #d4ff88 !important; /* Suavizado lima */
  color: #000 !important;
}

.board-sky {
  background-color: #87ceeb !important; /* Suavizado cielo */
  color: #000 !important;
}

.board-tan {
  background-color: #d2b48c !important; /* Suavizado beige */
  color: #000 !important;
}

.board-gold {
  background-color: #ffd700 !important; /* Suavizado dorado */
  color: #000 !important;
}

.board-charcoal {
  background-color: #36454f !important; /* Suavizado carbón */
  color: white !important;
}

.board-silver {
  background-color: #c0c0c0 !important; /* Suavizado plateado */
  color: #000 !important;
}

.column-primary {
  background-color: transparent !important;
  color: #fff !important;
}

.column-secondary {
  background-color: transparent !important;
  color: #fff !important;
}

.column-success {
  background-color: transparent !important;
  color: #fff !important;
}

.column-danger {
  background-color: transparent !important;
  color: #fff !important;
}

.column-warning {
  background-color: transparent !important;
  color: #fff !important;
}

.column-info {
  background-color: transparent !important;
  color: #fff !important;
}

.column-light {
  background-color: transparent !important;
  color: #fff !important;
}

.column-dark {
  background-color: transparent !important;
  color: #fff !important;
}

.column-purple {
  background-color: transparent !important;
  color: #fff !important;
}

.column-pink {
  background-color: transparent !important;
  color: #fff !important;
}

.column-teal {
  background-color: transparent !important;
  color: #fff !important;
}

.column-coral {
  background-color: transparent !important;
  color: #fff !important;
}

.column-mint {
  background-color: transparent !important;
  color: #fff !important;
}

.column-amber {
  background-color: transparent !important;
  color: #fff !important;
}

.column-lavender {
  background-color: transparent !important;
  color: #fff !important;
}

.column-olive {
  background-color: transparent !important;
  color: #fff !important;
}

.column-navy {
  background-color: transparent !important;
  color: #fff !important;
}

.column-salmon {
  background-color: transparent !important;
  color: #fff !important;
}

.column-cream {
  background-color: transparent !important;
  color: #fff !important;
}

.column-peach {
  background-color: transparent !important;
  color: #fff !important;
}

.column-turquoise {
  background-color: transparent !important;
  color: #fff !important;
}

.column-burgundy {
  background-color: transparent !important;
  color: #fff !important;
}

.column-lime {
  background-color: transparent !important;
  color: #fff !important;
}

.column-sky {
  background-color: transparent !important;
  color: #fff !important;
}

.column-tan {
  background-color: transparent !important;
  color: #fff !important;
}

.column-gold {
  background-color: transparent !important;
  color: #fff !important;
}

.column-charcoal {
  background-color: transparent !important;
  color: #fff !important;
}

.column-silver {
  background-color: transparent !important;
  color: #fff !important;
}


/* Definir colores de texto para opciones */
.text-primary { color: #0d6efd; }
.text-secondary { color: #6c757d; }
.text-success { color: #198754; }
.text-danger { color: #dc3545; }
.text-warning { color: #ffc107; }
.text-info { color: #0dcaf0; }
.text-light { color: #f8f9fa; }
.text-dark { color: #212529; }
.text-purple { color: #b19cd9; }
.text-pink { color: #ffb6c1; }
.text-teal { color: #66b2b2; }
.text-coral { color: #ff7f50; }
.text-mint { color: #98ff98; }
.text-amber { color: #ffbf00; }
.text-lavender { color: #e6e6fa; }
.text-olive { color: #b5c38e; }
.text-navy { color: #7895b2; }
.text-salmon { color: #ff9e9e; }
.text-cream { color: #fffdd0; }
.text-peach { color: #ffdab9; }
.text-turquoise { color: #40e0d0; }
.text-burgundy { color: #800020; }
.text-lime { color: #d4ff88; }
.text-sky { color: #87ceeb; }
.text-tan { color: #d2b48c; }
.text-gold { color: #ffd700; }
.text-charcoal { color: #36454f; }
.text-silver { color: #c0c0c0; }

.priority-badge {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
}

.priority-low {
    background-color: #e3fcef;
    color: #006644;
}

/* Estilos de la prioridad media en el estado colapsado */
.priority-medium {
    background-color: #ffe5b4; /* Fondo naranja claro */
    color: #d35400; /* Texto naranja oscuro */
}

.priority-high {
    background-color: #ffebe6;
    color: #de350b;
}

.tags-container span {
    padding: 3px 6px;
    font-size: 12px;
    border-radius: 3px;
    margin-right: 4px;
    text-transform: uppercase; /* Forzar mayúsculas */
    font-weight: bold; /* Negrita para darle más peso visual */
    border: 1px solid rgba(13, 110, 253, 0.3); /* Borde ligeramente más oscuro para mayor definición */
}


/* Estado "selected" para acordeón activo */
.accordion-button:not(.collapsed).priority-low {
    background-color: #a5d6a7; /* Verde oscuro al expandir */
    color: #004d40;
}

/* Estilos de la prioridad media en el estado expandido */
.accordion-button:not(.collapsed).priority-medium {
    background-color: #ffcc80; /* Fondo naranja más oscuro */
    color: #bf360c; /* Texto naranja más intenso */
}

.accordion-button:not(.collapsed).priority-high {
    background-color: #f5c6cb; /* Rojo oscuro al expandir */
    color: #721c24;
}

/*****************************************************************************************************/

.status-indicator {
    font-size: 0.8em;
    padding: 2px 4px;
    border-radius: 4px;
    color: white;
    margin-bottom: 5px;
    text-align: center;
}

h6 {
    margin:0;
}

.status-shared {
    background-color: #007bff; /* Azul para notas compartidas */
}

.status-personal {
    background-color: #28a745; /* Verde para notas personales */
}

.status-received {
    background-color: #ffc107; /* Amarillo para notas recibidas */
}


.highlight {
    opacity: .7;
}

/* El contenedor que envuelve los iframes ocupa todo el espacio */
.iframe-container {
  display: flex;
  flex-direction: column;
  height: 85vh;
}

/* Estilos para que los iframes ocupen todo el espacio */
iframe {
  flex: 1;
  width: 100%;
  border: none; /* Remover bordes del iframe */
}

@media (min-width: 1200px) {
  .container {
    max-width: 90%; /* Cambia el ancho máximo al 90% en pantallas grandes */
  }
}

.fullcalendar-custom {
    max-height: calc(95vh - 205px);
    overflow-y: auto;
    margin-bottom: 20px;
}

.tooltip {
    z-index: 1100 !important; /* Mayor que el z-index del popover de FullCalendar */
}
.fc-popover {
    z-index: 1000 !important; /* Asegúrate de que el z-index sea menor que el tooltip */
}

.selected {
    background-color:red;
}

/* Contenedor de tableros */

.boards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Espacio entre columnas */
  user-select: none;
}

/* Estilos de los tableros */
.board {
  flex-grow: 1;
  width: 300px;
  background-color: #343a40;
  color: white;
  padding: 10px;
  border-radius: 5px;
  overflow-y: auto;
  height: 350px;
}

/* Estilos de scrollbar para navegadores que soportan la pseudo-clase ::-webkit-scrollbar (Chrome, Edge, Safari) */
.board::-webkit-scrollbar {
  width: 8px;
  background-color: #2b2b2b;
}

.board::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 4px;
}

.board::-webkit-scrollbar-thumb:hover {
  background-color: #777;
}

/* Firefox (scrollbar color) */
.board {
  scrollbar-width: thin; /* Grosor del scrollbar */
  scrollbar-color: #555 #2b2b2b; /* Color del thumb y el track */
}

/* Microsoft Edge y navegadores más modernos */
@supports (scrollbar-color: auto) {
  .board {
    scrollbar-color: #555 #2b2b2b; /* Color del thumb y el track */
    scrollbar-width: thin;
  }
}


/* Estilos de las columnas dentro del tablero */
.column {
  background-color: rgba(52, 58, 64, 0.6) !important; /* 80% opacidad */
  opacity:.8;
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  overflow-y: hidden;
  transition:.3s;
}

.column:hover {
    opacity:1;
    transition:.3s;
}

.column-cards {
  min-height: 200px;
  /*padding-bottom: 30px;*/
  max-height: calc(100% - 40px); /* Ajusta el alto disponible dentro de la columna */
  overflow-y: auto;
  opacity:.5;
  transition:.3s;
}

.column-cards:hover {
    opacity:1;
    transition:.3s;
}

.card {
  /*background-color: #495057;
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: grab;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;*/
}

.card:hover {
  /*background-color: #6c757d;
  white-space: normal;
  overflow: visible;*/
}


/* Estilo para el fantasma durante el arrastre */
.ghost {
  opacity: 0.5;
  /*background-color: #adb5bd;*/
}



/* Bordes de las columnas más marcados */
.column-cards::-webkit-scrollbar {
  width: 6px;
}

.column-cards::-webkit-scrollbar-thumb {
  background-color: #6c757d;
  border-radius: 10px;
}

/* Botón para agregar tarjetas */
.add-card-btn {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 5px 10px;
  margin-top: 10px;
  border-radius: 3px;
  cursor: pointer;
}

.add-card-btn:hover {
  background-color: #218838;
}

.noteHandler {
    cursor:move;
}

/* Contenedor de subtítulo y botón */
.column-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Asegura que ocupe todo el ancho */
    margin-bottom: 10px;
    background-color:#343a40;
    border-radius:6px;
    padding:4px;
}

.column-header-container h5 {
  flex-grow: 1;              /* Permite que el <h5> ocupe el espacio disponible */
  margin: 0;                 /* Elimina márgenes adicionales */
  white-space: normal;       /* Permite que el texto se ajuste en varias líneas */
  overflow-wrap: normal;     /* No rompe las palabras */
  word-break: normal;        /* No rompe las palabras a la mitad */
}

/* Estilo del botón de eliminar subtítulo */
.delete-column-btn {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 5px;
    cursor: pointer;
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
}

.delete-column-btn:hover {
    background-color: #c82333;
}


/***************************************************************************************************************/

.board-height {
     max-height: calc(90vh - 205px) !important; overflow-y: auto; margin-bottom: 20px;
}


/*****************************************************************************************************************/

:root {
    --bs-body-bg: #f8f9fa;
    --bs-body-color: #212529;
    --bs-card-bg: #fff;
    --bs-card-border-color: #dee2e6;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bs-body-bg: #212529;
        --bs-body-color: #f8f9fa;
        --bs-card-bg: #343a40;
        --bs-card-border-color: #454d55;
    }
}

html, body {
    height: 100%; /* Aseguramos que el html y body ocupen toda la pantalla */
}

/* Cambiar color del switch cuando está en estado "off" */
.form-check-input {
    background-color: #dc3545; /* Color cuando está en "off" */
    border-color: #dc3545;
}

/* Cambiar color del switch cuando está en estado "on" */
.form-check-input:checked {
    background-color: #28a745; /* Color cuando está en "on" */
    border-color: #28a745;
}

/* Cambiar el color del foco (outline) cuando se selecciona */
.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25); /* Personaliza el color del outline */
}

.custom-link {
    text-decoration: none; /* Eliminar subrayado por defecto */
    color: inherit; /* Heredar el color del elemento padre, o puedes definir un color específico */
    cursor: pointer; /* Cambiar el cursor a puntero */
    transition: text-decoration 0.3s ease; /* Añadir una transición suave */
}

.custom-link:hover {
    text-decoration: underline; /* Subrayar al pasar el mouse */
    color: white; /* Cambia el color si lo deseas, o elimina esta línea para heredar el color */
}

.notes-note-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.82);
    padding: 0.75rem;
    display: grid;
    gap: 0.55rem;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.notes-tab-shell {
    height: calc(95vh - 180px);
    overflow: hidden;
}

.notes-boards-container {
    display: block !important;
    height: 100%;
    width: 100%;
    min-height: 140px;
    min-width: 0;
    overflow: hidden;
    padding-bottom: 0.35rem;
}

.notes-boards-container > .notes-board-stage,
.notes-boards-container > .notes-empty-stage {
    width: 100%;
}

.notes-note-card:hover,
.notes-note-card:focus-visible {
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(30, 41, 59, 0.92);
    transform: translateY(-1px);
    outline: none;
}

.notes-note-card.is-selected {
    border-color: rgba(13, 110, 253, 0.95);
    background: rgba(13, 110, 253, 0.14);
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.25);
}

.notes-note-card-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notes-note-card-preview {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.84rem;
    line-height: 1.35;
    min-height: 2.3em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notes-note-card-meta,
.notes-note-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.notes-note-card-meta {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.75rem;
}

.notes-note-card-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.notes-note-card-footer {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.76rem;
}

#noteWorkspaceModal .modal-content {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#noteWorkspaceModal .modal-header {
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    padding: 0.85rem 1rem;
}

#noteWorkspaceModal .modal-body {
    padding: 0.9rem;
    min-height: 0;
    overflow: auto;
}

#noteWorkspaceModal .btn-close {
    flex: 0 0 auto;
}

.notes-workspace-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.notes-workspace-header-main {
    min-width: 0;
    flex: 1 1 auto;
}

.notes-workspace-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.notes-workspace-meta {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    line-height: 1.35;
}

.notes-workspace-title-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.95;
}

.notes-workspace-title-emoji i {
    font-size: 1.05rem;
    line-height: 1;
}

#noteSidePanelToggleButton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

#noteWorkspaceModal .notes-workspace-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    height: auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

#noteWorkspaceModal .notes-editor-panel,
#noteWorkspaceModal .notes-side-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

#noteWorkspaceModal .notes-editor-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    overflow-x: hidden;
    padding: 0.9rem;
}

#noteWorkspaceModal .notes-editor-comments {
    margin: 0;
    min-height: 240px;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
    box-sizing: border-box;
    overflow-x: hidden;
}

#noteWorkspaceModal .notes-editor-toolbar,
#noteWorkspaceModal .notes-side-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0;
}

#noteWorkspaceModal .notes-editor-toolbar {
    position: static;
    z-index: 2;
    background: transparent;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#noteWorkspaceModal .notes-editor-toolbar--stack {
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem;
    flex-direction: column;
    align-items: stretch;
}

#noteWorkspaceModal .notes-editor-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.5rem;
    padding: 0.75rem 0.9rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0.375rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    position: static;
    z-index: auto;
    backdrop-filter: none;
}

#noteWorkspaceModal .notes-side-card-head h6 {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
}

#noteWorkspaceModal .notes-editor-fields {
    gap: 0.9rem;
    padding: 0.9rem;
    margin-top: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem;
}

#noteWorkspaceModal .notes-rich-shell,
#noteWorkspaceModal .notes-editor-type-panel {
    gap: 0.75rem;
}

#noteWorkspaceModal .notes-rich-toolbar {
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem;
    background: rgba(255, 255, 255, 0.04);
}

#noteWorkspaceModal .notes-editor-field .form-label,
#noteWorkspaceModal .notes-comments-meta {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
}

.notes-editor-panel-head-copy {
    min-width: 0;
    display: grid;
    gap: 0.2rem;
}


.notes-editor-panel-head-copy .notes-workspace-meta {
    margin: 0;
    font-size: 0.88rem;
}

.notes-workspace-context {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.2rem;
}

.notes-workspace-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.34rem 0.68rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.72);
    color: #dbe4f0;
    font-size: 0.77rem;
    line-height: 1.2;
}

.notes-workspace-pill--shared {
    border-color: rgba(96, 165, 250, 0.32);
    background: rgba(30, 64, 175, 0.22);
    color: #dcebff;
}

.notes-workspace-pill--owner {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.62);
}

.notes-editor-panel-head-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    width: auto;
    flex: 0 0 auto;
}

.notes-editor-panel-head-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.notes-static-value {
    width: 100%;
    min-height: 40px;
    padding: 0.62rem 0;
    color: rgba(255, 255, 255, 0.94);
    line-height: 1.45;
}

.notes-static-value--status {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0;
}

.notes-static-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.62);
    color: #e5edf7;
    font-size: 0.8rem;
    font-weight: 600;
}

.notes-editor-toolbar-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.notes-editor-toolbar-actions--footer {
    margin-top: 0.15rem;
    padding-top: 0.95rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}


.notes-editor-toolbar-main,
.notes-editor-toolbar-side {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.notes-editor-toolbar-side {
    margin-right: auto;
}

#noteWorkspaceSharedStatusHost {
    min-width: 220px;
    margin-right: auto;
}

#noteWorkspaceSharedStatusHost .notes-editor-field {
    gap: 0.2rem;
}

#noteWorkspaceSharedStatusHost .notes-editor-field .form-label {
    font-size: 0.74rem;
}

#noteWorkspaceSharedStatusHost .notes-editor-field .form-select,
#noteWorkspaceSharedStatusHost .notes-static-value {
    min-width: 220px;
}

.notes-editor-toolbar--stack .row {
    --bs-gutter-x: 0.95rem;
    --bs-gutter-y: 0.95rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.notes-editor-toolbar--stack .row > [class*="col-"] {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
}

.notes-editor-toolbar--stack .row > .d-none {
    padding: 0 !important;
}

#noteWorkspaceFieldsRow.is-shared-readonly > #noteWorkspaceTitleField {
    flex: 1 1 0;
    width: auto;
}

#noteWorkspaceFieldsRow.is-shared-readonly > #noteWorkspaceStatusField {
    flex: 0 0 240px;
    width: 240px;
}

#noteWorkspaceFieldsRow.is-shared-readonly > #noteWorkspaceStatusField .notes-editor-field {
    justify-content: end;
}

@media (max-width: 767.98px) {
    #noteWorkspaceSharedStatusHost,
    #noteWorkspaceSharedStatusHost .notes-editor-field .form-select,
    #noteWorkspaceSharedStatusHost .notes-static-value {
        min-width: 0;
        width: 100%;
    }

    #noteWorkspaceFieldsRow.is-shared-readonly > #noteWorkspaceTitleField,
    #noteWorkspaceFieldsRow.is-shared-readonly > #noteWorkspaceStatusField {
        flex: 0 0 100%;
        width: 100%;
    }
}

.notes-editor-field {
    min-width: 0;
}

.notes-editor-fields {
    display: grid;
    gap: 1.15rem;
    padding: 1.05rem;
    margin-top: 1rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    min-height: 0;
    flex: 0 0 auto;
    overflow: visible;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.notes-rich-shell {
    display: grid;
    gap: 0.9rem;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.notes-rich-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}

.notes-rich-toolbar.is-hidden {
    display: none;
}

.notes-rich-toolbar .btn {
    min-width: 34px;
    height: 34px;
    padding: 0 0.55rem;
    width: auto;
    flex: 0 0 auto;
}

.notes-color-menu {
    min-width: 180px;
    padding: 0.35rem;
}

.notes-color-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: 8px;
    font-size: 0.82rem;
}

.notes-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--notes-color, #f8f9fa);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
    flex: 0 0 auto;
}

.notes-rich-editor {
    min-height: 320px;
    max-height: 100%;
    overflow: auto;
    padding: 1rem 1.05rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(2, 6, 23, 0.5);
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.6;
}

.notes-rich-editor[contenteditable="true"] {
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.18);
}

.notes-rich-editor--comment {
    min-height: 140px;
}

.notes-rich-editor:empty::before {
    content: attr(data-placeholder);
    color: rgba(255, 255, 255, 0.42);
}

.notes-rich-editor img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    cursor: zoom-in;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.notes-rich-editor img:hover,
.notes-comment-card-content img:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.notes-rich-figure {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 1rem;
    width: 100%;
}

.notes-rich-figure img {
    width: min(100%, 420px);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.notes-rich-figure.is-size-sm img {
    width: min(100%, 240px);
}

.notes-rich-figure.is-size-md img {
    width: min(100%, 420px);
}

.notes-rich-figure.is-size-lg img {
    width: min(100%, 640px);
}

.notes-rich-figure.is-size-full img {
    width: 100%;
}

.notes-rich-figure.is-align-left {
    justify-items: start;
    text-align: left;
}

.notes-rich-figure.is-align-center {
    justify-items: center;
    text-align: center;
}

.notes-rich-figure.is-align-right {
    justify-items: end;
    text-align: right;
}

.notes-rich-figure figcaption,
.notes-rich-file {
    color: #9ec5fe;
    font-size: 0.86rem;
}

.notes-rich-figure figcaption {
    max-width: min(100%, 640px);
}

#notesTypeFilter,
#noteWorkspaceType,
#noteWorkspaceBody,
#noteWorkspaceTaskDescription,
#noteWorkspaceLinkUrl,
#noteWorkspaceLinkDescription,
#noteWorkspaceImageUrl,
#noteWorkspaceImageCaption,
#noteChecklistItems,
#noteAddChecklistItemButton,
#noteWorkspaceImagePreview {
    display: none !important;
}

.notes-editor-field {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.notes-editor-field .form-label {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.76);
}

.notes-editor-field .form-control,
.notes-editor-field .form-select {
    width: 100%;
}


.notes-editor-field input.form-control-color {
    width: 100%;
    min-width: 0;
    max-width: none;
}

.notes-folder-color-palette {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.notes-folder-color-swatch {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: var(--folder-swatch, #0d6efd);
    box-shadow: inset 0 0 0 1px rgba(2, 6, 23, 0.28);
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.notes-folder-color-swatch:hover,
.notes-folder-color-swatch:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.46);
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.24);
    outline: none;
}

.notes-folder-color-swatch.is-active {
    border-color: #f8f9fa;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.3);
}

.notes-editor-field-body,
.notes-editor-field-body textarea,
.notes-editor-type-panel {
    min-height: 0;
    flex: 1 1 auto;
}

.notes-editor-type-panel {
    display: grid;
    gap: 0.85rem;
}

#noteWorkspaceBodyEditor.is-readonly {
    cursor: default;
    background: rgba(255, 255, 255, 0.02);
}

#noteTypePanelNote,
#noteTypePanelTask,
#noteTypePanelLink,
#noteTypePanelImage {
    display: none !important;
}

#noteWorkspaceContent {
    min-height: 0;
    height: 100%;
    resize: none;
}

#noteWorkspaceModal textarea.form-control {
    resize: vertical;
}

.notes-side-panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.85rem;
    min-height: 0;
    align-items: stretch;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    background: rgba(10, 16, 28, 0.98);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -20px 0 40px rgba(2, 6, 23, 0.4);
    padding: 0.85rem;
    z-index: 1080;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform 0.18s ease, opacity 0.18s ease, visibility 0.18s ease;
}

.notes-side-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.notes-side-panel-mobile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 0.25rem;
}

.notes-side-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 0;
}

.notes-comments-card {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.notes-share-add,
.notes-comment-composer {
    display: grid;
    gap: 0.75rem;
    padding-top: 0.3rem;
    padding-bottom: 0.9rem;
}

.notes-share-add {
    grid-template-columns: minmax(0, 1fr) auto;
}

.notes-share-list,
.notes-comments-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 0.95rem 0.95rem;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.notes-share-list {
    flex: 1 1 auto;
}

.notes-comments-list {
    flex: 1 1 auto;
    padding-top: 0.8rem;
}

.notes-comments-meta {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.78rem;
    margin-top: 0.18rem;
}

.notes-comment-composer--dock {
    gap: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(11, 18, 32, 0.92) 0%, rgba(8, 14, 26, 0.96) 100%);
    box-shadow: 0 -16px 32px rgba(0, 0, 0, 0.18);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.notes-comment-composer--dock.is-disabled {
    opacity: 0.78;
}

.notes-comment-composer--dock .notes-rich-editor--comment {
    min-height: 150px;
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.035);
}

.notes-comment-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.notes-comment-action-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.notes-comment-hint {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
}

.notes-comment-submit {
    min-width: 164px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.notes-comment-reply-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(158, 197, 254, 0.22);
    border-radius: 10px;
    background: rgba(13, 110, 253, 0.1);
    min-width: 0;
}

.notes-comment-reply-copy {
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.82rem;
    min-width: 0;
}

.notes-comment-reply-preview {
    margin-top: 0.22rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.78rem;
    line-height: 1.45;
}

.notes-comment-composer--inline {
    margin-top: 0.15rem;
    border: 1px solid rgba(158, 197, 254, 0.14);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(10, 18, 30, 0.96) 0%, rgba(6, 12, 22, 0.98) 100%);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}

.notes-comment-reply-slot {
    display: grid;
    min-width: 0;
}

.notes-image-modal,
.notes-image-viewer-modal {
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.notes-image-modal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 360px);
    gap: 1rem;
    align-items: stretch;
}

.notes-image-preview-panel,
.notes-image-controls-panel {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

.notes-image-preview-panel {
    padding: 1rem;
}

.notes-image-preview-stage {
    min-height: 380px;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background:
        radial-gradient(circle at top, rgba(13, 110, 253, 0.16), transparent 54%),
        linear-gradient(180deg, rgba(10, 16, 28, 0.96) 0%, rgba(6, 11, 21, 0.98) 100%);
    padding: 1.1rem;
}

.notes-image-preview-stage .notes-rich-figure {
    margin-bottom: 0;
}

.notes-image-preview-stage img {
    max-height: 320px;
    object-fit: contain;
}

.notes-image-controls-panel {
    padding: 1rem;
    display: grid;
    gap: 1rem;
    align-content: start;
}

.notes-image-controls-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.notes-image-help,
.notes-image-modal-meta {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.84rem;
}

.notes-image-viewer-stage {
    min-height: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background:
        radial-gradient(circle at top, rgba(13, 110, 253, 0.14), transparent 55%),
        rgba(255, 255, 255, 0.02);
    padding: 0.75rem;
    user-select: none;
    cursor: grab;
}

.notes-image-viewer-modal .modal-body {
    padding: 0.75rem;
    overflow: hidden;
}

.notes-image-viewer-stage.is-dragging {
    cursor: grabbing;
}

.notes-image-viewer-canvas {
    position: relative;
    display: grid;
    place-items: center;
    transform-origin: center center;
    touch-action: none;
    will-change: transform;
}

.notes-image-viewer-image {
    display: block;
    max-width: min(100%, 96vw);
    max-height: calc(100vh - 170px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.32);
    pointer-events: none;
}


.notes-share-pill,
.notes-comment-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
}

.notes-share-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0.7rem 0.8rem;
}

.notes-share-pill-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.notes-share-pill-main strong,
.notes-comment-card-author {
    color: #fff;
}

.notes-share-pill-main span,
.notes-comment-card-meta,
.notes-empty-state {
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.8rem;
}

.notes-comment-card {
    padding: 0.95rem 1rem;
    display: grid;
    gap: 0.65rem;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.notes-comment-thread {
    display: grid;
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
}

.notes-comment-children {
    display: grid;
    gap: 0.75rem;
    margin-left: 1.35rem;
    padding-left: 0.95rem;
    border-left: 2px solid rgba(158, 197, 254, 0.18);
    min-width: 0;
}

.notes-comment-thread.depth-0 > .notes-comment-card {
    background: rgba(255, 255, 255, 0.035);
}

.notes-comment-thread.depth-1 > .notes-comment-card,
.notes-comment-thread.depth-2 > .notes-comment-card,
.notes-comment-thread.depth-3 > .notes-comment-card,
.notes-comment-thread.depth-4 > .notes-comment-card {
    background: rgba(13, 110, 253, 0.035);
}

.notes-comment-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.notes-comment-card-head > div {
    min-width: 0;
}

.notes-comment-card-content {
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.92rem;
    line-height: 1.6;
    min-width: 0;
    overflow-wrap: anywhere;
}

.notes-comment-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.1rem;
}

.notes-comment-reply-button {
    padding: 0;
    color: #9ec5fe;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-left: auto;
    white-space: nowrap;
}

.notes-comment-reply-button:hover,
.notes-comment-reply-button:focus {
    color: #cfe2ff;
    text-decoration: underline;
}

.notes-comment-inline-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

#mcList .mc-comment-thread,
#formCommentsList .mc-comment-thread,
#taskCommentsList .mc-comment-thread,
#noteCommentsList .mc-comment-thread {
    margin: 0 0 0.85rem;
}

#mcList .mc-comment-card,
#formCommentsList .mc-comment-card,
#taskCommentsList .mc-comment-card,
#noteCommentsList .mc-comment-card {
    background: rgba(19, 26, 37, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    /*border-radius: 14px;*/
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

#mcList .mc-comment-card.is-mine,
#formCommentsList .mc-comment-card.is-mine,
#taskCommentsList .mc-comment-card.is-mine,
#noteCommentsList .mc-comment-card.is-mine {
    border-color: rgba(13, 110, 253, 0.28);
    background: rgba(14, 39, 71, 0.96);
}

#mcModal .modal-dialog {
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    margin: 0 !important;
}

#mcModal .modal-content {
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
}

#mcModal .modal-body {
    overflow: hidden;
}

#mcModal .notes-comments-list {
    min-height: 0;
    height: 100%;
}

.notes-comment-card-content p:last-child,
.notes-rich-editor p:last-child {
    margin-bottom: 0;
}

.notes-empty-state {
    padding: 0.85rem;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
}

.notes-board-stage {
    display: grid;
    gap: 1rem;
    height: 100%;
    overflow-y: auto;
    padding-right: 0.35rem;
}

.notes-section {
    display: grid;
    gap: 0.75rem;
}

.notes-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}

.notes-section-head h4 {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}

.notes-section-subtitle {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.82rem;
}

.notes-board-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.9rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.4rem;
    align-items: stretch;
}

.notes-section--compact .notes-board-track {
    align-items: flex-start;
}

.notes-board {
    width: min(340px, 82vw);
    min-width: 300px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: rgba(17, 24, 39, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0.8rem;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(4px);
}

.notes-board--readonly {
    background: rgba(31, 41, 55, 0.55);
    border-style: dashed;
}

.notes-board-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.notes-board-header-main {
    min-width: 0;
    flex: 1 1 auto;
}

.notes-board-title-wrap {
    display: grid;
    gap: 0.2rem;
}

.notes-board-title {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: text;
}

.notes-board-subtitle {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.78rem;
    line-height: 1.3;
}

.notes-board-pill {
    white-space: nowrap;
    border-radius: 999px;
    padding: 0.28rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
}

.notes-board-menu-toggle {
    min-width: 34px;
    padding-inline: 0.45rem;
}

.notes-board-cards {
    display: grid;
    gap: 0.65rem;
    min-height: 110px;
    max-height: 52vh;
    overflow-y: auto;
    padding-right: 0.15rem;
}

.notes-board-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
}

.notes-note-card--shared::before {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    border-radius: 999px;
    background: rgba(13, 202, 240, 0.9);
    margin-bottom: 0.1rem;
}

.notes-empty-stage {
    min-height: 220px;
    display: grid;
    place-items: center;
    text-align: center;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.28);
    color: rgba(255, 255, 255, 0.78);
    padding: 1.5rem;
}

.notes-empty-stage-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.notes-empty-stage-copy {
    font-size: 0.86rem;
    margin-top: 0.35rem;
}

@media (max-width: 991.98px) {
    #noteWorkspaceModal .modal-header {
        padding: 0.8rem 0.9rem;
    }

    #noteWorkspaceModal .modal-body {
        padding: 0.85rem;
        overflow: auto;
    }

    .notes-side-panel {
        width: min(420px, 92vw);
        padding: 0.85rem;
    }

    #noteSidePanelToggleButton {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
    }

    .notes-editor-panel {
        /*overflow: visible;*/
    }

    .notes-editor-panel-head-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .notes-editor-panel-head-actions .btn span {
        display: none;
    }

    .notes-editor-fields {
        padding: 0.9rem;
        margin-top: 0.85rem;
        overflow: visible;
    }

    .notes-editor-comments {
        margin: 0;
        min-height: 280px;
    }

    .notes-editor-toolbar-actions {
        align-items: stretch;
    }

    .notes-side-card {
        min-height: 0;
        overflow: hidden;
    }
}

@media (max-width: 767.98px) {
    .notes-tab-shell {
        height: calc(95vh - 155px);
    }

    .notes-board {
        width: min(84vw, 320px);
        min-width: min(84vw, 320px);
    }

    .notes-board-add {
        grid-template-columns: 1fr;
    }

    #noteWorkspaceModal .modal-body {
        padding: 0.75rem;
        overflow: auto;
    }

    .notes-editor-toolbar,
    .notes-side-card-head,
    .notes-editor-fields,
    .notes-share-add,
    .notes-comment-composer,
    .notes-share-list,
    .notes-comments-list {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .notes-editor-panel {
        padding: 0.75rem;
    }

    .notes-share-add {
        grid-template-columns: 1fr;
    }

    .notes-editor-panel,
    .notes-side-card {
        /*overflow: visible;*/
    }

    .notes-editor-fields {
        overflow: visible;
        margin-top: 0.75rem;
    }

    .notes-side-panel {
        width: 100vw;
        padding: 0.75rem;
    }

    .notes-editor-comments {
        margin: 0 0 0.75rem;
        min-height: 0;
    }

    .notes-share-list {
        max-height: 180px;
    }

    .notes-comments-list {
        max-height: none;
    }

    .notes-editor-toolbar,
    .notes-side-card-head,
    .notes-workspace-header {
        flex-direction: column;
        align-items: stretch;
    }

    .notes-workspace-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .notes-editor-toolbar-actions,
    .notes-editor-toolbar-main,
    .notes-editor-toolbar-side {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .notes-editor-toolbar-main,
    .notes-editor-toolbar-side {
        gap: 0.45rem;
    }

    .notes-editor-toolbar-main .btn,
    .notes-editor-toolbar-side .btn,
    .notes-rich-toolbar .btn,
    .notes-comment-action-group .btn,
    .notes-comment-composer .btn {
        width: auto;
        flex: 0 0 auto;
    }

    .notes-share-add .btn {
        width: 100%;
    }

    .notes-comment-reply-state {
        align-items: stretch;
        flex-direction: column;
    }

    .notes-comment-action-group {
        width: auto;
        justify-content: flex-start;
    }

    .notes-comment-action-group .btn {
        flex: 0 0 auto;
    }

    .notes-comment-children {
        margin-left: 0.8rem;
        padding-left: 0.7rem;
    }

    .notes-comment-inline-action span,
    .notes-comment-reply-button span {
        display: none;
    }

    .notes-comment-submit {
        min-width: auto;
    }

    .notes-editor-panel-head-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
        width: auto;
    }

    .notes-editor-panel-head-actions .btn {
        width: auto;
        flex: 0 0 auto;
    }

    .notes-editor-panel-head {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .notes-editor-toolbar--stack {
        padding: 0.9rem;
    }

    #noteWorkspaceModal .modal-header .btn-close {
        align-self: flex-end;
        margin: 0;
    }
}


.text-bg-teal {
    color: #084C61; /* Texto en color teal oscuro */
    background-color: #A5D8D4; /* Fondo en teal claro */
}


.text-teal {
    color: #70ccc5 !important;
}

.notes-shell {
    display: block;
    gap: 12px;
    min-height: 0;
    width: 100%;
    height: auto;
    overflow: visible;
    align-items: stretch;
}

.notes-sidebar-app,
.notes-main-hero,
.notes-note-card,
 .notes-entry-card--folder,
 .notes-empty-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
}

.notes-sidebar-app {
    background: #0f172a;
    padding: 0.95rem var(--app-tab-pane-padding);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    min-height: 0;
    height: auto;
    overflow: visible;
    align-items: stretch;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 10px 20px rgba(2, 6, 23, 0.22);
}

.notes-sidebar-top,
.notes-sidebar-top-actions,
.notes-note-card-meta,
.notes-note-card-head,
.notes-note-card-footer,
.notes-folder-link,
.notes-folder-link-main,
.notes-folder-actions {
    display: flex;
    align-items: center;
}

.notes-sidebar-top,
.notes-note-card-meta,
.notes-note-card-footer,
.notes-folder-link {
    justify-content: space-between;
}

.notes-sidebar-top {
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
    flex-wrap: nowrap;
}

.notes-sidebar-title-block,
.notes-note-card-head-copy {
    display: grid;
    gap: 2px;
}

.notes-sidebar-title-block {
    min-width: 0;
    flex: 1 1 auto;
}

.notes-sidebar-caption,
.notes-current-meta,
.notes-note-card-date,
.notes-note-card-folder,
.notes-note-card-footer,
.notes-empty-side {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.82rem;
}

.notes-sidebar-top-actions,
.notes-main-filter-row,
.notes-folder-actions,
.notes-note-card-badges,
.notes-stats-strip {
    gap: 8px;
    flex-wrap: wrap;
}

.notes-sidebar-top-actions {
    margin-left: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    flex-shrink: 0;
}

.notes-sidebar-section--views {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.notes-nav-link {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    padding: 0.65rem 0.75rem;
    font-size: 0.9rem;
}

.notes-nav-link.is-active {
    background: rgba(13, 110, 253, 0.16);
    border-color: rgba(13, 110, 253, 0.5);
}

.notes-folder-icon,
.notes-note-type-icon {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    flex: 0 0 auto;
}

.notes-folder-icon {
    width: 28px;
    height: 28px;
    font-size: 0.92rem;
}

.notes-note-card-title {
    color: #fff;
    font-weight: 700;
}

.notes-folder-count,
.notes-card-chip {
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    font-size: 0.74rem;
    line-height: 1.2;
}

.notes-folder-count,
.notes-card-chip--soft {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
}

.notes-folder-action {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.notes-main-app {
    min-width: 0;
    display: block;
    min-height: 0;
    height: auto;
    overflow: visible;
}

.notes-sidebar-search {
    min-width: 0;
    width: 100%;
}

.notes-sidebar-search .form-control {
    width: 100%;
}

.notes-main-hero {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.95));
    padding: 14px;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.26);
    flex: 0 0 auto;
    display: grid;
    gap: 0.95rem;
}

.notes-main-results {
    height: auto;
    min-height: 0;
    overflow: visible;
    position: relative;
    background: rgba(15, 23, 42, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 0.85rem;
    display: grid;
    gap: 0.95rem;
}

.notes-selection-marquee {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    border: 1px solid rgba(13, 110, 253, 0.82);
    background: rgba(13, 110, 253, 0.14);
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(173, 216, 255, 0.12);
}

.notes-main-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.notes-filter-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.notes-filter-pill {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.88);
    padding: 0.55rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 38px;
}

.notes-filter-pill.is-active,
.notes-filter-pill:hover,
.notes-filter-pill:focus-visible {
    background: rgba(13, 110, 253, 0.16);
    border-color: rgba(13, 110, 253, 0.46);
    color: #fff;
    outline: none;
}

.notes-filter-summary {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.8rem;
    min-width: 0;
}

.notes-filter-strip--secondary {
    margin-left: auto;
}

.notes-breadcrumb-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.notes-results-head {
    display: grid;
    gap: 0.6rem;
    padding-top: 0.1rem;
}

.notes-results-copy {
    display: grid;
    gap: 0.2rem;
}

.notes-results-copy-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.notes-results-copy-title h4 {
    margin: 0;
}

.notes-breadcrumb-back {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.82);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.notes-breadcrumb-back:hover,
.notes-breadcrumb-back:focus-visible {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.14);
    color: #fff;
    outline: none;
}

.notes-inline-folder-action {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.76);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.notes-inline-folder-action:hover,
.notes-inline-folder-action:focus-visible {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
    outline: none;
}

.notes-breadcrumb {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.notes-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.82rem;
    border-radius: 6px;
    transition: background-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.notes-breadcrumb-item:not(:last-child)::after {
    content: "/";
    color: rgba(255, 255, 255, 0.35);
}

.notes-breadcrumb-link {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    padding: 0;
    border-radius: 6px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notes-breadcrumb-link:hover,
.notes-breadcrumb-link:focus-visible {
    color: #fff;
    outline: none;
}

.notes-breadcrumb-item.is-current {
    color: #fff;
    font-weight: 600;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notes-breadcrumb-item.is-drop-target {
    background: rgba(37, 99, 235, 0.18);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.42);
    color: #fff;
}

.notes-breadcrumb-item.is-drop-target .notes-breadcrumb-link {
    color: #fff;
}

.notes-card-grid {
    display: grid;
    gap: 8px;
    align-content: start;
    min-height: 0;
}

.notes-section {
    display: grid;
    gap: 0.9rem;
}

.notes-section + .notes-section {
    margin-top: 1.3rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.notes-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.notes-section-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
}

.notes-section-meta {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.76rem;
}

.notes-card-grid--folders {
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 10px;
    width: 100%;
}

.notes-card-grid--notes {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.notes-entry-card {
    min-height: 0;
}

.notes-entry-card--folder {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.035));
    color: #fff;
    text-align: left;
    padding: 0.55rem 0.6rem;
    display: grid;
    gap: 6px;
    border-radius: 6px;
    min-height: 88px;
    width: 100%;
    align-content: start;
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.notes-entry-card--folder:hover,
.notes-entry-card--folder:focus-visible {
    transform: translateY(-1px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.05));
    border-color: rgba(13, 110, 253, 0.28);
    box-shadow: 0 12px 24px rgba(2, 6, 23, 0.18);
    outline: none;
}

.notes-entry-card--folder.is-drop-target {
    background: rgba(25, 135, 84, 0.16);
    border-color: rgba(25, 135, 84, 0.55);
    box-shadow: inset 0 0 0 1px rgba(25, 135, 84, 0.18);
}

.notes-entry-card--folder.is-selected {
    border-color: rgba(13, 110, 253, 0.5);
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.18);
}

.notes-entry-card-head,
.notes-entry-card-body {
    display: grid;
    gap: 3px;
}

.notes-entry-card-head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
}

.notes-entry-folder-icon {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.88rem;
}

.notes-entry-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    justify-self: end;
}

.notes-entry-card-title {
    margin: 0;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
}

.notes-entry-card-copy,
.notes-entry-card-meta {
    margin: 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.72rem;
    line-height: 1.15;
    white-space: normal;
}

.notes-entry-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.notes-entry-card-footer .notes-entry-card-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.notes-entry-shared-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-left: auto;
    padding: 0.18rem 0.42rem;
    border-radius: 999px;
    background: rgba(13, 110, 253, 0.16);
    color: rgba(173, 216, 255, 0.96);
    font-size: 0.68rem;
    line-height: 1;
    white-space: nowrap;
    flex: 0 0 auto;
}

.notes-entry-shared-indicator i {
    font-size: 0.72rem;
}

.notes-entry-shared-indicator--incoming {
    background: rgba(25, 135, 84, 0.16);
    color: rgba(186, 247, 208, 0.96);
}

.notes-entry-card-path {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    line-height: 1.2;
}

.notes-entry-card-menu {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    flex: 0 0 auto;
    align-self: flex-start;
}

.notes-context-menu {
    position: fixed;
    z-index: 2000;
    min-width: 220px;
    max-width: min(320px, calc(100vw - 16px));
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.97);
    box-shadow: 0 20px 40px rgba(2, 6, 23, 0.4);
}

.notes-context-menu-list {
    display: grid;
    gap: 4px;
}

.notes-context-item {
    width: 100%;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    text-align: left;
}

.notes-context-item:hover,
.notes-context-item:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

.notes-context-item.is-danger {
    color: #ffb3bd;
}

.notes-context-item:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.notes-context-item-icon {
    width: 16px;
    text-align: center;
    flex: 0 0 16px;
}

.notes-context-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 4px 0;
}

.notes-note-card {
    position: relative;
    background: rgba(15, 23, 42, 0.76);
    padding: 0.78rem 0.82rem 0.8rem;
    display: grid;
    gap: 0.72rem;
    text-align: left;
    color: #fff;
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
    border-radius: 6px;
    min-height: 188px;
    align-content: start;
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.16);
}

.notes-note-card:hover,
.notes-note-card:focus-visible {
    transform: translateY(-1px);
    background: rgba(30, 41, 59, 0.92);
    border-color: rgba(13, 110, 253, 0.45);
    outline: none;
}

.notes-note-card.is-selected {
    border-color: rgba(13, 110, 253, 0.95);
    box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.28);
}

.notes-note-card--shared-with-me {
    background:
        linear-gradient(180deg, rgba(22, 34, 54, 0.96), rgba(14, 23, 38, 0.92));
}

.notes-note-card--shared-by-me {
    background:
        linear-gradient(180deg, rgba(20, 32, 48, 0.96), rgba(12, 20, 35, 0.92));
}

.notes-note-card-accent {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 6px 0 0 6px;
    background: var(--notes-note-accent, #0d6efd);
}

.notes-note-card-head {
    gap: 8px;
    align-items: flex-start;
    margin-top: auto;
}

.notes-note-card-head-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.notes-note-card-title {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.notes-note-card-meta,
.notes-note-card-footer {
    gap: 6px;
}

.notes-note-card-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.notes-note-card-meta .notes-entry-card-actions {
    justify-content: flex-end;
    align-items: start;
}

.notes-note-card-date,
.notes-note-card-folder,
.notes-note-card-footer,
.notes-note-card-footer span {
    font-size: 0.7rem;
    line-height: 1.15;
}

.notes-note-card-badges {
    min-width: 0;
}

.notes-note-card-owner,
.notes-note-card-preview,
.notes-note-card-folder,
.notes-note-card-date {
    color: rgba(255, 255, 255, 0.68);
}

.notes-note-card-owner {
    font-size: 0.72rem;
    line-height: 1.2;
}

.notes-note-card-preview {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    min-height: 4.4em;
}

.notes-note-type-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 0.82rem;
}

.notes-card-chip {
    padding: 0.22rem 0.5rem;
    font-size: 0.68rem;
    line-height: 1.15;
}

.notes-note-card.is-dragging {
    opacity: 0.3;
}

.notes-card-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.notes-card-chip i {
    font-size: 0.72rem;
}

.notes-card-chip--incoming {
    background: rgba(13, 202, 240, 0.2);
    color: #d7fbff;
}

.notes-card-chip--outgoing {
    background: rgba(25, 135, 84, 0.22);
    color: #d8ffea;
}

.notes-card-chip--status-active {
    background: rgba(25, 135, 84, 0.2);
}

.notes-card-chip--status-in_progress {
    background: rgba(13, 110, 253, 0.22);
}

.notes-card-chip--status-blocked {
    background: rgba(220, 53, 69, 0.24);
}

.notes-card-chip--status-done {
    background: rgba(25, 135, 84, 0.3);
}

.notes-card-chip--status-archived {
    background: rgba(108, 117, 125, 0.3);
}

.notes-empty-card {
    background: rgba(15, 23, 42, 0.62);
    padding: 1.5rem;
    display: grid;
    gap: 10px;
    place-items: start;
}

body.notes-sticky-mode .container-fluid:not(:has(#noteWorkspaceModal)),
body.notes-sticky-mode .app-shell > :not(#noteWorkspaceModal),
body.notes-sticky-mode .navbar,
body.notes-sticky-mode .nav-pills,
body.notes-sticky-mode #notificationBellAnchor {
    display: none !important;
}

body.notes-sticky-mode {
    background: #020617;
    overflow: hidden;
}

body.notes-sticky-mode #noteWorkspaceModal {
    display: block !important;
}

body.notes-sticky-mode #noteWorkspaceModal.modal {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 28%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.985), rgba(2, 6, 23, 0.985));
}

body.notes-sticky-mode #noteWorkspaceModal .modal-dialog,
body.notes-sticky-mode #noteWorkspaceModal .modal-content {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
}

body.notes-sticky-mode #noteWorkspaceModal .modal-content {
    background: transparent;
}

body.notes-sticky-mode #noteWorkspaceModal .modal-header,
body.notes-sticky-mode #noteWorkspaceModal .modal-body {
    background: transparent;
}

body.notes-sticky-mode #noteWorkspaceModal .notes-editor-panel,
body.notes-sticky-mode #noteWorkspaceModal .notes-side-card,
body.notes-sticky-mode #noteWorkspaceModal .notes-editor-panel-head,
body.notes-sticky-mode #noteWorkspaceModal .notes-editor-fields,
body.notes-sticky-mode #noteWorkspaceModal .notes-editor-toolbar,
body.notes-sticky-mode #noteWorkspaceModal .notes-rich-toolbar {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.88));
}

body.notes-sticky-mode #noteWorkspaceModal .notes-editor-panel-head-actions {
    width: auto;
    justify-content: flex-end;
    flex-wrap: wrap;
}

body.notes-sticky-mode #noteWorkspaceModal .notes-editor-panel-head-actions .btn,
body.notes-sticky-mode #noteWorkspaceModal #noteSidePanelToggleButton {
    width: auto;
    flex: 0 0 auto;
}

body.notes-sticky-mode #noteWorkspaceModal #noteSidePanelToggleButton {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
}

body.notes-sticky-mode #noteWorkspaceModal #noteSidePanelToggleButton:hover,
body.notes-sticky-mode #noteWorkspaceModal #noteSidePanelToggleButton:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

body.notes-sticky-mode #noteWorkspaceModal .notes-side-panel {
    background:
        linear-gradient(180deg, rgba(9, 14, 25, 0.985), rgba(2, 6, 23, 0.985));
}

.notes-empty-card-title {
    font-weight: 700;
    color: #fff;
}

.notes-empty-card-copy {
    color: rgba(255, 255, 255, 0.72);
}

.notes-image-preview-shell {
    min-height: 180px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

.notes-checklist-list {
    display: grid;
    gap: 8px;
}

.notes-checklist-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

@media (max-width: 1199.98px) {
    .notes-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        height: calc(100vh - 155px);
    }

    .notes-card-grid--folders {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .notes-card-grid--notes {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 991.98px) {
    .notes-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
        min-height: 0;
        height: calc(100vh - 130px);
    }

    .notes-sidebar-app {
        order: 1;
        grid-template-columns: 1fr;
        position: static;
        top: auto;
        z-index: auto;
        max-height: none;
        overflow: hidden;
    }

    .notes-main-app {
        order: 2;
        min-height: 0;
        gap: 10px;
    }

    .notes-main-hero {
        position: relative;
        top: auto;
        z-index: 2;
        padding: 10px;
    }

    .notes-entry-card--folder,
    .notes-note-card {
        padding: 0.7rem;
    }

    .notes-card-grid--folders,
    .notes-card-grid--notes {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 8px;
    }

}

@media (max-width: 767.98px) {
    .notes-shell {
        grid-template-rows: auto minmax(0, 1fr);
        height: calc(100vh - 112px);
    }

    .notes-sidebar-app {
        grid-template-columns: 1fr;
        top: auto;
        max-height: none;
        padding: 10px;
        gap: 10px;
    }

    .notes-main-hero {
        top: auto;
        padding: 8px;
    }

    .notes-sidebar-top {
        flex-direction: column;
        align-items: stretch;
    }

    .notes-main-filter-row {
        align-items: stretch;
    }

    .notes-filter-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .notes-breadcrumb-bar {
        align-items: stretch;
        gap: 8px;
    }

    .notes-breadcrumb {
        row-gap: 4px;
    }

    .notes-sidebar-top-actions {
        width: 100%;
    }

    .notes-sidebar-top-actions .btn,
    .notes-filter-pill {
        width: 100%;
    }

    .notes-card-grid--folders,
    .notes-card-grid--notes {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .notes-folder-color-palette {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .notes-main-results {
        padding: 8px;
    }

    .notes-entry-card--folder,
    .notes-note-card {
        padding: 0.7rem;
        border-radius: 6px;
    }

    .notes-entry-folder-icon,
    .notes-note-type-icon {
        width: 26px;
        height: 26px;
        border-radius: 8px;
        font-size: 0.76rem;
    }

    .notes-entry-card-title,
    .notes-note-card-title {
        font-size: 0.82rem;
    }

    .notes-note-card {
        min-height: 172px;
    }

    .notes-entry-card-copy,
    .notes-entry-card-meta,
    .notes-note-card-preview,
    .notes-note-card-date,
    .notes-note-card-folder,
    .notes-note-card-footer,
    .notes-note-card-footer span {
        font-size: 0.68rem;
    }

    .notes-entry-card-menu {
        width: 22px;
        height: 22px;
    }

    .notes-entry-card-head {
        gap: 6px;
    }

    .notes-note-card-meta {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
    }

    .notes-results-head {
        gap: 0.55rem;
    }
}

.btn-teal {
    color: #084C61; /* Texto en color teal oscuro */
    background-color: #A5D8D4; /* Fondo en teal claro */
    border: 1px solid #084C61; /* Borde en color teal oscuro */
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}

/* Efecto hover */
.btn-teal:hover {
    background-color: #92c3c0; /* Color de fondo más oscuro al hacer hover */
    color: #063b48; /* Texto en color más oscuro al hacer hover */
    border-color: #063b48;
}

/* Efecto active */
.btn-teal:active {
    background-color: #79b1ae !important; /* Color de fondo al hacer clic */
    color: #052f3b; /* Texto en color más oscuro */
    border-color: #052f3b;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* Efecto de presión */
}

/* Efecto focus */
.btn-teal:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(8, 76, 97, 0.25); /* Sombra para el foco */
}

/* Cambiar fondo del botón cuando está abierto */


/* Teal */
button[id^="headingMemoBtn"].text-teal:not(.collapsed) {
    background-color: rgba(64, 224, 208, 0.2); /* Fondo teal translúcido */
}

/* Acordeón abierto (botón no colapsado) - fondo común */
button[id^="headingMemoBtn"]:not(.collapsed) {
    background-color: rgba(0, 0, 0, 0.05); /* Fondo común para botones de acordeones abiertos */
}

/* Fondo específico para cada clase de estado (success, warning, etc.) */

/* Success */
button[id^="headingMemoBtn"].text-success:not(.collapsed) {
    background-color: rgba(40, 167, 69, 0.2); /* Fondo verde translúcido para success */
}

/* Warning */
button[id^="headingMemoBtn"].text-warning:not(.collapsed) {
    background-color: rgba(255, 193, 7, 0.2); /* Fondo amarillo translúcido para warning */
}

/* Danger */
button[id^="headingMemoBtn"].text-danger:not(.collapsed) {
    background-color: rgba(220, 53, 69, 0.2); /* Fondo rojo translúcido para danger */
}

/* Primary */
button[id^="headingMemoBtn"].text-primary:not(.collapsed) {
    background-color: rgba(0, 123, 255, 0.2); /* Fondo azul translúcido para primary */
}

/* Secondary */
button[id^="headingMemoBtn"].text-secondary:not(.collapsed) {
    background-color: rgba(108, 117, 125, 0.2); /* Fondo gris translúcido para secondary */
}

/* Info */
button[id^="headingMemoBtn"].text-info:not(.collapsed) {
    background-color: rgba(23, 162, 184, 0.2); /* Fondo cyan translúcido para info */
}

/* Dark */
button[id^="headingMemoBtn"].text-dark:not(.collapsed) {
    background-color: rgba(52, 58, 64, 0.2); /* Fondo oscuro translúcido para dark */
}

/* Light */
button[id^="headingMemoBtn"].text-light:not(.collapsed) {
    background-color: rgba(248, 249, 250, 0.2); /* Fondo claro translúcido para light */
}

/* Default background for all open accordions if no specific state class is applied */
button[id^="headingMemoBtn"]:not(.collapsed) {
    background-color: rgba(0, 0, 0, 0.05); /* Fondo común */
}

.nav-link {
    position: relative;
    padding: 5px; /* Ajusta el padding según sea necesario */
    overflow: hidden; /* Asegura que no se desborde el texto */
    display: flex; /* Usar flexbox para alinear icono y texto */
    flex-direction: row; /* Mantener icono y texto en fila */
    justify-content: center; /* Centrar verticalmente */
    align-items: center; /* Centrar horizontalmente */
}

.nav-link.active {
    border-bottom: 2px solid white;  /* Borde inferior blanco */
    border-radius: 0;
}

.nav-link small {
    opacity: 1; /* Muestra el texto por defecto */
    transform: translateY(0); /* Asegúrate de que esté en su posición original */
    visibility: visible; /* Asegura que el texto sea visible */
}

@media (max-width: 768px) {
    .nav-link small {
       margin-left:5px;
    }

}

@media (min-width: 769px) {
    .nav-link small {
        margin-left:5px;
    }
}

.pointer {
    cursor:pointer;
}

.eventFound:hover {
    background-color: #4d4d4d; /* Fondo gris claro */
    transition: background-color 0.3s ease; /* Transición suave del cambio de color */
}

.eventFound {
    padding:5px;
}

#eventContainer {               /* Altura mínima */
    height: 150px;     /* Calcula el alto restante, ajustando 100px (por ejemplo, espacio ocupado por encabezado o margen superior) */
    overflow-y: auto;                /* Desplazamiento vertical si es necesario */
}

#nextEventContainer {               /* Altura mínima */
    height: 150px;     /* Calcula el alto restante, ajustando 100px (por ejemplo, espacio ocupado por encabezado o margen superior) */
    overflow-y: auto;                /* Desplazamiento vertical si es necesario */
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
    100% { opacity: 1; } /* Eliminar el fondo al final */
}

.blink {
    animation: blink 0.5s ease-in-out 3 forwards; /* Parpadea y permanece en el último estado */
}

.highlighted-event {
    /*background-color: yellow !important;*/
    transition: background-color 0.3s ease, border 0.3s ease;
}

mark {
    padding: 0;
}

.phone-search-highlight-inline {
    display: inline;
    white-space: normal;
}

.fc-event-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
     
}

.fc-event-time {
    display:none;
}

.fc-daygrid-event {
    background-color: rgba(55, 136, 216, 0.2);
}

.calendar-search-body .row.mb-2.mt-2 {
    margin-top: 0.7rem !important;
}

.eventFound {
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.72);
}

.eventFound:last-child {
    margin-bottom: 0;
}

.eventFound:hover {
    background-color: rgba(37, 99, 235, 0.16) !important;
    border-color: rgba(96, 165, 250, 0.28);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.eventFound-date {
    color: #93c5fd;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.eventFound-title {
    color: #f8fafc;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}

.container-accordion {
    height:250px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ══════════════════════════════════════════════════════════════
   DocTracker — layout sidebar + main  (modeled on stock-layout)
   ══════════════════════════════════════════════════════════════ */

/* ── Layout wrapper ───────────────────────────────────────── */
.dt-layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  background: rgba(10, 16, 30, 0.55);
}

/* ── Sidebar ──────────────────────────────────────────────── */
.dt-sidebar {
  width: 248px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(10, 16, 30, 0.72);
  overflow: hidden;
  transition: width 0.22s ease;
}

.dt-sidebar.is-collapsed {
  width: 0;
}

/* search row */
.dt-sidebar-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72rem 0.85rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
  flex-shrink: 0;
}

.dt-sidebar-search-icon {
  color: rgba(148, 163, 184, 0.55);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.dt-sidebar-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: #e2e8f0;
  outline: none;
  font-size: 0.875rem;
}

.dt-sidebar-search-input::placeholder {
  color: rgba(148, 163, 184, 0.5);
}

.dt-sidebar-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(229, 237, 247, 0.65);
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.dt-sidebar-search-clear:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.dt-sidebar-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(229, 237, 247, 0.65);
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.72rem;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.dt-sidebar-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* scrollable filter area */
.dt-sidebar-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.85rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

/* filter group: label + control */
.dt-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.dt-filter-label {
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.55);
}

.dt-select {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 0.82rem;
  padding: 0.38rem 0.6rem;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
  appearance: auto;
}

.dt-select:focus {
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

.dt-select option {
  background: #1a2540;
  color: #e2e8f0;
}

.dt-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 0.82rem;
  padding: 0.38rem 0.6rem;
  outline: none;
  transition: border-color 0.15s;
  color-scheme: dark;
}

.dt-input:focus {
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

/* date range row */
.dt-date-range {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.dt-date-range .dt-input {
  flex: 1;
  min-width: 0;
}

.dt-date-sep {
  color: rgba(148, 163, 184, 0.45);
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* clear button */
.dt-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.42rem 0.75rem;
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 6px;
  color: rgba(229, 237, 247, 0.55);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.dt-clear-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(148, 163, 184, 0.35);
  color: rgba(229, 237, 247, 0.85);
}

/* divider */
.dt-divider {
  border: none;
  border-top: 1px solid rgba(148, 163, 184, 0.10);
  margin: 0.25rem 0;
}

/* stats */
.dt-stats-head {
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.55);
  margin-bottom: 0.4rem;
}

.dt-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.dt-stat-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 8px;
  padding: 0.7rem 0.65rem;
  text-align: center;
}

.dt-stat-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1;
}

.dt-stat-label {
  font-size: 0.7rem;
  color: rgba(148, 163, 184, 0.55);
  margin-top: 0.25rem;
}

/* ── Main panel ───────────────────────────────────────────── */
.dt-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* feedback pill */
.dt-feedback {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(229, 237, 247, 0.7);
  transition: opacity 0.25s;
}

.dt-feedback[hidden] { display: none !important; }
.dt-feedback.is-success { border-color: rgba(74, 222, 128, 0.35); color: #4ade80; background: rgba(74, 222, 128, 0.08); }
.dt-feedback.is-danger  { border-color: rgba(248, 113, 113, 0.35); color: #f87171; background: rgba(248, 113, 113, 0.08); }
.dt-feedback.is-warning { border-color: rgba(251, 191, 36, 0.35); color: #fbbf24; background: rgba(251, 191, 36, 0.08); }
.dt-feedback.is-info    { border-color: rgba(96, 165, 250, 0.35); color: #60a5fa; background: rgba(96, 165, 250, 0.08); }

/* refresh icon spin */
@keyframes dtRefreshSpin {
  to { transform: rotate(360deg); }
}

.dt-refresh-icon.is-spinning {
  animation: dtRefreshSpin 0.7s linear infinite;
  display: inline-block;
}

/* inline loader */
.dt-loader {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(96, 165, 250, 0.12);
  background: rgba(15, 23, 42, 0.55);
  color: rgba(226, 232, 240, 0.8);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.dt-loader[hidden] { display: none !important; }

/* list head */
.dt-list-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.dt-list-head h5 {
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(229, 237, 247, 0.75);
  margin: 0;
}

/* search feedback badge */
.dt-search-feedback {
  font-size: 0.78rem;
  color: rgba(148, 163, 184, 0.65);
  margin-left: auto;
}

.dt-search-feedback.is-loading { color: #60a5fa; }
.dt-search-feedback.is-success { color: #4ade80; }
.dt-search-feedback.is-empty   { color: rgba(148, 163, 184, 0.5); }
.dt-search-feedback.is-error   { color: #f87171; }

/* scrollable list */
.dt-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 0.6rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

/* ── List item card ───────────────────────────────────────── */
.dt-list .memo-list-entry {
  margin-bottom: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(15, 23, 42, 0.94));
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.dt-list .memo-list-entry:hover {
  border-color: rgba(148, 163, 184, 0.22);
}

.dt-list .memo-list-entry.is-selected {
  border-color: rgba(96, 165, 250, 0.6);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.25);
}

.dt-list .memo-list-entry-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  align-items: stretch;
}

/* actions column (left) */
.dt-list .memo-list-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.5rem 0.45rem;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.dt-list .memo-list-actions .btn {
  min-height: 32px;
  min-width: 32px;
  padding: 0.28rem 0.45rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* main clickable area */
.dt-list .memo-list-entry-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0.6rem 0.8rem;
  background: transparent;
  color: var(--app-heading, #e2e8f0);
  text-align: left;
  box-shadow: none;
  border-radius: 0;
  transition: background 0.15s;
  appearance: none;
  cursor: pointer;
  gap: 0.3rem;
}

.dt-list .memo-list-entry-main:hover,
.dt-list .memo-list-entry-main:focus-visible {
  background: rgba(59, 130, 246, 0.07);
  outline: none;
}

.dt-list .memo-list-entry.is-selected .memo-list-entry-main,
.dt-list .memo-list-entry.is-selected .memo-list-actions {
  background: rgba(37, 99, 235, 0.10);
}

/* headline row: badge + number + sub */
.dt-list .memo-headline {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  width: 100%;
}

.dt-list .memo-headline .badge {
  flex: 0 0 auto;
  font-size: 0.68rem;
}

.dt-list .memo-headline .mh-number {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #e2e8f0;
}

/* meta row below headline */
.dt-list .memo-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  min-width: 0;
}

.dt-list .memo-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  color: rgba(148, 163, 184, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.dt-list .memo-meta-chip i {
  font-size: 0.68rem;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── Action label: visible en dt-list (override del JS-injected display:none) */
.dt-list .memo-list-actions {
  flex-direction: row;
  gap: 0.3rem;
}

/* Supera al .memo-list-actions .btn .memo-list-action-label del JS (3 clases) */
.dt-list .memo-list-actions .btn .memo-list-action-label {
  display: inline !important;
  margin-left: 0.25rem;
  font-size: 0.78rem;
}

@media (max-width: 991.98px) {
  .dt-list .memo-list-actions .btn .memo-list-action-label {
    display: none !important;
  }
}

/* meta label (Asig. a / Por) */
.memo-meta-label {
  color: rgba(148, 163, 184, 0.55);
  font-size: 0.68rem;
  margin-right: 0.2rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* observaciones chip */
.memo-meta-chip--obs {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .memo-meta-chip--obs {
    display: none;
  }
}

/* ── Mobile: sidebar collapses, layout stacks ─────────────── */
@media (max-width: 767.98px) {
  .dt-layout {
    flex-direction: column;
    border-radius: 8px;
  }

  .dt-sidebar {
    width: 100%;
    max-height: 0;
    border-right: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    transition: max-height 0.28s ease;
    overflow: hidden;
  }

  .dt-sidebar.is-open {
    max-height: 480px;
    overflow-y: auto;
  }

  .dt-sidebar.is-collapsed {
    width: 100%;
    max-height: 0;
  }

  .dt-list .memo-list-entry-shell {
    grid-template-columns: 1fr;
    position: relative;
  }

  .dt-list .memo-list-actions {
    position: absolute;
    top: 0.42rem;
    right: 0.42rem;
    z-index: 2;
    flex-direction: row;
    border-right: none;
    padding: 0;
    background: transparent;
    gap: 0.25rem;
  }

  .dt-list .memo-list-entry-main {
    padding: 0.65rem 9.5rem 0.65rem 0.75rem;
    min-height: 52px;
  }

  .dt-list .memo-meta-chip {
    max-width: 130px;
  }
}

@media (max-width: 575.98px) {
  .dt-list .memo-list-actions .btn {
    min-height: 30px;
    min-width: 30px;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
  }

  .dt-list .memo-meta {
    gap: 0.35rem;
  }

  .dt-list .memo-meta-chip {
    font-size: 0.68rem;
    max-width: 110px;
  }
}

/* ── Tab pane height (matches stock tab approach) ─────────── */
#pills-doctracker,
#pills-calls,
#pills-stock,
#pills-calendar {
  flex-direction: column;
  height: calc(100vh - 110px);
  overflow: hidden;
}

#pills-doctracker.active,
#pills-calls.active,
#pills-stock.active,
#pills-calendar.active {
  display: flex !important;
}

/* ── Empty state ──────────────────────────────────────────── */
.dt-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

.dt-empty-icon {
  font-size: 2.4rem;
  color: rgba(148, 163, 184, 0.25);
}

.dt-empty-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(229, 237, 247, 0.42);
}

.dt-empty-sub {
  margin: 0;
  font-size: 0.8rem;
  max-width: 280px;
  line-height: 1.5;
  color: rgba(148, 163, 184, 0.38);
}

#memoFullModal .modal-content {
  border-radius: 0 !important;
}

#richImageViewerModalLabel {
  z-index: 999999 !important;
}

.forms-select {
    min-width: 220px;
}

.forms-admin-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

#pills-forms.show.active {
    display: block !important;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

#pills-forms.show.active > .forms-admin-shell {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.forms-header-card {
    position: sticky;
    top: var(--app-sticky-top);
    z-index: 30;
    display: grid;
    gap: 0.9rem;
    align-self: stretch;
    margin: 0 calc(var(--app-tab-pane-padding) * -1) 0.75rem !important;
    padding: 0.65rem var(--app-tab-pane-padding) 0.95rem;
    border: 0;
    border-radius: 0;
    background: #0f172a;
    box-shadow: 0 10px 20px rgba(2, 6, 23, 0.22);
}

.forms-header-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.85rem 1rem;
}

.forms-header-copy {
    min-width: 0;
}

.forms-header-kicker {
    margin-bottom: 0.18rem;
    color: rgba(191, 219, 254, 0.82);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.forms-header-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.forms-header-subtitle {
    margin-top: 0.24rem;
    color: rgba(229, 237, 247, 0.68);
    font-size: 0.88rem;
    max-width: 680px;
}

.forms-header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.forms-header-actions .btn,
.forms-header-actions .form-select {
    width: auto;
    flex: 0 0 auto;
}

.forms-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.forms-header-search {
    width: 100%;
}

.forms-header-search .form-control {
    width: 100%;
    min-height: 40px;
}

.forms-content-shell {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    overflow: hidden;
}

.forms-list-shell {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.forms-create-card,
.forms-list-card {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 10px;
    background: rgba(9, 14, 25, 0.88);
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.18);
}

.forms-create-card .card-body,
.forms-list-card .card-body {
    padding: 0.9rem;
}

.forms-create-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.forms-create-head h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.forms-create-head p {
    color: rgba(229, 237, 247, 0.66);
    font-size: 0.84rem;
}

.forms-create-form {
    display: grid;
    gap: 0.85rem;
}

.forms-create-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
}

.forms-create-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.forms-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 0.25rem;
}

#pills-forms #formList.forms-list {
    flex: 1 1 auto !important;
    min-height: 140px;
    height: 100%;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* ── Forms list entries ─────────────────────────────── */
.forms-list-entry {
    border: 1px solid var(--app-border);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(15, 23, 42, 0.94));
    box-shadow: none;
    color: var(--app-heading);
}

.fi-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.02);
}

.fi-actions {
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0.35rem;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.02);
}

.fi-actions .btn {
    min-width: 0;
    flex: 0 0 auto;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.fi-label {
    display: none;
}

.fi-main {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
    border: 0;
    padding: 0.55rem 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    color: var(--app-heading);
    text-align: left;
    box-shadow: none;
    border-radius: 0;
    appearance: none;
    transition: background-color .18s ease;
}

.fi-main:hover,
.fi-main:focus-visible {
    background: rgba(59, 130, 246, 0.08);
    outline: none;
}

.fi-headline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    width: 100%;
}

.fi-name {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fi-info {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
}

@media (min-width: 992px) {
    .fi-label {
        display: inline;
        margin-left: 0.35rem;
    }

    .fi-actions {
        padding: 0.5rem 0.65rem;
    }
}

@media (max-width: 1199.98px) {
    .fi-actions {
        padding: 0.4rem;
        gap: 0.25rem;
    }

    .fi-actions .btn {
        min-height: 32px;
        padding: 0.3rem 0.45rem;
    }
}

@media (max-width: 767.98px) {
    .fi-shell {
        grid-template-columns: 1fr;
        position: relative;
    }

    .fi-actions {
        position: absolute;
        top: 0.45rem;
        right: 0.45rem;
        z-index: 2;
        padding: 0;
        background: transparent;
        border: 0;
        gap: 0.22rem;
    }

    .fi-actions .btn {
        min-height: 30px;
        padding: 0.28rem 0.42rem;
    }

    .fi-main {
        padding: 0.7rem 8.9rem 0.7rem 0.7rem;
        min-height: 44px;
    }
}

@media (max-width: 575.98px) {
    .fi-actions {
        top: 0.38rem;
        right: 0.38rem;
    }
}
/* ── end forms list entries ─────────────────────────── */

@media (max-width: 1199.98px) {
    .forms-header-actions .btn .btn-label {
        display: none;
    }

    .forms-header-actions .btn {
        min-width: 36px;
        padding-inline: 0.55rem;
    }
}

@media (max-width: 991.98px) {
    .forms-select {
        min-width: 180px;
    }

    .forms-create-actions {
        justify-content: stretch;
    }

}

@media (max-width: 767.98px) {
    .forms-admin-shell {
        gap: 10px;
    }

    .forms-header-card {
        top: 60px;
        gap: 0.7rem;
        padding: 0.55rem 0.7rem 0.8rem;
        margin-inline: -0.1rem !important;
    }

    .forms-header-head {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .forms-header-title {
        font-size: 1rem;
    }

    .forms-header-subtitle {
        font-size: 0.8rem;
        max-width: none;
    }

    .forms-header-actions {
        gap: 0.4rem;
        justify-content: flex-start;
    }

    .forms-header-actions .btn,
    .forms-header-actions .form-select {
        min-height: 34px;
        font-size: 0.78rem;
    }

    .forms-header-search .form-control {
        min-height: 34px;
        padding: 0.28rem 0.55rem;
        font-size: 0.82rem;
    }

    .forms-create-card .card-body,
    .forms-list-card .card-body {
        padding: 0.75rem;
    }

    .forms-list-item {
        padding: 0.72rem !important;
    }

    .forms-list {
        min-height: 140px;
    }
}

@media (min-width: 768px) {
    #userList .user-list-entry-shell {
        grid-template-columns: auto minmax(0, 1fr);
    }

    #userList .user-list-actions {
        order: 1;
        justify-content: flex-start;
        border-left: 0;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
    }

    #userList .user-list-entry-main {
        order: 2;
    }

    #formList .forms-list-item-shell {
        grid-template-columns: auto minmax(0, 1fr);
        position: static;
    }

    #formList .forms-list-item-actions {
        position: static;
        order: 1;
        width: auto;
        padding: 0.55rem 0.65rem;
        justify-content: flex-start;
        border-left: 0;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
        border-top: 0;
        background: rgba(255, 255, 255, 0.018);
    }

    #formList .forms-list-item-main {
        order: 2;
        padding-right: 0.7rem;
    }
}

.forms-edit-modal {
    background: #212529;
    color: #fff;
    border-radius: 0 !important;
}

.forms-edit-modal-header {
    border-bottom: 0;
    padding: 1rem 1.2rem;
}

.forms-edit-modal-title {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.forms-edit-modal-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    font-size: 1.2rem;
}

.forms-edit-modal-subtitle {
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.84rem;
}

.forms-edit-modal-body,
.forms-edit-layout,
.forms-edit-grid,
.forms-edit-main,
.forms-edit-side {
    min-height: 0;
}

.forms-edit-tabs {
    gap: 0.45rem;
    margin-bottom: 0.75rem;
    padding: 0.1rem;
    align-self: flex-start;
    border-radius: 6px;
    /*background: rgba(255, 255, 255, 0.04);*/
}

.forms-edit-tabs .nav-link {
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    padding: 0.52rem 0.8rem;
    font-weight: 600;
}

.forms-edit-tabs .nav-link.active {
    background: rgba(13, 110, 253, 0.22);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(158, 197, 254, 0.18);
}

.forms-edit-tab-shell,
.forms-edit-tab-pane,
.forms-edit-surface {
    min-height: 0;
    height: 100%;
}

.forms-edit-surface {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
    overflow: hidden;
}

.forms-edit-section {
    padding: 0.85rem 0.95rem;
}

.forms-edit-section--hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.forms-edit-eyebrow {
    color: #9ec5fe;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.forms-edit-section-title {
    margin: 0.15rem 0 0;
    color: #fff;
    font-size: 0.98rem;
    font-weight: 700;
}

.forms-edit-section-copy {
    margin: 0.25rem 0 0;
    color: rgba(229, 237, 247, 0.68);
    font-size: 0.82rem;
}

.forms-edit-inline-note {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.035);
    color: rgba(229, 237, 247, 0.82);
}

.forms-config-sections {
    display: grid;
    gap: 0.65rem;
    padding: 0.85rem;
    min-height: 76px;
    max-height: 240px;
    overflow: auto;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
}

.forms-tasks-pane {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.55rem;
    min-height: 0;
    overflow: hidden;
}

.forms-tasks-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 0.45rem;
    min-height: 0;
}

.forms-tasks-toolbar-main,
.forms-tasks-toolbar-field {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
}

.forms-tasks-toolbar-main {
    flex: 1 1 auto;
}

.forms-tasks-toolbar-field {
    flex: 0 0 145px;
}

.forms-tasks-toolbar .form-label {
    margin-bottom: 0;
    font-size: 0.76rem;
    color: rgba(229, 237, 247, 0.72);
}

.forms-task-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.forms-task-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    min-height: 34px;
    padding: 0.38rem 0.7rem;
    white-space: nowrap;
}

.forms-task-list {
    display: grid;
    gap: 0.55rem;
    min-height: 0;
    height: 100%;
    max-height: calc(100vh - 320px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.25rem;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    contain: layout paint;
}

.forms-task-card {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-left: 3px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    background: linear-gradient(160deg, rgba(22, 30, 50, 0.97), rgba(14, 20, 38, 0.95));
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.forms-task-card:hover {
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

.forms-task-card[data-status="pending"] { border-left-color: #f59e0b; }
.forms-task-card[data-status="in_progress"] { border-left-color: #3b82f6; }
.forms-task-card[data-status="waiting"] { border-left-color: #a78bfa; }
.forms-task-card[data-status="completed"] { border-left-color: #22c55e; }
.forms-task-card[data-status="cancelled"] { border-left-color: rgba(148, 163, 184, 0.3); }

.forms-task-card.is-highlighted {
    border-color: rgba(96, 165, 250, 0.72);
    border-left-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25), 0 4px 16px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

.forms-task-card-head {
    display: grid;
    gap: 0.42rem;
    padding: 0.72rem 0.82rem 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.forms-task-card-titlewrap {
    display: grid;
    gap: 0.38rem;
    min-width: 0;
}

.forms-task-card-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.forms-task-card-title-row-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.forms-task-card-title {
    color: #e2e8f0;
    font-size: 0.93rem;
    font-weight: 700;
    line-height: 1.25;
}

.forms-task-edit-btn {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0.22rem 0.52rem;
    font-size: 0.78rem;
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.75);
}

.forms-task-edit-btn:hover {
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.forms-task-assign-me-btn {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 0.22rem 0.52rem;
    font-size: 0.78rem;
    border-color: rgba(34, 197, 94, 0.4);
    color: #86efac;
    background: rgba(34, 197, 94, 0.07);
    white-space: nowrap;
}

.forms-task-assign-me-btn:hover {
    border-color: rgba(34, 197, 94, 0.7);
    background: rgba(34, 197, 94, 0.15);
    color: #bbf7d0;
}

.forms-task-assigned-me-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: #86efac;
    padding: 0.2rem 0.48rem;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 0.375rem;
    white-space: nowrap;
}

.forms-task-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    align-items: center;
}

.forms-task-inline-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.48rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(203, 213, 225, 0.9);
    font-size: 0.75rem;
    line-height: 1.2;
}

.forms-task-inline-chip i {
    color: #93c5fd;
    font-size: 0.78rem;
}

.forms-task-inline-chip--mode i {
    color: #c4b5fd;
}

.forms-task-card-body {
    display: grid;
    gap: 0.5rem;
    padding: 0.65rem 0.82rem 0.82rem;
    color: rgba(203, 213, 225, 0.88);
}

.forms-task-card-copy {
    color: rgba(203, 213, 225, 0.82);
    font-size: 0.84rem;
    line-height: 1.45;
}

.forms-task-date-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
}

.forms-task-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(203, 213, 225, 0.85);
    font-size: 0.74rem;
    line-height: 1.2;
}

.forms-task-date-badge i {
    color: #93c5fd;
    font-size: 0.78rem;
}

.forms-task-date-badge strong {
    color: rgba(203, 213, 225, 0.55);
    font-size: 0.67rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.forms-task-card-note {
    padding: 0.48rem 0.6rem;
    border-radius: 6px;
    background: rgba(148, 163, 184, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.1);
    color: rgba(203, 213, 225, 0.78);
    font-size: 0.79rem;
}

/* Assign-me row inside taskModal */
.forms-task-assign-row {
    display: flex;
    align-items: flex-end;
    gap: 0.45rem;
}

.forms-task-assign-row .form-select {
    flex: 1 1 0;
    min-width: 0;
}

.forms-task-assign-me-modal-btn {
    flex-shrink: 0;
    white-space: nowrap;
    height: calc(1.5em + 0.75rem + 2px);
}

.forms-task-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1rem;
}

#formTasksSidebar {
    background: rgba(9, 14, 25, 0.98);
    color: #fff;
}

.forms-task-sidebar-card {
    display: grid;
    gap: 0.95rem;
}

.forms-task-sidebar-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.forms-task-sidebar-kpi {
    display: grid;
    gap: 0.25rem;
    padding: 0.8rem 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
}

.forms-task-sidebar-kpi span {
    color: rgba(229, 237, 247, 0.68);
    font-size: 0.82rem;
}

.forms-task-sidebar-kpi strong {
    color: #fff;
    font-size: 1.1rem;
}

.forms-task-modal {
    background: linear-gradient(180deg, rgba(10, 15, 26, 0.98) 0%, rgba(6, 10, 20, 1) 100%);
}

.forms-edit-side {
    min-height: 0;
    overflow: hidden;
}

.forms-task-hours-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.9rem;
    border-radius: 999px;
    background: rgba(13, 110, 253, 0.16);
    border: 1px solid rgba(158, 197, 254, 0.16);
    color: #cfe2ff;
    font-weight: 600;
}

.forms-edit-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    padding: 0.5rem 0.8rem;
    background: rgba(13, 110, 253, 0.14);
    color: #cfe2ff;
    white-space: nowrap;
    font-size: 0.82rem;
}

.forms-edit-section--body {
    overflow-y: auto;
}

.forms-edit-section--audit {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 0.75rem;
    padding-bottom: 0.25rem;
}

.forms-audit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1.5rem;
    margin: 0;
}

@media (max-width: 480px) {
    .forms-audit-grid {
        grid-template-columns: 1fr;
    }
}

.forms-audit-item dt {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(229, 237, 247, 0.45);
    margin-bottom: 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.forms-audit-item dd {
    margin: 0;
    font-size: 0.82rem;
    color: rgba(229, 237, 247, 0.75);
    line-height: 1.3;
}

.forms-audit-item dd.forms-audit-user {
    font-size: 0.75rem;
    color: rgba(229, 237, 247, 0.45);
}

.forms-edit-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.95rem 1.05rem 1.05rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    flex-wrap: wrap;
}

.forms-edit-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.forms-comments-card {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 12px;
    background: rgba(9, 14, 25, 0.88);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.18);
}

.forms-comments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1rem 0.2rem;
}

.forms-comment-card {
    gap: 0.7rem;
}

.forms-comment-card-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.forms-comment-parent-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: rgba(13, 110, 253, 0.14);
    color: #cfe2ff;
    font-size: 0.76rem;
}

.forms-comment-reactions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.forms-comment-reaction,
.forms-comment-reaction-picker-btn {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    padding: 0.26rem 0.55rem;
    font-size: 0.8rem;
}

.forms-comment-reaction.is-active {
    border-color: rgba(158, 197, 254, 0.34);
    background: rgba(13, 110, 253, 0.16);
}

.forms-comment-reaction-picker {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.forms-comment-image-preview {
    display: block;
    max-width: 220px;
    padding: 0;
    border: 0;
    background: transparent;
}

.forms-comment-image-preview img {
    display: block;
    width: 100%;
    border-radius: 10px;
}

.forms-comment-file {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #9ec5fe;
    text-decoration: none;
}

.forms-comment-attachment-state {
    padding-top: 0.2rem;
}

.forms-comment-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.42rem 0.6rem;
    border: 1px solid rgba(158, 197, 254, 0.18);
    border-radius: 8px;
    background: rgba(13, 110, 253, 0.1);
}

.forms-comment-attachment-chip-main {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.forms-comment-attachment-clear {
    color: #cfe2ff;
    padding: 0;
}

.forms-inline-edit-editor {
    min-height: 140px !important;
}

.forms-inline-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-top: 0.7rem;
    flex-wrap: wrap;
}

.forms-comment-history-item + .forms-comment-history-item {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.forms-comment-history-meta {
    margin-bottom: 0.65rem;
    color: #9ec5fe;
    font-size: 0.82rem;
}

.forms-comment-history-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.forms-comment-history-copy {
    margin-top: 0.35rem;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}

/* Estilos generales para el modal de stock */
#currentStockInfo {
    padding: 10px;
    background-color: #212529; /* Fondo claro */
    border-radius: 8px;
    border: 1px solid #dee2e6; /* Borde gris claro */
    margin-top: 15px;
    font-family: 'Arial', sans-serif;
    color: white; /* Texto en gris oscuro */
}

.text-bold {
    font-weight:bold;
}

/* Títulos */
#currentStockInfo h5 {
    margin-bottom: 10px;
    font-size: 1.25rem;
    color: #007bff; /* Azul para títulos */
    font-weight: bold;
}

/* Información de stock de chalecos y guantes */
#currentStockInfo p {
    font-size: 1rem;
    margin-bottom: 5px;
    font-weight: bold;
    display: inline-block; /* Chalecos y guantes en línea */
    margin-right: 20px;
}

/* Lista de talles de zapatos */
#currentStockInfo ul {
    list-style-type: none; /* Eliminar bullets */
    padding-left: 0;
    margin-top: 10px;
}

/* Estilos para cada ítem de la lista */
#currentStockInfo ul li {
    padding: 8px 0;
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dee2e6; /* Líneas separadoras */
}

/* Estilos para el texto de las unidades */
#currentStockInfo ul li span {
    font-weight: normal;
    color: #495057; /* Texto en gris más suave */
}


/* Aplicar color gris claro a todos los placeholders de input y textarea */
input::placeholder,
textarea::placeholder {
    color: #c0c0c0; /* Gris claro */
    opacity: 1;
}

input::-webkit-input-placeholder, 
textarea::-webkit-input-placeholder {
    color: #c0c0c0;
}

input::-moz-placeholder, 
textarea::-moz-placeholder {
    color: #c0c0c0;
}

input:-ms-input-placeholder, 
textarea:-ms-input-placeholder {
    color: #c0c0c0;
}

input::-ms-input-placeholder, 
textarea::-ms-input-placeholder {
    color: #c0c0c0;
}

/* Asegurando mayor especificidad para inputs y textareas */
input.form-control::placeholder,
textarea.form-control::placeholder {
    color: #c0c0c0 !important;
}

/* Fondo oscuro y texto blanco */
.tooltip-inner {
    background-color: rgba(0, 0, 0, 0.8); /* Color negro semitransparente similar al default */
    color: #ffffff; /* Color de texto blanco */
    font-size: 0.875rem; /* Tamaño de texto predeterminado */
    padding: 0.5rem 0.75rem; /* Espaciado igual que en Bootstrap */
    border-radius: 0.25rem; /* Bordes redondeados */
    box-shadow: 0 0.15rem 0.3rem rgba(0, 0, 0, 0.15); /* Sombra sutil */
}

/* Color de la flecha del tooltip */
.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-left .tooltip-arrow::before,
.tooltip.bs-tooltip-right .tooltip-arrow::before {
    background-color: rgba(0, 0, 0, 0.8); /* Fondo de la flecha igual al fondo del tooltip */
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.hidden {
    display: none;
}

#calendar.fullcalendar-custom {
    min-height: clamp(420px, 68vh, 860px);
}

.fc {
    min-height: 100%;
}

.fc-view-harness,
.fc-view-harness-active {
    min-height: clamp(360px, 58vh, 760px) !important;
}

.my-calendar-toolbar {
    margin-bottom: 20px;
    text-align: center; /* Centrar los botones */
}

.my-calendar-toolbar .btn {
    margin: 5px;
    padding: 10px 20px;
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 576px) {
    .fc-toolbar .fc-button {
        font-size: 0.8rem; /* Ajustar el tamaño del texto de los botones en pantallas pequeñas */
        padding: 0.25rem 0.5rem;
        min-width: 50px;
    }

    .fc-toolbar h2 {
        font-size: 1rem; /* Reducir más el tamaño del texto en pantallas pequeñas */
    }
}

/* Ajustar para pantallas pequeñas */
@media (max-width: 576px) {
    .fc-toolbar .fc-button {
        font-size: 0.8rem; /* Disminuir el tamaño del texto en pantallas pequeñas */
        padding: 0.25rem 0.5rem;
        min-width: 50px;
    }

    .fc-toolbar h2 {
        font-size: 1.2rem; /* Ajustar el tamaño del título para pantallas pequeñas */
    }
}

.fc-popover {
    background-color: #333333 !important; /* Fondo oscuro */
    color: #ffffff !important;            /* Texto claro */
    border-color: #444444 !important;     /* Bordes ligeramente más claros */
}

.fc-popover .fc-popover-header {
    background-color: #444444 !important; /* Fondo oscuro para el encabezado */
    color: #ffffff !important;            /* Texto claro en el encabezado */
}

#calendar .fc-list {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #0f172a;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12), 0 14px 30px rgba(2, 6, 23, 0.18);
}

#calendar .fc-list-sticky .fc-list-day > * {
    background: #1e293b !important;
}

#calendar .fc-list-day-cushion {
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    color: #f8fafc;
    font-weight: 700;
    letter-spacing: 0.01em;
}

#calendar .fc-list-day-cushion a,
#calendar .fc-list-day-cushion .fc-list-day-text,
#calendar .fc-list-day-cushion .fc-list-day-side-text {
    color: #f8fafc !important;
    text-decoration: none;
}

#calendar .fc-list-day.fc-day-today > * {
    background: #fccd38 !important;
    border: 0 !important;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

#calendar .fc-list-day.fc-day-today .fc-list-day-cushion,
#calendar .fc-list-day.fc-day-today .fc-list-day-cushion a,
#calendar .fc-list-day.fc-day-today .fc-list-day-text,
#calendar .fc-list-day.fc-day-today .fc-list-day-side-text {
    color: #111827 !important;
}

#calendar .fc-list-table td,
#calendar .fc-list-table th {
    border-color: rgba(148, 163, 184, 0.12);
}

#calendar .fc-list-event:hover td,
#calendar .fc-list-event.fc-event-mirror td {
    background: #1b2a41 !important;
    color: #f8fafc;
}

#calendar .fc-list-event td {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    background: #0f172a;
    color: #e5edf7;
    transition: background-color 0.18s ease, color 0.18s ease;
    vertical-align: middle;
}

#calendar .fc-list-event:nth-child(odd) td {
    background: #111c2f;
}

#calendar .fc-list-event-title {
    font-weight: 600;
}

#calendar .fc-list-event-time,
#calendar .fc-list-event-graphic {
    border-right: 1px solid rgba(148, 163, 184, 0.12);
}

#calendar .fc-list-event-time {
    width: 7.25rem;
    padding-inline: 1rem 0.85rem;
    color: #c7d2fe;
    font-weight: 700;
    white-space: nowrap;
}

#calendar .fc-list-event-title,
#calendar .fc-list-event-title a {
    color: #f8fafc !important;
    text-decoration: none;
}

#calendar .fc-list-event:hover .fc-list-event-title,
#calendar .fc-list-event:hover .fc-list-event-title a {
    color: #ffffff !important;
}

#calendar .fc-list-event-graphic {
    padding-inline: 0.9rem 0.55rem;
}

#calendar .fc-list-event-dot {
    border-color: #60a5fa;
    border-width: 6px;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.16);
}

#calendar .fc-list-empty {
    background: #0f172a;
}

#calendar .fc-list-empty-cushion {
    padding: 1.1rem;
    color: rgba(229, 237, 247, 0.74);
}

@media (max-width: 767.98px) {
    #calendar .fc-list-day-cushion {
        padding: 0.85rem 0.9rem;
    }

    #calendar .fc-list-event-time {
        width: 5.75rem;
        padding-inline: 0.8rem 0.65rem;
        font-size: 0.82rem;
    }

    #calendar .fc-list-event-graphic {
        padding-inline: 0.7rem 0.45rem;
    }

    #calendar .fc-list-event-title {
        font-size: 0.92rem;
    }
}

.fc-daygrid-more-link {
    background-color: #ffcc00; /* Color de fondo destacado */
    color: #000000; /* Color de texto contrastante */
    padding: 5px 10px; /* Añadir espacio interior */
    border-radius: 5px; /* Bordes redondeados */
    font-weight: bold; /* Texto en negrita */
}

.fc-daygrid-more-link:hover {
    background-color: #ffcc00; /* Color de fondo al hacer hover */
    color: #ffffff; /* Cambiar el color del texto al hacer hover */
    cursor: pointer; /* Cambiar el cursor al estilo de enlace */
}


/* Cambiar el color de los números de los días */
.fc-daygrid-day-number {
    color: #ffffff !important;  /* Color blanco para mejor contraste */
    font-weight: bold;  /* Opcional: hacer el número más grueso */
}

/* Cambiar el color del texto de los nombres de los días en la cabecera */
.fc-col-header-cell-cushion {
    color: #f0f0f0 !important;  /* Color claro para mejor contraste */
    font-size: 1.1rem; /* Tamaño del texto, ajústalo a tu preferencia */
    font-weight: bold; /* Opcional: hacer el texto más grueso */
}

/* Cambiar el fondo de la cabecera de los días */
.fc-col-header-cell {
    background-color: #333333 !important;  /* Fondo oscuro para contraste */
}

/* Estilo para el día actual con un amarillo más suave */
.fc-day-today {
    background-color: #fccd38 !important; /* Fondo amarillo suave */
    border: 2px solid #fccd38 !important; /* Borde amarillo Bootstrap warning */
    color: #212529 !important; /* Texto negro para mejor contraste */
    font-weight: bold !important; /* Hacer el texto más grueso */
    box-shadow: 0px 0px 10px 2px rgba(255, 193, 7, 0.3); /* Sombra más suave */
}

/* Estilo específico para el número del día actual */
.fc-day-today .fc-daygrid-day-number {
    color: #000 !important; /* Cambiar el número del día a negro */
    font-weight: bold; /* Mantener el número en negrita */
}

/* Estilo para los elementos contenteditable que simula el input de Bootstrap */
.contenteditable-input {
    color: #fff; /* Siempre blanco */
    padding: 0.375rem 0.75rem;
}

/* Estilo para cuando el elemento es editable */
.contenteditable-input[contenteditable="true"] {
    display: inline-block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    color: #212529; /* Color de texto cuando es editable */
}

.contenteditable-input[contenteditable="true"]:focus {
    color: #212529; /* Color de texto en foco cuando es editable */
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* Estilo para el modo lectura (contenteditable="false") */
.contenteditable-input[contenteditable="false"] {
    color: #fff; /* Color blanco para texto en modo lectura */
    background-color: transparent;
    border: none;
}

.fc-bg-event {
    background-color: rgba(0, 0, 0, 0.1); /* Asegura que el evento de fondo sea visible */
    border: none; /* Sin borde */
    opacity: 0.5; /* Ajustar la opacidad según sea necesario */
}


/* Estilos para los botones predeterminados de FullCalendar */
.fc-button {
    background-color: #007bff; /* Color de fondo */
    color: #fff; /* Color de texto */
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 5px;
    margin-right: 5px;
    font-size: 0.9rem;
}

.fc-button:hover {
    background-color: #0056b3; /* Color de fondo al pasar el mouse */
}

.fc-prev-button, .fc-next-button {
    background-color: #007bff; /* Color de fondo para los botones de navegación */
    border-radius: 50%; /* Hacer los botones circulares */
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fc-prev-button:hover, .fc-next-button:hover {
    background-color: #0056b3; /* Color de fondo al pasar el mouse */
}

.fc-button-group .fc-button {
    margin: 0 5px;
}

.fc-today-button {
    background-color: #28a745; /* Color verde para el botón de hoy */
}

.fc-today-button:hover {
    background-color: #218838; /* Color verde más oscuro al pasar el mouse */
}

/* Alineación del texto en los botones */
.fc-button .fc-button-content {
    display: inline-block;
    font-weight: bold;
}

/* Ajustar los botones de vista como Mes, Semana, Día, Lista */
.fc-button.fc-button-primary {
    background-color: #6c757d;
    color: #fff;
}

.fc-button.fc-button-primary:hover {
    background-color: #5a6268;
}

/* Indicador para eventos anuales */
.fc-event.event-annual .fc-event-title::before {
    content: "📅 ";  /* Indicador para evento anual */
    color: #ffcc00;  /* Puedes ajustar el color o el icono según prefieras */
    margin-right: 2px;
}

/* Indicador para eventos anuales */
.fc-event.event-remind .fc-event-title::before {
    content: "⏰ ";  /* Indicador para evento anual */
    color: #ffcc00;  /* Puedes ajustar el color o el icono según prefieras */
    margin-right: 2px;
}

/* Indicador para eventos anuales */
.fc-event.event-annual-remind .fc-event-title::before {
    content: "📅 ⏰ ";  /* Indicador para evento anual */
    color: #ffcc00;  /* Puedes ajustar el color o el icono según prefieras */
    margin-right: 2px;
}

/* Ejemplo de fondo con imágenes que se repiten sin estirarse */

.board-img-1 {
  background-image: url('../img/fondos-notas/1.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  color: #fff !important;
}

.board-img-2 {
  background-image: url('../img/fondos-notas/2.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  color: #fff !important;
}

.board-img-3 {
  background-image: url('../img/fondos-notas/3.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  color: #fff !important;
}

.board-img-4 {
  background-image: url('../img/fondos-notas/4.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  color: #fff !important;
}

.board-img-5 {
  background-image: url('../img/fondos-notas/5.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  color: #fff !important;
}

.board-img-6 {
  background-image: url('../img/fondos-notas/6.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  color: #fff !important;
}

.board-img-7 {
  background-image: url('../img/fondos-notas/7.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  color: #fff !important;
}

.board-img-8 {
  background-image: url('../img/fondos-notas/8.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  color: #fff !important;
}

.board-img-9 {
  background-image: url('../img/fondos-notas/9.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  color: #fff !important;
}

.board-img-10 {
  background-image: url('../img/fondos-notas/10.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  color: #fff !important;
}

/* Continuar hasta la imagen 19 */

.board-img-11 {
  background-image: url('../img/fondos-notas/11.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  color: #fff !important;
}

.board-img-12 {
  background-image: url('../img/fondos-notas/12.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  color: #fff !important;
}

.board-img-13 {
  background-image: url('../img/fondos-notas/13.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  color: #fff !important;
}

.board-img-14 {
  background-image: url('../img/fondos-notas/14.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  color: #fff !important;
}

.board-img-15 {
  background-image: url('../img/fondos-notas/15.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  color: #fff !important;
}

.board-img-16 {
  background-image: url('../img/fondos-notas/16.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  color: #fff !important;
}

.board-img-17 {
  background-image: url('../img/fondos-notas/17.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  color: #fff !important;
}

.board-img-18 {
  background-image: url('../img/fondos-notas/18.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  color: #fff !important;
}

.board-img-19 {
  background-image: url('../img/fondos-notas/19.jpg');
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
  color: #fff !important;
}

.board-img-art-anim {
  background-image: url('../gif/art-anim.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-art-anim2 {
  background-image: url('../gif/art-anim2.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-drake {
  background-image: url('../gif/drake.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-ducky {
  background-image: url('../gif/ducky.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-fire {
  background-image: url('../gif/fire.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-fun-glow {
  background-image: url('../gif/fun-glow.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-galaxy-colors {
  background-image: url('../gif/galaxy-colors.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-galaxy {
  background-image: url('../gif/galaxy-gif.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-happy-doggy {
  background-image: url('../gif/happy-doggy.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-infinite-pointer {
  background-image: url('../gif/infinite-pointer.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-minion {
  background-image: url('../gif/minion.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-pablo {
  background-image: url('../gif/pablo.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-peach-farmer {
  background-image: url('../gif/peach-farmer.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-pink-bubbles {
  background-image: url('../gif/pink-bubbles.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-pink-loop {
  background-image: url('../gif/pink-loop.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-snoop {
  background-image: url('../gif/snoop.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-st4s {
  background-image: url('../gif/St4s.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-stitch-sad {
  background-image: url('../gif/stitch-sad.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-stitch-tounge {
  background-image: url('../gif/stitch-tounge.gif');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}


.board-img-alos {
  background-image: url('../webp/alos.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-apago-y-prendo {
  background-image: url('../webp/apago-y-prendo.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-cansa2 {
  background-image: url('../webp/cansa2.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-chaky-chan {
  background-image: url('../webp/chaky-chan.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-corre-wachin {
  background-image: url('../webp/corre-wachin.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-edificios {
  background-image: url('../webp/edificios.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-fa-re-rico {
  background-image: url('../webp/fa-re-rico.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-flashy {
  background-image: url('../webp/flashy.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-giggity {
  background-image: url('../webp/giggity.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-hugoooo {
  background-image: url('../webp/hugoooo.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-ke-indo-perito {
  background-image: url('../webp/ke-indo-perito.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-maicra {
  background-image: url('../webp/maicra.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-mexicano {
  background-image: url('../webp/mexicano.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-mindless {
  background-image: url('../webp/mindless.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-pa-vos {
  background-image: url('../webp/pa-vos.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-patricio {
  background-image: url('../webp/patricio.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-penal-boludo {
  background-image: url('../webp/penal-boludo.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-pq-no-chocan {
  background-image: url('../webp/pq-no-chocan.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-shrek {
  background-image: url('../webp/shrek.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-sunset {
  background-image: url('../webp/sunset.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-tunel {
  background-image: url('../webp/tunel.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-un-gran-poder {
  background-image: url('../webp/un-gran-poder.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-vaiper {
  background-image: url('../webp/vaiper.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-water-polo {
  background-image: url('../webp/water-polo.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-wololo {
  background-image: url('../webp/wololo.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-casa-del-arboludo {
  background-image: url('../webp2/casa-del-arboludo.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-como-se-llamaba {
  background-image: url('../webp2/como-se-llamaba.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-gangnam-style {
  background-image: url('../webp2/gangnam-style.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-jesus-creep {
  background-image: url('../webp2/jesus-creep.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-oie-calamardo {
  background-image: url('../webp2/oie-calamardo.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-piggy {
  background-image: url('../webp2/piggy.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-the-walkin-sapo {
  background-image: url('../webp2/the-walkin-sapo.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-unistall {
  background-image: url('../webp2/unistall.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}

.board-img-es-por-ahi {
  background-image: url('../webp2/es-por-ahi.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff !important;
}


/**********************************************************************/

.roles-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 14px;
}

.roles-admin-panel,
.role-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(9, 14, 25, 0.84);
}

.roles-admin-panel {
  padding: 14px;
}

.roles-admin-panel-head {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.roles-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
}

.role-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.role-card-title {
  font-weight: 600;
}

.role-card-meta {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.88rem;
}

.role-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

#userRoleInput,
#editUserRoleInput {
  min-height: 170px;
}

@media (max-width: 1199.98px) {
  .roles-admin-layout {
    grid-template-columns: 1fr;
  }

  .role-card {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Users UI refresh */
.users-modal-form {
  display: grid;
  gap: 12px;
}

.users-modal-grid {
  display: grid;
  gap: 12px;
}

.users-modal-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.users-modal-grid-3 {
  grid-template-columns: 1.2fr 1fr .9fr;
  align-items: start;
}

.users-modal-grid-edit {
  grid-template-columns: 1.15fr 1fr;
  align-items: start;
}

.users-modal-section,
.roles-compact-form {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.users-modal-section-head,
.roles-admin-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.users-modal-section-head-spaced {
  margin-bottom: 14px;
}

.role-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.role-picker-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 70px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.58);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.role-picker-option:hover {
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(37, 99, 235, 0.12);
}

.role-picker-option.is-selected {
  border-color: rgba(59, 130, 246, 0.55);
  background: rgba(37, 99, 235, 0.16);
}

.role-picker-option input {
  margin-top: 4px;
  flex: 0 0 auto;
}

.role-picker-content,
.role-picker-title-row {
  display: flex;
  gap: 8px;
}

.role-picker-content {
  flex: 1 1 auto;
  flex-direction: column;
}

.role-picker-title-row {
  align-items: center;
  justify-content: space-between;
}

.role-picker-name {
  font-weight: 700;
  color: #fff;
}

.users-edit-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.16), rgba(15, 23, 42, 0.34));
}

.users-edit-hero-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}

.users-edit-hero-subtitle {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.68);
}

.users-edit-hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.role-picker-meta,
.users-readonly-card span,
.users-audit-actors span,
.users-activity-title-stack span {
  color: rgba(255, 255, 255, 0.65);
}

.users-status-grid,
.users-readonly-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.users-readonly-grid-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.users-status-card,
.users-readonly-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
}

.users-status-card small {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.65);
}

.users-readonly-card {
  flex-direction: column;
  align-items: flex-start;
}

.users-readonly-card strong {
  font-size: 1rem;
  color: #fff;
}

.users-edit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

.users-edit-actions-main {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.tab-permissions-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tab-permission-row {
  align-items: stretch;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.tab-permission-main {
  display: grid;
  gap: 6px;
}

.tab-permission-title-row,
.role-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.roles-modal-shell {
  display: grid;
  gap: 12px;
}

.roles-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 0.85rem;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

#rolesModal .modal-dialog {
  margin: 0;
  height: 100dvh;
}

#rolesModal .modal-content {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#rolesModal .modal-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0.85rem;
}

.roles-detail-panel,
.roles-sidebar-card,
.roles-users-panel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
}

.roles-detail-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.85rem;
  overflow: hidden;
}

.roles-detail-header,
.roles-users-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.roles-detail-form {
  display: grid;
  gap: 10px;
  flex: 0 0 auto;
}

.roles-detail-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.roles-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 140px 140px;
  gap: 10px;
  align-items: end;
}

.roles-detail-field {
  display: grid;
  gap: 5px;
}

.roles-users-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0.85rem;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.roles-assign-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.role-assigned-users-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.roles-sidebar {
  min-width: 0;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.roles-sidebar-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0.85rem;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

.roles-compact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 120px 120px auto;
  gap: 10px;
  align-items: end;
}

.roles-compact-field,
.roles-compact-actions {
  display: grid;
  gap: 6px;
}

.roles-compact-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
}

.roles-compact-actions {
  grid-auto-flow: column;
  justify-content: end;
}

.roles-admin-panel-list {
  max-height: 52vh;
  overflow: hidden;
}

.roles-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: calc(52vh - 52px);
}

.roles-list-nav {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.role-nav-item {
  width: 100%;
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  text-align: left;
  transition: border-color .16s ease, background-color .16s ease;
}

.role-nav-item:hover,
.role-nav-item.is-active {
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(37, 99, 235, 0.14);
}

.role-nav-main {
  display: grid;
  gap: 4px;
  width: 100%;
}

.role-nav-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.role-nav-name {
  font-weight: 700;
  color: #fff;
  font-size: 0.95rem;
}

.role-nav-meta {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.78rem;
}

.role-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.role-card-main {
  display: grid;
  gap: 6px;
}

.role-card-helper {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.64);
}

.role-card-users {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.role-user-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
}

.role-user-pill-main {
  display: grid;
  gap: 2px;
}

.role-user-pill-main strong {
  color: #fff;
  font-size: 0.88rem;
}

.role-user-pill-main span,
.role-users-empty {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.78rem;
}

#rolesModal .form-label,
#rolesModal .small,
#rolesModal .text-white-50 {
  line-height: 1.25;
}

#rolesModal .form-label {
  margin-bottom: 0.2rem;
  font-size: 0.82rem;
}

#rolesModal .form-control,
#rolesModal .form-select {
  min-height: 40px;
  padding-top: 0.42rem;
  padding-bottom: 0.42rem;
}

#rolesModal .btn {
  min-height: 38px;
}

.role-users-empty {
  padding: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
}

.users-activity-entry {
  gap: 10px;
}

.users-activity-title-stack {
  display: grid;
  gap: 4px;
}

.users-activity-meta-grid,
.users-audit-actors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.users-activity-meta-grid > div,
.users-audit-actors > div {
  display: grid;
  gap: 4px;
}

.users-audit-summary {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 5px;
}

.users-audit-changes {
  display: grid;
  gap: 8px;
}

.users-audit-change-row {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
}

.users-audit-change-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.58);
}

.users-audit-change-values {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.users-audit-change-before {
  color: #fca5a5;
}

.users-audit-change-after {
  color: #86efac;
}

.users-audit-change-arrow {
  color: rgba(255, 255, 255, 0.56);
}

@media (max-width: 1199.98px) {
  .users-modal-grid-3,
  .users-modal-grid-edit,
  .tab-permissions-list,
  .role-picker-grid {
    grid-template-columns: 1fr;
  }

  .roles-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.75rem;
    overflow-y: auto;
  }

  .roles-sidebar {
    order: -1;
  }

  .roles-sidebar-card {
    max-height: none;
  }

  .roles-list-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    gap: 0.7rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 0;
    padding-bottom: 0.25rem;
    scroll-snap-type: x proximity;
  }

  .role-nav-item {
    min-height: 100%;
    scroll-snap-align: start;
  }
}

@media (max-width: 991.98px) {
  .users-modal-grid-2,
  .roles-compact-grid,
  .roles-detail-grid,
  .roles-assign-bar,
  .users-activity-meta-grid,
  .users-audit-actors,
  .role-card {
    grid-template-columns: 1fr;
  }

  .users-edit-hero,
  .users-edit-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .users-edit-hero-badges,
  .users-edit-actions-main {
    justify-content: flex-start;
  }

  .role-card,
  .roles-compact-actions {
    display: grid;
  }

  #rolesModal .modal-body {
    padding: 0.7rem;
    overflow-y: auto;
  }

  .roles-detail-panel,
  .roles-sidebar-card,
  .roles-users-panel {
    padding: 0.75rem;
  }

  .roles-detail-header,
  .roles-users-panel-head,
  .roles-detail-form-actions {
    gap: 8px;
  }

  .roles-detail-grid {
    grid-template-columns: 1fr 120px;
    gap: 8px;
  }

  .roles-detail-panel,
  .roles-users-panel,
  .roles-sidebar {
    overflow: visible;
  }

  .roles-detail-field-name {
    grid-column: 1 / -1;
  }

  .role-assigned-users-list,
  .roles-list-nav {
    padding-right: 0.1rem;
  }
}

@media (max-width: 767.98px) {
  #rolesModal .modal-body {
    padding: 0.55rem;
    overflow-y: auto;
  }

  .roles-workspace {
    gap: 0.6rem;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .roles-detail-panel,
  .roles-sidebar-card,
  .roles-users-panel {
    padding: 0.65rem;
    gap: 0.65rem;
  }

  .roles-detail-header,
  .roles-users-panel-head,
  .roles-admin-panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .roles-detail-grid,
  .roles-assign-bar {
    grid-template-columns: 1fr;
  }

  .roles-list-nav {
    grid-auto-columns: minmax(180px, 82vw);
    gap: 0.55rem;
  }

  .roles-detail-form-actions .btn,
  .roles-assign-bar .btn,
  .roles-assign-bar .form-select {
    width: 100%;
  }

  .role-nav-item {
    padding: 9px;
  }

  .role-user-pill {
    align-items: stretch;
  }

  .role-user-pill .btn {
    width: 100%;
  }

  .roles-list-nav {
    gap: 8px;
  }
}

/* === NOTIFICATIONS ======================================= */
.app-notifications-dropdown { position: relative; }
.app-notification-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0.3rem 0.42rem;
  border-radius: 6px;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.88) !important;
  transition: color .15s, background .15s;
}

.app-notification-bell:hover,
.app-notification-bell:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}
.app-notification-bell.has-unread { animation: ntf-bell-ring .5s ease; }
@keyframes ntf-bell-ring {
  0%,100% { transform: rotate(0); } 20% { transform: rotate(-12deg); }
  40% { transform: rotate(10deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(5deg); }
}
.app-notification-badge {
  position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: #ef4444; color: #fff; font-size: .68rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--bs-body-bg,#fff), 0 4px 12px rgba(239,68,68,.45);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.app-notification-badge.d-none { transform: scale(0); }
/* Panel */
.app-notifications-menu {
  width: min(420px, calc(100vw - 20px)); padding: 0;
  border: 1px solid rgba(255,255,255,.09); border-radius: 20px; overflow: hidden;
  background: #0c1420;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.ntf-panel { display: flex; flex-direction: column; min-height: 0; }
.ntf-panel-head {
  padding: .85rem .95rem .75rem; border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.025); display: flex; flex-direction: column; gap: .55rem;
}
.ntf-panel-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ntf-panel-title { font-size: .95rem; font-weight: 700; color: #f1f5ff; letter-spacing: -.01em; }
.ntf-panel-controls { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ntf-icon-btn {
  width: 30px; height: 30px; border-radius: 8px; border: none;
  background: transparent; color: #64748b; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; transition: background .12s, color .12s; flex-shrink: 0;
}
.ntf-icon-btn:hover { background: rgba(255,255,255,.07); color: #cbd5e1; }
.ntf-icon-btn--accent:hover { background: rgba(59,130,246,.15); color: #93c5fd; }
.ntf-icon-btn--danger:hover { background: rgba(239,68,68,.15); color: #fca5a5; }
/* Tabs */
.ntf-tabs { display: flex; gap: 2px; background: rgba(255,255,255,.04); border-radius: 10px; padding: 3px; }
.ntf-tab {
  border: none; background: transparent; color: #64748b; font-size: .72rem; font-weight: 600;
  padding: 4px 10px; border-radius: 7px; cursor: pointer; transition: background .12s, color .12s;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
.ntf-tab:hover { color: #cbd5e1; }
.ntf-tab--active { background: rgba(59,130,246,.18); color: #93c5fd; }
.ntf-tab-badge {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: #ef4444; color: #fff; font-size: .6rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
/* List */
.ntf-list {
  flex: 1; overflow-y: auto; max-height: min(64vh, 500px); padding: .5rem;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.06) transparent;
}
/* Groups */
.ntf-group { margin-bottom: .35rem; }
.ntf-group:last-child { margin-bottom: 0; }
.ntf-group-label {
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #334155; padding: .45rem .55rem .3rem;
}
/* Item */
.ntf-item {
  display: grid; grid-template-columns: 34px 1fr auto; gap: .65rem; align-items: start;
  padding: .7rem .75rem; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; transition: background .12s, border-color .12s;
  color: #e2e8f0; text-align: left; width: 100%;
}
.ntf-item:hover { background: rgba(255,255,255,.045); }
.ntf-item:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
.ntf-item.is-unread { background: rgba(59,130,246,.07); border-color: rgba(59,130,246,.18); }
.ntf-item.is-unread:hover { background: rgba(59,130,246,.11); }
.ntf-item-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ntf-c,#3b82f6) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ntf-c,#3b82f6) 22%, transparent);
  color: var(--ntf-c,#3b82f6); font-size: .82rem;
}
.ntf-item-body { min-width: 0; display: grid; gap: .18rem; }
.ntf-item-meta { display: flex; align-items: center; gap: .45rem; }
.ntf-item-module { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #475569; }
.ntf-item.is-unread .ntf-item-module { color: #6ea8fe; }
.ntf-item-time { font-size: .62rem; color: #334155; margin-left: auto; white-space: nowrap; }
.ntf-item-title { font-size: .8rem; font-weight: 600; color: #e2e8f0; line-height: 1.35; }
.ntf-item.is-unread .ntf-item-title { color: #f1f5ff; }
.ntf-item-detail { font-size: .72rem; color: #64748b; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ntf-item.is-gone { opacity: .55; }
.ntf-item.is-gone .ntf-item-title { text-decoration: line-through; color: #64748b; }
.ntf-item-gone-badge { font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #f87171; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.22); border-radius: 4px; padding: 1px 6px; margin-left: auto; white-space: nowrap; }
/* Mark-as-read button */
.ntf-read-btn {
  opacity: 0; width: 24px; height: 24px; border-radius: 6px; border: none;
  background: rgba(59,130,246,.12); color: #6ea8fe; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; flex-shrink: 0; margin-top: .15rem;
  transition: opacity .12s, background .12s; align-self: flex-start;
}
.ntf-item:hover .ntf-read-btn { opacity: 1; }
.ntf-read-btn:hover { background: rgba(59,130,246,.25); color: #bfdbfe; }
/* Empty / error */
.ntf-empty {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: 2.2rem 1rem; color: #334155; text-align: center;
}
.ntf-empty i { font-size: 1.6rem; opacity: .35; }
.ntf-empty span { font-size: .78rem; }
.ntf-empty--error { color: #ef4444; }
.ntf-empty--error i { opacity: .5; }
/* Footer */
.ntf-panel-foot { padding: .65rem .95rem; border-top: 1px solid rgba(255,255,255,.05); }
.ntf-settings-btn {
  width: 100%; border: 1px solid rgba(255,255,255,.07); border-radius: 10px;
  background: transparent; color: #475569; font-size: .72rem; font-weight: 500;
  padding: .5rem .75rem; cursor: pointer; display: flex; align-items: center; gap: .45rem;
  transition: background .12s, color .12s;
}
.ntf-settings-btn:hover { background: rgba(255,255,255,.04); color: #94a3b8; }
.ntf-settings-btn i { font-size: .8rem; }
/* Skeleton */
.ntf-skeleton { display: flex; flex-direction: column; gap: .45rem; }
.ntf-skeleton-item { display: flex; gap: .65rem; padding: .7rem .75rem; border-radius: 12px; background: rgba(255,255,255,.02); }
.ntf-sk-icon { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; background: rgba(255,255,255,.06); animation: ntf-shimmer 1.4s ease-in-out infinite; }
.ntf-sk-body { flex: 1; display: flex; flex-direction: column; gap: .4rem; justify-content: center; }
.ntf-sk-line { height: 9px; border-radius: 5px; background: rgba(255,255,255,.06); animation: ntf-shimmer 1.4s ease-in-out infinite; }
.ntf-sk-line--short { width: 35%; } .ntf-sk-line--med { width: 60%; }
.ntf-skeleton-item:nth-child(2) .ntf-sk-icon,.ntf-skeleton-item:nth-child(2) .ntf-sk-line { animation-delay: .15s; }
.ntf-skeleton-item:nth-child(3) .ntf-sk-icon,.ntf-skeleton-item:nth-child(3) .ntf-sk-line { animation-delay: .3s; }
.ntf-skeleton-item:nth-child(4) .ntf-sk-icon,.ntf-skeleton-item:nth-child(4) .ntf-sk-line { animation-delay: .45s; }
@keyframes ntf-shimmer { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
/* Settings modal */
.ns-modal-content {
  background: linear-gradient(160deg, #0b1120 0%, #0d1526 100%);
  border: 1px solid rgba(255,255,255,.08);
}
.ns-modal-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent);
}
.ns-modal-title-wrap { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.ns-modal-icon {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(99,102,241,.3), rgba(59,130,246,.15));
  border: 1px solid rgba(99,102,241,.3); color: #a5b4fc; font-size: 1.1rem;
}
.ns-modal-header .modal-title { font-size: 1.05rem; font-weight: 700; color: #f1f5ff; margin: 0; }
.ns-modal-sub { font-size: .72rem; color: #475569; margin: 0; }
.ns-modal-header .btn-close { opacity: .7; padding: .65rem; border-radius: 10px; background-color: rgba(255,255,255,.04); flex-shrink: 0; }
.ns-modal-header .btn-close:hover { opacity: 1; background-color: rgba(255,255,255,.08); }
.ns-modal-body { padding: 1rem 1.1rem; background: transparent; }
.ns-modal-footer {
  display: flex; align-items: center; gap: .65rem;
  padding: .75rem 1.1rem; border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
}
.ns-save-status { flex: 1; font-size: .72rem; padding: .3rem .6rem; border-radius: 6px; transition: opacity .2s; }
.ns-save-status:empty { display: none; }
.ns-save-status--ok  { background: rgba(16,185,129,.12); color: #6ee7b7; border: 1px solid rgba(16,185,129,.2); }
.ns-save-status--err { background: rgba(239,68,68,.12);  color: #fca5a5; border: 1px solid rgba(239,68,68,.2); }
.ns-save-btn { display: flex; align-items: center; gap: .4rem; font-weight: 600; min-width: 120px; justify-content: center; }
.ns-save-spinner {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: ntf-shimmer-spin .7s linear infinite; flex-shrink: 0;
}
@keyframes ntf-shimmer-spin { to { transform: rotate(360deg); } }

/* Settings shell */
.ns-shell { display: flex; flex-direction: column; gap: .85rem; }

/* Hero status bar */
.ns-hero {
  display: flex; align-items: center; justify-content: space-between; gap: .65rem;
  padding: .65rem .85rem; border-radius: 14px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06);
}
.ns-hero-pills { display: flex; flex-wrap: wrap; gap: .45rem; }
.ns-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: 999px; font-size: .7rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04);
  color: #64748b; transition: all .2s;
}
.ns-pill i { font-size: .72rem; }
.ns-pill--live[data-state=on] { border-color: rgba(59,130,246,.3); background: rgba(59,130,246,.1); color: #93c5fd; }
.ns-pill--sound[data-state=on] { border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.1); color: #6ee7b7; }
.ns-pill--granted  { border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.08); color: #6ee7b7; }
.ns-pill--denied   { border-color: rgba(239,68,68,.3);  background: rgba(239,68,68,.08);  color: #fca5a5; }
.ns-pill--default  { border-color: rgba(234,179,8,.3);  background: rgba(234,179,8,.08);  color: #fde68a; }
.ns-pill--unsupported { opacity: .5; }
.ns-hero-actions { display: flex; gap: .4rem; flex-shrink: 0; }
.ns-icon-action {
  width: 30px; height: 30px; border-radius: 8px; border: none;
  background: transparent; color: #475569; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; transition: background .12s, color .12s;
}
.ns-icon-action:hover { background: rgba(255,255,255,.07); color: #94a3b8; }

/* Section card */
.ns-section {
  border-radius: 16px; background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07); overflow: hidden;
  transition: opacity .25s, filter .25s;
}
.ns-section-head {
  display: flex; align-items: center; gap: .85rem;
  padding: .9rem 1rem .75rem; border-bottom: 1px solid rgba(255,255,255,.05);
}
.ns-section-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ns-c,#6366f1) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ns-c,#6366f1) 22%, transparent);
  color: var(--ns-c, #6366f1); font-size: .9rem;
}
.ns-section-title { font-size: .88rem; font-weight: 700; color: #e2e8f0; }
.ns-section-desc  { font-size: .7rem;  color: #475569; margin-top: .1rem; }

/* Sub-sections dimmed when module is off */
.ns-sub--off { opacity: .4; filter: grayscale(.5); pointer-events: none; }

/* Setting rows */
.ns-rows { display: flex; flex-direction: column; }
.ns-rows--tight .ns-row { padding: .65rem 1rem; }
.ns-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .9rem; padding: .8rem 1rem; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.04); transition: background .1s;
}
.ns-row:last-child { border-bottom: none; }
.ns-row:hover { background: rgba(255,255,255,.03); }
.ns-row.is-disabled { opacity: .45; pointer-events: none; }
.ns-row--compact { padding: .65rem 1rem; }
.ns-row-left { display: flex; align-items: center; gap: .75rem; min-width: 0; flex: 1; }
.ns-row-icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ns-c,#64748b) 12%, transparent);
  color: var(--ns-c, #64748b); font-size: .82rem;
}
.ns-row-copy { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.ns-row-label { font-size: .82rem; font-weight: 600; color: #e2e8f0; }
.ns-row-desc  { font-size: .68rem; color: #475569; line-height: 1.4; }
.ns-inline-btn {
  border: none; background: rgba(59,130,246,.12); color: #93c5fd;
  font-size: .65rem; font-weight: 600; padding: 2px 7px; border-radius: 5px;
  cursor: pointer; margin-left: .35rem; transition: background .1s;
  display: inline;
}
.ns-inline-btn:hover { background: rgba(59,130,246,.22); }

/* Toggle switch */
.ns-toggle { position: relative; display: inline-flex; flex-shrink: 0; cursor: pointer; }
.ns-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.ns-toggle-track {
  display: block; width: 40px; height: 22px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12);
  transition: background .2s, border-color .2s; position: relative;
}
.ns-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 999px;
  background: #fff; transition: transform .2s cubic-bezier(.34,1.56,.64,1),background .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.ns-toggle input:checked + .ns-toggle-track { background: #3b82f6; border-color: rgba(59,130,246,.5); }
.ns-toggle input:checked + .ns-toggle-track .ns-toggle-thumb { transform: translateX(18px); background: #fff; }
.ns-toggle input:disabled + .ns-toggle-track { opacity: .4; cursor: not-allowed; }
.ns-toggle--sm .ns-toggle-track { width: 34px; height: 19px; }
.ns-toggle--sm .ns-toggle-thumb { width: 13px; height: 13px; }
.ns-toggle--sm input:checked + .ns-toggle-track .ns-toggle-thumb { transform: translateX(15px); }

/* Module grid */
.ns-module-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .55rem; padding: .85rem 1rem;
}
.ns-module-card {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: .85rem .65rem; border-radius: 14px; cursor: pointer; text-align: center;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06);
  transition: background .12s, border-color .12s;
}
.ns-module-card:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.ns-module-icon {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ns-c,#6366f1) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ns-c,#6366f1) 22%, transparent);
  color: var(--ns-c,#6366f1); font-size: .95rem;
}
.ns-module-label { font-size: .72rem; font-weight: 600; color: #94a3b8; }

/* Sub-section internals */
.ns-sub-cols { display: grid; grid-template-columns: 1fr; gap: 0; }
.ns-select-stack { display: flex; flex-direction: column; border-bottom: 1px solid rgba(255,255,255,.05); }
.ns-input-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .7rem 1rem; border-bottom: 1px solid rgba(255,255,255,.04);
}
.ns-input-row:last-child { border-bottom: none; }
.ns-input-row.is-disabled { opacity: .45; pointer-events: none; }
.ns-input-row--inline { padding: .7rem 1rem; }
.ns-input-label { font-size: .76rem; font-weight: 600; color: #94a3b8; white-space: nowrap; flex-shrink: 0; }
.ns-select {
  flex: 1; min-width: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: #e2e8f0; border-radius: 8px; padding: .35rem .6rem; font-size: .76rem;
  cursor: pointer; transition: border-color .12s;
}
.ns-select:focus { border-color: #3b82f6; outline: none; }
.ns-select:disabled { opacity: .4; }
.ns-select--sm { max-width: 200px; }
.ns-input-sm {
  width: 68px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: #e2e8f0; border-radius: 8px; padding: .35rem .6rem; font-size: .76rem; text-align: center;
}
.ns-input-sm:focus { border-color: #3b82f6; outline: none; }
.ns-input-sm:disabled { opacity: .4; }

/* Locations card */
.ns-locations-card { padding: .85rem 1rem; border-top: 1px solid rgba(255,255,255,.05); }
.ns-locations-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .55rem; }
.ns-locations-summary { font-size: .68rem; font-weight: 600; color: #475569; }
.ns-checkbox-list {
  display: grid; gap: .4rem; max-height: 200px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.06) transparent;
}
.ns-checkbox-list.is-disabled { opacity: .45; pointer-events: none; }
.ns-checkbox-item {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem;
  border-radius: 10px; background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.05); color: #cbd5e1; font-size: .76rem; cursor: pointer;
}
.ns-checkbox-item:hover { background: rgba(255,255,255,.05); }
.ns-checkbox-item input[type="checkbox"] { width: 15px; height: 15px; accent-color: #3b82f6; flex-shrink: 0; cursor: pointer; }

/* Calendar preview */
.ns-preview-card {
  margin: .75rem 1rem .85rem;
  padding: .8rem 1rem; border-radius: 12px;
  background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(139,92,246,.06));
  border: 1px solid rgba(99,102,241,.18);
}
.ns-preview-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem;
}
.ns-preview-head span:first-child { font-size: .72rem; font-weight: 700; color: #a5b4fc; }
.ns-preview-badge {
  font-size: .64rem; font-weight: 700; padding: 2px 8px; border-radius: 6px;
  background: rgba(99,102,241,.2); color: #c7d2fe;
}
.ns-preview-text { font-size: .73rem; color: #6b7280; line-height: 1.5; margin: 0; }
.ns-empty-state { font-size: .75rem; color: #334155; padding: .85rem 1rem; text-align: center; }

@media (max-width: 991.98px) { .app-notifications-menu { width: min(390px, calc(100vw - 16px)); } }
@media (max-width: 575.98px) {
  .app-bell-anchor { margin-right: .25rem; }
  .app-notifications-menu { position: fixed !important; top: 64px !important; right: 10px !important; left: 10px !important; width: auto; transform: none !important; }
  .ntf-panel-head { padding: .75rem .85rem .65rem; }
  .notifications-settings-hero { flex-direction: column; align-items: stretch; }
  .notifications-settings-hero-card,.notifications-settings-panel,.notifications-settings-modal-content .modal-body { padding-left: .85rem; padding-right: .85rem; }
  .notifications-settings-modal-header,.notifications-settings-modal-heading { flex-direction: column; align-items: stretch; }
  .notifications-settings-modal-icon { width: 40px; height: 40px; border-radius: 12px; }
  .notifications-status-strip { margin-top: .65rem; }
  .notifications-panel-head,.notifications-input-head,.notifications-setting-row { flex-direction: column; align-items: stretch; }
  .notifications-setting-row input[type="checkbox"] { align-self: flex-end; }
}

@media (max-width: 991.98px) {
  .forms-task-hero-actions {
    justify-content: flex-start;
  }

  .forms-task-action-btn {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }

  .forms-edit-section--hero {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 767.98px) {
  .forms-task-summary-grid,
  .forms-task-sidebar-kpis {
    grid-template-columns: 1fr;
  }

  .forms-task-hero-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .forms-task-action-btn {
    padding: 0.34rem 0.45rem;
  }

  .forms-task-action-btn span {
    display: none;
  }

  .forms-tasks-toolbar-field {
    flex-basis: 145px;
  }

  .forms-task-card-title-row {
    gap: 0.5rem;
  }

  .forms-task-edit-btn {
    padding: 0.24rem 0.42rem;
  }

  .forms-task-edit-btn span {
    display: none;
  }

  .forms-task-list {
    max-height: calc(100vh - 350px);
  }

  .forms-edit-side .notes-comments-card {
    height: min(46vh, 29rem);
    min-height: 300px;
  }
}

@media (max-width: 575.98px) {
  .forms-tasks-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .forms-task-hero-actions {
    grid-template-columns: repeat(3, minmax(44px, 1fr));
  }

  .forms-tasks-toolbar-main,
  .forms-tasks-toolbar-field {
    gap: 0.28rem;
  }

  .forms-tasks-toolbar-field {
    flex-basis: auto;
  }

  .forms-task-date-badges {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── Task Modal: Sidebar Layout ─────────────────────────────────────────────── */

#taskModal .modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#taskModal #taskForm {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.task-modal-layout {
    display: flex;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.task-modal-nav {
    width: 170px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.28);
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    padding: 0.85rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    overflow-y: auto;
}

.task-nav-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1.1rem;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    color: rgba(203, 213, 225, 0.6);
    font-size: 0.86rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
}

.task-nav-item i {
    font-size: 0.88rem;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

.task-nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
}

.task-nav-item.active {
    background: rgba(59, 130, 246, 0.13);
    color: #93c5fd;
    border-left-color: #3b82f6;
    font-weight: 500;
}

.task-modal-content {
    flex: 1 1 0;
    overflow-y: auto;
    padding: 1.75rem 2rem;
    min-width: 0;
}

.task-modal-section {
    max-width: 100%;
    width: 100%;
}

.task-section-eyebrow {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(147, 197, 253, 0.65);
    margin-bottom: 0.2rem;
}

.task-section-title {
    color: #e2e8f0;
    font-size: 1.15rem;
    font-weight: 600;
}

.task-section-optional {
    font-size: 0.73rem;
    color: rgba(203, 213, 225, 0.42);
    font-weight: 400;
    font-style: italic;
}

.task-section-required {
    color: #f87171;
}

.task-section-field-label {
    font-size: 0.86rem;
    color: rgba(203, 213, 225, 0.75);
    font-weight: 500;
}

/* Responsive: nav horizontal en móvil */
@media (max-width: 600px) {
    .task-modal-layout {
        flex-direction: column;
    }
    .task-modal-nav {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0.35rem 0.5rem;
        gap: 0.2rem;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }
    .task-nav-item {
        flex-shrink: 0;
        border-left: none;
        border-bottom: 2px solid transparent;
        padding: 0.45rem 0.75rem;
    }
    .task-nav-item.active {
        border-bottom-color: #3b82f6;
        border-left-color: transparent;
    }
    .task-modal-content {
        padding: 1rem;
    }
}

/* ── Task Cards: Diseño Compacto ────────────────────────────────────────────── */

.forms-task-card {
    cursor: pointer;
}

.forms-task-card-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
}

.forms-task-card-main {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.forms-task-card-actions {
    flex-shrink: 0;
    display: flex;
    gap: 0.3rem;
    opacity: 0;
    transition: opacity 0.14s;
}

.forms-task-card:hover .forms-task-card-actions {
    opacity: 1;
}

@media (hover: none), (max-width: 640px) {
    .forms-task-card-actions {
        opacity: 1;
    }
}

.forms-task-inline-chip--type i {
    color: #86efac;
}

/* Quitar padding/border del head viejo en cards compactas (la nueva estructura no usa esos elementos) */
.forms-task-card .forms-task-card-head {
    display: none;
}
.forms-task-card .forms-task-card-body {
    display: none;
}

/* ── taskModal: sección comentarios en contexto de bloque ───────────────────── */
.task-modal-section--comments {
    max-width: 100%;
}

.task-comments-shell {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.task-comments-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.8rem 0.95rem 0.5rem;
    max-height: 42vh;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    min-width: 0;
}

.task-comments-list:empty::after {
    content: 'No hay comentarios todavía.';
    display: block;
    text-align: center;
    color: rgba(203, 213, 225, 0.38);
    font-size: 0.85rem;
    padding: 1.5rem 0;
}

.task-comments-new-hint {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 2rem 1rem;
    color: rgba(203, 213, 225, 0.38);
    font-size: 0.88rem;
    justify-content: center;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin-top: 0.5rem;
}

.task-comments-new-hint i {
    font-size: 1.1rem;
    opacity: 0.6;
}

/* ── fin taskModal comentarios ──────────────────────────────────────────────── */

/* Phones module → resources/css/phones.css */

/* ═══════════════════════════════════════════════════════════════════════════════
   Tab search bar — buscador permanente debajo del header (compartido)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Suprime la X azul (app-search-clear) en los inputs con clear button propio */
.dt-sidebar-search-input,
.tab-search-input {
  /* Previene que enhanceSearchInput en main.js agregue un segundo botón */
}

/* Quita la X nativa del browser en todos los type="search" */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Barra de búsqueda externa (flex-shrink: 0 en panes con flex column) */
#pills-telefonos > .tab-search-bar,
#pills-doctracker > .tab-search-bar,
#pills-calls > .tab-search-bar,
#pills-forms > .tab-search-bar {
  flex-shrink: 0;
}

.tab-search-bar {
  margin-bottom: .35rem;
}

.tab-search-wrap {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 8px;
  padding: .3rem .65rem;
}

.tab-search-icon {
  color: rgba(148, 163, 184, .5);
  font-size: .85rem;
  flex-shrink: 0;
}

.tab-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #e2e8f0;
  font-size: .875rem;
  outline: none;
  min-width: 0;
}

.tab-search-input::placeholder {
  color: rgba(148, 163, 184, .38);
}

.tab-search-clear {
  background: none;
  border: none;
  color: rgba(148, 163, 184, .45);
  cursor: pointer;
  padding: .1rem .25rem;
  font-size: .75rem;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color .12s;
  line-height: 1;
}

.tab-search-clear:hover { color: #e2e8f0; }


/* ── fin tab-search-bar ─────────────────────────────────────────────────────── */