/* Shared, screen-only visual layer. Business rules and print documents stay unchanged. */
@media screen {
  html:root {
    --jro-primary: #123747;
    --jro-primary-hover: #0e2c39;
    --jro-primary-active: #09212c;
    --jro-secondary: #087f8c;
    --jro-secondary-hover: #066873;
    --jro-accent: #f0715d;
    --jro-accent-hover: #f58a79;
    --jro-danger: var(--jro-error-ink);
    --jro-bg: #f7f9fa;
    --jro-ink: #253b47;
    --jro-muted: #536975;
    --jro-white: #fff;
    --jro-line: #d2e2e4;
    --jro-control-line: #6a858f;
    --jro-soft: #e7f3f1;
    --jro-zebra: #f2f7f7;
    --jro-selected: #d8ecea;
    --jro-tricolor: linear-gradient(90deg, #b72e3b 0 33.333%, #e5b53d 33.333% 66.667%, #176b4a 66.667% 100%);
    --jro-warning-bg: #fff0ec;
    --jro-warning-ink: #803528;
    --jro-error-bg: #fff0ec;
    --jro-error-ink: #8b3327;
    --jro-info-bg: var(--jro-soft);
    --jro-info-ink: var(--jro-primary);
    --jro-font: "Aptos", "Trebuchet MS", "Segoe UI", sans-serif;
    --jro-space-1: 4px;
    --jro-space-2: 8px;
    --jro-space-3: 12px;
    --jro-space-4: 16px;
    --jro-space-5: 24px;
    --jro-radius-control: 8px;
    --jro-radius-card: 12px;
    --jro-control-height: 44px;
    --jro-shadow: 0 2px 8px rgb(18 55 71 / 5%);
    --jro-shadow-dialog: 0 20px 64px rgb(18 55 71 / 20%);
    --erp-bg: var(--jro-bg);
    --erp-bg-secondary: var(--jro-soft);
    --erp-surface: var(--jro-white);
    --erp-surface-muted: var(--jro-soft);
    --erp-surface-soft: var(--jro-bg);
    --erp-border: var(--jro-line);
    --erp-border-strong: var(--jro-control-line);
    --erp-text: var(--jro-ink);
    --erp-text-secondary: var(--jro-muted);
    --erp-text-tertiary: var(--jro-muted);
    --erp-primary: var(--jro-primary);
    --erp-primary-hover: var(--jro-primary-hover);
    --erp-primary-active: var(--jro-primary-active);
    --erp-primary-soft: var(--jro-soft);
    --erp-accent: var(--jro-secondary);
    --erp-accent-strong: var(--jro-secondary-hover);
    --erp-sidebar-strong: var(--jro-primary);
    --erp-sidebar-soft: var(--jro-primary-hover);
    --erp-success: var(--jro-secondary);
    --erp-error: var(--jro-danger);
    --erp-warning: var(--jro-warning-ink);
    --erp-info: var(--jro-info-ink);
    --erp-radius-sm: var(--jro-radius-control);
    --erp-radius-md: var(--jro-radius-card);
    --erp-radius-lg: var(--jro-radius-card);
    --erp-shadow-sm: var(--jro-shadow);
    --erp-shadow-md: var(--jro-shadow);
    --erp-focus-ring: 0 0 0 3px rgb(8 127 140 / 20%);
    --module-radius: var(--jro-radius-card);
    --module-primary: var(--jro-primary);
    --module-primary-hover: var(--jro-primary-hover);
    --module-primary-soft: var(--jro-soft);
    --module-surface: var(--jro-white);
    --module-surface-muted: var(--jro-soft);
    --module-ink: var(--jro-ink);
    --module-muted: var(--jro-muted);
    --module-soft: var(--jro-muted);
    --module-border: var(--jro-line);
    --module-border-strong: var(--jro-control-line);
    --module-danger: var(--jro-danger);
    --module-warning: var(--jro-warning-ink);
  }

  .robledista-ui .cv-module {
    --cv-ink: var(--jro-ink);
    --cv-muted: var(--jro-muted);
    --cv-line: var(--jro-line);
    --cv-surface: var(--jro-white);
    --cv-soft: var(--jro-soft);
    --cv-accent: var(--jro-secondary);
    --cv-accent-strong: var(--jro-secondary-hover);
    --cv-gold: var(--jro-warning-ink);
    --cv-danger: var(--jro-danger);
    --cv-danger-soft: var(--jro-error-bg);
    --cv-warning-soft: var(--jro-warning-bg);
  }

  body.robledista-ui {
    color: var(--jro-ink);
    background: var(--jro-bg);
    font-family: var(--jro-font);
    font-size: 15px;
    line-height: 1.5;
    accent-color: var(--jro-primary);
  }

  .robledista-ui :is(button, input, select, textarea) { font-family: inherit; }
  .robledista-ui :is(.button, .student-button, .btn, .MuiButton-root)[hidden] { display: none !important; }
  .robledista-ui :is(h1, h2, h3, h4) { font-family: var(--jro-font); line-height: 1.25; }
  .robledista-ui h2 { letter-spacing: -.025em; }
  .robledista-ui :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--jro-primary);
    outline-offset: 3px;
  }
  .robledista-ui a:not([class]) { color: var(--jro-primary); text-underline-offset: 3px; }

  .robledista-ui :is(.button, .student-button, .portal-cta, .verification-button,
      .btn, .MuiButton-root):not(.receipt-document *) {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--jro-space-2);
    min-height: var(--jro-control-height);
    max-width: 100%;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--jro-radius-control);
    font: 600 14px/1.35 var(--jro-font);
    text-decoration: none;
    text-transform: none;
    text-align: center;
    cursor: pointer;
    box-shadow: none;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
  }
  .robledista-ui :is(.button-primary, .student-button.primary, .portal-cta,
      .btn-primary, .MuiButton-containedPrimary) {
    background: var(--jro-primary);
    border-color: var(--jro-primary);
    color: var(--jro-white);
  }
  .robledista-ui :is(.button-primary, .student-button.primary, .portal-cta,
      .btn-primary, .MuiButton-containedPrimary):hover:not(:disabled) {
    background: var(--jro-primary-hover);
    border-color: var(--jro-primary-hover);
  }
  .robledista-ui :is(.button-primary, .student-button.primary, .portal-cta):active:not(:disabled) {
    background: var(--jro-primary-active);
  }
  .robledista-ui :is(.button-secondary, .student-button.secondary, .portal-cta.secondary,
      .btn-secondary, .MuiButton-outlinedPrimary) {
    color: var(--jro-secondary);
    border-color: var(--jro-secondary);
    background: var(--jro-white);
  }
  .robledista-ui :is(.button-secondary, .student-button.secondary, .portal-cta.secondary,
      .btn-secondary, .MuiButton-outlinedPrimary):hover:not(:disabled) { background: var(--jro-soft); }
  .robledista-ui :is(.button-warning, .btn-warning, .button-attention) {
    color: var(--jro-primary-hover);
    background: var(--jro-accent);
    border-color: var(--jro-warning-ink);
  }
  .robledista-ui :is(.button-warning, .btn-warning, .button-attention):hover:not(:disabled) {
    background: var(--jro-accent-hover);
  }
  .robledista-ui :is(.button-danger, .btn-danger, [data-certificate-revoke],
      [data-saber11-void-open], [data-rp="void"], [id="rp-void"] button[type="submit"],
      [data-action^="delete-"], [data-action^="remove-"]) {
    color: var(--jro-primary-hover);
    background: var(--jro-accent);
    border-color: var(--jro-danger);
  }
  .robledista-ui :is(.button-danger, .btn-danger, [data-certificate-revoke],
      [data-saber11-void-open], [data-rp="void"], [id="rp-void"] button[type="submit"],
      [data-action^="delete-"], [data-action^="remove-"]):hover:not(:disabled) {
    color: var(--jro-primary-hover);
    background: var(--jro-accent-hover);
    border-color: var(--jro-danger);
  }
  body.robledista-ui :is(.button, .student-button, .btn, .MuiButton-root):is(:disabled, [aria-disabled="true"]) {
    opacity: 1;
    color: #617581;
    background: #e9eff1;
    border-color: #cad8de;
    cursor: not-allowed;
    box-shadow: none;
  }
  .robledista-ui button[aria-busy="true"] { cursor: progress; }
  .robledista-ui button[aria-busy="true"]::after {
    content: "";
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: jro-progress .8s linear infinite;
  }
  @keyframes jro-progress { to { transform: rotate(360deg); } }

  body.robledista-ui :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):not(.receipt-document *) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    min-height: var(--jro-control-height);
    padding: 9px 12px;
    border: 1px solid var(--jro-control-line);
    border-radius: var(--jro-radius-control);
    background: var(--jro-white);
    color: var(--jro-ink);
    font-size: 15px;
    line-height: 1.4;
  }
  .robledista-ui input[type="file"] { padding: 6px; }
  .robledista-ui input::file-selector-button {
    min-height: 30px;
    margin-inline-end: 10px;
    border: 0;
    border-radius: 5px;
    padding: 4px 10px;
    background: var(--jro-soft);
    color: var(--jro-primary);
    font: 600 14px var(--jro-font);
  }
  .robledista-ui :is(input, textarea)::placeholder { color: var(--jro-muted); opacity: 1; }
  .robledista-ui :is(input, select, textarea):disabled { background: var(--jro-zebra); color: var(--jro-muted); }
  .robledista-ui input[readonly] { background: var(--jro-soft); }
  .robledista-ui :is(input[type="checkbox"], input[type="radio"]) {
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    min-height: 20px;
    flex: 0 0 20px;
    margin: 2px 6px 2px 0;
    vertical-align: middle;
    accent-color: var(--jro-primary);
  }
  .robledista-ui :is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--jro-danger);
    box-shadow: 0 0 0 1px var(--jro-danger);
  }
  .robledista-ui :is(.field-error, .error-message, .invalid-feedback) { color: var(--jro-error-ink); font-size: 14px; }
  .robledista-ui :is(label, .student-field label) { color: var(--jro-ink); }
  .robledista-ui label:has(> :required) > span:first-child::after,
  .robledista-ui .student-field:has(:required) > label::after {
    content: " *";
    color: var(--jro-danger);
  }
  .robledista-ui :is(.form-grid, .boletines-toolbar, .erp-list-toolbar) { gap: var(--jro-space-3); }

  .robledista-ui :is(.table-card, .secondary-card, .summary-card, .student-card,
      .student-panel, .student-choice-card, .portal-access-card, .verification-card,
      .module-card, .module-registry-card, .erp-stat, .ad-filter-band, .ad-rule-note, .cv-panel, .MuiPaper-rounded) {
    border-radius: var(--jro-radius-card);
    border-color: var(--jro-line);
    background-color: var(--jro-white);
    box-shadow: var(--jro-shadow);
  }
  .robledista-ui :is(.table-card, .secondary-card) { padding: 20px; }
  .robledista-ui .module-registry-card { color: var(--jro-ink); }
  .robledista-ui .module-registry-card:hover {
    background: var(--jro-soft);
    border-color: var(--jro-secondary);
  }
  .robledista-ui .module-registry-card h3 { color: var(--jro-primary); }
  .robledista-ui .module-registry-card__meta { color: var(--jro-muted); }
  .robledista-ui .selected-context { background: var(--jro-soft); border-color: var(--jro-line); }
  .robledista-ui :is(.attendance-summary-item, .report-metric, .rp-summary > div,
      .cm-kpi, .analytics-kpi, .student-stat) {
    border: 1px solid var(--jro-line);
    border-radius: var(--jro-radius-card);
    background: var(--jro-white);
    box-shadow: none;
  }
  .robledista-ui :is(.attendance-summary-item, .report-metric, .student-stat) strong {
    color: var(--jro-ink);
    font-variant-numeric: tabular-nums;
  }
  .robledista-ui :is(.section-eyebrow, .institution-page-head__eyebrow, .student-kicker,
      .portal-section-kicker, .portal-card-meta) { color: var(--jro-primary); letter-spacing: .1em; }
  .robledista-ui :is(.table-help, .table-toolbar-note, .student-subtitle, .student-help) {
    color: var(--jro-muted);
    font-size: 14px;
    line-height: 1.5;
  }

  .robledista-ui :is(.table-wrap, .table-scroll, .report-matrix__table-wrap) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border-radius: var(--jro-radius-control);
  }
  .robledista-ui :is(.data-table, .ad-table, .MuiTable-root):not(.receipt-document *) {
    color: var(--jro-ink);
    font: 14px/1.45 var(--jro-font);
    font-variant-numeric: tabular-nums;
  }
  .robledista-ui :is(.data-table th, .ad-table th, .MuiTableCell-head):not(.receipt-document *) {
    background: var(--jro-soft);
    color: var(--jro-ink);
    border-color: var(--jro-line);
    font-size: 13px;
    font-weight: 700;
  }
  .robledista-ui :is(.data-table th, .data-table td, .ad-table td, .ad-table th):not(.receipt-document *) {
    padding: 11px 12px;
    border-color: var(--jro-line);
  }
  .robledista-ui .data-table tbody tr:nth-child(even):not(.receipt-document *) { background-color: var(--jro-zebra); }
  .robledista-ui .data-table tbody tr:hover:not(.receipt-document *) { background-color: var(--jro-soft); }
  .robledista-ui .data-table tbody tr.is-selected { background-color: var(--jro-selected); }
  .robledista-ui :is(.institution-status-chip, .student-badge, .rp-state) {
    box-sizing: border-box;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    max-width: 100%;
    white-space: normal;
  }
  .robledista-ui :is(.institution-status-chip--active, .institution-status-chip--success,
      .student-badge.ok, .rp-state[data-state="ACTIVO"]) {
    color: var(--jro-primary-hover);
    background: var(--jro-soft);
    border-color: var(--jro-secondary);
  }
  .robledista-ui :is(.institution-status-chip--warning, .student-badge.warning) {
    color: var(--jro-warning-ink); background: var(--jro-warning-bg); border-color: var(--jro-accent);
  }
  .robledista-ui :is(.institution-status-chip--danger, .rp-state[data-state="ANULADO"]) {
    color: var(--jro-error-ink); background: var(--jro-error-bg); border-color: var(--jro-danger);
  }

  .robledista-ui :is(.module-alert, .student-alert, .rp-warning, .form-status-note) {
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: anywhere;
    border: 1px solid var(--jro-line);
    border-inline-start-width: 4px;
    border-radius: var(--jro-radius-control);
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
  }
  .robledista-ui :is(.module-alert.success, .student-alert.success) {
    color: var(--jro-primary-hover); background: var(--jro-soft); border-color: var(--jro-secondary);
  }
  .robledista-ui :is(.module-alert.warning, .student-alert.warning, .rp-warning) {
    color: var(--jro-warning-ink); background: var(--jro-warning-bg); border-color: var(--jro-accent);
  }
  .robledista-ui :is(.module-alert.error, .student-alert.error) {
    color: var(--jro-error-ink); background: var(--jro-error-bg); border-color: var(--jro-danger);
  }
  .robledista-ui :is(.module-alert.info, .student-alert.info) {
    color: var(--jro-info-ink); background: var(--jro-info-bg); border-color: var(--jro-secondary);
  }
  .robledista-ui :is(dialog, [role="dialog"]):not(.receipt-document *) {
    box-sizing: border-box;
    max-width: min(900px, calc(100vw - 24px));
    max-height: calc(100dvh - 32px);
    border: 1px solid var(--jro-control-line);
    border-radius: var(--jro-radius-card);
    background: var(--jro-white);
    color: var(--jro-ink);
    box-shadow: var(--jro-shadow-dialog);
    overflow: auto;
    overscroll-behavior: contain;
  }
  .robledista-ui dialog::backdrop { background: rgb(18 55 71 / 48%); }

  .robledista-ui .institution-sidebar {
    background: linear-gradient(180deg, var(--jro-primary), var(--jro-primary-hover));
    color: var(--jro-white);
    scrollbar-color: #8cbebd transparent;
  }
  .robledista-ui .robledista-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 4px 18px;
    border-bottom: 1px solid rgb(255 255 255 / 22%);
  }
  .robledista-ui .robledista-brand__crest {
    box-sizing: border-box;
    width: 52px;
    height: 60px;
    flex: 0 0 52px;
    padding: 4px;
    background: var(--jro-white);
    border-radius: var(--jro-radius-control);
    object-fit: contain;
  }
  .robledista-ui .robledista-brand h1 { margin: 0; font-size: 26px; letter-spacing: .04em; }
  .robledista-ui .robledista-brand__name { margin: 3px 0; color: #fff; font-size: 13px; line-height: 1.4; }
  .robledista-ui .robledista-brand .institution-sidebar__eyebrow { margin: 0 0 3px; font-size: 10px; }
  .robledista-ui :is(.institution-sidebar__label, .institution-sidebar__eyebrow) { color: var(--jro-soft); }
  .robledista-ui :is(.institution-sidebar__user, .institution-sidebar__section) {
    border-radius: var(--jro-radius-card);
    box-shadow: none;
    border-color: rgb(255 255 255 / 20%);
    background: rgb(255 255 255 / 4%);
  }
  .robledista-ui .institution-sidebar__section { padding: 12px; margin-top: 14px; }
  .robledista-ui :is(.institution-nav-link, .institution-nav-sublink, .institution-nav-toggle) {
    border-radius: var(--jro-radius-control);
    min-height: 44px;
    box-sizing: border-box;
    color: #fff;
    font-size: 14px;
  }
  .robledista-ui .institution-nav-toggle { width: 44px; padding: 8px; }
  .robledista-ui :is(.institution-nav-link, .institution-nav-sublink):hover { background: rgb(255 255 255 / 12%); }
  .robledista-ui :is(.institution-nav-link.is-active, .institution-nav-sublink.is-active,
      .institution-nav-sublink[aria-current="page"]) {
    color: #fff;
    background: rgb(255 255 255 / 15%);
    box-shadow: inset 3px 0 var(--jro-accent);
    font-weight: 700;
  }
  .robledista-ui .institution-sidebar :focus-visible { outline-color: var(--jro-accent); }
  .robledista-ui :is(.institution-topbar, .student-card-header) { border-color: var(--jro-line); background: #fff; }
  .robledista-ui :is(.student-card-header, .portal-header) { position: relative; }
  /* Institutional signature is confined to headers, never controls or print. */
  .robledista-ui :is(.institution-topbar, .student-card-header, .portal-header)::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 5px;
    background: var(--jro-tricolor);
    pointer-events: none;
  }
  .robledista-ui .institution-topbar__breadcrumbs { font-size: 14px; }
  .robledista-ui .institution-topbar__breadcrumbs a { color: var(--jro-primary); }
  .robledista-ui .institution-topbar__toggle { min-width: 44px; min-height: 44px; border-radius: var(--jro-radius-control); color: var(--jro-primary); }
  .robledista-ui .institution-year-context { border-radius: var(--jro-radius-control); }
  .robledista-ui .institution-year-context select { border: 0; }
  .robledista-ui .institution-workspace { padding: 24px; }
  .robledista-ui .institution-page-head h2 { font-size: 28px; color: var(--jro-ink); }
  .robledista-ui :is(.attendance-subnav__item, .report-switcher__button, .report-nav__link,
      .module-tab) { border-radius: var(--jro-radius-control); min-height: 40px; font-family: inherit; }
  .robledista-ui :is(.attendance-subnav__item.is-active, .report-switcher__button.is-active,
      .module-tab.is-active) { color: var(--jro-primary-hover); background: var(--jro-soft); border-color: var(--jro-primary); }
  .robledista-ui :is(.saber11-bar-fill, .analytics-bar__fill) { --bar-color: var(--jro-primary); }
  .robledista-ui .empty-cell { padding: 24px 16px; color: var(--jro-muted); background: var(--jro-bg); }

  .robledista-ui .portal-hero { border-color: var(--jro-line); border-radius: 12px; background: var(--jro-soft); }
  .robledista-ui .portal-hero-title { color: var(--jro-primary-hover); }
  .robledista-ui .portal-header { border-color: var(--jro-line); }
  .robledista-ui .portal-title { color: var(--jro-primary); }
  .robledista-ui .portal-access-card { border-top: 3px solid var(--jro-primary); }
  .robledista-ui .student-card { border-top: 4px solid var(--jro-primary); }
  .robledista-ui .student-shell { box-sizing: border-box; }
  .robledista-ui .student-card-header { padding: 24px; }
  .robledista-ui .student-card-body { padding: 24px; }
  .robledista-ui .student-title { font-size: 25px; color: var(--jro-ink); }
  .robledista-ui .student-password-toggle { color: var(--jro-primary); min-height: 44px; border-radius: 8px; }

  @media (min-width: 961px) {
    .robledista-ui .institution-sidebar .institution-sidebar__close { display: none; }
  }

  @media (max-width: 960px) {
    .robledista-ui .institution-workspace { padding: 16px; }
    .robledista-ui .institution-sidebar { max-height: 100dvh; }
  }
  @media (max-width: 600px) {
    .robledista-ui .institution-workspace { padding: 12px; }
    .robledista-ui :is(.table-card, .secondary-card) { padding: 14px; }
    .robledista-ui .institution-page-head h2 { font-size: 24px; }
    .robledista-ui :is(.student-card-header, .student-card-body) { padding: 20px; }
    .robledista-ui :is(.student-title, .portal-hero-title) { overflow-wrap: anywhere; }
    .robledista-ui :is(.student-field, .form-grid label, .boletines-toolbar label) { min-width: 0; }
    .robledista-ui :is(.data-table th, .data-table td) { padding: 10px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .robledista-ui *, .robledista-ui *::before, .robledista-ui *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
}