/* Lo que está marcado como escondido (hidden) se esconde siempre, aunque otra regla diga lo contrario. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  padding: 1rem;
  font-family: system-ui, sans-serif;
  line-height: 1.4;
}

label {
  display: block;
  margin: 0.5rem 0;
}

input:not([type="checkbox"]):not([type="radio"]),
select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem;
  font-size: 1rem;
}

button {
  display: block;
  margin: 0.75rem 0;
  padding: 0.6rem 1rem;
  font-size: 1rem;
}

fieldset {
  margin: 0.75rem 0;
}

video,
#tapa {
  max-width: 100%;
}

.error {
  color: #b00020;
}

.grupo,
#faltantes li {
  border-top: 1px solid #ccc;
  padding: 0.5rem 0;
  list-style: none;
}

#faltantes ul {
  padding: 0;
}

.grupo img {
  float: left;
  width: 60px;
  margin-right: 0.75rem;
}

.grupo ul {
  clear: both;
  padding: 0;
  list-style: none;
}

.ejemplar {
  width: 100%;
  text-align: left;
  margin: 0.25rem 0;
}

.reservado {
  color: #888;
}

.fila-tapas {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.fila-tapas button {
  flex: 0 0 90px;
  height: 130px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: 0.75rem;
}

.fila-tapas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

dt {
  font-weight: bold;
}

dd {
  margin: 0 0 0.5rem;
}

a.boton {
  display: inline-block;
  padding: 0.6rem 1rem;
  border: 1px solid #555;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
}

#mis-subidos,
#mis-pedidos {
  padding: 0;
}

#mis-subidos li,
#mis-pedidos li {
  list-style: none;
  border-top: 1px solid #ccc;
  padding: 0.5rem 0;
}

button.principal {
  width: 100%;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 0.9rem 1rem;
}

#para-instituciones {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #ccc;
}

#lista-institucion li,
#panel-pendientes li {
  border-top: 1px solid #ccc;
  padding: 0.5rem 0;
  list-style: none;
}

#lista-institucion,
#panel-pendientes {
  padding: 0;
}

#video-escaner,
#video-institucion {
  width: 100%;
}

#varios-lista {
  padding-left: 1.25rem;
}

#varios-lista li {
  border-top: 1px solid #ccc;
  padding: 0.5rem 0;
}

#varios-lista img {
  float: right;
  width: 50px;
  margin-left: 0.5rem;
}

#varios-lista li.desmarcado {
  opacity: 0.5;
}

.mapa {
  width: 100%;
  height: 260px;
  margin: 0.5rem 0;
}

textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: 0.4rem;
}

#llamado-renglones {
  padding-left: 1.25rem;
}

#llamado-renglones li {
  border-top: 1px solid #ccc;
  padding: 0.5rem 0;
}

#llamado-renglones input[type="number"] {
  width: 5rem;
  display: inline-block;
}

#panel-aprobadas li {
  list-style: none;
  border-top: 1px solid #ccc;
  padding: 0.5rem 0;
}

#panel-aprobadas {
  padding: 0;
}

#video-lista {
  width: 100%;
}

.sugerencias-direccion {
  padding: 0;
  margin: 0.25rem 0;
}

.sugerencias-direccion li {
  list-style: none;
}

.sugerencias-direccion button {
  width: 100%;
  text-align: left;
  margin: 0.15rem 0;
  font-size: 0.9rem;
}

#escuelas-lista,
#escuela-libros,
#recepcion-lista,
.recepcion-panel {
  padding: 0;
}

#escuelas-lista li,
#escuela-libros li,
#recepcion-lista li,
.recepcion-panel li {
  list-style: none;
  border-top: 1px solid #ccc;
  padding: 0.5rem 0;
}

#escuelas-lista button {
  width: 100%;
  text-align: left;
}

.linea-de-tiempo ol {
  list-style: none;
  counter-reset: paso;
  padding-left: 0;
  border-left: 3px solid #2e7d32;
  margin-left: 0.75rem;
}

.linea-de-tiempo li {
  counter-increment: paso;
  position: relative;
  padding: 0 0 0.75rem 1.5rem;
}

.linea-de-tiempo li::before {
  content: counter(paso);
  position: absolute;
  left: -0.85rem;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #2e7d32;
  color: #fff;
  text-align: center;
  line-height: 1.5rem;
  font-size: 0.85rem;
}

a.reportar {
  font-size: 0.85rem;
  color: #888;
}

#panel-reportes {
  padding: 0;
}

#panel-reportes li {
  list-style: none;
  border-top: 1px solid #ccc;
  padding: 0.5rem 0;
}

/* La historia de la biblioteca: texto largo, cómodo de leer en el celular. */
#sobre-historia p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 1rem;
}

/* Política de privacidad y términos: enlaces en los formularios y la ventanita con el texto. */
.legales {
  font-size: 0.85rem;
}

#dialogo-legal {
  width: calc(100% - 2rem);
  max-height: 85vh;
  box-sizing: border-box;
  overflow-y: auto;
}

#dialogo-legal .borrador {
  background: #fff3cd;
  padding: 0.5rem;
  font-weight: bold;
}

#legal-contenido p {
  line-height: 1.5;
}

/* Logo de Biblioteca Moscú (presentación y "Sobre"). */
img.logo {
  display: block;
  width: 45%;
  max-width: 180px;
  margin: 0 auto 1rem;
}