/* ===========================================================================
   Identidad OpenX sobre Material for MkDocs.

   Principio: el rojo de marca es SEÑAL, no decoración. Marca dónde estás y qué
   acabas de tocar. El cromo (barra superior, pestañas) va en negro cálido: una
   franja roja a todo el ancho sobre 500 páginas de manual cansa la vista,
   compite con las capturas de pantalla y convierte el rojo en papel tapiz.

   Los grises son cálidos, no los azulados de Material, para que no peleen con
   el rojo.
   =========================================================================== */

:root {
  /* Marca */
  --ox-rojo: #C8102E;
  --ox-rojo-claro: #E4526B;
  --ox-rojo-oscuro: #A50D26;

  /* Cromo: negro cálido, no negro puro ni el azulado del tema */
  --ox-cromo: #1A1618;
  --ox-cromo-alto: #2A2427;

  /* Neutros cálidos */
  --ox-tinta: #1A1618;
  --ox-tinta-media: #5C5457;
  --ox-papel: #FFFFFF;
  --ox-papel-tenue: #FAF8F8;
  --ox-linea: #E6E0E1;

  --md-primary-fg-color: var(--ox-rojo);
  --md-primary-fg-color--light: var(--ox-rojo-claro);
  --md-primary-fg-color--dark: var(--ox-rojo-oscuro);
  --md-accent-fg-color: var(--ox-rojo);

  /* Los enlaces van en tinta con subrayado rojo al pasar el mouse. En un
     manual el cuerpo está lleno de enlaces: pintarlos todos de rojo haría que
     el rojo dejara de significar algo. */
  --md-typeset-a-color: var(--ox-tinta);

  --md-default-fg-color: var(--ox-tinta);
  --md-default-bg-color: var(--ox-papel);
  --md-code-bg-color: var(--ox-papel-tenue);
}

[data-md-color-scheme="slate"] {
  --ox-cromo: #14100F;
  --ox-cromo-alto: #221C1B;

  --ox-tinta: #ECE6E4;
  --ox-tinta-media: #A79E9B;
  --ox-papel-tenue: #221C1B;
  --ox-linea: #383030;

  /* El rojo de marca no tiene contraste suficiente sobre fondo oscuro. */
  --md-primary-fg-color: #F0435C;
  --md-accent-fg-color: #F0435C;
  --md-typeset-a-color: var(--ox-tinta);
}

/* ---------------------------------------------------------------------------
   Cromo
   --------------------------------------------------------------------------- */

.md-header,
.md-tabs {
  background-color: var(--ox-cromo);
  color: #FFFFFF;
}

.md-header {
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.md-header--shadow {
  box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

/* Pestaña activa: subrayado rojo. Es el "estás aquí" del primer nivel. */
.md-tabs__link {
  opacity: .72;
  font-weight: 500;
}

.md-tabs__link:hover,
.md-tabs__link--active {
  opacity: 1;
}

.md-tabs__item--active .md-tabs__link {
  box-shadow: inset 0 -3px 0 0 var(--ox-rojo-claro);
}

/* Logo apaisado: más alto que el icono estándar del tema para que se lea, y sin
   el relleno que el tema reserva para un icono cuadrado. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: auto;
}

.md-header__button.md-logo {
  padding: .2rem .4rem .2rem 0;
}

/* El cajón lateral en móvil tiene su propio logo. */
.md-nav__button.md-logo img {
  height: 1.7rem;
  width: auto;
}

.md-search__form {
  background-color: rgba(255, 255, 255, .12);
  border-radius: 4px;
}

.md-search__form:hover {
  background-color: rgba(255, 255, 255, .2);
}

/* ---------------------------------------------------------------------------
   Navegación: el rojo marca la página actual
   --------------------------------------------------------------------------- */

.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--md-primary-fg-color);
  font-weight: 600;
}

.md-nav__link:hover {
  color: var(--md-primary-fg-color);
}

/* Barra roja al costado de la página en la que estás.
   Solo sobre --active del ENLACE: --active del item lo llevan también todos sus
   ancestros, y el menú terminaba con tres barras rojas apiladas. */
.md-sidebar--primary .md-nav__link--active {
  border-left: 2px solid var(--md-primary-fg-color);
  padding-left: .5rem;
  margin-left: -.6rem;
}

/* ---------------------------------------------------------------------------
   Tipografía
   --------------------------------------------------------------------------- */

.md-typeset {
  font-size: .78rem;
  line-height: 1.7;
}

.md-typeset h1 {
  color: var(--ox-tinta);
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: .4em;
}

.md-typeset h2 {
  font-weight: 600;
  letter-spacing: -.015em;
  margin-top: 2.2em;
}

.md-typeset h3 {
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Enlaces del cuerpo: tinta, con el rojo apareciendo solo al interactuar. */
.md-typeset a {
  text-decoration: underline;
  text-decoration-color: var(--ox-linea);
  text-underline-offset: .18em;
  transition: color .12s, text-decoration-color .12s;
}

.md-typeset a:hover,
.md-typeset a:focus-visible {
  color: var(--md-primary-fg-color);
  text-decoration-color: var(--md-primary-fg-color);
}

/* Código en línea: folios, códigos de licencia, nombres de campo. Es
   vocabulario del producto, así que se distingue del texto corrido. */
.md-typeset code {
  background-color: var(--ox-papel-tenue);
  border: 1px solid var(--ox-linea);
  border-radius: 3px;
  padding: .1em .35em;
  font-size: .85em;
}

.md-typeset a code {
  color: inherit;
}

/* ---------------------------------------------------------------------------
   La línea de corte
   El separador de secciones es un troquel, como el de un ticket térmico. Los
   manuales lo usan decenas de veces por página, así que es lo que hace
   reconocible al portal. Sale del producto mismo: OpenTPV imprime tickets.
   --------------------------------------------------------------------------- */

.md-typeset hr {
  border: none;
  height: 1px;
  margin: 2.6em 0;
  background-image: repeating-linear-gradient(
    to right,
    var(--ox-linea) 0,
    var(--ox-linea) 6px,
    transparent 6px,
    transparent 12px
  );
  position: relative;
}

.md-typeset hr::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 18px;
  height: 5px;
  background-color: var(--md-primary-fg-color);
  border-radius: 1px;
}

/* ---------------------------------------------------------------------------
   Tablas
   Los manuales son mayoritariamente tablas de campos: la primera columna nombra
   algo y el resto lo explica. Se trata como tal.
   --------------------------------------------------------------------------- */

.md-typeset table:not([class]) {
  border: 1px solid var(--ox-linea);
  border-radius: 6px;
  box-shadow: none;
  font-size: .74rem;
}

.md-typeset table:not([class]) th {
  background-color: var(--ox-papel-tenue);
  color: var(--ox-tinta);
  font-weight: 600;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--ox-linea);
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--ox-linea);
  vertical-align: top;
}

.md-typeset table:not([class]) tr:first-child td {
  border-top: none;
}

/* La primera columna nombra el campo: se le da el peso que le corresponde. */
.md-typeset table:not([class]) td:first-child strong {
  color: var(--ox-tinta);
}

.md-typeset table:not([class]) tbody tr:hover {
  background-color: var(--ox-papel-tenue);
}

/* ---------------------------------------------------------------------------
   Avisos
   --------------------------------------------------------------------------- */

.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--ox-linea);
  border-left: 3px solid var(--md-primary-fg-color);
  border-radius: 4px;
  box-shadow: none;
  font-size: .76rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background-color: var(--ox-papel-tenue);
}

/* La cita del encabezado de cada manual (Producto | Módulo | Actualización). */
.md-typeset blockquote {
  border-left: 2px solid var(--ox-linea);
  color: var(--ox-tinta-media);
  font-size: .74rem;
}

/* ---------------------------------------------------------------------------
   Portada
   En un portal de documentación el protagonista es la búsqueda: nadie llega a
   pasear, llega a resolver algo.
   --------------------------------------------------------------------------- */

.ox-portada {
  text-align: center;
  padding: 2.4rem 0 1.2rem;
}

.ox-portada h1 {
  font-size: 2.1rem;
  font-weight: 680;
  letter-spacing: -.03em;
  margin: 0 0 .3em;
}

.ox-portada p {
  color: var(--ox-tinta-media);
  font-size: .84rem;
  max-width: 30rem;
  margin: 0 auto;
}

/* Botón que lleva al buscador del tema. */
.ox-buscar {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 1.6rem auto 0;
  padding: .7rem 1.1rem .7rem .9rem;
  min-width: 20rem;
  border: 1px solid var(--ox-linea);
  border-radius: 6px;
  background-color: var(--md-default-bg-color);
  color: var(--ox-tinta-media);
  font-size: .8rem;
  cursor: pointer;
  transition: border-color .12s, color .12s;
}

.ox-buscar:hover,
.ox-buscar:focus-visible {
  border-color: var(--md-primary-fg-color);
  color: var(--ox-tinta);
}

.ox-buscar svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
  flex: none;
}

.ox-buscar kbd {
  margin-left: auto;
  border: 1px solid var(--ox-linea);
  border-radius: 3px;
  padding: .05rem .35rem;
  font-size: .68rem;
  font-family: var(--md-code-font-family);
}

/* La portada oculta el menú lateral, así que sin tope el ancho se dispara.
   Acotado, las tarjetas caen en una retícula legible. */
.md-typeset .ox-home,
.md-typeset .ox-productos,
.ox-seccion {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

/* Encabezado de cada bloque de la portada. */
.ox-seccion h2 {
  margin: 2.6rem 0 .2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--ox-linea);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ox-tinta-media);
}

/* Producto anunciado pero sin manual todavía. No lleva enlace: mandar a alguien
   a una página que dice "en desarrollo" es peor que no ofrecerla. */
.ox-preparacion {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ox-tinta-media);
  border: 1px dashed var(--ox-linea);
  border-radius: 3px;
  padding: .2rem .5rem;
}

/* Una tarjeta sin manual se muestra más apagada y no reacciona al mouse. */
.md-typeset .ox-productos > ul > li:has(.ox-preparacion) {
  opacity: .72;
}

.md-typeset .ox-productos > ul > li:has(.ox-preparacion):hover {
  border-color: var(--ox-linea);
}

/* Tarjetas de la portada */
.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--ox-linea);
  border-radius: 6px;
  box-shadow: none;
  transition: border-color .12s, transform .12s;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-primary-fg-color);
  transform: none;
}

.md-typeset .grid.cards > ul > li > hr {
  margin: .8em 0;
}

.md-typeset .grid.cards > ul > li > hr::before {
  display: none;
}

/* ---------------------------------------------------------------------------
   Referencia de la API
   Scalar se embebe a pantalla completa dentro de la pagina.
   --------------------------------------------------------------------------- */

.scalar-frame {
  width: 100%;
  height: calc(100vh - 7rem);
  border: 0;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   Videoteca
   --------------------------------------------------------------------------- */

.filtros-videos {
  display: flex;
  gap: .4rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.filtros-videos[hidden] { display: none; }

.filtro-video {
  font: inherit;
  font-size: .7rem;
  font-weight: 600;
  cursor: pointer;
  padding: .25rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--ox-linea);
  background: var(--md-default-bg-color);
  color: var(--ox-tinta-media);
}

.filtro-video:hover {
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
}

.filtro-video.activo {
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
  background: color-mix(in srgb, var(--md-accent-fg-color) 10%, transparent);
}

.grid-videos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
}

@media (max-width: 44em) {
  .grid-videos { grid-template-columns: 1fr; }
}

.vcard {
  border: 1px solid var(--ox-linea);
  border-radius: 6px;
  overflow: hidden;
}

.vframe {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--md-code-bg-color);
}

.vframe iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vbody { padding: .6rem .8rem .8rem; }
.vbody h3 { margin: .3rem 0 .15rem; font-size: .8rem; }
.vbody p { margin: 0; font-size: .7rem; color: var(--ox-tinta-media); }

.vtag {
  display: inline-block;
  font-size: .55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--md-accent-fg-color);
  background: color-mix(in srgb, var(--md-accent-fg-color) 12%, transparent);
  border-radius: .2rem;
  padding: .1rem .4rem;
}

/* ---------------------------------------------------------------------------
   Pie
   --------------------------------------------------------------------------- */

.md-footer {
  background-color: var(--ox-cromo);
}

.md-footer-meta {
  background-color: var(--ox-cromo-alto);
}

/* ---------------------------------------------------------------------------
   Accesibilidad
   --------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--md-primary-fg-color);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}