/* apps/web/public/documento.css
 *
 * El aspecto del CONTENIDO de una pagina (lo que pinta ProseMirror, no React): titulos, listas, paneles,
 * codigo, tablas, cursores de colaboracion. Hoja estatica, como fuentes.css: los nodos del editor no los
 * renderiza React, asi que cssMap no llega a ellos. SOLO variables de token del ADS (--ds-*): ni un color ni
 * un tamano a mano (§4.3). Lectura y edicion usan exactamente esta hoja (§6.3).
 */
.documents-documento {
  font: var(--ds-font-body-large);
  color: var(--ds-text);
  outline: none;
  min-height: 40vh;
  overflow-wrap: anywhere;
}
.documents-documento > * + * {
  margin-block-start: var(--ds-space-150);
}
.documents-documento h1 {
  font: var(--ds-font-heading-xlarge);
  margin-block-start: var(--ds-space-400);
}
.documents-documento h2 {
  font: var(--ds-font-heading-large);
  margin-block-start: var(--ds-space-400);
}
.documents-documento h3 {
  font: var(--ds-font-heading-medium);
  margin-block-start: var(--ds-space-300);
}
.documents-documento h4 {
  font: var(--ds-font-heading-small);
  margin-block-start: var(--ds-space-300);
}
.documents-documento h5 {
  font: var(--ds-font-heading-xsmall);
  margin-block-start: var(--ds-space-200);
}
.documents-documento h6 {
  font: var(--ds-font-heading-xxsmall);
  margin-block-start: var(--ds-space-200);
}
.documents-documento a {
  color: var(--ds-link);
  text-decoration: underline;
}
.documents-documento a:hover {
  color: var(--ds-link-pressed);
}
.documents-documento ul,
.documents-documento ol {
  padding-inline-start: var(--ds-space-300);
}
.documents-documento li > p {
  margin: 0;
}
.documents-documento blockquote {
  border-inline-start: var(--ds-border-width-selected) solid var(--ds-border);
  padding-inline-start: var(--ds-space-200);
  color: var(--ds-text-subtle);
}
.documents-documento hr {
  border: none;
  border-block-start: var(--ds-border-width) solid var(--ds-border);
  margin-block: var(--ds-space-300);
}
.documents-documento code {
  font: var(--ds-font-code);
  background-color: var(--ds-background-neutral);
  border-radius: var(--ds-radius-small);
  padding-inline: var(--ds-space-050);
}
.documents-documento pre {
  font: var(--ds-font-code);
  background-color: var(--ds-background-neutral);
  border-radius: var(--ds-radius-medium);
  padding: var(--ds-space-200);
  overflow-x: auto;
}
.documents-documento pre code {
  background: none;
  padding: 0;
}
.documents-documento .hljs-keyword,
.documents-documento .hljs-built_in {
  color: var(--ds-text-accent-purple);
}
.documents-documento .hljs-string,
.documents-documento .hljs-attr {
  color: var(--ds-text-accent-green);
}
.documents-documento .hljs-number,
.documents-documento .hljs-literal {
  color: var(--ds-text-accent-blue);
}
.documents-documento .hljs-comment {
  color: var(--ds-text-subtlest);
  font-style: italic;
}
.documents-documento .hljs-title,
.documents-documento .hljs-function {
  color: var(--ds-text-accent-teal);
}

/* Tablas */
.documents-documento table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}
.documents-documento th,
.documents-documento td {
  border: var(--ds-border-width) solid var(--ds-border);
  padding: var(--ds-space-100);
  vertical-align: top;
  position: relative;
}
.documents-documento th {
  background-color: var(--ds-background-neutral);
  font-weight: var(--ds-font-weight-semibold);
  text-align: start;
}
.documents-documento .selectedCell {
  background-color: var(--ds-background-selected);
}
.documents-documento .column-resize-handle {
  position: absolute;
  inset-block: 0;
  inset-inline-end: -2px;
  width: 4px;
  background-color: var(--ds-border-selected);
  cursor: col-resize;
}
.documents-documento .tableWrapper {
  overflow-x: auto;
}

/* Listas de tareas */
.documents-documento ul[data-type='taskList'] {
  list-style: none;
  padding-inline-start: 0;
}
.documents-documento ul[data-type='taskList'] li {
  display: flex;
  gap: var(--ds-space-100);
  align-items: flex-start;
}
.documents-documento ul[data-type='taskList'] li > label {
  margin-block-start: var(--ds-space-025);
}
.documents-documento ul[data-type='taskList'] li[data-checked='true'] > div {
  color: var(--ds-text-subtlest);
  text-decoration: line-through;
}

/* Paneles de Confluence (§6.3). La nota se pinta con discovery: no hay token «note» (DECISIONS). */
.documents-documento .documents-panel {
  border-radius: var(--ds-radius-medium);
  padding: var(--ds-space-150) var(--ds-space-200);
  border-inline-start: var(--ds-border-width-selected) solid transparent;
}
.documents-documento [data-panel-type='info'] {
  background-color: var(--ds-background-information);
  border-inline-start-color: var(--ds-border-information);
}
.documents-documento [data-panel-type='note'] {
  background-color: var(--ds-background-discovery);
  border-inline-start-color: var(--ds-border-discovery);
}
.documents-documento [data-panel-type='success'] {
  background-color: var(--ds-background-success);
  border-inline-start-color: var(--ds-border-success);
}
.documents-documento [data-panel-type='warning'] {
  background-color: var(--ds-background-warning);
  border-inline-start-color: var(--ds-border-warning);
}
.documents-documento [data-panel-type='error'] {
  background-color: var(--ds-background-danger);
  border-inline-start-color: var(--ds-border-danger);
}
.documents-documento [data-panel-type='custom'] {
  background-color: var(--ds-background-neutral);
}

/* Imagenes (adjuntos) */
.documents-documento img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ds-radius-small);
  display: block;
  margin-inline: auto;
}
.documents-documento img[data-align='left'] {
  margin-inline: 0 auto;
}
.documents-documento img[data-align='right'] {
  margin-inline: auto 0;
}

/* Editor: placeholder y seleccion */
.documents-documento p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: var(--ds-text-subtlest);
  float: inline-start;
  height: 0;
  pointer-events: none;
}
.documents-documento ::selection {
  background-color: var(--ds-background-selected);
}

/* Cursores de la edicion simultanea (CollaborationCaret, D-15) */
.collaboration-carets__caret {
  border-inline: 1px solid var(--ds-border-bold);
  margin-inline: -1px;
  pointer-events: none;
  position: relative;
  word-break: normal;
}
.collaboration-carets__label {
  border-radius: var(--ds-radius-small) var(--ds-radius-small) var(--ds-radius-small) 0;
  color: var(--ds-text-inverse);
  font: var(--ds-font-body-small);
  font-weight: var(--ds-font-weight-semibold);
  inset-inline-start: -1px;
  padding: var(--ds-space-025) var(--ds-space-075);
  position: absolute;
  top: -1.4em;
  user-select: none;
  white-space: nowrap;
}