/* Sobrio a proposito: esto se mira todos los dias para decidir a quien cobrar. Sin CDN — una
   pantalla que se ve mal sin red es una pantalla que no se puede usar. */
:root {
  --tinta: #1f2933; --tenue: #6b7280; --linea: #e5e7eb; --fondo: #fff;
  --acento: #374151; --alerta: #b91c1c; --alerta-fondo: #fef2f2;
  --ok: #15803d; --aviso-fondo: #fffbeb; --aviso-linea: #f59e0b;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
nav {
  display: flex; gap: 1.2rem; align-items: center; padding: .8rem 1.5rem;
  border-bottom: 1px solid var(--linea); background: #f9fafb;
}
nav strong { font-size: 1.1rem; letter-spacing: .04em; }
nav a { color: var(--acento); text-decoration: none; }
nav a:hover { text-decoration: underline; }
.solo-lectura {
  margin-left: auto; font-size: .78rem; color: var(--tenue);
  border: 1px solid var(--linea); border-radius: 999px; padding: .15rem .6rem;
}
main { padding: 1.5rem; max-width: 1200px; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .6rem; }
h2 small, h1 small { font-weight: 400; color: var(--tenue); font-size: .8rem; }
section { margin-bottom: 2.5rem; }
.total { font-size: 1.9rem; font-weight: 600; margin: .2rem 0 1rem; font-variant-numeric: tabular-nums; }
.total small { font-size: .8rem; font-weight: 400; color: var(--tenue); }
.nota { color: var(--tenue); margin-top: -.4rem; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--linea); }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); }
.num { text-align: right; }
.fuerte { font-weight: 600; }
.aging { max-width: 480px; }
.aging tr.vacio td { color: var(--tenue); }
tr.alerta { background: var(--alerta-fondo); }
.declaracion {
  border-left: 3px solid var(--aviso-linea); background: var(--aviso-fondo);
  padding: .7rem 1rem; margin: 1rem 0; font-size: .9rem; max-width: 80ch;
}
.badge { color: var(--tenue); cursor: help; font-weight: 600; }
.tramo { font-size: .78rem; padding: .1rem .45rem; border-radius: 3px; background: #f3f4f6; }
.t-por_vencer { background: #ecfdf5; color: var(--ok); }
.t-61\+ , .t-31-60 { background: var(--alerta-fondo); color: var(--alerta); }
.sem { font-size: 1.1rem; }
.s-verde { color: var(--ok); } .s-rojo { color: var(--alerta); } .s-gris { color: var(--tenue); }
.motivo { font-size: .8rem; background: #f3f4f6; padding: .1rem .45rem; border-radius: 3px; }
.vacio-total { font-size: 1.2rem; color: var(--ok); }
/* La ficha del cliente (D34): pares etiqueta/valor en una grilla, no una tabla de datos. Se ve
   distinta a proposito — arriba va lo que se decide, abajo el detalle sobre el que se decide. */
.ficha { max-width: 900px; margin-bottom: 1rem; }
.ficha th { width: 1%; white-space: nowrap; padding-right: .2rem; }
.ficha td small { color: var(--tenue); font-weight: 400; }
/* La fila «no hay ninguno», que se muestra en vez de omitir la tabla: una tabla que desaparece
   se lee «no cargo», y aca significa «no hay documentos», que es lo contrario. */
td.vacio { color: var(--tenue); font-style: italic; }
/* Quien esta adentro, y la salida. Van al final de la barra, donde estaba el sello de
   «solo lectura»: el mismo lugar contesta la misma pregunta —que puedo hacer yo aca—. */
.quien { margin-left: auto; font-size: .85rem; }
.quien small { color: var(--tenue); border: 1px solid var(--linea); border-radius: 999px;
  padding: .1rem .5rem; margin-left: .3rem; }
.salir { display: inline; }
.salir button { background: none; border: 0; color: var(--acento); cursor: pointer;
  font: inherit; text-decoration: underline; padding: 0; }
/* El logo (D37, pedido del dueño). En la barra va chico y al lado del nombre; en el login,
   grande y arriba del formulario, que es la primera pantalla que alguien de WK va a ver. */
.marca { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  color: inherit; }
.marca img { display: block; border-radius: 4px; }
.logo-login { margin: 0 0 .5rem; }
.logo-login img { display: block; border-radius: 8px; }
/* La gestion de usuarios (D36): cada fila lleva sus dos formularios —cambiar rol y activar o
   desactivar— y tienen que caber en la celda sin empujar la tabla a dos lineas. */
.en-linea { display: inline; }
.en-linea select, .en-linea button { font: inherit; font-size: .85rem; }
.ficha .nota { display: block; margin-top: .2rem; }