:root {
  --af-bg: #eef4f7;
  --af-surface: #ffffff;
  --af-surface-soft: #f8fbfd;
  --af-surface-strong: #eff7fa;
  --af-border: #d7e4ea;
  --af-border-strong: #bfd7df;
  --af-text: #17323c;
  --af-muted: #5f7580;
  --af-primary: #0d8a9e;
  --af-primary-dark: #0a6f80;
  --af-primary-soft: rgba(13, 138, 158, .12);
  --af-accent: #0b7b92;
  --af-success: #16815a;
  --af-warning: #b77a16;
  --af-danger: #bb3a45;
  --af-shadow: 0 18px 42px rgba(19, 48, 64, .08);
  --af-shadow-soft: 0 8px 20px rgba(19, 48, 64, .06);
  --af-radius-lg: 22px;
  --af-radius-md: 16px;
  --af-radius-sm: 12px;
}

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

body {
  margin: 0;
  color: var(--af-text) !important;
  background:
    radial-gradient(circle at top left, rgba(13, 138, 158, .12), transparent 28%),
    radial-gradient(circle at top right, rgba(10, 111, 128, .08), transparent 24%),
    linear-gradient(180deg, #f8fcfd 0%, #ecf3f7 100%) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body, p, li, td, th, input, select, textarea, button {
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--af-primary-dark);
  font-weight: 800;
  line-height: 1.15;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.15rem; }

p { color: var(--af-muted); }

a {
  color: var(--af-primary);
  text-decoration: none;
}

a:hover {
  color: var(--af-primary-dark);
}

img {
  max-width: 100%;
}

.panel,
.login-container,
.container-recuperar,
.container-registro,
.wrap,
.card,
.step,
.modal-card,
.summary-box,
.member-box,
.aut-card,
.turno-card,
.persona-card,
.list-card,
.subpanel,
.webpush-prompt,
.header-compact,
.formContainer,
.formulario,
.box,
.container-card,
.info-card,
.result-card,
.action-card,
.side,
.intro,
.masthead,
.storyboard .chapter,
.chapter,
.chapter-2,
.chapter-3,
.chapter-1,
.content-card,
.card1,
.card2,
.container,
.container-fluid,
.card-body,
.modal-content,
.dropdown-menu {
  background: var(--af-surface) !important;
  color: var(--af-text) !important;
  border: 1px solid var(--af-border) !important;
  border-radius: var(--af-radius-lg) !important;
  box-shadow: var(--af-shadow) !important;
}

.panel,
.login-container,
.container-recuperar,
.container-registro,
.wrap,
.step,
.modal-card,
.summary-box,
.member-box,
.aut-card,
.turno-card,
.persona-card,
.list-card,
.subpanel,
.webpush-prompt,
.header-compact,
.formContainer,
.formulario,
.box,
.container-card,
.info-card,
.result-card,
.action-card,
.side,
.intro,
.content-card {
  backdrop-filter: blur(10px);
}

.panel,
.login-container,
.container-recuperar,
.container-registro,
.wrap,
.step,
.modal-card,
.summary-box,
.member-box,
.aut-card,
.turno-card,
.persona-card,
.list-card,
.subpanel,
.webpush-prompt,
.header-compact,
.formContainer,
.formulario,
.box,
.container-card,
.info-card,
.result-card,
.action-card,
.side,
.intro,
.content-card {
  padding: 20px !important;
}

.panel,
.login-container,
.container-recuperar,
.container-registro,
.wrap,
.step,
.modal-card,
.summary-box,
.member-box,
.aut-card,
.turno-card,
.persona-card,
.list-card,
.subpanel,
.webpush-prompt,
.header-compact,
.formContainer,
.formulario,
.box,
.container-card,
.info-card,
.result-card,
.action-card,
.side,
.intro,
.content-card {
  overflow: hidden;
}

.topbar,
.header-compact,
.masthead,
.toolbar,
.summary-controls,
.actions,
.footer,
.card-head,
.modal-header,
.modal-footer,
.list-item,
.sol-item,
.aut-header,
.turno-head,
.persona-head,
.step-head,
.chapter-head {
  background: transparent !important;
}

.topbar,
.masthead,
.header-compact,
.card-head,
.modal-header,
.modal-footer,
.summary-box,
.member-box,
.subpanel,
.webpush-prompt,
.list-card,
.aut-card,
.turno-card,
.persona-card,
.panel,
.step,
.modal-card,
.wrap,
.login-container,
.container-recuperar,
.container-registro,
.content-card {
  border-color: var(--af-border) !important;
}

.topbar,
.masthead,
.header-compact,
.panel,
.step,
.modal-card,
.login-container,
.container-recuperar,
.container-registro,
.content-card {
  box-shadow: var(--af-shadow-soft) !important;
}

.container,
.container-fluid,
.row {
  color: var(--af-text);
}

.form-control,
.form-select,
.input,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
textarea,
select {
  border: 1.5px solid var(--af-border-strong) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--af-text) !important;
  box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--af-primary) !important;
  box-shadow: 0 0 0 4px var(--af-primary-soft) !important;
}

label,
.form-label,
.field label,
legend,
th,
.card-head,
.title,
.login-title,
.subtitle,
.section-title,
.summary-title,
.list-title,
.aut-header,
.turno-title,
.persona-title,
.modal-title,
.progress-single,
.badge,
.badge-pill {
  color: var(--af-primary-dark) !important;
}

.help-block,
.small,
.text-muted,
.muted,
.subtitle,
.summary,
.field-hint,
.choice-help,
.intro p,
.chapter-text,
.chapter-kicker,
.login-container .text-muted,
.container-recuperar .text-muted,
.container-registro .text-muted {
  color: var(--af-muted) !important;
}

.btn,
button,
input[type="submit"],
input[type="button"] {
  border-radius: 12px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.btn-primary,
.btn-success,
.btn-info,
.btn-danger,
.btn-warning,
.btn-wa,
.btn-accent {
  background: linear-gradient(135deg, var(--af-primary) 0%, var(--af-accent) 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 14px 26px rgba(13, 138, 158, .22) !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-wa:hover,
.btn-accent:hover {
  background: linear-gradient(135deg, var(--af-primary-dark) 0%, #0a5f6f 100%) !important;
  color: #fff !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark,
.btn-outline-light,
.btn-secondary {
  border: 1.5px solid var(--af-border-strong) !important;
  background: #f3f8fa !important;
  color: var(--af-primary-dark) !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-dark:hover,
.btn-outline-light:hover,
.btn-secondary:hover {
  background: #e8f3f5 !important;
  color: var(--af-primary-dark) !important;
}

.btn-link {
  color: var(--af-primary) !important;
}

.btn:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
}

.table,
table {
  color: var(--af-text) !important;
  border-color: var(--af-border) !important;
}

.table > :not(caption) > * > *,
table > :not(caption) > * > * {
  border-bottom-color: var(--af-border) !important;
}

.table thead th,
th {
  background: #f4fafb !important;
  color: #1f4954 !important;
  border-bottom: 1px solid var(--af-border) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: #fafdfd !important;
}

.table-hover > tbody > tr:hover > * {
  background-color: #f2fafb !important;
}

.alert,
.flash,
.message,
.notice,
.info-box,
.empty,
.pill,
.badge,
.status-badge,
.unread,
.step-pills span,
.summary-box,
.webpush-status {
  border-radius: 14px !important;
}

.alert-success,
.flash-ok,
.pill-activo,
.status-ok {
  background: #e7faf1 !important;
  border: 1px solid #a6e7c8 !important;
  color: var(--af-success) !important;
}

.alert-info,
.flash-info,
.status-info,
.summary-box,
.info-card,
.member-box,
.webpush-prompt {
  background: #f7fbfd !important;
  border: 1px solid var(--af-border) !important;
  color: var(--af-text) !important;
}

.alert-warning,
.flash-warn,
.status-warn,
.pill-susp,
.pill-vencido {
  background: #fff6e8 !important;
  border: 1px solid #f0d0a2 !important;
  color: var(--af-warning) !important;
}

.alert-danger,
.flash-err,
.status-error {
  background: #fdecec !important;
  border: 1px solid #f2b7bf !important;
  color: var(--af-danger) !important;
}

.modal-backdrop.show {
  opacity: .22 !important;
}

.modal-content,
.modal-card {
  background: var(--af-surface) !important;
  border: 1px solid var(--af-border) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 64px rgba(19, 48, 64, .20) !important;
  color: var(--af-text) !important;
}

.modal-header {
  border-bottom: 1px solid var(--af-border) !important;
}

.modal-footer {
  border-top: 1px solid var(--af-border) !important;
}

.navbar,
.navbar-light,
.navbar-dark,
.topbar,
.header-compact {
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(10px);
}

.card,
.card1,
.card2,
.option-card,
.chapter,
.chapter-1,
.chapter-2,
.chapter-3,
.step,
.list-card,
.aut-card,
.turno-card,
.persona-card,
.summary-box,
.member-box,
.subpanel {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.card:hover,
.card1:hover,
.card2:hover,
.option-card:hover,
.chapter:hover,
.step:hover,
.list-card:hover,
.aut-card:hover,
.turno-card:hover,
.persona-card:hover,
.summary-box:hover,
.member-box:hover,
.subpanel:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(19, 48, 64, .10) !important;
  border-color: rgba(13, 138, 158, .26) !important;
}

.pill,
.badge,
.status-badge,
.unread,
.step-pills span,
.btn,
button,
.form-control,
.form-select,
input,
select,
textarea {
  border-radius: 999px;
}

.step-pills span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #eef8fa !important;
  border: 1px solid var(--af-border) !important;
  color: var(--af-primary-dark) !important;
  font-weight: 700;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #c8dbe2;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a9c5ce;
}

@media (max-width: 900px) {
  .panel,
  .login-container,
  .container-recuperar,
  .container-registro,
  .wrap,
  .modal-card,
  .step,
  .header-compact,
  .webpush-prompt,
  .summary-box,
  .member-box,
  .aut-card,
  .turno-card,
  .persona-card,
  .list-card,
  .subpanel {
    border-radius: 18px !important;
  }
}

@media (max-width: 640px) {
  body {
    background: linear-gradient(180deg, #f8fcfd 0%, #eef4f7 100%) !important;
  }

  .panel,
  .login-container,
  .container-recuperar,
  .container-registro,
  .wrap,
  .modal-card,
  .step,
  .header-compact,
  .webpush-prompt,
  .summary-box,
  .member-box,
  .aut-card,
  .turno-card,
  .persona-card,
  .list-card,
  .subpanel {
    padding: 16px !important;
  }
}

/* --- Suavizado específico para el home / bloques de acceso --- */
.menu-list,
.submenu-grid,
.menu-btn,
.menu-btn.disabled,
.menu-btn.dark,
.menu-btn.c1,
.menu-btn.c2,
.menu-btn.c3,
.menu-btn.c4,
.menu-btn.c5,
.menu-btn.c6,
.menu-btn.c7,
.webpush-prompt,
.panel,
.member-box,
.header-compact,
.topbar,
.intro,
.side,
.summary-box,
.card,
.step,
.modal-card,
.list-card,
.subpanel,
.aut-card,
.turno-card,
.persona-card {
  background: var(--af-surface) !important;
  border-color: var(--af-border) !important;
  box-shadow: var(--af-shadow-soft) !important;
}

.menu-btn {
  color: var(--af-text) !important;
  border: 1px solid var(--af-border-strong) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%) !important;
}

.menu-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(13, 138, 158, .22) !important;
  box-shadow: 0 12px 22px rgba(19, 48, 64, .08) !important;
}

.menu-btn.c1 { background: linear-gradient(180deg, #fffaf0 0%, #fff4dd 100%) !important; color: #8f6a1e !important; }
.menu-btn.c2 { background: linear-gradient(180deg, #f0f9fe 0%, #e8f5fb 100%) !important; color: #0b6f92 !important; }
.menu-btn.c3 { background: linear-gradient(180deg, #f4f0ff 0%, #ece6ff 100%) !important; color: #5e4aa0 !important; }
.menu-btn.c4 { background: linear-gradient(180deg, #f0fbf6 0%, #e8f7ef 100%) !important; color: #2b7b60 !important; }
.menu-btn.c5 { background: linear-gradient(180deg, #fff7eb 0%, #fff1db 100%) !important; color: #9d6a1f !important; }
.menu-btn.c6 { background: linear-gradient(180deg, #fff1f6 0%, #fde8f0 100%) !important; color: #a13f74 !important; }
.menu-btn.c7 { background: linear-gradient(180deg, #eef6ff 0%, #e4effb 100%) !important; color: #245e8f !important; }

.menu-btn .menu-icon {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(13, 138, 158, .12) !important;
  color: inherit !important;
}

.menu-btn.c1 .menu-icon { background: rgba(255, 220, 157, .35) !important; }
.menu-btn.c2 .menu-icon { background: rgba(130, 211, 241, .28) !important; }
.menu-btn.c3 .menu-icon { background: rgba(196, 184, 255, .28) !important; }
.menu-btn.c4 .menu-icon { background: rgba(139, 229, 188, .28) !important; }
.menu-btn.c5 .menu-icon { background: rgba(255, 208, 142, .28) !important; }
.menu-btn.c6 .menu-icon { background: rgba(255, 183, 211, .28) !important; }
.menu-btn.c7 .menu-icon { background: rgba(147, 203, 255, .28) !important; }

.menu-btn.disabled {
  background: linear-gradient(180deg, #f4f7f8 0%, #edf2f4 100%) !important;
  color: #8a96a0 !important;
  opacity: .88;
}

.menu-btn.disabled .menu-icon {
  background: rgba(255,255,255,.76) !important;
  color: #8a96a0 !important;
}

.panel h1,
.panel h2,
.panel h3,
.panel h4,
.header-compact h2,
.topbar h1,
.summary-title,
.title,
.login-title,
.menu-label,
.member-box strong,
.card-head,
.step h3,
.section-title,
.aut-card h4,
.turno-card h4,
.persona-card h4 {
  color: var(--af-primary-dark) !important;
}

.panel p,
.member-box p,
.summary-box p,
.webpush-prompt,
.intro p,
.side p,
.card p,
.step p,
.aut-card p,
.turno-card p,
.persona-card p {
  color: var(--af-muted) !important;
}