:root { --tinta:#111; --borde:#d4d4d8; --fondo:#f4f4f5; --acento:#0f766e; --alerta:#b91c1c; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
       color:var(--tinta); background:var(--fondo); }
header { background:#18181b; color:#fff; padding:.9rem 1.2rem; display:flex;
         align-items:center; gap:1rem; flex-wrap:wrap; }
header a { color:#fff; text-decoration:none; font-weight:600; }
header .sp { margin-left:auto; font-size:.9rem; opacity:.85; }
main { max-width:900px; margin:0 auto; padding:1.2rem; }
.tarjeta { background:#fff; border:1px solid var(--borde); border-radius:10px;
           padding:1.1rem; margin-bottom:1.1rem; }
h1 { font-size:1.35rem; margin:.2rem 0 1rem; }
h2 { font-size:1.05rem; margin:0 0 .7rem; }
label { display:block; font-weight:600; margin:.6rem 0 .25rem; font-size:.92rem; }
input, select, textarea { width:100%; padding:.75rem; font-size:1.05rem;
        border:1px solid var(--borde); border-radius:8px; background:#fff; }
button { padding:.8rem 1.3rem; font-size:1.05rem; font-weight:600; border:0;
         border-radius:8px; background:var(--acento); color:#fff; cursor:pointer; }
button.gris { background:#52525b; }
table { width:100%; border-collapse:collapse; font-size:.93rem; }
th, td { text-align:left; padding:.5rem .4rem; border-bottom:1px solid var(--borde); }
th { font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:#52525b; }
.error { background:#fef2f2; border:1px solid #fecaca; color:var(--alerta);
         padding:.8rem; border-radius:8px; margin-bottom:1rem; }
.cmyk { display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; }
.chip { display:inline-block; background:#e4e4e7; border-radius:999px;
        padding:.2rem .7rem; font-size:.85rem; margin:.15rem .2rem .15rem 0; }
.vigente { background:#ecfdf5; border-color:#a7f3d0; }
.mono { font-family:ui-monospace,Menlo,Consolas,monospace; }
.suave { color:#71717a; font-size:.88rem; }

/* Marca en el header. El logo es un disco negro con anillo de color: sobre el header
   oscuro el disco se funde y queda flotando el anillo, que es justo el efecto buscado. */
header .marca { display:flex; align-items:center; gap:.55rem; }
header .marca img { display:block; border-radius:50%; }
.login-marca { text-align:center; }