/* ==========================================================================
   Tema corporativo CEDIA para los sitios HPC (portal y /man/).
   Paleta extraída del sitio matriz cedia.edu.ec (Elementor global kit):
   primario #01339F · secundario #039CE1 · acento #8CD0E4 · texto #464343
   fondos suaves #F7F7F7 #DEEBF7 #DCE6F4 · tipografía Montserrat.
   ========================================================================== */

:root {
  --md-primary-fg-color: #01339F;
  --md-primary-fg-color--light: #039CE1;
  --md-primary-fg-color--dark: #012776;
  --md-accent-fg-color: #039CE1;
  --md-default-fg-color: rgba(70, 67, 67, 1);
  --md-default-fg-color--light: rgba(70, 67, 67, 0.72);
  --md-default-bg-color--light: #f7f7f7;
  --md-typeset-a-color: #01339f;
  --md-text-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --cedia-azul: #01339f;
  --cedia-celeste: #039ce1;
  --cedia-acierto: #8cd0e4;
  --cedia-fondo-suave: #f7f7f7;
  --cedia-fondo-azulado: #deebf7;
}

body,
.md-typeset {
  font-family: var(--md-text-font);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 600;
  color: #01339f;
  letter-spacing: -0.01em;
}

.md-header {
  background-color: #01339f;
}

.md-tabs {
  background-color: #012776;
}

.md-typeset a:hover {
  color: #039ce1;
}

/* --- Hero institucional (portada) ---------------------------------------- */
.cedia-hero {
  background: linear-gradient(135deg, #01339f 0%, #065280 68%, #039ce1 125%);
  color: #fff;
  margin: 0 -0.8rem 2.2rem;
  padding: 3.2rem 1.6rem 2.8rem;
}

.cedia-hero h1 {
  color: #fff;
  font-size: 2.1rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
}

.cedia-hero p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.12rem;
  max-width: 46rem;
}

.cedia-hero .md-button {
  border-color: #fff;
  color: #fff;
}

.cedia-hero .md-button--primary {
  background-color: #fff;
  border-color: #fff;
  color: #01339f;
}

.cedia-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.9rem;
  margin: 1.4rem 0 0;
}

.cedia-cifras > div {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.6rem;
  padding: 0.9rem 1rem;
  text-align: center;
}

.cedia-cifras strong {
  display: block;
  font-size: 1.5rem;
  color: #fff;
}

.cedia-cifras span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
}

/* --- Bloques "salida real de ejemplo" (NO copiables) ---------------------- */
/* Convención (ver docs/CONTRIBUTING.md): los comandos van en bloques ```bash
   (copiables); las salidas capturadas del clúster van dentro de
   <div class="cedia-salida"> con ```text sin título. Aquí pierden el botón
   de copiar y ganan la etiqueta "Salida de ejemplo". */
.cedia-salida {
  margin: 1.2em 0;
}

.cedia-salida::before {
  content: "Salida de ejemplo";
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #065280;
  background: #deebf7;
  border: 1px solid #dce6f4;
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0.25em 0.8em;
}

html[lang^="en"] .cedia-salida::before {
  content: "Sample output";
}

.cedia-salida .highlight {
  border: 1px solid #dce6f4;
  background: #f7f7f7;
  box-shadow: none;
}

.cedia-salida pre {
  background: #f7f7f7 !important;
  color: #3c3a3a;
  border-radius: 0;
}

.cedia-salida .md-clipboard,
.cedia-salida .cedia-copiar {
  display: none !important; /* nunca ofrecer "copiar" una salida */
}

/* --- Botón de copiar en los bloques de comando ---------------------------- */
/* Lo aporta assets/js/cedia-copy.js (mkdocs-material 9.7 ya no inyecta el de
   `content.code.copy`); los bloques .cedia-salida quedan excluidos en el JS. */
.md-typeset .highlight {
  position: relative;
}

/* hueco para que el botón no tape el final de la línea (el default de
   Material es 1.1764705882em a cada lado) */
.md-typeset .highlight > pre > code {
  padding-inline-end: 4.5em;
}

.cedia-salida .highlight > pre > code {
  padding-inline-end: 1.1764705882em; /* sin botón, no hace falta el hueco */
}

.md-typeset .cedia-copiar {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  margin: 0;
  padding: 0.15em 0.6em;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #065280;
  background: #fff;
  border: 1px solid #dce6f4;
  border-radius: 0.4rem;
  cursor: pointer;
  opacity: 0.85;
}

.md-typeset .cedia-copiar:hover,
.md-typeset .cedia-copiar:focus-visible {
  opacity: 1;
  color: #01339f;
  border-color: #039ce1;
  cursor: copy;
}

/* --- Tarjetas ---------------------------------------------------------------- */
.md-typeset .grid.cards > ul > li {
  border-color: #dce6f4;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: #039ce1;
  box-shadow: 0 4px 18px rgba(1, 51, 159, 0.14);
}

.md-typeset .grid.cards > ul > li > :first-child img {
  border-radius: 0.4rem 0.4rem 0 0;
}

/* --- Tablas al estilo corporativo ------------------------------------------ */
.md-typeset table:not([class]) th {
  background: #01339f;
  color: #fff;
  font-weight: 600;
}

.md-typeset table:not([class]) tr:hover > td {
  background: #deebf7;
}

/* --- Chip de paso del quickstart ------------------------------------------- */
.cedia-paso {
  display: inline-block;
  background: #deebf7;
  color: #065280;
  border: 1px solid #dce6f4;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 2rem;
  padding: 0.25em 1em;
  margin: 0 0 0.8rem;
}

/* --- Admoniciones suaves ---------------------------------------------------- */
.md-typeset .admonition,
.md-typeset details {
  border-color: #039ce1;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background-color: rgba(3, 156, 225, 0.12);
}

/* --- Pie de página corporativo ---------------------------------------------- */
.cedia-footer {
  background: #012776;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.78rem;
  line-height: 1.6;
}

.cedia-footer a {
  color: #8cd0e4;
  text-decoration: none;
}

.cedia-footer a:hover {
  color: #fff;
}

.cedia-footer__inner {
  max-width: 61rem;
  margin: 0 auto;
  padding: 2.2rem 1.6rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.6rem;
}

.cedia-footer h3 {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.6rem;
}

.cedia-footer img {
  background: #fff;
  border-radius: 0.4rem;
  padding: 0.4rem;
  max-width: 11rem;
}

.cedia-footer__iso {
  margin-top: 0.8rem;
}

.cedia-footer__social {
  display: flex;
  gap: 0.7rem;
  margin-top: 0.6rem;
}

.cedia-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.cedia-footer__social a:hover {
  background: #039ce1;
}

.cedia-footer__social svg {
  fill: #fff;
  width: 1rem;
  height: 1rem;
}

.cedia-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0.9rem 1.6rem;
  max-width: 61rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
}

.cedia-footer__bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}