:root {
  --fondo: #f6f7f9;
  --papel: #ffffff;
  --texto: #1c1e21;
  --tenue: #6b7280;
  --borde: #e4e6ea;
  --azul: #2f6fed;
  --rojo: #d0342c;
}

* { box-sizing: border-box; }

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

.barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 24px;
  background: var(--papel); border-bottom: 1px solid var(--borde);
}
.marca { font-weight: 600; text-decoration: none; color: var(--texto); }
.barra nav a { margin-left: 16px; text-decoration: none; color: var(--azul); }

main { max-width: 860px; margin: 28px auto; padding: 0 20px; }

h1 { font-size: 1.5rem; margin: 0 0 4px; }
h2 { font-size: 1.05rem; margin: 0 0 14px; }

.tarjeta {
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: 12px; padding: 22px; margin-bottom: 20px;
}
.estrecha { max-width: 380px; margin: 60px auto; }
.centro { text-align: center; }

label { display: block; font-size: .82rem; font-weight: 600; margin: 14px 0 5px; }
input[type=text], input[type=password] {
  width: 100%; padding: 10px 12px; font-size: .95rem;
  border: 1px solid var(--borde); border-radius: 8px; background: #fff;
}
input:focus { outline: 2px solid rgba(47,111,237,.35); border-color: var(--azul); }

button {
  margin-top: 16px; padding: 10px 18px; font-size: .92rem; font-weight: 600;
  background: var(--azul); color: #fff; border: 0; border-radius: 8px; cursor: pointer;
}
button:hover { filter: brightness(1.08); }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .dos-columnas { grid-template-columns: 1fr; } }

.alerta {
  background: #fdecea; color: var(--rojo);
  border: 1px solid #f5c6c2; border-radius: 8px; padding: 10px 12px; font-size: .9rem;
}
.exito {
  background: #eef4ff; border: 1px solid #cfe0ff;
  border-radius: 10px; padding: 14px; margin-bottom: 6px;
}
.fila-copia { display: flex; gap: 8px; }
.fila-copia input { font-weight: 600; }
.fila-copia button { margin-top: 0; white-space: nowrap; }

.tenue { color: var(--tenue); }
.mini { font-size: .82rem; }

.metricas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 20px; }
@media (max-width: 560px) { .metricas { grid-template-columns: 1fr; } }
.metrica {
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column;
}
.metrica .numero { font-size: 1.9rem; font-weight: 700; }
.metrica .etiqueta { font-size: .8rem; color: var(--tenue); }

table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--borde); }
th { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); }
td.num, th.num { text-align: right; }
.truncar { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.en-linea { display: inline; }
.mini-boton {
  margin: 0; padding: 4px 10px; font-size: .76rem; font-weight: 500;
  background: #eef0f3; color: var(--texto);
}
.mini-boton.peligro { background: #fdecea; color: var(--rojo); }

footer { text-align: center; color: var(--tenue); font-size: .8rem; padding: 24px; }
code { background: #eef0f3; padding: 2px 6px; border-radius: 5px; }

.aviso {
  background: #fff8e1; border: 1px solid #f2dfa0; color: #6b5310;
  border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; font-size: .86rem;
}
.aviso code { background: #f4e9c6; }