html,
body {
  height: 100%;
  margin: 0;
  text-size-adjust: none;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: black;
  background-color: rgb(250, 251, 247);
  overflow-x: scroll;
}

main {
  max-width: 100%;
  box-sizing: border-box;
  align-items: center;
  padding: 1.5em;
}

.plantbed {
  width: 0;
  position: relative;
}

.item {
  display: block;
  position: absolute;
  padding: 0em 1em;
  outline: 1px solid rgba(0, 0, 0, 0.1);
}

.item * {
  width: max-content;
}

.item img,
.item video,
.item audio {
  width: auto;
  height: auto;
  max-width: 24em;
  max-height: 24em;
}

.item audio {
  height: 3em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1em;
  font-weight: normal;
  color: #4f5cd6;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
pre,
code {
  margin: 0;
}

pre {
  font-family: inherit;
  white-space: pre-wrap;
}

a {
  color: #4f5cd6;
}

.md h1,
.md h2,
.md h3,
.md h4,
.md h5,
.md h6,
.md p,
.md pre {
  margin-top: 1em;
}

a:hover {
  text-decoration: underline;
}

/* --- navegación mínima --- */

.topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  padding: 1em 1.5em 0 1.5em;
}

.topbar select {
  font-family: inherit;
  font-size: 1em;
  color: black;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  background: transparent;
  padding: 0.1em 0;
}

.actions a,
.actions .link-button {
  margin-left: 1em;
}

.inline-form {
  display: inline;
}

.link-button {
  font-family: inherit;
  font-size: 1em;
  color: #4f5cd6;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.link-button:hover {
  text-decoration: underline;
}

.flash {
  margin: 0 1.5em;
  padding: 0.5em 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.online-count {
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.55);
}

.notif-toggle {
  margin-left: 1em;
}

/* --- popup de errores --- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1em;
}

.modal-box {
  background: rgb(250, 251, 247);
  border: 1px solid #000;
  padding: 1.5em;
  max-width: 26em;
  width: 100%;
  box-sizing: border-box;
}

.modal-box h2 {
  color: #000;
  font-weight: bold;
  margin-bottom: 0.8em;
}

.modal-box p {
  margin-bottom: 0.6em;
  color: rgba(0, 0, 0, 0.85);
}

.modal-box #error-modal-close {
  margin-top: 0.6em;
  border-bottom: 1px solid #4f5cd6;
}

/* --- selector de vistas --- */

.view-switch {
  margin: 1em 0 1.5em 0;
}
.view-switch a {
  margin-right: 1.2em;
  color: black;
}
.view-switch a.active {
  color: #4f5cd6;
}

.page-description {
  max-width: 40em;
  margin-bottom: 1.5em;
  color: rgba(0, 0, 0, 0.7);
}

.empty {
  color: rgba(0, 0, 0, 0.5);
}

/* --- vista cajas / plantbed --- */
/* El posicionamiento (left/top) lo calcula static/js/plantbed.js;
   aquí solo el aspecto visual de cada caja. */

.item {
  width: 18em;
  box-sizing: border-box;
  padding: 1em;
  background: rgb(250, 251, 247);
}
.item * {
  width: auto;
} /* dentro de nuestras cajas sí queremos que el texto haga wrap */

/* Prioridad explícita sobre ".item * { width: max-content }" de la referencia:
   título, extracto, tags y autora deben ocupar el ancho de la caja y hacer
   salto de línea, no desbordarse. */
.item h2,
.item .excerpt,
.item .tags,
.item .meta {
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
}

.item .excerpt {
  margin: 0.4em 0;
  color: rgba(0, 0, 0, 0.8);
}
.item .tags {
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 0.4em;
}
.item .meta {
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.6);
}
.item img {
  display: block;
  margin: 0.6em 0;
  max-width: 100%;
}

/* --- grafo (diagrama, D3) --- */

.graph-wrap {
  overflow: auto;
  max-width: 100%;
}

.graph {
  display: block;
}

.edge {
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 1px;
}

.node circle {
  fill: #000;
}
.node text {
  font-size: 14px;
  font-family: inherit;
  fill: #000;
}
.node-content text {
  cursor: pointer;
}

/* --- mapa geográfico --- */

.mapa-geo {
  width: 100%;
  height: 60vh;
  min-height: 22em;
  outline: 1px solid rgba(0, 0, 0, 0.15);
  filter: grayscale(0.15) contrast(0.95);
}

.mapa-punto span {
  display: block;
  width: 8px;
  height: 8px;
  background: #000;
  border-radius: 50%;
}

.leaflet-tooltip {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.85em;
  background: rgb(250, 251, 247);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 0;
  box-shadow: none;
  color: #000;
  padding: 0.2em 0.5em;
}
.leaflet-tooltip::before {
  display: none;
}

.sin-ubicacion {
  margin-top: 1.5em;
}
.sin-ubicacion h3 {
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 0.4em;
}
.sin-ubicacion ul {
  list-style: none;
  padding-left: 0;
}
.sin-ubicacion li {
  margin-bottom: 0.2em;
}

/* --- detalle de contenido --- */

.detail {
  max-width: 40em;
}
.detail h1 {
  font-size: 1.3em;
  margin-bottom: 0.6em;
}
.detail img {
  max-width: 100%;
  height: auto;
  margin-bottom: 1em;
  display: block;
}
.detail-body p,
.detail-body ul,
.detail-body ol,
.detail-body blockquote {
  margin-top: 1em;
}
.detail-body blockquote {
  border-left: 1px solid rgba(0, 0, 0, 0.3);
  padding-left: 1em;
  color: rgba(0, 0, 0, 0.7);
}
.detail .tags {
  margin-top: 1.5em;
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.6);
}
.detail .meta {
  margin-top: 0.4em;
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.6);
}

/* --- glosario --- */

.glosario-entrada {
  margin-bottom: 1.4em;
}
.glosario-entrada h3 {
  color: black;
  margin-bottom: 0.3em;
}
.glosario-entrada ul {
  list-style: none;
  padding-left: 1em;
}
.glosario-entrada li {
  margin-bottom: 0.15em;
}

/* --- formularios --- */

.form {
  display: flex;
  flex-direction: column;
  gap: 1em;
  max-width: 34em;
}

.form label {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form textarea,
.form select {
  font-family: inherit;
  font-size: 1em;
  padding: 0.4em;
  border: 1px solid rgba(0, 0, 0, 0.4);
  background: rgb(250, 251, 247);
  color: black;
}

.form button {
  align-self: flex-start;
  font-family: inherit;
  font-size: 1em;
  color: black;
  background: none;
  border: 1px solid #000;
  padding: 0.4em 1em;
  cursor: pointer;
}
.form button:hover {
  background: rgba(0, 0, 0, 0.05);
}

.checkbox-line {
  flex-direction: row;
  align-items: center;
  gap: 0.4em;
}

.coords {
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 1em;
  display: flex;
  gap: 1em;
}
.coords legend {
  padding: 0 0.3em;
  font-size: 0.9em;
}
.coords label {
  flex: 1;
}

#editor {
  min-height: 10em;
  border: 1px solid rgba(0, 0, 0, 0.4);
  background: rgb(250, 251, 247);
  font-family: inherit;
}

.tag-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  font-size: 0.9em;
}
.tag-suggestions span {
  color: #4f5cd6;
  cursor: pointer;
}
.tag-suggestions span:hover {
  text-decoration: underline;
}

/* --- responsive --- */

@media (max-width: 640px) {
  .topbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .graph-wrap {
    overflow-x: scroll;
  }
}