/* ============================================================================
   SISTEMA DE MARCA CODEINGENIO
   Los mismos colores que usa el generador de cuentas de cobro
   (generador-cuentas-cobro_3.html), para que la interfaz de control se vea
   de la misma familia que los documentos que produce. No es el mismo CSS: la
   hoja impresa tiene su propia plantilla (sprint 5), esto es solo la
   interfaz de trabajo.
   ========================================================================== */
:root {
  --ambar: #F2A01E;
  --ambar-claro: #FDEBC8;
  --borde: #C9973A;
  --tinta: #1A1A16;
  --tinta-suave: #5A584E;
  --papel: #FFFFFF;
  --fondo: #EFEDE7;
  --rojo: #B0392B;
  --rojo-claro: #F7E3E0;
  --verde: #3E7A4C;
  --verde-claro: #E3F0E6;
}

* {
  box-sizing: border-box;
}

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

a {
  color: var(--tinta);
}

.franja {
  background: var(--papel);
  border-bottom: 3px solid var(--ambar);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.franja .marca {
  font-weight: 800;
  letter-spacing: .02em;
}

.franja .marca span {
  color: var(--ambar);
}

.franja nav {
  display: flex;
  align-items: center;
}

.franja nav a {
  margin-left: 18px;
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
  color: var(--tinta-suave);
}

/* Django exige POST para cerrar sesión (no acepta GET desde la versión 5),
   así que "Salir" no puede ser un enlace normal. Se ve igual que uno, pero
   por dentro es un formulario de un solo botón. */
.enlace-boton {
  margin: 0 0 0 18px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--tinta-suave);
  cursor: pointer;
}

.contenedor {
  max-width: 460px;
  margin: 48px auto;
  padding: 0 20px;
}

.contenedor.ancho {
  max-width: 720px;
}

.tarjeta {
  background: var(--papel);
  border-radius: 14px;
  padding: 28px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
}

.tarjeta h1 {
  font-size: 19px;
  margin: 0 0 4px;
}

.tarjeta .sub {
  color: var(--tinta-suave);
  font-size: 13px;
  margin-bottom: 20px;
}

.sub.chico {
  font-size: 11px;
  margin: 4px 0 0;
}

label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-suave);
  margin: 14px 0 5px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #D6D3C8;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
  color: var(--tinta);
}

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

input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin-top: 6px;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--ambar);
  outline-offset: 1px;
}

.boton {
  width: 100%;
  margin-top: 18px;
  padding: 12px;
  border: none;
  border-radius: 9px;
  background: var(--ambar);
  color: #14140F;
  font-weight: 800;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

.boton:hover {
  background: #FFB43D;
}

/* Igual que ".boton", pero para un enlace "<a>" que debe verse como botón.
   Se separa en su propia clase en vez de usar "style=" en la plantilla,
   porque la política de contenido (CSP) del documento de seguridad no
   permite estilos en línea: todo el CSS vive en estos archivos. */
.boton-enlace {
  display: block;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
}

.boton-secundario {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 9px 14px;
  border: 1px solid #D6D3C8;
  border-radius: 9px;
  background: #fff;
  color: var(--tinta-suave);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.aviso {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
}

.aviso.error {
  background: var(--rojo-claro);
  color: var(--rojo);
}

.aviso.exito {
  background: var(--verde-claro);
  color: var(--verde);
}

.aviso.info {
  background: var(--ambar-claro);
  color: #7A5B12;
}

.qr {
  display: block;
  margin: 8px auto 4px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}

.clave-manual {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 13px;
  letter-spacing: .05em;
  background: var(--fondo);
  border-radius: 6px;
  padding: 8px 10px;
  word-break: break-all;
  text-align: center;
}

.codigos {
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.codigos li {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 14px;
  background: var(--fondo);
  border-radius: 6px;
  padding: 8px 10px;
  text-align: center;
}

/* ---------- listados y formularios de negocio (clientes, catálogo) ---------- */
.miniatura-recurso {
  max-height: 60px;
}

.contenedor.negocio {
  max-width: 980px;
  margin: 28px auto;
  padding: 0 20px;
}

.cabecera-seccion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.cabecera-seccion h1 {
  font-size: 20px;
  margin: 0;
}

.boton-chico {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--ambar);
  color: #14140F;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.boton-chico:hover {
  background: #FFB43D;
}

.boton-chico.secundario {
  background: #fff;
  color: var(--tinta-suave);
  border: 1px solid #D6D3C8;
}

.buscador {
  margin-bottom: 14px;
}

.buscador input {
  max-width: 320px;
  display: inline-block;
}

table.tabla-datos {
  width: 100%;
  border-collapse: collapse;
  background: var(--papel);
  border-radius: 10px;
  overflow: hidden;
  font-size: 13.5px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .06);
}

table.tabla-datos th,
table.tabla-datos td {
  padding: 9px 12px;
  border-bottom: 1px solid #ECE9DF;
  text-align: left;
}

table.tabla-datos th {
  background: var(--ambar-claro);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #7A5B12;
}

table.tabla-datos tr:last-child td {
  border-bottom: none;
}

table.tabla-datos tr:hover td {
  background: #FBFAF6;
}

table.tabla-datos a {
  color: var(--ambar);
  text-decoration: none;
  font-weight: 700;
}

.etiqueta {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}

.etiqueta.activo {
  background: var(--verde-claro);
  color: var(--verde);
}

.etiqueta.inactivo {
  background: #EEECE4;
  color: var(--tinta-suave);
}

.bloque-formset.espaciado {
  margin-top: 12px;
}

.bloque-formset {
  background: var(--papel);
  border: 1px solid #E9E6DC;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  position: relative;
}

.bloque-formset h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-suave);
  margin: 0 0 8px;
}

.fila-campos {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.fila-campos > div {
  flex: 1;
  min-width: 160px;
}

.grupo-seccion {
  border-top: 1px solid #E9E6DC;
  margin-top: 22px;
  padding-top: 16px;
}

.grupo-seccion h2 {
  font-size: 15px;
  margin: 0 0 10px;
}

.vacio {
  color: var(--tinta-suave);
  font-size: 13px;
  padding: 14px;
  text-align: center;
}

.checkbox-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0;
}

.checkbox-lista ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.checkbox-lista li {
  margin: 0;
}

.checkbox-lista label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  text-transform: none;
  font-weight: 500;
  color: var(--tinta);
  margin: 0;
}

.tablero-vacio {
  text-align: center;
  color: var(--tinta-suave);
  padding: 60px 20px;
}