:root {
  --df-primary: #8b0000;
  --df-primary-dark: #6e0000;
  --df-accent: #333333;
  --df-bg-main: #f8fafc;
  --df-bg-card: #ffffff;
  --df-border: #e2e8f0;
  --df-shadow: rgba(149, 157, 165, 0.1);
  --df-success: #16a34a;
  --df-warning: #f59e0b;
  --df-danger: #dc2626;
  --df-info: #3b82f6;
  --df-text-primary: #1e293b;
  --df-text-secondary: #64748b;
  --df-text-light: #ffffff;
  --md-radius: 12px;
  --md-radius-sm: 8px;
  --md-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08);
  --md-shadow-2: 0 4px 8px -2px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.06);
  --md-shadow-3: 0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);
  --md-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --md-input-border: #cbd5e1
}
body.df-modal-is-active {
  overflow: hidden
}
body {
  background-color: var(--df-bg-main);
  font-family: var(--df-font-sans);
  line-height: 1.6;
  color: var(--df-text-primary)
}
.app-title,
.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--df-text-primary);
  margin-top: 0;
  margin-bottom: 1.5rem
}
.card-wrapper,
.df-tab-content-wrapper,
.notifications-card,
.user-list-section {
  background: var(--df-bg-card);
  border-radius: var(--md-radius);
  padding: 2rem;
  box-shadow: var(--md-shadow-1);
  transition: var(--md-transition)
}
.card-wrapper:hover,
.df-tab-link:hover,
.group-card:hover,
.member-item:hover,
.pagination .page-numbers a:hover {
  box-shadow: var(--md-shadow-2);
  transform: translateY(-2px)
}
.card-section {
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--df-border)
}
.card-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem
}
.section-header .section-title {
  margin-bottom: 0
}
.group-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: 1.5rem
}
.group-card {
  background-color: var(--df-bg-main);
  border: 1px solid var(--df-border);
  border-radius: var(--md-radius);
  padding: 1.5rem;
  box-shadow: var(--md-shadow-1);
  transition: var(--md-transition);
  display: flex;
  flex-direction: column
}
.group-card-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--df-text-primary);
  margin-top: 0;
  margin-bottom: .5rem
}
.group-card-description {
  font-size: .95rem;
  color: var(--df-text-secondary);
  margin-bottom: 1rem;
  flex-grow: 1
}
.group-card-owner {
  border-top: 1px solid var(--df-border);
  padding-top: 1rem;
  margin-top: auto;
  font-size: .9rem
}
.group-card-owner strong {
  color: var(--df-text-primary);
  font-weight: 600
}
.group-card-apoyos {
  margin-top: 1rem
}
.group-card-apoyos p {
  font-size: .9rem;
  font-weight: 600;
  color: var(--df-text-primary);
  margin-bottom: .5rem
}
.group-card-apoyos ul {
  list-style: none;
  padding: 0;
  margin: 0
}
.group-card-apoyos li {
  font-size: .9rem;
  color: var(--df-text-secondary);
  margin-bottom: .25rem
}
.group-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--df-border)
}
.df-public-download-container {
  max-width: 600px;
  margin: 3rem auto
}
.public-download-logo {
  text-align: center;
  margin-bottom: 2rem
}
.public-download-logo img {
  max-width: 200px;
  height: auto
}
.file-info-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: var(--df-bg-main);
  border: 1px solid var(--df-border);
  border-left: 4px solid var(--df-info);
  border-radius: var(--md-radius);
  padding: 1.5rem;
  margin: 1.5rem 0
}
.file-info-box .fas {
  font-size: 2rem;
  color: var(--df-primary)
}
.file-info-box .file-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--df-text-primary)
}
.file-info-box .file-size {
  font-size: .9rem;
  color: var(--df-text-secondary)
}
.expiration-info {
  font-size: .95rem;
  color: var(--df-text-secondary);
  text-align: right
}
.notifications-panel {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px
}
.notifications-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  padding: 20px
}
.notifications-list {
  list-style: none;
  margin: 0;
  padding: 0
}
.notification-item {
  border-bottom: 1px solid #eee
}
.notification-item:last-child {
  border-bottom: none
}
.notification-link {
  display: flex;
  align-items: center;
  padding: 15px 0;
  text-decoration: none;
  color: #333;
  transition: background-color .2s ease-in-out
}
.notification-link:hover {
  background-color: #f9f9f9
}
.notification-item.read .notification-link {
  color: #888
}
.notification-icon {
  font-size: 20px;
  color: #900;
  min-width: 40px;
  text-align: center
}
.notification-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column
}
.notification-content span {
  font-weight: 500;
  line-height: 1.4
}
.notification-date {
  font-size: 12px;
  color: #aaa;
  margin-top: 4px
}
.notification-status {
  min-width: 20px;
  text-align: right
}
.unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #900;
  border-radius: 50%
}
.form-field {
  margin-bottom: 1rem
}
.form-field label {
  display: block;
  font-weight: 500;
  margin-bottom: .5rem;
  color: var(--df-text-secondary);
  font-size: .95rem
}
#file-types-tagify,
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--md-input-border);
  border-radius: var(--md-radius-sm);
  background-color: var(--df-bg-main);
  color: var(--df-text-primary);
  font-size: 1rem;
  transition: var(--md-transition)
}
.custom-login-wrapper {
  max-width: 400px;
  width: 100%;
  margin: auto;
  padding: var(--df-spacing-xl,32px);
  background-color: var(--df-bg-card,#fff);
  border-radius: var(--md-radius,12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  position: relative;
  top: calc(30vh - 250px)
}
.custom-login-logo {
  text-align: center;
  margin-bottom: 2rem
}
.custom-login-logo img {
  max-width: 260px!important;
  max-height: 180px!important;
  width: auto;
  height: auto
}
.custom-login-wrapper .form-input {
  background-color: #fff
}
#file-types-tagify:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: 0;
  border-color: var(--df-primary);
  box-shadow: 0 0 0 3px rgba(139,0,0,.15)
}
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 1.5rem
}
.custom-login-wrapper .form-field--checkbox {
  display: flex;
  align-items: center;
  gap: 8px
}
.custom-login-wrapper .form-field--checkbox input[type=checkbox] {
  display: inline-block;
  width: 16px;
  height: 16px
}
.custom-login-wrapper .login-lost-password {
  text-align: center;
  margin-top: 1rem;
  font-size: .9rem
}
.custom-login-wrapper .login-lost-password a {
  color: var(--df-primary,#8b0000);
  text-decoration: none;
  transition: color .3s ease
}
.custom-login-wrapper .login-lost-password a:hover {
  color: var(--df-primary-dark,#6e0000);
  text-decoration: underline
}
.custom-login-wrapper input[type=submit],
.login-submit input.button {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  font-weight: 600;
  background-color: var(--df-primary,#8b0000);
  color: var(--df-text-light,#fff);
  border: none;
  border-radius: var(--df-radius,12px);
  cursor: pointer;
  transition: background-color .3s ease
}
.custom-login-wrapper input[type=submit]:hover,
.login-submit input.button:hover {
  background-color: var(--df-primary-dark,#6e0000)
}
.apoyos-list-container {
  margin-bottom: 1.5rem
}
.form-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--df-border)
}
.df-tab-link.disabled {
  color: #94a3b8;
  background-color: var(--df-bg-main);
  pointer-events: none;
  cursor: not-allowed
}
.form-instructions {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: var(--df-bg-main);
  border: 1px solid var(--df-border);
  border-left: 4px solid var(--df-info);
  border-radius: var(--md-radius-sm);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0
}
.form-instructions i {
  font-size: 1.5rem;
  color: var(--df-info)
}
.form-instructions p {
  margin: 0;
  font-size: .95rem;
  color: var(--df-text-secondary)
}
.pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem
}
.pill {
  display: inline-block;
  padding: .35rem .75rem;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 9999px;
  background-color: var(--df-pill-bg-color,#e2e8f0);
  color: var(--df-pill-text-color,#334155);
  transition: background-color .3s ease,color .3s ease
}
.df-modal-body strong.group-name-to-confirm {
  background-color: #dc3545;
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  display: inline-block;
  margin: 0 5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: .9em
}
.df-modal-body .form-group {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1.5rem;
  margin-bottom: 1.25rem
}
.df-modal-body .form-field-full {
  grid-column: 1/-1
}
.form-field--floating {
  position: relative
}
.form-field--floating label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: var(--df-text-secondary);
  pointer-events: none;
  transition: all .2s ease-out;
  background-color: var(--df-bg-card);
  padding: 0 .25rem
}
.password-input-wrapper .form-field--floating label {
  background-color: transparent
}
.form-field--floating .form-input,
.form-field--floating .form-textarea {
  padding: 1.5rem 1rem .5rem 1rem;
  width: 100%;
  box-sizing: border-box
}
.form-field--floating .form-input:-webkit-autofill + label,
.form-field--floating .form-input:autofill + label,
.form-field--floating .form-input:not(:placeholder-shown) + label,
.form-field--floating.field-active label {
  top: -.5rem;
  left: .75rem;
  font-size: .75rem;
  color: var(--df-primary)
}
.form-field--floating .form-input:focus,
.form-field--floating .form-textarea:focus {
  border-color: var(--df-primary);
  box-shadow: 0 0 0 3px rgba(139,0,0,.15)
}
.form-field-hint {
  display: block;
  margin-top: .4rem;
  font-size: .8rem;
  color: var(--df-text-secondary);
  padding-left: .25rem;
  margin-bottom: .4rem
}
.df-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(17,24,39,.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all .3s ease
}
.df-modal-overlay.is-visible {
  opacity: 1;
  visibility: visible
}
.df-modal-content {
  background-color: #fff;
  border-radius: 16px;
  padding: 2rem;
  width: 90%;
  max-width: 560px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
  transform: translateY(20px);
  transition: transform .3s ease
}
.df-modal-overlay.is-visible .df-modal-content {
  transform: translateY(0)
}
.df-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: .75rem
}
.df-modal-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0;
  color: #1e293b
}
.df-modal-close-btn {
  background: 0 0;
  border: none;
  font-size: 1.6rem;
  color: #64748b;
  cursor: pointer;
  line-height: 1;
  transition: color .2s ease
}
.df-modal-close-btn:hover {
  color: #ef4444
}
.df-modal-body {
  font-size: .95rem;
  color: #334155;
  line-height: 1.65
}
.df-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e2e8f0
}
@media (max-width:768px) {
  .df-modal-overlay {
    align-items: flex-end
  }
  .df-modal-content {
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 100%;
    transform: translateY(100%)
  }
  .df-modal-overlay.is-visible .df-modal-content {
    transform: translateY(0)
  }
}
.btn,
.button {
  padding: 12px 24px;
  border-radius: var(--md-radius);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: var(--md-transition);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--md-shadow-1);
  transform: translateY(0)
}
.btn:hover,
.button:hover {
  box-shadow: var(--md-shadow-2);
  transform: translateY(-2px)
}
.btn--primary,
.button-primary,
.button.button-primary {
  background-color: var(--df-primary);
  color: var(--df-text-light)
}
.btn--primary:hover,
.button-primary:hover,
.button.button-primary:hover {
  background-color: var(--df-primary-dark)
}
.btn--secondary,
.button-secondary {
  background-color: #f3f4f6;
  color: var(--df-text-primary);
  border-color: #e5e7eb
}
.btn--secondary:hover,
.button-secondary:hover {
  background-color: #e5e7eb
}
.btn--danger {
  background-color: var(--df-danger);
  color: var(--df-text-light)
}
.btn--danger:hover {
  background-color: #b91c1c
}
.btn--small {
  padding: 8px 16px;
  font-size: .9rem
}
.btn i {
  margin-right: 5px
}
.apoyos-list-container {
  display: flex;
  flex-direction: column;
  gap: 1rem
}
.apoyo-summary-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8fafc;
  border: 1px solid var(--df-border);
  border-radius: var(--md-radius-sm);
  padding: 1rem;
  box-shadow: var(--md-shadow-1)
}
.apoyo-summary-info {
  display: flex;
  align-items: center;
  gap: 1rem
}
.apoyo-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--df-primary);
  color: var(--df-text-light);
  display: flex;
  justify-content: center;
  align-items: center
}
.apoyo-avatar .fa-user-circle {
  font-size: 1.5rem
}
.apoyo-name {
  margin: 0;
  font-weight: 600
}
.apoyo-email {
  margin: 0;
  font-size: .9rem;
  color: var(--df-text-secondary)
}
.apoyo-summary-actions {
  display: flex;
  gap: .5rem
}
.df-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  display: none;
  animation: spin 1s ease-in-out infinite
}
.df-spinner.active {
  display: block
}
@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}
.btn.is-loading span,
.button.is-loading span {
  display: none
}
.btn.is-loading .df-spinner,
.button.is-loading .df-spinner {
  display: block
}
.df-context-section {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--df-border)
}
.df-context-section:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none
}
.df-context-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--df-text-primary);
  margin-top: 0;
  margin-bottom: 1rem
}
.df-tab-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}
.df-tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2rem;
  margin-bottom: .5rem
}
.df-tab-link {
  display: block;
  padding: .75rem 1.25rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--df-text-secondary);
  background-color: var(--df-bg-main);
  border: 1px solid var(--df-border);
  border-radius: var(--md-radius);
  transition: var(--md-transition)
}
.df-tab-link:hover {
  background-color: var(--df-border);
  color: var(--df-text-primary)
}
.df-tab-link.active {
  background-color: var(--df-primary);
  color: var(--df-text-light);
  border-color: var(--df-primary);
  box-shadow: var(--md-shadow-1)
}
.df-tab-content {
  display: none
}
.df-tab-content.active {
  display: block
}
.wp-list-table {
  width: 100%;
  border-collapse: collapse
}
.wp-list-table td,
.wp-list-table th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--df-border);
  text-align: left
}
.wp-list-table thead th {
  font-weight: 600;
  background-color: #f3f4f6;
  color: var(--df-text-primary)
}
.wp-list-table tbody tr:last-child td {
  border-bottom: none
}
.wp-list-table textarea {
  border: 1px solid var(--md-input-border);
  border-radius: var(--md-radius-sm);
  padding: 8px;
  resize: vertical;
  font-size: .95rem;
  background-color: #fff;
  transition: var(--md-transition)
}
.wp-list-table textarea:focus {
  border-color: var(--df-primary);
  box-shadow: 0 0 0 2px rgba(139,0,0,.15);
  outline: 0
}
.submit {
  margin-top: 2rem;
  text-align: right
}
@media (max-width:768px) {
  .custom-app-container {
    width: 90%;
    padding: 0;
    margin: 1.5rem auto
  }
  .card-wrapper,
  .df-tab-content-wrapper,
  .user-list-section {
    padding: 1.5rem
  }
  .app-title,
  .df-modal-title,
  .section-title {
    font-size: 1.25rem
  }
  .df-tab-nav,
  .df-tabs--modern,
  .filter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
  }
  .df-tab-nav::-webkit-scrollbar,
  .df-tabs--modern::-webkit-scrollbar {
    display: none
  }
  .df-tab-nav .df-tab-link,
  .df-tabs--modern .df-tab-link {
    flex-shrink: 0
  }
  .panel-apoyo-dashboard .row {
    flex-direction: column
  }
}
.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange {
  background: var(--df-primary);
  border-color: var(--df-primary)
}
.flatpickr-calendar .flatpickr-day.today {
  border-color: var(--df-primary-dark)
}
.flatpickr-calendar .flatpickr-day.today:focus,
.flatpickr-calendar .flatpickr-day.today:hover {
  background: var(--df-primary-dark);
  border-color: var(--df-primary-dark);
  color: #fff
}
#df-toast.df-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  display: none;
  z-index: 9999;
  font-size: 16px;
  min-width: 280px;
  max-width: 90%;
  text-align: center
}
#df-toast .toast-icon {
  margin-right: 10px;
  font-size: 20px;
  vertical-align: middle
}
#df-toast.success {
  background-color: #4caf50
}
#df-toast.error {
  background-color: #f44336
}
#df-toast.info {
  background-color: #2196f3
}
.tagify__dropdown {
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  max-height: 200px;
  overflow-y: auto;
  z-index: 9999
}
.tagify__tag {
  background-color: #0073aa;
  color: #fff;
  padding: 4px 8px;
  border-radius: 3px;
  font-weight: 600
}
.tagify__tag__removeBtn {
  margin-left: 6px;
  cursor: pointer
}
.tagify__input {
  min-width: 100px;
  outline: 0
}
.df-tabs--modern,
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}
.df-tabs--modern .df-tab-link {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 9999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  text-decoration: none;
  transition: all .3s ease;
  cursor: pointer
}
.df-tabs--modern .df-tab-link.active {
  background-color: #900;
  border-color: #900;
  color: #fff;
  font-weight: 700
}
.df-tabs--modern .df-tab-link:hover {
  background-color: #eee
}
.df-tabs--modern .df-tab-link.active:hover {
  background-color: #900
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: 20px
}
.df-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  align-items: center
}
.df-button-group .btn {
  flex-grow: 1;
  max-width: 48%
}
.user-info p {
  margin-top: 0;
  margin-bottom: .5em
}
.user-info .user-role {
  padding-bottom: 1em
}
.user-card-actions {
  padding-top: 1em
}
.password-input-wrapper {
  position: relative;
  width: 100%
}
.password-input-wrapper .form-input {
  padding-right: 60px
}
.password-input-wrapper .toggle-password-vis {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  cursor: pointer;
  color: #666;
  z-index: 10
}
.password-policies-info {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
  color: #666;
  z-index: 10
}
.password-policies-info:hover .password-tooltip {
  display: block
}
.password-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  width: 300px;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  border-radius: 8px;
  padding: 15px;
  z-index: 20;
  text-align: left;
  display: none
}
.password-tooltip p,
.password-tooltip ul {
  margin: 0;
  padding: 0;
  list-style: none
}
.password-tooltip ul li {
  padding-left: 1.5em;
  position: relative
}
.password-tooltip ul li::before {
  content: '\f00c';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #28a745;
  position: absolute;
  left: 0
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2.5em
}
.pagination .page-numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: .5rem
}
.pagination .page-numbers a,
.pagination .page-numbers span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: .5rem 1rem;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--df-text-secondary);
  background-color: var(--df-bg-card);
  border: 1px solid var(--df-border);
  border-radius: var(--md-radius-sm);
  transition: var(--md-transition);
  cursor: pointer
}
.pagination .page-numbers .current {
  background-color: var(--df-primary);
  border-color: var(--df-primary);
  color: var(--df-text-light);
  font-weight: 700;
  cursor: default;
  box-shadow: var(--md-shadow-2)
}
div#df-activity-log-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2.5em;
  width: 100%
}
div#df-activity-log-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: .5rem 1rem;
  margin: 0 4px;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none!important;
  color: var(--df-text-secondary);
  background: var(--df-bg-card);
  border: 1px solid var(--df-border);
  border-radius: var(--md-radius-sm);
  transition: var(--md-transition);
  cursor: pointer;
  box-shadow: none
}
div#df-activity-log-pagination a.page-numbers:hover {
  border-color: var(--df-primary);
  color: var(--df-primary);
  transform: translateY(-2px);
  box-shadow: var(--md-shadow-2)
}
div#df-activity-log-pagination .page-numbers.current {
  background: var(--df-primary);
  border-color: var(--df-primary);
  color: var(--df-text-light);
  font-weight: 700;
  cursor: default;
  box-shadow: var(--md-shadow-2)
}
.panel-apoyo-dashboard .row {
  display: flex;
  gap: 20px;
  margin-bottom: 2em;
  align-items: stretch
}
.column--1-of-2 {
  flex: 1;
  display: flex;
  flex-direction: column
}
.card-wrapper.card-section {
  flex: 1;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  justify-content: flex-start
}
.apoyo-summary-card p {
  margin: 0;
  padding: .5em 0;
  display: flex;
  align-items: center
}
.apoyo-summary-card .fas {
  margin-right: 10px;
  color: #900
}
.group-members-section {
  padding: 20px 0 0 0;
  flex: 1;
  overflow-y: auto;
  max-height: 300px
}
.group-members-list {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 15px;
  list-style: none;
  padding: 0;
  margin: 0
}
.member-item {
  background-color: #f9f9f9;
  border: 1px solid var(--df-border,#e2e8f0);
  border-radius: var(--md-radius-sm,8px);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: var(--md-transition);
  box-shadow: var(--md-shadow-1)
}
.member-item i {
  color: #900;
  margin-right: 5px
}
.member-item .member-email,
.member-item .member-name {
  display: block;
  padding: 2px 0
}
.member-email {
  color: #555;
  font-size: 14px
}
.user-list-section,
.user-management-card {
  margin-bottom: 2em
}
.app-description {
  font-size: 1rem;
  color: var(--df-text-secondary);
  margin-top: -1rem;
  margin-bottom: 2rem
}
.file-preview-container {
  margin-top: 1rem;
  padding: 1rem;
  background-color: var(--df-bg-main);
  border: 1px solid var(--df-border);
  border-radius: var(--md-radius-sm);
  display: none
}
.file-preview-container.active {
  display: block
}
input[type=file] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--md-input-border);
  border-radius: var(--md-radius-sm);
  background-color: var(--df-bg-main);
  color: var(--df-text-primary);
  font-size: 1rem;
  transition: var(--md-transition);
  box-sizing: border-box;
  line-height: 1
}
.generated-link-wrapper {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin-top: 1rem
}
.generated-link-wrapper .form-input {
  flex-grow: 1
}
.generated-link-wrapper .btn,
.generated-link-wrapper .button {
  padding: 12px
}
.btn--whatsapp,
.button-whatsapp {
  background-color: #25d366;
  color: var(--df-text-light)
}
.btn--whatsapp:hover,
.button-whatsapp:hover {
  background-color: #128c7e
}
#qr-code-container img {
  max-width: 150px;
  height: auto
}
.df-password-reset-form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh
}
.df-form {
  max-width: 450px;
  width: 100%;
  padding: 2.5rem;
  background-color: var(--df-bg-card);
  border-radius: var(--md-radius);
  box-shadow: var(--md-shadow-2);
  box-sizing: border-box
}
.df-form-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--df-text-primary);
  text-align: center;
  margin-bottom: 1.5rem
}
.df-form-description {
  font-size: .95rem;
  color: var(--df-text-secondary);
  text-align: center;
  margin-bottom: 1.5rem
}
.df-notice {
  padding: 1rem;
  border-radius: var(--md-radius-sm);
  margin-bottom: 1.5rem;
  text-align: center;
  font-weight: 600
}
.df-notice-error {
  background-color: #fee2e2;
  color: var(--df-danger);
  border: 1px solid var(--df-danger)
}
.df-notice-success {
  background-color: #dcfce7;
  color: var(--df-success);
  border: 1px solid var(--df-success)
}
.df-form-field {
  margin-bottom: 1rem
}
.df-form-field label {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600;
  color: var(--df-text-primary)
}
.df-form-field .input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--md-input-border);
  border-radius: var(--md-radius-sm);
  background-color: var(--df-bg-main);
  color: var(--df-text-primary);
  font-size: 1rem;
  transition: var(--md-transition);
  box-sizing: border-box
}
.df-form-field .input:focus {
  outline: 0;
  border-color: var(--df-primary);
  box-shadow: 0 0 0 3px rgba(139,0,0,.15)
}
.df-form-submit {
  margin-top: 1.5rem
}
.df-button {
  width: 100%;
  padding: 12px 24px;
  border-radius: var(--md-radius);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  transition: var(--md-transition);
  border: 1px solid transparent;
  display: block;
  background-color: var(--df-primary);
  color: var(--df-text-light);
  box-shadow: var(--md-shadow-1)
}
.df-button:hover {
  background-color: var(--df-primary-dark);
  box-shadow: var(--md-shadow-2);
  transform: translateY(-2px)
}
.df-form-footer-links {
  text-align: center;
  margin-top: 2rem;
  font-size: .95rem
}
.df-form-footer-links a {
  color: var(--df-primary);
  text-decoration: none;
  transition: color .3s ease
}
.df-form-footer-links a:hover {
  color: var(--df-primary-dark);
  text-decoration: underline
}
.wp-list-table thead th {
  background-color: var(--df-bg-main);
  color: var(--df-text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  font-size: .9em;
  letter-spacing: .5px
}
.wp-list-table tbody tr {
  transition: background-color .2s ease
}
.wp-list-table tbody tr:hover {
  background-color: #f3f4f6
}
.wp-list-table .status-inactive td {
  color: var(--df-text-secondary);
  opacity: .7
}
.wp-list-table .row-actions {
  font-size: .9em;
  margin-top: 5px;
  color: var(--df-text-secondary)
}
.wp-list-table .row-actions .notes {
  font-size: .85em;
  font-style: italic;
  color: #94a3b8
}
.df-status-pill {
  display: inline-block;
  padding: .25rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: .5px
}
.df-status-pill.status-active {
  background-color: #dcfce7;
  color: var(--df-success)
}
.df-status-pill.status-expired {
  background-color: #fee2e2;
  color: var(--df-danger)
}
.df-status-pill.status-limit {
  background-color: #fffbeb;
  color: var(--df-warning)
}
.df-button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end
}
.df-button-grid .btn,
.df-button-grid .button {
  flex-grow: 1;
  min-width: 40px;
  padding: 10px;
  font-size: .9em
}
.df-button-grid .btn i,
.df-button-grid .button i {
  margin: 0
}
#password-manager-modal .df-modal-content {
  max-width: 480px
}
#password-manager-modal .df-modal-body strong {
  color: var(--df-primary);
  font-weight: 600
}
#password-manager-modal .df-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding-top: 1.5rem
}
#password-manager-modal #remove-password-btn {
  display: none
}
@media (max-width:768px) {
  .wp-list-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
  }
  .wp-list-table tbody,
  .wp-list-table thead {
    display: table;
    width: 100%
  }
  .wp-list-table tbody tr td:nth-child(4),
  .wp-list-table thead tr th:nth-child(4) {
    display: none
  }
}
.login-footer-text {
  text-align: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--df-border,#e2e8f0);
  font-size: .85rem;
  color: var(--df-text-secondary,#64748b);
  line-height: 1.5
}
.menu-item-notifications {
  position: relative
}
.menu-item-notifications.has-unread .fa-bell {
  color: var(--df-danger,#dc2626);
  animation: df-bell-shake .8s cubic-bezier(.36,.07,.19,.97) both
}
.menu-item-notifications .notification-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  color: #fff;
  background-color: var(--df-danger,#dc2626);
  border-radius: 9px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--df-bg-card)
}
@keyframes df-bell-shake {
  0%,
  100% {
    transform: rotate(0)
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: rotate(-10deg)
  }
  20%,
  40%,
  60%,
  80% {
    transform: rotate(10deg)
  }
}
.group-card-members .member-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .75rem;
  background-color: transparent!important;
  border: none!important;
  box-shadow: none!important;
  padding: .25rem 0!important
}
.member-item {
  background-color: transparent!important;
  border: none!important;
  box-shadow: none!important;
  padding: .5rem 0!important;
  display: flex;
  justify-content: space-between;
  align-items: center
}
.member-item.owner i.fa-user-crown {
  color: var(--df-warning);
  font-size: 1.1em
}
.group-card-apoyos .apoyos-title {
  margin-top: 1rem;
  font-weight: 600
}
.member-item i {
  font-size: 1rem;
  color: var(--df-text-secondary)
}
.member-item span {
  flex-grow: 1;
  text-align: center
}
.member-item.owner {
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0
}
.member-item.owner i {
  color: var(--df-success)
}
.member-item.owner strong {
  color: var(--df-text-primary)
}
.apoyos-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--df-text-primary);
  margin: 1rem 0 .5rem 0
}
.group-card-apoyos ul {
  list-style: none;
  padding: 0;
  margin: 0
}
.member-item.support i {
  color: var(--df-info)
}
.group-card-stats {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--df-border)
}
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1
}
.stat-pill .stat-value {
  font-size: 1.1rem
}
.stat-pill .stat-label {
  font-weight: 500
}
.stat-pill.stat-pending {
  background-color: #fffbeb;
  color: #b45309
}
.stat-pill.stat-pending i {
  color: #f59e0b
}
.stat-pill.stat-files {
  background-color: #eff6ff;
  color: #1d4ed8
}
.stat-pill.stat-files i {
  color: #3b82f6
}
.stat-pill.stat-expired {
  background-color: #fee2e2;
  color: #991b1b
}
.stat-pill.stat-expired i {
  color: var(--df-danger)
}
.stat-pill.stat-deleted {
  background-color: #e2e8f0;
  color: #475569
}
.stat-pill.stat-deleted i {
  color: #64748b
}
.stat-pill.stat-delivery {
  background-color: #e0f2fe;
  color: #1e40af
}
.stat-pill.stat-delivery i {
  color: #3b82f6
}
.df-tabs--modern .df-tab-link {
  display: flex;
  align-items: center;
  gap: 8px
}
.df-tab-link .df-count {
  display: inline-block;
  padding: 2px 8px;
  font-size: .75em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 9999px;
  background-color: #e2e8f0;
  color: #475569;
  transition: all .2s ease-in-out
}
.df-tab-link.active .df-count {
  background-color: #fff;
  color: var(--df-primary,#8b0000)
}
.status-safe {
  font-weight: 700;
  color: #059669
}
.status-expiring-soon {
  font-weight: 700;
  color: #d97706
}
.status-expired {
  font-weight: 700;
  color: #dc2626;
  text-decoration: line-through
}
.history-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem
}
.history-section .section-title {
  margin-bottom: 0
}
.df-timeline {
  position: relative;
  padding-left: 30px;
  border-left: 2px solid var(--df-border,#e2e8f0)
}
.timeline-item {
  position: relative;
  margin-bottom: 2rem
}
.timeline-item:last-child {
  margin-bottom: 0
}
.timeline-item__marker {
  position: absolute;
  left: -42px;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--df-bg-card,#fff);
  border: 2px solid var(--df-border,#e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem
}
.timeline-item__content {
  background: var(--df-bg-main,#f8fafc);
  border-radius: var(--md-radius-sm,8px);
  padding: 1rem 1.5rem;
  border: 1px solid var(--df-border,#e2e8f0)
}
.timeline-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--df-border,#e2e8f0)
}
.timeline-item__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--df-text-primary,#1e293b)
}
.timeline-item__timestamp {
  font-size: .85rem;
  color: var(--df-text-secondary,#64748b)
}
.timeline-item__body p {
  margin: .5rem 0;
  font-size: .95rem;
  line-height: 1.6
}
.timeline-item__body p strong {
  font-weight: 600;
  color: var(--df-text-primary,#1e293b)
}
.timeline-item--blue .timeline-item__marker {
  border-color: #3b82f6;
  color: #3b82f6
}
.timeline-item--blue .timeline-item__title {
  color: #3b82f6
}
.timeline-item--green .timeline-item__marker {
  border-color: #16a34a;
  color: #16a34a
}
.timeline-item--green .timeline-item__title {
  color: #16a34a
}
.timeline-item--red .timeline-item__marker {
  border-color: #dc2626;
  color: #dc2626
}
.timeline-item--red .timeline-item__title {
  color: #dc2626
}
.timeline-item--yellow .timeline-item__marker {
  border-color: #f59e0b;
  color: #f59e0b
}
.timeline-item--yellow .timeline-item__title {
  color: #f59e0b
}
.timeline-item--gray .timeline-item__marker {
  border-color: #64748b;
  color: #64748b
}
.timeline-item--gray .timeline-item__title {
  color: #64748b
}
.timeline-item--purple .timeline-item__marker {
  border-color: #9333ea;
  color: #9333ea
}
.timeline-item--purple .timeline-item__title {
  color: #9333ea
}
.timeline-item--default .timeline-item__marker {
  border-color: var(--df-text-secondary,#64748b);
  color: var(--df-text-secondary,#64748b)
}
.group-card-members-hierarchy {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--df-border);
  display: flex;
  flex-direction: column;
  gap: 1.25rem
}
.member-category {
  width: 100%
}
.members-heading {
  font-size: .8rem;
  font-weight: 700;
  color: var(--df-text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 .5rem 0;
  padding-bottom: .25rem;
  border-bottom: 1px dotted var(--df-border)
}
.members-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem
}
.member-item-new {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .95rem
}
.member-item-new i {
  font-size: 1.1em;
  width: 20px;
  text-align: center
}
.member-item-new.owner {
  font-weight: 700;
  color: var(--df-text-primary)
}
.member-item-new.owner i {
  color: var(--df-warning)
}
.member-item-new.support i {
  color: var(--df-info)
}
.member-item-new.supervisor i {
  color: var(--df-success)
}
.member-item-new.cc-email i {
  color: var(--df-text-secondary)
}
.member-item-new.cc-email span {
  font-style: italic
}
.stat-pill.stat-in-progress {
  background-color: #eff6ff;
  color: #1d4ed8
}
.stat-pill.stat-in-progress i {
  color: #3b82f6
}
.stat-pill.stat-completed {
  background-color: #f0fdf4;
  color: #15803d
}
.stat-pill.stat-completed i {
  color: var(--df-success)
}
.df-blurred-text {
  filter: blur(4px);
  cursor: pointer;
  position: relative;
  transition: filter .3s ease-in-out
}
.df-blurred-text:hover {
  filter: blur(0px)
}
.df-blurred-text::after {
  content: 'Información confidencial';
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.8);
  color: #fff;
  font-size: .8em;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease
}
.df-blurred-text:hover::after {
  opacity: 1;
  visibility: visible
}
.solicitud-meta .group-name-container {
  display: inline-block
}
@media print {
  .df-page-header {
    display: none
  }
  .btn,
  .section-header button,
  button {
    display: none!important
  }
  .custom-app-container > div:first-child {
    display: none
  }
}
@media print {
  .print-button {
    display: none!important
  }
}
.solicitud-card-v2.card--modal-open {
  box-shadow: 0 0 0 3px var(--df-primary-light,rgba(139,0,0,.4));
  border-color: var(--df-primary,#8b0000);
  transform: translateY(-2px)
}
.confidential-banner {
  background: var(--df-danger,#dc2626);
  color: var(--df-text-light,#fff);
  padding: 10px 15px;
  font-weight: 600;
  text-align: center;
  border-radius: var(--md-radius-sm);
  margin-bottom: 2rem;
  font-size: 1rem
}
.expediente-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem
}
.expediente-main-card {
  background: var(--df-bg-card);
  border: 1px solid var(--df-border);
  border-radius: var(--md-radius);
  padding: 2rem;
  display: flex;
  flex-direction: column
}
.expediente-main-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--df-text-secondary);
  text-transform: uppercase;
  margin: 0 0 .5rem 0
}
.expediente-subject {
  font-size: 2rem;
  font-weight: 700;
  color: var(--df-text-primary);
  margin: 0;
  line-height: 1.2;
  flex-grow: 1
}
.expediente-status-badge {
  align-self: flex-start;
  margin-top: 1rem;
  font-size: .8rem;
  font-weight: 700;
  padding: .3rem .8rem;
  border-radius: 999px;
  color: var(--df-text-light);
  background-color: #64748b
}
.expediente-status-badge.status-completado {
  background-color: var(--df-success)
}
.expediente-status-badge.status-en_revision,
.expediente-status-badge.status-pendiente_revision {
  background-color: var(--df-warning)
}
.expediente-status-badge.status-expirado,
.expediente-status-badge.status-expirado_recuperable {
  background-color: var(--df-danger)
}
.expediente-meta-card {
  background: var(--df-bg-main);
  border: 1px solid var(--df-border);
  border-radius: var(--md-radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem
}
.meta-item {
  text-align: right
}
.meta-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--df-text-secondary);
  text-transform: uppercase;
  display: block
}
.meta-value {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--df-text-primary)
}
.meta-value.folio {
  font-weight: 700;
  color: var(--df-primary)
}
.expediente-body {
  padding-top: 1rem
}
.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 1rem;
  margin-top: 1.5rem
}
.detail-card {
  background-color: var(--df-bg-main);
  border: 1px solid var(--df-border);
  border-radius: var(--md-radius-sm);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem
}
.detail-icon {
  font-size: 1.5rem;
  color: var(--df-primary)
}
.detail-content {
  display: flex;
  flex-direction: column
}
.detail-label {
  font-size: .8rem;
  color: var(--df-text-secondary);
  font-weight: 500
}
.detail-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--df-text-primary)
}
.last-access-log {
  margin-top: 1.5rem;
  font-size: .85rem;
  color: var(--df-text-secondary);
  border-top: 1px dotted var(--df-border);
  padding-top: 1rem
}
.card-wrapper hr {
  border: none;
  border-top: 1px solid var(--df-border);
  margin: 2rem 0
}
.sharing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: 1.5rem
}
.sharing-column h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-weight: 600
}
.sharing-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: var(--df-bg-main);
  border: 1px solid var(--df-border);
  border-radius: var(--md-radius-sm);
  padding: 1rem;
  margin-bottom: .75rem
}
.sharing-icon {
  font-size: 1.5rem;
  color: var(--df-text-secondary)
}
.sharing-details {
  display: flex;
  flex-direction: column
}
.sharing-name {
  font-weight: 600;
  color: var(--df-text-primary)
}
.sharing-email {
  font-size: .9rem;
  color: var(--df-text-secondary)
}
.df-expediente-footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--df-border);
  font-size: .8rem;
  color: var(--df-text-secondary);
  text-align: center
}
.expediente-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
  gap: 1rem
}
.section-header.with-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem
}
.file-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: .75rem 1rem;
  transition: all .2s ease-in-out;
  box-shadow: 0 1px 3px rgba(0,0,0,.03)
}
.file-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 8px rgba(0,0,0,.06);
  transform: translateY(-2px)
}
.file-card__info {
  flex-grow: 1;
  overflow: hidden
}
.file-card__name {
  display: block;
  font-weight: 600;
  color: #111827;
  margin-bottom: .25rem;
  font-size: .95rem;
  white-space: normal;
  word-break: break-all
}
.file-card__meta {
  display: flex;
  align-items: center;
  gap: .75rem
}
.file-badge {
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  color: #fff;
  text-transform: uppercase
}
.file-badge--pdf {
  background-color: #9b59b6
}
.file-badge--doc,
.file-badge--docx {
  background-color: #3498db
}
.file-badge--xls,
.file-badge--xlsx {
  background-color: #2ecc71
}
.file-badge--rar,
.file-badge--zip {
  background-color: #f39c12
}
.file-badge--ppt,
.file-badge--pptx {
  background-color: #e74c3c
}
.file-badge--jpeg,
.file-badge--jpg,
.file-badge--png {
  background-color: #34495e
}
.file-badge--default {
  background-color: #7f8c8d
}
.file-size {
  font-size: .8rem;
  color: #6b7280
}
.file-card__actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0
}
.file-card__stat {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .9em;
  color: #6b7280;
  background-color: #f1f5f9;
  padding: 4px 8px;
  border-radius: 8px
}
.client-files-section {
  background-color: #f8fafc;
  padding: 1.5rem;
  border-radius: var(--md-radius);
  border: 1px solid var(--df-border);
  margin-bottom: 2rem
}
.activity-log-item .log-detail-reason {
  display: block;
  font-size: .9em;
  color: var(--df-text-secondary,#64748b);
  font-style: italic;
  margin-top: 5px;
  padding-left: 10px;
  border-left: 2px solid var(--df-border,#e2e8f0)
}
.formato-item-row {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem
}
.formato-actions {
  display: flex;
  gap: .5rem
}
.formato-actions .icon-button {
  padding: 5px;
  height: 40px;
  width: 40px;
  line-height: 1;
  border-radius: 50%
}
.member-item-new .member-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3
}
.member-item-new .user-email-tag {
  font-size: .85em;
  color: var(--df-text-secondary);
  font-weight: 400
}
.member-item-new i {
  align-self: flex-start;
  padding-top: 3px
}
.df-notice {
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: var(--md-radius-sm);
  border: 1px solid transparent;
  font-weight: 600;
  text-align: center
}
.df-notice p {
  margin: 0
}
.df-notice.notice-error {
  background-color: #fee2e2;
  border-color: var(--df-danger);
  color: #b91c1c
}
.df-notice.notice-success {
  background-color: #dcfce7;
  border-color: var(--df-success);
  color: #166534
}
.df-notice.notice-info {
  background-color: #eff6ff;
  border-color: var(--df-info);
  color: #1e40af
}
#secure-request-form .form-field-hint {
  font-size: .85rem;
  color: var(--df-text-secondary);
  margin-top: .5rem
}
#generated-link-container .generated-link-wrapper {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin-top: 1rem
}
#generated-link-container .form-input {
  flex-grow: 1;
  background-color: var(--df-bg-main);
  color: var(--df-primary);
  font-weight: 600
}
#generated-link-container .button {
  padding: 12px
}
.df-button-grid .button {
  min-width: 40px;
  padding: 10px;
  font-size: .9em
}
.df-button-grid .button i {
  margin: 0
}
.df-status-pill.status-inactive {
  background-color: #f1f5f9;
  color: #64748b;
  text-transform: capitalize
}
.df-public-download-container .form-footer-actions {
  justify-content: center
}
.df-public-download-container .button i {
  margin-right: .5rem
}
.direct-delivery-badge-detail {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border-radius: var(--md-radius-sm);
  background-color: #e0f2fe;
  color: #0c4a6e;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 1rem;
  align-self: flex-start
}
.direct-delivery-badge-detail .fas {
  font-size: 1rem
}
.user-assigned-groups {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dotted #e2e8f0
}
.assigned-groups-title {
  font-weight: 600;
  font-size: .9em;
  color: var(--df-text-secondary);
  margin-bottom: .5rem
}
.assigned-groups-title i {
  margin-right: 5px
}
.assigned-groups-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  font-size: .9em;
  max-height: 100px;
  overflow-y: auto
}
.assigned-groups-list li {
  background-color: #f8fafc;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  border: 1px solid #e2e8f0
}
.origin-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .85rem;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .5px;
  border: 1px solid transparent
}
.origin-badge i {
  font-size: .9em
}
.origin-badge.origin-admin {
  background-color: #e0f2fe;
  color: #0c4a6e;
  border-color: #7dd3fc
}
.origin-badge.origin-client {
  background-color: #f0fdf4;
  color: #166534;
  border-color: #86efac
}
.user-agent-cell .ip-address {
  display: block;
  font-weight: 600;
  color: var(--df-text-primary)
}
.user-agent-cell .user-agent-details {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  font-size: .85em;
  color: var(--df-text-secondary)
}
.table-row-recency tr {
  transition: background-color .4s ease-in-out
}
.table-row-recency tr:nth-child(-n+3) {
  background-color: rgba(59,130,246,.1)
}
.table-row-recency tr:nth-child(n+4):nth-child(-n+6) {
  background-color: rgba(59,130,246,.05)
}
.table-row-recency tr:nth-child(n+7):nth-child(-n+10) {
  background-color: rgba(59,130,246,.02)
}
.table-row-recency tr:hover {
  background-color: rgba(59,130,246,.15)!important
}
.filter-by-group {
  grid-template-columns: repeat(auto-fill,minmax(280px,1fr))
}
.group-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
  border-radius: var(--md-radius);
  transition: var(--md-transition);
  border: 3px solid transparent
}
.group-card-link .group-card {
  height: 100%
}
.group-card-link.active {
  border-color: var(--df-primary);
  box-shadow: var(--md-shadow-2)
}
.group-card-link:not(.active):hover {
  transform: translateY(-4px);
  box-shadow: var(--md-shadow-2)
}
.all-groups-card {
  background-color: #f8fafc;
  text-align: center;
  justify-content: center
}
.df-notice.df-notice-warning {
  background-color: #fffbeb;
  border-left: 4px solid #f59e0b;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem!important;
  box-shadow: 0 2px 4px rgba(0,0,0,.05)
}
.df-notice.df-notice-warning p {
  font-size: 1.05em;
  font-weight: 700;
  margin: 0;
  padding: 0
}
.view-toggle .view-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none
}
.view-toggle .switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex: 0 0 auto
}
.view-toggle .switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0
}
.view-toggle .slider {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 999px;
  transition: background .2s
}
.view-toggle .slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .2s
}
.view-toggle .switch input:checked + .slider {
  background: var(--df-primary,#8b0000)
}
.view-toggle .switch input:checked + .slider::before {
  transform: translateX(18px)
}
.view-toggle .switch input:focus-visible + .slider {
  outline: 2px solid var(--df-primary,#8b0000);
  outline-offset: 2px
}
.pagination {
  gap: 8px;
  flex-wrap: wrap
}
.pagination > a.page-numbers,
.pagination > span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: .5rem 1rem;
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none!important;
  color: var(--df-text-secondary);
  background: var(--df-bg-card);
  border: 1px solid var(--df-border);
  border-radius: var(--md-radius-sm);
  transition: var(--md-transition);
  box-shadow: none
}
.pagination > a.page-numbers:hover {
  border-color: var(--df-primary);
  color: var(--df-primary);
  transform: translateY(-2px);
  box-shadow: var(--md-shadow-2)
}
.pagination > span.page-numbers.current {
  background: var(--df-primary);
  border-color: var(--df-primary);
  color: var(--df-text-light);
  font-weight: 700;
  box-shadow: var(--md-shadow-2)
}
.pagination > span.page-numbers.dots {
  cursor: default
}