/* Base comun al visor y a la administracion. Colores tomados de la laguna: agua, junco y tinta. */
@font-face {
  font-family: "Barlow";
  src: url("fonts/barlow-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("fonts/barlow-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --tinta: #12343b;
  --tinta-suave: #4a6468;
  --agua: #1f6f78;
  --agua-oscura: #175860;
  --agua-clara: #d9e9e8;
  --niebla: #f0f4f3;
  --linea: #cfdcda;
  --papel: #ffffff;
  --junco: #5d7f22;
  --alerta: #a8381a;
  --alerta-clara: #f8e4dd;
  --radio: 6px;
  --letra: "Barlow", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--letra);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--niebla);
}

h1, h2, h3 { font-weight: 600; line-height: 1.2; margin: 0; }

a { color: var(--agua-oscura); text-underline-offset: 2px; }
a:hover { color: var(--tinta); }

:focus-visible { outline: 3px solid var(--junco); outline-offset: 2px; }

button, input, select, textarea { font: inherit; color: inherit; }

.boton {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--agua);
  border-radius: var(--radio);
  background: var(--agua);
  color: var(--papel);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.boton:hover { background: var(--agua-oscura); border-color: var(--agua-oscura); color: var(--papel); }

.boton-secundario { background: var(--papel); color: var(--agua-oscura); }
.boton-secundario:hover { background: var(--agua-clara); color: var(--tinta); }

.boton-peligro { background: var(--papel); border-color: var(--alerta); color: var(--alerta); }
.boton-peligro:hover { background: var(--alerta); border-color: var(--alerta); color: var(--papel); }

.boton-texto {
  padding: 0;
  border: 0;
  background: none;
  color: var(--agua-oscura);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.boton-texto:hover { color: var(--tinta); }

.marca {
  display: inline-block;
  padding: 0 0.4rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: 0.08em;
}
.marca-publica { background: var(--agua-clara); color: var(--agua-oscura); }
.marca-interna { background: #e6ecd6; color: #44601a; }
.marca-oculta { background: var(--alerta-clara); color: var(--alerta); }