@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;1,6..72,300&family=JetBrains+Mono:wght@400;500&display=swap");

/* =============================================================================
   Aula SDH -- Canvas dressed as the Secretaria de Derechos Humanos console.
   Injected as the active brand config's `css_overrides`; applied account-wide by
   stack/theme/apply_theme.rb. Canvas has no native dark mode, so this restyles
   the chrome and every content surface that would otherwise default to white.

   The tokens below are copied from app/infoser/web/sdh/index.html and MUST stay
   in step with it -- a student who moves from the console to a course should not
   feel the seam. Two rules carry over from the console and are not negotiable:

     * BLUE (--azul) means "selected", and only that. It is not a decorative
       accent, so primary buttons take gold, not blue.
     * RED means something failed or someone was refused. It never decorates.

   The background is a printing grey with a cold cast, not pure black.
   ========================================================================== */
:root {
  /* marca */
  --azul:#5f77d6; --azul-alto:#8fa3ea; --oro:#c9a227; --oro-alto:#e0bd52;
  /* fondo */
  --papel:#0a0c10; --panel:#0e1116; --panel-2:#141821; --panel-3:#1a1f29;
  /* tinta */
  --tinta:#e9ebef; --tinta-2:#9aa3b2; --apagado:#626c7d;
  --regla:#1c212b; --regla-alta:#2a3140;
  --hover:rgba(255,255,255,.035);
  --sel:rgba(95,119,214,.14); --sel-regla:rgba(95,119,214,.45);
  --ok:#54c79a; --mal:#e2696f;
  /* tipos */
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---- App shell ---------------------------------------------------------- */
html, body,
#application, #wrapper, #main, #not_right_side, #content,
.ic-Layout-wrapper, .ic-Layout-contentWrapper, .ic-Layout-contentMain,
.ic-app-main-content, #content-wrapper {
  background-color: var(--papel) !important;
  color: var(--tinta) !important;
}
body, .ic-app-main-content { font-family: var(--sans) !important; }

/* Headings are the serif, as in the console masthead. Canvas sets weights all
   over; 300 is what makes Newsreader read as institutional rather than editorial. */
h1, h2, h3, .ic-Dashboard-header__title, .ic-Action-header__Heading,
.ic-Login__content h1, .page-title {
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  letter-spacing: -.01em;
  color: var(--tinta) !important;
}
h4, h5, h6, p, span, li, dd, dt, label, td, th { color: var(--tinta) !important; }
small, .text-muted, .ic-Form-message, time, .ic-Form-help-text {
  color: var(--tinta-2) !important;
}

/* Anything that is a code, an id, a count or a timestamp goes monospaced --
   the console treats those as a separate register from prose. */
code, pre, kbd, samp, .ic-Table td.count, .mono {
  font-family: var(--mono) !important;
  color: var(--oro-alto) !important;
}

/* ---- Global left nav (the dark rail) ------------------------------------ */
#header, .ic-app-header, .ic-app-header__main-navigation {
  background-color: var(--panel) !important;
  border-color: var(--regla) !important;
}
.ic-app-header__menu-list-item .ic-app-header__menu-list-link {
  color: var(--tinta-2) !important;
}
.ic-app-header__menu-list-item:hover .ic-app-header__menu-list-link {
  background-color: var(--hover) !important;
  color: var(--tinta) !important;
}
/* Selected -- and here, and only here, blue. */
.ic-app-header__menu-list-item--active .ic-app-header__menu-list-link,
.ic-app-header__menu-list-link.ic-app-header__menu-list-link--active {
  background-color: var(--sel) !important;
  color: var(--tinta) !important;
}
.ic-app-header__menu-list-link.ic-app-header__menu-list-link--active::before {
  background-color: var(--azul) !important;
}

/* ---- Breadcrumbs / top bar ---------------------------------------------- */
.ic-app-nav-toggle-and-crumbs, .ic-app-crumbs, #breadcrumbs,
.ic-app-course-nav-toggle, .right-of-crumbs {
  background-color: var(--panel) !important;
  border-color: var(--regla) !important;
}
#breadcrumbs li a, #breadcrumbs li span {
  color: var(--apagado) !important;
  font-family: var(--mono) !important;
  font-size: .68rem;
  letter-spacing: .06em;
}
#breadcrumbs li:last-child span { color: var(--tinta-2) !important; }

/* ---- Course navigation -------------------------------------------------- */
.ic-app-course-menu, #left-side, #section-tabs,
.ic-app-course-menu .ic-app-course-nav__header {
  background-color: var(--panel) !important;
  border-color: var(--regla) !important;
}
#section-tabs li a { color: var(--tinta-2) !important; }
#section-tabs li a:hover {
  background-color: var(--hover) !important;
  color: var(--tinta) !important;
}
#section-tabs li a.active {
  background-color: var(--sel) !important;
  color: var(--tinta) !important;
  border-color: var(--sel-regla) !important;
}

/* ---- Cards, panels, wells, tables --------------------------------------- */
.ic-DashboardCard, .ic-Dashboard-card, .Sidebar__TodoListContainer,
.content-box, .well, .ic-Action-header, .ig-list, .item-group-condensed,
.ui-widget-content, .pad-box, .ic-Table, table.ic-Table,
.ReactModal__Content, .ui-dialog, [class*="-view--block"],
[class*="card"], [class*="Card"] {
  background-color: var(--panel) !important;
  color: var(--tinta) !important;
  border-color: var(--regla) !important;
}
/* Canvas gives every dashboard card a saturated colour bar. Muted, so the wall
   of courses reads as one system rather than a paint chart. */
.ic-DashboardCard__header_hero { filter: saturate(.35) brightness(.6); }
.ic-DashboardCard__header-button-bg { background: rgba(0,0,0,.4) !important; }
.ic-DashboardCard__header-title { font-family: var(--serif) !important; font-weight: 400 !important; }

tr, td, th, .ic-Table tr, .ic-Table td, .ic-Table th {
  border-color: var(--regla) !important;
}
thead th, .ic-Table thead th {
  font-family: var(--mono) !important;
  font-size: .58rem !important;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--apagado) !important;
}
tbody tr:hover, .ig-row:hover { background-color: var(--hover) !important; }

/* ---- Links + buttons ---------------------------------------------------- */
a, a:visited, .ic-Link, [class*="Link__text"] { color: var(--azul-alto) !important; }
a:hover { color: var(--tinta) !important; }

.btn, .Button, button.ui-button {
  background-color: var(--panel-2) !important;
  color: var(--tinta) !important;
  border-color: var(--regla-alta) !important;
  font-family: var(--sans) !important;
}
.btn:hover, .Button:hover, button.ui-button:hover {
  background-color: var(--panel-3) !important;
  border-color: var(--sel-regla) !important;
}
/* Gold, not blue: the primary action is not a selection. */
.btn-primary, .Button--primary {
  background-color: var(--oro) !important;
  border-color: var(--oro) !important;
  color: #17130a !important;
  font-weight: 600 !important;
}
.btn-primary:hover, .Button--primary:hover {
  background-color: var(--oro-alto) !important;
  border-color: var(--oro-alto) !important;
}
/* Red stays reserved for destruction and refusal. */
.btn-danger, .Button--danger {
  background-color: transparent !important;
  border-color: var(--mal) !important;
  color: var(--mal) !important;
}

/* ---- Form controls ------------------------------------------------------ */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="url"],
textarea, select, .ic-Input {
  background-color: var(--panel-2) !important;
  color: var(--tinta) !important;
  border-color: var(--regla-alta) !important;
  font-family: var(--sans) !important;
}
input:focus, textarea:focus, select:focus, .ic-Input:focus {
  border-color: var(--azul) !important;
  outline: none !important;
  box-shadow: 0 0 0 1px var(--sel-regla) !important;
}
input::placeholder, textarea::placeholder { color: var(--apagado) !important; }

/* ---- Login / splash ------------------------------------------------------ */
.ic-Login, #modal-box, .ic-Login__body, .ic-Login-confirmation {
  background-color: var(--papel) !important;
  color: var(--tinta) !important;
}
.ic-Login__content, .ic-Login-confirmation__content {
  background-color: var(--panel) !important;
  border: 1px solid var(--regla) !important;
  border-radius: 0 !important;
}
.ic-Login__body { font-family: var(--sans) !important; }
.ic-Login-header__logo { filter: brightness(1.1); }
/* The Google button is the real door; give it the weight of one. */
.ic-Login__actions .Button--primary, #login_form .btn-primary { width: 100%; }

/* ---- Notifications, flash messages, dashboard header ---------------------
   These three keep an explicit white (one of them at .95 alpha, which is why a
   plain background rule on the parent does not reach them) while inheriting the
   pale text colour set above -- so left alone they render light-on-light and are
   literally unreadable. Found by walking the rendered DOM for light backgrounds,
   not by reading Canvas's stylesheets. */
.ic-notification__content, .ic-notification,
.ic-Dashboard-header__layout, .ic-Dashboard-header,
.ic-flash-info, .ic-flash-success, .ic-flash-warning, .ic-flash-error,
#flash_message_holder li, .flashalert-message {
  background-color: var(--panel) !important;
  color: var(--tinta) !important;
  border-color: var(--regla) !important;
}
.ic-notification__title, .ic-notification__message,
.ic-Dashboard-header__title { color: var(--tinta) !important; }
.ic-notification__icon { background-color: var(--panel-2) !important; }
/* The flash strip keeps its meaning through the left edge, not a fill. */
.ic-flash-info    { border-left: 3px solid var(--azul) !important; }
.ic-flash-success { border-left: 3px solid var(--ok) !important; }
.ic-flash-warning { border-left: 3px solid var(--oro) !important; }
.ic-flash-error   { border-left: 3px solid var(--mal) !important; }

/* ---- Status colours ------------------------------------------------------ */
.ic-badge--success, .text-success, .published-status.published { color: var(--ok) !important; }
.ic-badge--danger,  .text-danger,  .text-error { color: var(--mal) !important; }
.ic-badge--warning, .text-warning { color: var(--oro) !important; }

/* ---- Misc surfaces that default to white -------------------------------- */
.ui-tabs, .ui-tabs-panel, .ic-Tab, [role="tabpanel"],
.tox .tox-edit-area__iframe, .tox .tox-toolbar, .tox .tox-menubar,
.ace_editor, .enhanceable_content, .user_content,
.ic-Menu, [class*="Menu__content"], [class*="Popover"] {
  background-color: var(--panel) !important;
  color: var(--tinta) !important;
}

/* Course content is prose. Read it in the serif, at a measure that does not
   run the width of a 27-inch monitor. */
.user_content, .show-content, .description.user_content {
  font-family: var(--serif) !important;
  font-size: 1.02rem !important;
  line-height: 1.62 !important;
  max-width: 66ch;
}
.user_content h1, .user_content h2, .user_content h3 { font-family: var(--serif) !important; }
.user_content a { text-decoration: underline; text-underline-offset: .16em; }

/* Square the corners. The console has radius 0 everywhere; rounded cards are
   the single loudest tell that two systems were bolted together. */
.ic-DashboardCard, .content-box, .well, .ReactModal__Content, .ui-dialog,
.btn, .Button, input, textarea, select, .ic-Input, [class*="card"], [class*="Card"] {
  border-radius: 0 !important;
}