:root {
  --azul: #1e3a5f;
  --azul-claro: #2e5a8f;
  --fondo: #f4f6f9;
  --borde: #d8dee6;
  --verde: #1e7a3d;
  --rojo: #b02a2a;
  --amarillo: #8a6d1a;
  --texto: #222;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--fondo);
  color: var(--texto);
}

a { color: var(--azul-claro); }

#nav-principal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  background: var(--azul);
  color: white;
  padding: 0.8rem 1.5rem;
}

#nav-principal .nav-marca { font-weight: bold; font-size: 1.1rem; }

#nav-principal .nav-enlaces { display: flex; gap: 1rem; flex-wrap: wrap; }

#nav-principal a {
  color: #dce8f7;
  text-decoration: none;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
}

#nav-principal a.activo, #nav-principal a:hover { background: rgba(255, 255, 255, 0.18); color: white; }

#nav-principal .nav-usuario { display: flex; align-items: center; gap: 0.8rem; font-size: 0.9rem; }

#nav-principal button {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0.35rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
}

#nav-principal button:hover { background: rgba(255, 255, 255, 0.3); }

.contenedor { max-width: 1000px; margin: 0 auto; padding: 1.5rem; }

.tarjeta {
  background: white;
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 1.2rem 1.5rem;
  margin-bottom: 1.2rem;
}

h1, h2, h3 { color: var(--azul); }

label { display: block; margin-top: 0.8rem; font-weight: 600; font-size: 0.92rem; }

input[type="text"], input[type="password"], input[type="email"], input[type="date"],
input[type="file"], input[type="number"], textarea, select {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.25rem;
  border: 1px solid var(--borde);
  border-radius: 5px;
  font-size: 0.95rem;
  font-family: inherit;
}

textarea { resize: vertical; min-height: 80px; }

button.principal {
  background: var(--azul-claro);
  color: white;
  border: none;
  padding: 0.55rem 1.2rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.95rem;
  margin-top: 1rem;
}

button.principal:hover { background: var(--azul); }

button.secundario, a.secundario {
  background: white;
  color: var(--azul-claro);
  border: 1px solid var(--azul-claro);
  padding: 0.4rem 0.9rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.88rem;
}

/* a.secundario se usa para enlaces de descarga (p. ej. los reportes del
   editor) que deben verse como botón, no como enlace de texto subrayado. */
a.secundario {
  display: inline-block;
  text-decoration: none;
}

button.peligro { color: var(--rojo); border-color: var(--rojo); }
button.exito { color: var(--verde); border-color: var(--verde); }

table { width: 100%; border-collapse: collapse; margin-top: 0.8rem; }
th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--borde); font-size: 0.92rem; }
th { background: #eef2f7; color: var(--azul); }

.etiqueta {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #e6edf5;
  color: var(--azul);
}
.etiqueta.aceptado, .etiqueta.publicado { background: #e3f5e8; color: var(--verde); }
.etiqueta.rechazado { background: #fbe6e6; color: var(--rojo); }
.etiqueta.revision_menor, .etiqueta.revision_mayor { background: #fdf2da; color: var(--amarillo); }

.mensaje-error { color: var(--rojo); background: #fbe6e6; padding: 0.6rem 0.9rem; border-radius: 5px; margin-top: 0.8rem; }
.mensaje-exito { color: var(--verde); background: #e3f5e8; padding: 0.6rem 0.9rem; border-radius: 5px; margin-top: 0.8rem; }
.vacio { color: #777; font-style: italic; padding: 0.6rem 0; }

.login-caja {
  max-width: 380px;
  margin: 4rem auto;
  background: white;
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid var(--borde);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.login-caja h1 { text-align: center; margin-top: 0; }
.login-caja .subtitulo { text-align: center; color: #666; margin-top: -0.6rem; margin-bottom: 1.2rem; font-size: 0.9rem; }

.oculto { display: none !important; }

.fila-acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }

.detalle-lista { list-style: none; padding: 0; margin: 0; }
.detalle-lista li { padding: 0.5rem 0; border-bottom: 1px solid var(--borde); }

.lista-notif { list-style: none; padding: 0; margin: 0; }
.lista-notif li {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--borde);
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
}
.lista-notif li:hover { background: #f0f4f8; }
.lista-notif li.no-leida { font-weight: 600; background: #eef6ff; }
.lista-notif .fecha { color: #888; font-weight: normal; font-size: 0.8rem; white-space: nowrap; }

.expandible { border: 1px solid var(--borde); border-radius: 6px; margin-top: 0.7rem; overflow: hidden; }
.expandible-cabecera { padding: 0.7rem 1rem; display: flex; justify-content: space-between; align-items: center; cursor: pointer; background: #fafbfc; }
.expandible-cabecera:hover { background: #f0f4f8; }
.expandible-cuerpo { padding: 1rem; border-top: 1px solid var(--borde); }
.expandible-cuerpo.oculto { display: none; }

.subseccion { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px dashed var(--borde); }

/* ---- Asistente de envío (OJS) ---- */
.pasos { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0 0 1.2rem; padding: 0; counter-reset: paso; }
.pasos li { flex: 1 1 8rem; padding: 0.5rem 0.7rem; border-bottom: 3px solid var(--borde); color: #667; font-size: 0.85rem; }
.pasos li.activo { border-color: var(--azul-claro); color: var(--azul); font-weight: 700; }
.pasos li.hecho { border-color: var(--verde); color: var(--verde); }
.paso h3 { margin-bottom: 0.3rem; }
.ayuda-paso { color: #555; font-size: 0.9rem; margin: 0.2rem 0 0.6rem; }
label.check { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400; margin-top: 0.5rem; }
label.check input { width: auto; margin-top: 0.25rem; }
.fila-coautor { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.4rem; margin-bottom: 0.6rem; padding: 0.6rem; background: #f8fafc; border: 1px solid var(--borde); border-radius: 6px; align-items: center; }
.fila-coautor input { margin-top: 0; }
details summary { cursor: pointer; font-weight: 600; color: var(--azul); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #f5a524; outline-offset: 2px; }
#nav-principal .nav-marca a { color: white; }

/* Móvil: las tablas anchas se desplazan dentro de su tarjeta en vez de desbordar la página */
.tarjeta { overflow-x: auto; }