@font-face { font-family: "Manrope"; src: url("fuentes/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --marca: #1e6f68;
  --marca-suave: #e6f1ef;
  --fondo: #f6f7f6;
  --superficie: #ffffff;
  --texto: #1d2321;
  --texto-2: #5c6662;
  --borde: #dfe4e2;
  --ok: #1f7a4d; --ok-suave: #e3f3ea;
  --aviso: #8a5a00; --aviso-suave: #fbf0d9;
  --error: #b42318; --error-suave: #fdecea;
  --radio: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --marca-suave: #17302d; --fondo: #111514; --superficie: #1a1f1e; --texto: #e8ecea;
    --texto-2: #a3aeaa; --borde: #2c3533; --ok-suave: #15301f; --aviso-suave: #33290f; --error-suave: #3a1a17;
    --ok: #6fcf97; --aviso: #f2c063; --error: #f28b82;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 15px/1.5 "Manrope", system-ui, sans-serif; }
a { color: var(--marca); }
.contenedor { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
header.barra { background: var(--superficie); border-bottom: 1px solid var(--borde); }
header.barra .contenedor { display: flex; align-items: center; gap: 14px; min-height: 64px; flex-wrap: wrap; }
header.barra img { height: 30px; }
header.barra .titulo { font-weight: 700; font-size: 17px; }
header.barra .derecha { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--texto-2); font-size: 14px; }
main.contenedor { padding-top: 28px; padding-bottom: 60px; }
h1 { font-size: 26px; margin: 0 0 6px; letter-spacing: -0.01em; }
h2 { font-size: 18px; margin: 0 0 12px; }
.sub { color: var(--texto-2); margin: 0 0 22px; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; margin-bottom: 18px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.ayuda { font-weight: 400; color: var(--texto-2); font-size: 12.5px; margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=url], textarea, select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie);
  color: var(--texto); font: inherit; }
textarea { min-height: 120px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--marca); outline-offset: 1px; }
.check { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 14px; }
.check input { margin-top: 4px; }
button, .boton { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--marca);
  background: var(--marca); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
button.secundario, .boton.secundario { background: transparent; color: var(--marca); }
button.peligro { background: transparent; border-color: var(--error); color: var(--error); }
.mini { padding: 5px 10px !important; font-size: 13px; font-weight: 600; }
button:disabled { opacity: .5; cursor: default; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 20px; overflow-x: auto; }
.pestanas button { background: none; border: none; border-bottom: 2px solid transparent; color: var(--texto-2); border-radius: 0; padding: 10px 14px; white-space: nowrap; }
.pestanas button.activa { color: var(--texto); border-bottom-color: var(--marca); }
.pestanas button .etiqueta { margin-left: 6px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { color: var(--texto-2); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; }
.tabla-scroll { overflow-x: auto; }
.etiqueta { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--marca-suave); color: var(--marca); }
.etiqueta.ok { background: var(--ok-suave); color: var(--ok); }
.etiqueta.aviso { background: var(--aviso-suave); color: var(--aviso); }
.etiqueta.error { background: var(--error-suave); color: var(--error); }
.etiqueta.gris { background: var(--fondo); color: var(--texto-2); border: 1px solid var(--borde); }
.mensaje { padding: 12px 14px; border-radius: 8px; margin: 12px 0; background: var(--marca-suave); }
.mensaje.error { background: var(--error-suave); color: var(--error); }
.mensaje.ok { background: var(--ok-suave); color: var(--ok); }
.enlace-caja { display: flex; gap: 8px; align-items: center; background: var(--fondo); border: 1px dashed var(--borde); border-radius: 8px; padding: 10px; word-break: break-all; font-size: 13.5px; }
.resultado { white-space: pre-wrap; background: var(--fondo); border-radius: 8px; padding: 14px; font-size: 14px; margin-top: 10px; }
.vacio { color: var(--texto-2); text-align: center; padding: 26px 0; }
.oculto { display: none !important; }
.centrado { max-width: 420px; margin: 8vh auto 0; }
.secreto { font-family: ui-monospace, monospace; background: var(--aviso-suave); color: var(--aviso); padding: 10px; border-radius: 8px; word-break: break-all; }
@media (max-width: 640px) {
  th.opcional, td.opcional { display: none; }
  h1 { font-size: 22px; }
}
[hidden] { display: none !important; }