/* Panel que abre la librería content-dialog en el diálogo de Drupal.
   --------------------------------------------------------------------------
   El diálogo (ui-dialog-custom.css) cuelga el panel del <body>, fuera de la
   página que lo pinta: estas reglas no pueden llevar el ámbito de la ficha. El
   ancho lo fija el JS (900) y aquí solo se capa a la ventana. El dialog.css de
   Gin también carga en el front y con `.ui-dialog:not(.ui-dialog-off-canvas)`
   sube el tope a 1280px: a 768 el diálogo se salía por la derecha. */

.ui-dialog:not(.ui-draggable.ui-resizable):has(.content-dialog) {
  max-width: 95vw;
}

/* Cuatro clases: el dialog.css de Gin anula el padding-inline con
   `.ui-dialog .ui-widget-content.ui-dialog-content` y una variable que en el
   front no existe. */
.ui-dialog .ui-widget-content.ui-dialog-content.content-dialog {
  padding: 0 1.25rem 2rem;
}

.content-dialog .content-dialog__title {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  line-height: 1.75rem;
  font-weight: 900;
}

.content-dialog .content-dialog__title:focus {
  outline: none;
}

/* Contenido de CKEditor
   --------------------------------------------------------------------------
   El texto llega tal cual del editor (y del D10 migrado): encabezados, listas,
   tablas con o sin las clases de Bootstrap, citas y reglas. Las reglas van
   acotadas al cuerpo del panel y solo dan el ritmo y lo que Bootstrap no trae;
   tamaños y familias son los tokens del tema. */
.content-dialog__body p,
.content-dialog__body ul,
.content-dialog__body ol,
.content-dialog__body blockquote,
.content-dialog__body .content-dialog__table {
  margin-bottom: 1.5rem;
}

.content-dialog__body h2,
.content-dialog__body h3,
.content-dialog__body h4,
.content-dialog__body h5,
.content-dialog__body h6 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-family: var(--headings-font-family);
}

/* Un h2 del contenido medía lo mismo que el titular del diálogo. */
.content-dialog__body h2 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.content-dialog__body h5,
.content-dialog__body h6 {
  font-size: var(--fs-body-regular);
  line-height: var(--lh-body-regular);
  font-weight: 900;
}

.content-dialog__body > :first-child,
.content-dialog__body :is(h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

.content-dialog__body strong,
.content-dialog__body b {
  font-weight: var(--fw-body-regular-bold);
}

.content-dialog__body ul,
.content-dialog__body ol {
  padding-left: 1.5rem;
}

.content-dialog__body ul {
  list-style: disc;
}

.content-dialog__body ol {
  list-style: decimal;
}

.content-dialog__body ul ul {
  list-style: circle;
}

.content-dialog__body li {
  display: list-item;
  margin-bottom: 0.5rem;
  font-size: var(--fs-body-regular);
  line-height: var(--lh-body-regular);
}

.content-dialog__body li > :is(ul, ol) {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.content-dialog__body blockquote {
  padding-left: 1.25rem;
  border-left: 4px solid var(--primary);
}

.content-dialog__body hr {
  margin: 2rem 0;
}

.content-dialog__body img,
.content-dialog__body iframe {
  max-width: 100%;
}

.content-dialog__body img {
  height: auto;
}

/* Alias de Bootstrap 4 que siguen en el contenido migrado y Bootstrap 5 ya no
   trae. */
.content-dialog__body .text-right {
  text-align: right;
}

.content-dialog__body .text-left {
  text-align: left;
}

/* Las tablas migradas del D10 son más anchas que el diálogo en móvil: se
   desplazan dentro del envoltorio que pone content-dialog.js, no del diálogo. */
.content-dialog__body .content-dialog__table {
  max-width: 100%;
  overflow-x: auto;
}

/* Cuerpo de 16px (el del token en móvil): con el de 18px de desktop una
   tabla de ocho columnas ya no cabía en los 820px del diálogo. */
.content-dialog__body table {
  width: 100%;
  margin-bottom: 0;
}

.content-dialog__body table,
.content-dialog__body table :is(p, li) {
  font-size: 1rem;
  line-height: 1.1875rem;
}

/* Las tablas sin clase no reciben nada de Bootstrap (reboot solo deja el
   colapso de bordes): se les da el aspecto de `.table`. */
.content-dialog__body table:not([class]) :is(th, td) {
  padding: 0.5rem;
  border-bottom: 1px solid var(--dark-opacity-20);
  vertical-align: top;
  text-align: left;
}

.content-dialog__body table:not([class]) thead th {
  border-bottom-color: currentColor;
}

.content-dialog__body th {
  font-weight: var(--fw-body-regular-bold);
}

.content-dialog__body > :last-child,
.content-dialog__body :is(li, td, th) > :last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .ui-dialog .ui-widget-content.ui-dialog-content.content-dialog {
    padding: 0 2.5rem 2.5rem;
  }

  .content-dialog .content-dialog__title {
    font-size: 2rem;
    line-height: 2rem;
    margin-bottom: 2rem;
  }
}

/* MODO OSCURO
   -------------------------------------------------------------------------- */

/* Bootstrap pinta las celdas de .table con fondo y texto propios: en el
   diálogo oscuro salía una caja blanca, y en .table-striped las filas impares
   quedaban en gris oscuro sobre negro. */
:where(html[data-theme="dark"]) .content-dialog__body table {
  --bs-table-bg: transparent;
  --bs-table-color: inherit;
  --bs-table-border-color: var(--light-opacity-20);
  --bs-table-striped-bg: rgb(255 255 255 / 5%);
  --bs-table-striped-color: inherit;
  color: inherit;
}

:where(html[data-theme="dark"]) .content-dialog__body table:not([class]) :is(th, td) {
  border-bottom-color: var(--light-opacity-20);
}

:where(html[data-theme="dark"]) .content-dialog__body table:not([class]) thead th {
  border-bottom-color: currentColor;
}

/* ui-dialog-custom.css solo aclara el icono en oscuro: el aspa negra de la
   regla base sigue en el botón y queda negra sobre el fondo oscuro. */
:where(html[data-theme="dark"]) .ui-dialog:not(.ui-draggable.ui-resizable):has(.content-dialog) .ui-dialog-titlebar-close {
  background-image: url("data:image/svg+xml,%3csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 1.318l-10 10M11 11.318l-10-10' stroke='%23ffffff' stroke-width='1.5'/%3e%3c/svg%3e") !important;
}