:root {
  --tinta: #16202c;
  --tinta-suave: #5a6b7d;
  --borde: #dfe5ec;
  --fondo: #f4f6f9;
  --superficie: #ffffff;
  --primario: #1f3864;
  --ok: #1c7c46;
  --aviso: #96620a;
  --error: #a02020;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fondo);
}

/* --- Barra superior --- */
.barra {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--primario);
  color: #fff;
  flex-wrap: wrap;
}
.barra a { color: #fff; text-decoration: none; }
.marca { font-weight: 700; letter-spacing: 0.01em; }
.barra nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.barra nav a { opacity: 0.8; padding-bottom: 0.15rem; border-bottom: 2px solid transparent; }
.barra nav a:hover { opacity: 1; }
.barra nav a.activo { opacity: 1; font-weight: 600; border-bottom-color: #fff; }

/* Submenú del módulo abierto: segunda barra, bajo la principal. */
.submenu {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
  padding: 0.55rem 1.5rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  font-size: 0.9rem;
}
.submenu a {
  color: var(--tinta-suave); text-decoration: none;
  padding-bottom: 0.2rem; border-bottom: 2px solid transparent;
}
.submenu a:hover { color: var(--tinta); }
.submenu a.activo { color: var(--primario); font-weight: 600; border-bottom-color: var(--primario); }
.salir { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.usuario { font-size: 0.85rem; opacity: 0.85; }
.salir button {
  background: transparent; border: 1px solid rgba(255,255,255,0.5);
  color: #fff; padding: 0.3rem 0.75rem; border-radius: 4px; cursor: pointer;
}

main { max-width: 1180px; margin: 0 auto; padding: 1.75rem 1.5rem 3rem; }
h1 { font-size: 1.5rem; margin: 0 0 0.35rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 0.75rem; }
.meta { color: var(--tinta-suave); margin: 0 0 1.5rem; font-size: 0.9rem; }

/* --- Tarjetas --- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.tarjeta.estrecha { max-width: 400px; margin: 3rem auto; }
.tarjetas { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.indicador {
  flex: 1 1 130px; text-align: center; padding: 1rem 0.75rem; margin: 0;
}
.indicador .cifra { display: block; font-size: 1.75rem; font-weight: 700; }
.indicador .etiqueta { font-size: 0.78rem; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.03em; }
.indicador.con-error .cifra { color: var(--error); }

/* --- Formularios --- */
label { display: block; font-weight: 600; margin: 0.9rem 0 0.3rem; font-size: 0.9rem; }
input[type="text"], input[type="password"], input[type="file"], select {
  width: 100%; padding: 0.5rem 0.65rem; border: 1px solid var(--borde);
  border-radius: 5px; font-size: 0.95rem; background: #fff;
}
fieldset { border: 1px solid var(--borde); border-radius: 6px; padding: 1rem 1.25rem; margin: 0 0 1.25rem; }
legend { font-weight: 600; padding: 0 0.4rem; }
fieldset ul { list-style: none; padding: 0; margin: 0; }
fieldset li { margin: 0.3rem 0; }
fieldset li label { display: inline; font-weight: 400; margin: 0 0 0 0.35rem; }
.ayuda { color: var(--tinta-suave); font-size: 0.85rem; margin: 0.6rem 0 0; }
.filtros { display: flex; align-items: flex-end; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filtros label { margin: 0 0 0.25rem; }
.filtros select { width: auto; min-width: 190px; }

button, .boton {
  display: inline-block; padding: 0.5rem 1rem; border-radius: 5px;
  border: 1px solid var(--borde); background: #fff; color: var(--tinta);
  font-size: 0.9rem; cursor: pointer; text-decoration: none;
}
button:hover, .boton:hover { border-color: var(--primario); }
.primario, button.primario {
  background: var(--primario); color: #fff; border-color: var(--primario); font-weight: 600;
}
form .primario { margin-top: 1rem; }

/* --- Tablas --- */
table { width: 100%; border-collapse: collapse; background: var(--superficie);
        border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; font-size: 0.9rem; }
th, td { padding: 0.55rem 0.75rem; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { background: #eef1f6; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tinta-suave); }
tbody tr:last-child td { border-bottom: none; }
td.numero { text-align: right; font-variant-numeric: tabular-nums; }
td.motivo { color: var(--tinta-suave); max-width: 420px; }
.vacio { color: var(--tinta-suave); font-style: italic; }

/* --- Estados --- */
.estado, .nivel {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; background: #e9edf3; color: var(--tinta-suave);
}
.estado.COMPLETADO, .estado.PROCESADO, .estado.IMPORTABLE { background: #e2f3e9; color: var(--ok); }
.estado.COMPLETADO_CON_ERRORES, .estado.DUPLICADO, .estado.ALERTA_ANULACION,
.estado.SOLO_EXCLUIDOS, .nivel.ADVERTENCIA { background: #fdf1dc; color: var(--aviso); }
.estado.FALLIDO, .estado.ERROR, .estado.RECHAZADO, .nivel.ERROR { background: #fbe6e6; color: var(--error); }

/* --- Mensajes --- */
.mensajes { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.msg { padding: 0.65rem 1rem; border-radius: 6px; margin-bottom: 0.5rem;
       background: #e9edf3; border-left: 4px solid var(--tinta-suave); }
.msg.success { background: #e2f3e9; border-color: var(--ok); }
.msg.warning { background: #fdf1dc; border-color: var(--aviso); }
.msg.error { background: #fbe6e6; border-color: var(--error); }
.alerta { padding: 0.6rem 0.9rem; border-radius: 6px; }
.alerta.error { background: #fbe6e6; color: var(--error); }
.alerta.aviso { background: #fdf1dc; color: var(--aviso); border-left: 4px solid var(--aviso); }

/* Archivos que existen para revisar, nunca para importar a Odoo. */
.marca-no-importable {
  display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.45rem;
  border: 1px solid var(--aviso); border-radius: 4px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--aviso); background: #fdf1dc; white-space: nowrap;
}

.pasos { margin: 0; padding-left: 1.2rem; color: var(--tinta-suave); }
.pasos li { margin: 0.3rem 0; }

.paginacion { display: flex; gap: 1rem; align-items: center; justify-content: center;
              margin-top: 1.25rem; font-size: 0.9rem; }

.pie { text-align: center; color: var(--tinta-suave); font-size: 0.8rem;
       padding: 1.5rem; border-top: 1px solid var(--borde); }

/* Franja permanente del ambiente de pruebas: nadie debe confundirlo con operación. */
.franja-ambiente {
  background: repeating-linear-gradient(45deg, #7a4b00, #7a4b00 12px, #935a00 12px, #935a00 24px);
  color: #fff; text-align: center; padding: 0.4rem 1rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em;
}