.login-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:var(--color-bg);
}

.login-card{
  width:100%;
  max-width:960px;
  display:grid;
  grid-template-columns:1fr 1fr;
  border:2px solid var(--color-text);
  background:var(--color-surface);
}

.login-brand{
  background:var(--color-text);
  color:var(--color-bg);
  padding:32px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.login-brand img{
  width:120px;
  margin-bottom:24px;
}

.login-kicker,
.topbar-kicker,
.sidebar-kicker{
  font-family:var(--font-ui);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:11px;
}

.login-title,
.sidebar-product,
.section-title{
  font-family:var(--font-display);
  text-transform:uppercase;
}

.login-title{
  font-size:72px;
  line-height:.9;
  margin:8px 0 16px;
}

.login-copy{
  max-width:34ch;
  color:var(--color-bg);
}

.login-form-wrap{
  padding:32px;
  background:var(--color-bg);
}

.form-title{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:42px;
  margin-bottom:16px;
}

.form-group{
  display:flex;
  flex-direction:column;
  min-width:0;
  margin-bottom:16px;
}

.form-label{
  display:block;
  margin-bottom:6px;
  font-family:var(--font-ui);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:11px;
  color:var(--color-primary);
}

.form-control{
  width:100%;
  min-height:44px;
  border:1px solid var(--color-rule);
  background:var(--color-surface);
  padding:12px 14px;
  color:var(--color-text);
}

textarea.form-control{
  min-height:96px;
  resize:vertical;
}

select.form-control[multiple]{
  min-height:120px;
}

.btn{
  display:inline-block;
  width:100%;
  border:2px solid var(--color-primary);
  background:var(--color-primary);
  color:#fff;
  padding:12px 16px;
  font-family:var(--font-ui);
  text-transform:uppercase;
  letter-spacing:.15em;
  cursor:pointer;
}

.btn:hover{
  background:var(--color-primary-dark);
  border-color:var(--color-primary-dark);
}

.btn-inline{
  width:auto;
  min-width:180px;
}

.btn-light{
  background:var(--color-surface);
  color:var(--color-text);
  border:1px solid var(--color-rule);
}

.btn-light:hover{
  background:var(--color-surface-alt);
  border-color:var(--color-rule);
}

.btn-small{
  min-width:110px;
  padding:8px 10px;
  font-size:11px;
}

.alert{
  padding:12px 14px;
  margin-bottom:16px;
  border:1px solid rgba(200,0,0,.2);
  background:#fff2f2;
  color:#8a1f1f;
}

.alert-success{
  border:1px solid rgba(0,120,60,.2);
  background:#eefbf3;
  color:#166534;
}

/* Layout principal */

.app-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:260px minmax(0, 1fr);
  align-items:stretch;
  overflow-x:hidden;
}

.main-panel{
  min-width:0;
  min-height:100%;
  background:var(--color-bg);
}

.page{
  padding:24px;
  min-height:calc(100vh - 78px);
}

/* Sidebar */

.sidebar{
  width:260px;
  min-width:260px;
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-self:stretch;
  background:var(--color-text);
  color:var(--color-bg);
  border-right:2px solid var(--color-primary);
  overflow:hidden;
}

.sidebar-top{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  padding:18px 14px 12px;
}

.sidebar-bottom{
  padding:12px 14px 16px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.08);
}

.sidebar-brand{
  margin-bottom:18px;
}

.sidebar-logo-wrap{
  display:block;
  margin-bottom:10px;
}

.sidebar-logo{
  max-width:140px;
  max-height:72px;
  width:auto;
  height:auto;
  object-fit:contain;
}

.sidebar-brand-text strong{
  display:block;
  font-family:var(--font-display);
  font-size:18px;
  line-height:1.1;
  text-transform:uppercase;
  color:var(--color-bg);
}

.sidebar-kicker,
.sidebar-subkicker,
.sidebar-group-label,
.sidebar-footer-label{
  display:block;
  font-family:var(--font-ui);
  font-size:10px;
  letter-spacing:.20em;
  text-transform:uppercase;
}

.sidebar-kicker,
.sidebar-group-label,
.sidebar-footer-label{
  color:var(--color-primary);
}

.sidebar-subkicker{
  margin-top:6px;
  color:rgba(255,255,255,.68);
}

.sidebar-nav{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:var(--color-primary) rgba(255,255,255,.06);
}

.sidebar-nav::-webkit-scrollbar{
  width:10px;
}

.sidebar-nav::-webkit-scrollbar-track{
  background:rgba(255,255,255,.05);
  border-radius:999px;
}

.sidebar-nav::-webkit-scrollbar-thumb{
  background:var(--color-primary);
  border-radius:999px;
  border:2px solid rgba(0,0,0,0);
  background-clip:padding-box;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover{
  background:var(--color-primary-dark);
  border:2px solid rgba(0,0,0,0);
  background-clip:padding-box;
}

.sidebar-group-label{
  margin:16px 0 8px;
}

.sidebar-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:44px;
  padding:10px 12px;
  margin-bottom:6px;
  text-decoration:none;
  color:rgba(235,233,222,.82);
  border:1px solid transparent;
  border-radius:10px;
  transition:all .18s ease;
}

.sidebar-link:hover{
  background:rgba(255,77,0,.08);
  border-color:rgba(255,77,0,.18);
  color:var(--color-bg);
}

.sidebar-link.is-active{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:#fff;
  box-shadow:0 8px 20px rgba(255,77,0,.18);
}

.sidebar-link.is-soon{
  opacity:.72;
  cursor:default;
}

.sidebar-link.is-soon:hover{
  background:rgba(255,255,255,.04);
  border-color:transparent;
  color:rgba(235,233,222,.82);
}

.sidebar-link-logout{
  justify-content:center;
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  color:var(--color-bg);
}

.sidebar-link-logout:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.28);
}

.sidebar-footer{
  padding-top:18px;
  border-top:1px solid rgba(235,233,222,.14);
}

.sidebar-footer-value{
  margin-top:6px;
  color:var(--color-bg);
  font-size:14px;
}

.sidebar-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  line-height:1;
  white-space:nowrap;
  background:rgba(255,255,255,.08);
  color:inherit;
}

.sidebar-chip-soon{
  background:rgba(255,77,0,.14);
  color:#ffd8c7;
  border:1px solid rgba(255,77,0,.24);
}

/* Topbar */

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:18px 24px;
  border-bottom:2px solid var(--color-text);
  background:var(--color-text);
  color:var(--color-bg);
}

.topbar-title{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:34px;
  line-height:.95;
}

.topbar-user{
  font-family:var(--font-ui);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
}

/* Secciones */

.section-head{
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:2px solid var(--color-text);
  padding-bottom:10px;
  margin-bottom:20px;
}

.section-badge{
  background:var(--color-primary);
  color:var(--color-white);
  padding:3px 8px;
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.section-title{
  font-size:28px;
}

/* Grids */

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

.grid-4{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}

/* Cards */

.card{
  background:var(--color-surface);
  border:1px solid rgba(255,77,0,.2);
  padding:16px;
}

.card-dark{
  background:var(--color-text);
  color:var(--color-bg);
  border:2px solid var(--color-text);
}

.card-kicker{
  font-family:var(--font-ui);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:10px;
  color:var(--color-primary);
  margin-bottom:8px;
}

.card-title{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:28px;
  margin-bottom:8px;
}

.metric{
  font-family:var(--font-display);
  font-size:54px;
  line-height:.9;
  text-transform:uppercase;
}

.metric-note{
  margin-top:8px;
  color:var(--color-muted);
  font-size:13px;
}

/* Tablas */

.table{
  width:100%;
  border-collapse:collapse;
  background:var(--color-surface);
}

.table th{
  background:var(--color-text);
  color:var(--color-bg);
  padding:12px 14px;
  text-align:left;
  font-family:var(--font-ui);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:10px;
}

.table td{
  padding:12px 14px;
  border:1px solid var(--color-rule);
  font-size:14px;
}

.table tbody tr:nth-child(even){
  background:var(--color-primary-pale);
}

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

/* Badges y notas */

.badge{
  display:inline-block;
  padding:3px 8px;
  font-family:var(--font-ui);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:10px;
  border:1px solid var(--color-primary);
  color:var(--color-primary);
}

.badge-fill{
  background:var(--color-primary);
  color:#fff;
}

.note{
  color:var(--color-muted);
  font-size:14px;
}

/* Toolbar */

.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:16px;
}

/* Modal */

.modal{
  position:fixed;
  inset:0;
  z-index:999;
  display:none;
}

.modal.is-open{
  display:block;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(17,17,17,.56);
  backdrop-filter:blur(2px);
}

.modal-dialog{
  position:relative;
  width:min(760px, calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  margin:24px auto;
  background:var(--color-surface);
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 18px 50px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px 14px;
  border-bottom:1px solid var(--color-divider);
  background:var(--color-surface);
}

.modal-kicker{
  font-family:var(--font-ui);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--color-primary);
  margin-bottom:4px;
}

.modal-title{
  margin:0;
  font-family:var(--font-display);
  font-size:28px;
  line-height:1;
  text-transform:uppercase;
  color:var(--color-text);
}

.modal-close{
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  color:var(--color-text);
  background:transparent;
  border:1px solid rgba(0,0,0,.10);
}

.modal-body{
  padding:18px 20px 20px;
  overflow-y:auto;
  max-height:calc(100vh - 180px);
}

.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin-top:20px;
  padding-top:14px;
  border-top:1px solid var(--color-divider);
  background:var(--color-surface);
  position:sticky;
  bottom:0;
}

/* Formularios */

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

.form-group-full{
  grid-column:1 / -1;
}

/* Estados */

.state-list{
  margin-top:12px;
  display:grid;
  gap:10px;
}

.state-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--color-rule);
}

.state-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.state-dot{
  width:12px;
  height:12px;
  display:inline-block;
}

.state-total{
  font-family:var(--font-ui);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
}

/* Extras */

.request-detail .card{
  margin:0;
}

.quick-state-select{
  min-width:160px;
}

.role-info{
  background:var(--color-primary-pale);
  border:1px solid rgba(255,77,0,0.2);
  margin-bottom:16px;
}

.role-info-label{
  display:inline-block;
  margin-bottom:10px;
  padding:3px 8px;
  background:var(--color-primary);
  color:var(--color-white);
  font-family:var(--font-ui);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.principle-card{
  background:var(--color-text);
  color:rgba(235,233,222,0.85);
  border:2px solid var(--color-text);
}

.principle-card p{
  margin-bottom:10px;
}

.principle-card strong{
  color:var(--color-bg);
}

.principle-label{
  display:inline-block;
  margin-bottom:10px;
  color:var(--color-primary);
  font-family:var(--font-ui);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.calendar-filters{
  display:flex;
  gap:12px;
  align-items:center;
  margin:12px 0 16px;
}

.calendar-filters .form-control{
  max-width:220px;
}

/* Responsive */

@media (max-width: 1100px){
  .grid-4{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px){
  .app-shell{
    grid-template-columns:1fr;
  }

  .sidebar{
    width:100%;
    min-width:0;
    min-height:auto;
    height:auto;
    border-right:none;
    border-bottom:2px solid var(--color-text);
  }

  .sidebar-nav{
    overflow:visible;
    padding-right:0;
    scrollbar-width:auto;
  }

  .sidebar-nav::-webkit-scrollbar{
    width:auto;
    height:auto;
  }

  .page{
    min-height:auto;
    padding:16px;
  }
}

@media (max-width: 860px){
  .login-card{
    grid-template-columns:1fr;
  }

  .grid-2,
  .grid-4,
  .form-grid{
    grid-template-columns:1fr;
  }

  .toolbar{
    flex-direction:column;
    align-items:stretch;
  }

  .btn-inline{
    width:100%;
  }

  .modal-dialog{
    width:calc(100vw - 16px);
    max-height:calc(100vh - 16px);
    margin:8px auto;
  }

  .modal-header{
    padding:14px 14px 12px;
  }

  .modal-body{
    padding:14px;
    max-height:calc(100vh - 150px);
  }

  .modal-title{
    font-size:22px;
  }

  .modal-actions{
    flex-direction:column-reverse;
    align-items:stretch;
  }

  .calendar-filters{
    flex-direction:column;
    align-items:stretch;
  }

  .calendar-filters .form-control{
    max-width:none;
  }
}

/* ── Dark mode overrides ── */
[data-theme="dark"] body,
[data-theme="dark"] .main-panel,
[data-theme="dark"] .page {
  background: var(--color-bg);
  color: var(--color-text);
}
[data-theme="dark"] .table {
  background: var(--color-surface);
}
[data-theme="dark"] .table th {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-rule);
}
[data-theme="dark"] .table td {
  border-color: var(--color-rule);
  color: var(--color-text);
}
[data-theme="dark"] .table tbody tr:nth-child(even) {
  background: var(--color-surface-alt);
}
[data-theme="dark"] .form-control {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-rule);
}
[data-theme="dark"] .form-label {
  color: var(--color-primary);
}
[data-theme="dark"] .btn-light {
  background: var(--color-surface-alt);
  color: var(--color-text);
  border-color: var(--color-rule);
}
[data-theme="dark"] .card {
  background: var(--color-surface) !important;
  border-color: var(--color-rule);
  color: var(--color-text);
}
[data-theme="dark"] .card-title {
  color: var(--color-text);
}
[data-theme="dark"] .modal-dialog {
  background: var(--color-surface);
  border-color: var(--color-rule);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-actions {
  background: var(--color-surface);
  border-color: var(--color-rule);
}
[data-theme="dark"] .modal-title,
[data-theme="dark"] .modal-close {
  color: var(--color-text);
}
[data-theme="dark"] .modal-close {
  border-color: var(--color-rule);
}
[data-theme="dark"] .alert {
  background: rgba(220,38,38,0.12);
  border-color: rgba(220,38,38,0.3);
  color: #fca5a5;
}
[data-theme="dark"] .alert-success {
  background: rgba(22,163,74,0.12);
  border-color: rgba(22,163,74,0.3);
  color: #86efac;
}
[data-theme="dark"] .note { color: var(--color-muted); }
[data-theme="dark"] .section-head { border-color: var(--color-rule); }
[data-theme="dark"] .state-row { border-color: var(--color-rule); }
[data-theme="dark"] .role-info {
  background: rgba(46,107,91,0.1);
  border-color: var(--color-rule);
}

/* Dark mode topbar */
[data-theme="dark"] .topbar {
  background: var(--color-surface) !important;
  border-bottom-color: var(--color-rule) !important;
}
[data-theme="dark"] .topbar-search-input {
  background: var(--color-surface-alt) !important;
  border-color: var(--color-rule) !important;
  color: var(--color-text) !important;
}
[data-theme="dark"] .topbar-search-input::placeholder { color: var(--color-muted) !important; }
[data-theme="dark"] .topbar-icon-btn { color: var(--color-muted); }
[data-theme="dark"] .topbar-icon-btn:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
[data-theme="dark"] .online-label { color: var(--color-text); }
[data-theme="dark"] .avatar-dropdown {
  background: var(--color-surface);
  border-color: var(--color-rule);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
[data-theme="dark"] .avatar-dropdown a { color: var(--color-text); }
[data-theme="dark"] .avatar-dropdown a:hover { background: var(--color-surface-alt); }
[data-theme="dark"] .avatar-dropdown-header { border-color: var(--color-rule); }
[data-theme="dark"] .avatar-dropdown-divider { background: var(--color-rule); }
[data-theme="dark"] .avatar-dd-name { color: var(--color-text); }
[data-theme="dark"] .avatar-dd-role { color: var(--color-muted); }

/* Dark mode sidebar */
[data-theme="dark"] .sidebar {
  background: #0a0f1a;
  border-right-color: var(--color-primary);
}
[data-theme="dark"] .sidebar-bottom {
  background: rgba(0,0,0,0.3);
  border-color: rgba(255,255,255,0.06);
}

/* Dark mode toggle */
.theme-toggle {
  position: relative; width: 36px; height: 36px;
  border: none; background: transparent; border-radius: 8px;
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; color: #6b7280;
  transition: background 0.12s, color 0.12s; flex-shrink: 0;
}
.theme-toggle:hover { background: #f8fafc; color: #0f172a; }
[data-theme="dark"] .theme-toggle { color: var(--color-muted); }
[data-theme="dark"] .theme-toggle:hover { background: var(--color-surface-alt); color: var(--color-text); }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
/* ══ Utilidades (reemplazan estilos inline) ═══════════════════════════════ */
.is-hidden        { display: none; }
.u-mb-4           { margin-bottom: 1rem; }
.note--normal     { font-weight: 400; }
.modal-dialog.modal-dialog--sm { max-width: 420px; }
.w-full           { width: 100%; }
.u-mt-1           { margin-top: 6px; }
.note--xs         { font-size: .72rem; }
.badge--solid     { color: #fff; border: none; }
.row-actions      { display: flex; gap: 6px; align-items: center; }
.modal-dialog.modal-dialog--md { max-width: 480px; }
.modal-dialog.modal-dialog--lg { max-width: 960px; }

/* ── Utilidades genéricas (espaciado, flex, tamaños) ── */
.spacer-12 { height: 12px; }
.spacer-16 { height: 16px; }
.m-0   { margin: 0; }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: 6px; }
.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.ml-4  { margin-left: 4px; }
.pt-6  { padding-top: 6px; }
.p-20  { padding: 20px; }
.fw-700    { font-weight: 700; }
.fs-sm     { font-size: .875rem; }
.nowrap    { white-space: nowrap; }
.overflow-x { overflow-x: auto; }
.items-start { align-items: flex-start; }
.is-locked { opacity: .4; }
.w-40  { width: 40px; }
.w-140 { width: 140px; }
.select-wide    { min-width: 220px; }
.select-wide-sm { min-width: 180px; }
.inline-actions    { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.form-actions-end  { display: flex; justify-content: flex-end; margin-top: 10px; gap: 10px; align-items: center; }
.flex-center-wrap  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flex-between-wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.flex-wrap-center  { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Más utilidades (calendar.php y reutilizables) ── */
.modal-dialog.modal-dialog--w400 { max-width: 400px; }
.modal-dialog.modal-dialog--w460 { max-width: 460px; }
.mw-240 { max-width: 240px; }
.fs-11  { font-size: 11px; }
.fs-12  { font-size: 12px; }
.fs-13  { font-size: 13px; }
.fs-14  { font-size: 14px; }
.fs-r80 { font-size: .8rem; }
.fw-600 { font-weight: 600; }
.mt-0   { margin-top: 0; }
.mb-0   { margin-bottom: 0; }
.mb-4   { margin-bottom: 4px; }
.mb-6   { margin-bottom: 6px; }
.mb-8   { margin-bottom: 8px; }
.mb-10  { margin-bottom: 10px; }
.min-h-24 { min-height: 24px; }
.p-24-20  { padding: 24px 20px; }
.flex-center-6 { display: flex; align-items: center; gap: 6px; }
.text-gray  { color: #6b7280; }
.text-green { color: #16a34a; }
.text-amber { color: #d97706; }

/* ── Utilidades rem (márgenes) ── */
.mb-r1   { margin-bottom: 1rem; }
.mb-r15  { margin-bottom: 1.5rem; }
.mt-r1   { margin-top: 1rem; }
.mt-r125 { margin-top: 1.25rem; }
.mt-r15  { margin-top: 1.5rem; }
.fw-400  { font-weight: 400; }
.mw-560  { max-width: 560px; }

/* ── Más utilidades (discipleship-settings y reutilizables) ── */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.mt-12  { margin-top: 12px; }
.mt-16  { margin-top: 16px; }
.mb-16  { margin-bottom: 16px; }
.fw-500 { font-weight: 500; }
.fs-r75 { font-size: .75rem; }
.ws-pre { white-space: pre-wrap; }
.capitalize { text-transform: capitalize; }
.text-right { text-align: right; }
.pad-8-12  { padding: 8px 12px; }
.pad-12-16 { padding: 12px 16px; }
.pad-10-12 { padding: 10px 12px; }
.minw-260 { min-width: 260px; }
.w-15p { width: 15%; }
.w-20p { width: 20%; }
.w-30p { width: 30%; }
.flex-center-10 { display: flex; align-items: center; gap: 10px; }
.flex-between-8 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bg-red   { background: #ef4444; }
.bg-green { background: #22c55e; }

/* ── Más utilidades (orden-servicio y reutilizables) ── */
.col-span-all { grid-column: 1 / -1; }
.fs-r82 { font-size: .82rem; }
.fs-r85 { font-size: .85rem; }
.fs-r90 { font-size: .9rem; }

/* ── Utilidades extra (grupos-pequenos y otras páginas) ── */
.mt-24      { margin-top: 24px; }
.ml-auto    { margin-left: auto; }
.ml-8       { margin-left: 8px; }
.gap-6      { gap: 6px; }
.mw-480     { max-width: 480px; }
.mw-400     { max-width: 400px; }
.flex-gap-8 { display: flex; gap: 8px; }

/* ── Utilidades extra (superadmin y otras) ── */
.mb-r2   { margin-bottom: 2rem; }
.op-6    { opacity: .6; }
.mb-r075 { margin-bottom: .75rem; }

/* ── Utilidades extra (formularios y otras) ── */
.text-primary   { color: var(--color-primary); }
.text-soft      { color: var(--text-soft, #888); }
.mw-640         { max-width: 640px; }
.mt-20          { margin-top: 20px; }
.cursor-pointer { cursor: pointer; }

/* ── Utilidades extra (historial-voluntarios y otras) ── */
.text-center { text-align: center; }
.ml-6        { margin-left: 6px; }
.self-end    { align-self: flex-end; }

/* ── Utilidad extra (checkin-infantil) ── */
.mw-440 { max-width: 440px; }