/* v2.2.40 - pulido UX/UI: servicios recurrentes, RR.HH., brochures e indicadores visuales */
:root {
  --ui-focus-border: rgba(37, 99, 235, .42);
  --ui-focus-shadow: 0 16px 40px rgba(15, 23, 42, .10), 0 0 0 3px rgba(37, 99, 235, .08);
  --ui-card-border: rgba(148, 163, 184, .26);
  --ui-card-bg: rgba(255, 255, 255, .96);
}

.card,
.teacher-pay-shell,
.finance-form-card,
.finance-table-card,
.brochure-module,
.brochure-session,
.brochure-list-card-v2,
.teacher-insight-card,
.config-tile {
  border: 1px solid var(--ui-card-border) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .055);
  background: var(--ui-card-bg);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.card:hover,
.teacher-pay-shell:hover,
.finance-form-card:hover,
.finance-table-card:hover,
.brochure-module:hover,
.brochure-list-card-v2:hover,
.teacher-insight-card:hover,
.config-tile:hover {
  border-color: rgba(37, 99, 235, .28) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .085);
}

.card:focus-within,
.teacher-pay-shell:focus-within,
.finance-form-card:focus-within,
.finance-table-card:focus-within,
.brochure-module:focus-within,
.brochure-session:focus-within,
.brochure-list-card-v2:focus-within,
.config-tile:focus-within {
  border-color: var(--ui-focus-border) !important;
  box-shadow: var(--ui-focus-shadow);
}

.service-payments-view .teacher-pay-insight-grid,
.hr-module-view .teacher-pay-insight-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-toolbar {
  grid-template-columns: minmax(150px, .8fr) minmax(150px, .8fr) minmax(180px, .9fr) minmax(240px, 1.4fr);
}

.service-pay-table th,
.service-pay-table td,
.hr-role-table th,
.hr-role-table td {
  vertical-align: middle;
}

.service-pay-table td small,
.hr-role-table td small,
.hr-table td small {
  display: block;
  color: var(--muted, #64748b);
  margin-top: .18rem;
}

.service-icon-pill {
  width: 2.45rem;
  height: 2.45rem;
  min-width: 2.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: #1d4ed8;
  background: linear-gradient(135deg, #eef6ff, #e0ecff);
  border: 1px solid #cfe0ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

.service-icon-pill .icon,
.service-icon-pill .icon-svg {
  width: 1.08rem;
  height: 1.08rem;
}

.service-person { min-width: 220px; }
.service-detail-grid { margin: 1rem 0; }
.worker-contact-actions,
.finance-dossier-actions,
.brochure-list-card-v2__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: .8rem 0 1rem;
}
.worker-modal-panel { max-width: 850px; }
.worker-dossier .teacher-mini-grid { margin: 1rem 0; }
.input-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .45rem;
}
.input-action input { min-width: 0; }

.hr-role-table-wrap { overflow-x: auto; }
.hr-role-table { min-width: 920px; }
.hr-role-table .teacher-pay-person { min-width: 210px; }
.hr-role-table td:nth-child(6) { max-width: 320px; color: var(--text-secondary, #475569); line-height: 1.45; }

.brochure-registry-card .mini-grid.three,
#brochureBaseRegistryList,
#brochureGroupRegistryList,
#brochureRegistryList {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .9rem;
  align-items: stretch;
}

.brochure-list-card-v2 {
  position: relative;
  display: grid;
  gap: .72rem;
  padding: 1rem;
  border-radius: 20px;
  overflow: hidden;
}

.brochure-list-card-v2::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--program-color, #2563eb);
}

.brochure-list-card-v2__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .72rem;
  align-items: start;
}

.brochure-list-card-v2__head small,
.brochure-list-card-v2__head em {
  display: block;
  color: var(--muted, #64748b);
  font-style: normal;
}

.brochure-list-card-v2__head strong {
  display: block;
  font-size: .98rem;
  line-height: 1.25;
  color: var(--text, #0f172a);
  margin: .12rem 0;
}

.brochure-list-card-v2 p {
  margin: 0;
  color: var(--text-secondary, #475569);
  line-height: 1.42;
}

.brochure-list-card-v2__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.brochure-list-card-v2__meta span {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  border: 1px solid #dbe7f3;
  background: #f8fafc;
  color: #475569;
  border-radius: 999px;
  padding: .32rem .55rem;
  font-size: .78rem;
  font-weight: 600;
}

.icon-index-pill,
.module-index-pill.icon-index-pill,
.session-index-pill.icon-index-pill {
  width: auto !important;
  min-width: 3.25rem;
  height: 2rem;
  border-radius: 999px;
  padding: 0 .6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .32rem;
  background: #f8fafc;
  color: #1d4ed8;
  border: 1px solid #dbeafe;
  box-shadow: none;
}

.icon-index-pill strong {
  font-size: .78rem;
  line-height: 1;
  color: #1e293b;
}

.icon-index-pill .icon,
.icon-index-pill .icon-svg {
  width: .9rem;
  height: .9rem;
}

.brochure-session {
  background: #fff;
  border-radius: 18px;
}

@media (max-width: 1100px) {
  .service-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-payments-view .teacher-pay-insight-grid,
  .hr-module-view .teacher-pay-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .service-toolbar,
  .hr-toolbar { grid-template-columns: 1fr !important; }
  .service-payments-view .teacher-pay-insight-grid,
  .hr-module-view .teacher-pay-insight-grid { grid-template-columns: 1fr; }
  .worker-contact-actions,
  .finance-dossier-actions { flex-direction: column; }
  .worker-contact-actions .btn,
  .finance-dossier-actions .btn { width: 100%; justify-content: center; }
  .brochure-registry-card .mini-grid.three,
  #brochureBaseRegistryList,
  #brochureGroupRegistryList,
  #brochureRegistryList { grid-template-columns: 1fr; }
}

.estado-danger,
.status-pill.estado-danger {
  color: #991b1b;
  background: #fee2e2;
  border-color: #fecaca;
}

/* ==========================================================
   v3.30 · Enfoque minimalista y reducción de texto visible
   ========================================================== */
:root {
  --btn-height-sm: 38px;
  --btn-height-md: 46px;
  --btn-height-lg: 54px;
  --btn-radius: 15px;
  --icon-button-size: 42px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .07);
  --color-surface-soft: #f8fafc;
}

body {
  background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%) !important;
}

.main,
.app-main,
.content-area {
  --minimal-gap: .9rem;
}

.card,
.mini-card,
.detail-card,
.empty-state-card,
.config-tile,
.brochure-panel,
.brochure-editor-card,
.entity-dialog-modern,
.teacher-pay-hero,
.finance-page-heading,
.registration-detail-panel,
.student-modal-card {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
  border-color: rgba(148, 163, 184, .24) !important;
}

.card:hover,
.mini-card:hover,
.detail-card:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, .065) !important;
}

.section-heading,
.finance-page-heading,
.teacher-pay-hero,
.card__head,
.card__head.compact {
  gap: .55rem !important;
}

.section-heading .eyebrow,
.finance-page-heading .eyebrow,
.teacher-pay-hero .eyebrow,
.card__head .eyebrow,
.role-banner .eyebrow,
.report-cover .eyebrow {
  display: none !important;
}

.section-heading .section-subtitle,
.finance-page-heading .section-subtitle,
.teacher-pay-hero .section-subtitle,
.card__head .card-subtitle,
.card__head > div > p.card-subtitle,
.clean-card-hint,
.api-proposal-card .card-subtitle,
.config-tile.refined > p,
.role-banner p,
.integration-summary .hint,
.tool-access-enabled-pill + .hint {
  display: none !important;
}

.card > .hint:first-child,
.card > p.hint:first-child,
.detail-card__body > p.hint:first-child:not(.empty-state),
.brochure-panel .hint,
:is(#programForm, #groupForm, #turnForm, #zoomForm, #teacherForm, #aiToolForm, #serviceForm) > .hint {
  display: none !important;
}

.hint,
.muted-text,
.muted-cell,
small {
  color: #64748b !important;
}

h1,
.page-title,
h2,
.section-heading h2,
.finance-page-heading h2,
.teacher-pay-hero h2 {
  letter-spacing: -.04em !important;
}

h3,
.card__head h3,
.soft-section-title h3 {
  margin-bottom: .35rem !important;
}

.btn,
button.btn,
a.btn {
  min-height: var(--btn-height-md) !important;
  padding: .76rem 1.12rem !important;
  font-size: .88rem !important;
  border-radius: var(--btn-radius) !important;
  gap: .48rem;
}

.btn-small,
.registration-view-btn,
button.btn-small,
a.btn-small {
  min-height: var(--btn-height-sm) !important;
  padding: .58rem .86rem !important;
  font-size: .8rem !important;
  border-radius: 13px !important;
}

.btn-large {
  min-height: var(--btn-height-lg) !important;
  padding-inline: 1.35rem !important;
}

.subtab,
.teacher-pay-page-tabs button,
.student-modal-tabs button,
.registration-view-tabs button,
.finance-report-tabs .subtab,
.finance-quota-tabs .quota-tab {
  min-height: 44px !important;
  padding: .72rem 1.05rem !important;
  border-radius: 15px !important;
  font-size: .86rem !important;
}

.icon-btn,
button.icon-btn,
a.icon-btn {
  width: var(--icon-button-size) !important;
  height: var(--icon-button-size) !important;
  min-width: var(--icon-button-size) !important;
  min-height: var(--icon-button-size) !important;
  border-radius: 14px !important;
}

.button-row,
.topbar-actions,
.form-actions,
.registration-view-actions,
.student-modal-head-actions {
  gap: .72rem !important;
}

.status-pill,
.badge,
.chip,
.program-chip,
.group-pill {
  border-radius: 999px !important;
  padding: .34rem .62rem !important;
}

.structure-card-clean .detail-card__body,
.clean-card-actions {
  padding-top: .75rem !important;
}

.structure-quick-grid,
.turn-meta-grid,
.teacher-card-metrics,
.clean-chipline {
  gap: .48rem !important;
}

input,
select,
textarea {
  min-height: 44px;
  border-radius: 13px !important;
}

.field-grid,
.finance-form-grid,
.teacher-pay-toolbar.refined-toolbar,
.filters,
.filter-grid {
  gap: .85rem !important;
}

@media (max-width: 760px) {
  .btn,
  button.btn,
  a.btn,
  .subtab {
    min-height: 46px !important;
  }
  .button-row,
  .form-actions,
  .topbar-actions {
    justify-content: stretch !important;
  }
  .button-row .btn,
  .form-actions .btn,
  .topbar-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* v3.31 · interfaz más compacta, limpia y visible */
.login-shell {
  width: min(560px, 100%) !important;
  grid-template-columns: 1fr !important;
}
.login-card {
  padding: clamp(24px, 4vw, 36px) !important;
}
.login-brand h1 {
  font-size: clamp(2.15rem, 5vw, 3.35rem) !important;
}
.login-side,
.demo-users,
.demo-user,
.login-note,
.role-banner {
  display: none !important;
}
.sidebar-export-card--icons {
  padding: .58rem !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border-color: rgba(255,255,255,.10) !important;
}
.sidebar-export-card--icons small,
.sidebar-export-card--icons strong,
.sidebar-export-card--icons p {
  display: none !important;
}
.sidebar-export-card--icons .sidebar-actions {
  width: 100% !important;
  justify-content: center !important;
  gap: .5rem !important;
  margin: 0 !important;
}
.sidebar-export-card--icons .btn,
.sidebar-export-card--icons .file-button {
  width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border-radius: 14px !important;
}
.main {
  font-size: 1.01rem;
}
.main .section-heading h2 {
  font-size: clamp(1.45rem, 2vw, 1.85rem) !important;
}
.main .btn,
.main .subtab,
.main .icon-btn {
  min-height: 42px;
}
.main .btn:not(.btn-small):not(.icon-only) {
  padding-inline: 1.05rem;
  font-size: .96rem;
}
.main .subtab {
  padding-inline: 1rem !important;
  font-size: .94rem !important;
}
.main .field input,
.main .field select,
.main .field textarea {
  font-size: .96rem !important;
}
.structure-card-modern.program-card-accent,
.structure-card-modern.academic-structure-card {
  border: 1.5px solid var(--program-accent, #2563eb) !important;
  box-shadow: 0 14px 30px rgba(15,23,42,.055) !important;
}
.structure-card-modern.program-card-accent::before,
.structure-card-modern.academic-structure-card::before {
  inset: .72rem auto .72rem 0 !important;
  width: 8px !important;
  border-radius: 0 999px 999px 0 !important;
  opacity: .94 !important;
}
.structure-card-modern > summary {
  padding-left: 1.35rem !important;
}
.structure-title {
  font-size: 1.05rem !important;
  font-weight: 680 !important;
  line-height: 1.25 !important;
}
.structure-kicker,
.program-type-kicker,
.structure-chip,
.structure-meta-row span {
  font-size: .82rem !important;
}
.structure-avatar,
.dialog-avatar {
  min-width: 52px !important;
  height: 52px !important;
  font-size: .9rem !important;
}
.status-pill,
.badge,
.chip,
.program-chip {
  font-size: .8rem !important;
}
@media (max-width: 860px) {
  .login-shell { width: min(100%, 560px) !important; }
  .main { font-size: 1rem; }
}

/* ==========================================================
   v3.32 · UX académica responsive y tarjetas coloreadas
   ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.app-shell,
.main,
.content,
.content-area,
.view,
.card,
.mini-card,
.detail-card,
.field,
.field-grid,
.filter-grid,
.filters,
.structure-card-modern,
.entity-dialog-modern,
.entity-tab-panel,
.entity-dialog-grid,
.mini-table,
.mini-row {
  min-width: 0 !important;
  max-width: 100% !important;
}

.main,
.content-area {
  overflow-x: clip;
  font-size: 1.04rem !important;
}

.structure-card-modern.program-card-accent,
.structure-card-modern.academic-structure-card,
.structure-card-modern.structure-program-card,
.structure-card-modern.structure-group-card,
.structure-card-modern.structure-turn-card {
  border: 2px solid var(--program-accent, #2563eb) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(248,251,255,.94) 82%),
    linear-gradient(145deg, var(--program-bg, #eff6ff), #fff) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06) !important;
}

.structure-card-modern.program-card-accent::before,
.structure-card-modern.academic-structure-card::before,
.structure-card-modern.structure-program-card::before,
.structure-card-modern.structure-group-card::before,
.structure-card-modern.structure-turn-card::before {
  inset: .5rem auto .5rem 0 !important;
  width: 10px !important;
  border-radius: 0 999px 999px 0 !important;
  background: var(--program-accent, #2563eb) !important;
  opacity: 1 !important;
  transition: width .18s ease, inset .18s ease, box-shadow .18s ease;
}

.structure-card-modern.program-card-accent:hover,
.structure-card-modern.academic-structure-card:hover,
.structure-card-modern.structure-program-card:hover,
.structure-card-modern.structure-group-card:hover,
.structure-card-modern.structure-turn-card:hover,
.structure-card-modern.program-card-accent:focus-within,
.structure-card-modern.academic-structure-card:focus-within,
.structure-card-modern.structure-program-card:focus-within,
.structure-card-modern.structure-group-card:focus-within,
.structure-card-modern.structure-turn-card:focus-within {
  border-color: var(--program-accent, #2563eb) !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, .095) !important;
  transform: translateY(-1px);
}

.structure-card-modern.program-card-accent:hover::before,
.structure-card-modern.academic-structure-card:hover::before,
.structure-card-modern.structure-program-card:hover::before,
.structure-card-modern.structure-group-card:hover::before,
.structure-card-modern.structure-turn-card:hover::before,
.structure-card-modern.program-card-accent:focus-within::before,
.structure-card-modern.academic-structure-card:focus-within::before,
.structure-card-modern.structure-program-card:focus-within::before,
.structure-card-modern.structure-group-card:focus-within::before,
.structure-card-modern.structure-turn-card:focus-within::before {
  inset: .35rem auto .35rem 0 !important;
  width: 14px !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--program-accent, #2563eb) 13%, transparent);
}

.structure-card-modern > summary {
  padding: 1.08rem 1.08rem 1.08rem 1.55rem !important;
  gap: .9rem !important;
}

.structure-card-modern .detail-card__body {
  padding: .92rem 1.08rem 1.08rem 1.55rem !important;
}

.structure-title,
.full-program-title,
.turn-route-line,
.dialog-titleblock h2,
.entity-dialog-grid span,
.entity-dialog-modern .mini-row strong,
.entity-dialog-modern .mini-row span {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.structure-title {
  font-size: 1.1rem !important;
  line-height: 1.26 !important;
  font-weight: 720 !important;
}

.structure-kicker,
.program-type-kicker {
  font-size: .86rem !important;
  font-weight: 640 !important;
}

.structure-chipline > span,
.turn-chipline > span,
.teacher-card-metrics > span:not(.status-pill),
.structure-quick-grid > span,
.structure-card-modern .status-pill {
  font-size: .86rem !important;
  line-height: 1.18 !important;
}

.group-code-avatar,
.structure-avatar,
.dialog-avatar {
  min-width: 54px !important;
  height: 54px !important;
  font-size: .96rem !important;
  border: 1.5px solid color-mix(in srgb, var(--program-accent, #2563eb) 24%, #fff) !important;
}

.button-row,
.clean-card-actions .button-row,
.structure-card-modern .detail-card__body .button-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .72rem !important;
}

.structure-card-modern .detail-card__body .button-row .btn,
.clean-card-actions .button-row .btn {
  min-height: 44px !important;
  padding-inline: 1rem !important;
  font-size: .92rem !important;
}

.app-dialog {
  width: min(1040px, calc(100vw - 24px)) !important;
  max-width: min(1040px, calc(100vw - 24px)) !important;
  max-height: min(88vh, 920px) !important;
  overflow: hidden !important;
}

.app-dialog #dialogBody {
  max-height: calc(88vh - 34px) !important;
  overflow: auto !important;
  padding: clamp(.85rem, 2vw, 1.15rem) !important;
}

.academic-detail-dialog,
.group-detail-dialog {
  width: 100%;
}

.academic-detail-dialog .entity-dialog-head {
  border: 2px solid var(--program-accent, #2563eb) !important;
  box-shadow: inset 8px 0 0 var(--program-accent, #2563eb), 0 10px 22px rgba(15, 23, 42, .045) !important;
}

.dialog-subtitle {
  color: #64748b;
  font-weight: 620;
  line-height: 1.25;
}

.entity-tab-strip {
  overflow-x: auto;
  scrollbar-width: thin;
}

.entity-tab-strip span {
  white-space: nowrap;
}

.entity-dialog-modern .entity-dialog-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
}

.entity-dialog-modern .mini-row,
.entity-mini-table .mini-row {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  align-items: start !important;
}

@media (max-width: 980px) {
  .structure-card-modern > summary {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }
  .structure-chipline,
  .turn-chipline,
  .teacher-card-metrics {
    justify-content: flex-start !important;
    max-width: none !important;
  }
}

@media (max-width: 720px) {
  .main,
  .content-area {
    font-size: 1rem !important;
    overflow-x: hidden;
  }
  .structure-card-modern > summary,
  .structure-card-modern .detail-card__body {
    padding-left: 1.25rem !important;
    padding-right: .9rem !important;
  }
  .structure-identity,
  .teacher-card-title {
    grid-template-columns: 1fr !important;
  }
  .group-code-avatar,
  .structure-avatar,
  .dialog-avatar {
    width: 54px !important;
    justify-self: start;
  }
  .button-row .btn,
  .clean-card-actions .button-row .btn,
  .structure-card-modern .detail-card__body .button-row .btn {
    flex: 1 1 150px !important;
    justify-content: center !important;
  }
  .app-dialog {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    border-radius: 22px !important;
  }
  .app-dialog #dialogBody {
    max-height: calc(90vh - 24px) !important;
    padding: .72rem !important;
  }
  .academic-detail-dialog .entity-dialog-head,
  .entity-dialog-modern .entity-dialog-head {
    grid-template-columns: 1fr !important;
  }
  .entity-dialog-modern .entity-dialog-grid {
    grid-template-columns: 1fr !important;
  }
}