/* Sistema visual de Internal Toolbox. Tailwind CDN pone la maquetación; esto pone la identidad. */
:root {
  --ink: #14171c;
  --graphite: #5b6169;
  --mute: #8b9199;
  --canvas: #eceef0;
  --line: #dcdfe3;
  --surface: #fff;
  --red: #b20005;
  --red-deep: #8a0004;
  --red-tint: #fdecec;
  --ok: #17803d;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, sans-serif;
}

html { background: var(--canvas); }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--canvas);
  background-image: radial-gradient(#cfd3d8 1px, transparent 1px);
  background-size: 22px 22px;
}
h1, h2, h3, .font-display { font-family: var(--font-display); letter-spacing: -0.015em; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ── Cabecera ─────────────────────────────────────────── */
.topbar { background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav-link { position: relative; padding: .5rem .15rem; color: var(--graphite); font-weight: 500; font-size: .9rem; white-space: nowrap; }
.nav-link:hover { color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--red); font-weight: 600; }
.nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.05rem; height: 2px; background: var(--red); }

/* ── Superficies ──────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 0 rgba(20,23,28,.04); }
.card-pad { padding: 1.5rem; }
.step { display: flex; align-items: center; gap: .65rem; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-bottom: 1rem; }
.step > span:first-child { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--ink); color: #fff; font-size: .75rem; font-family: var(--font-body); }
.hint { font-size: .8rem; color: var(--mute); }

/* ── Cabecera de herramienta ──────────────────────────── */
.tool-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.75rem; }
.tool-chip { flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 12px; background: var(--red); color: #fff; box-shadow: 4px 4px 0 var(--red-tint); }
.back { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--graphite); }
.back:hover { color: var(--red); }

/* ── Controles ────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .6rem 1.1rem; border-radius: 10px; font-weight: 600; font-size: .9rem; border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:not(:disabled):hover { background: var(--red-deep); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:not(:disabled):hover { background: #000; }
.btn-soft { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-soft:not(:disabled):hover { border-color: var(--ink); }
.btn-danger { background: #fff; border-color: #f0c4c4; color: var(--red); }
.btn-danger:hover { background: var(--red-tint); }
.btn-sm { padding: .3rem .7rem; font-size: .78rem; border-radius: 8px; }
.btn-block { width: 100%; padding: .8rem 1rem; }

.field { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .55rem .75rem; font-size: .9rem; transition: border-color .15s, box-shadow .15s; }
.field:hover { border-color: #b9bec5; }
.field:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-tint); }
.field-sm { padding: .3rem .55rem; font-size: .8rem; border-radius: 8px; }
.label { display: block; font-size: .8rem; font-weight: 600; color: var(--graphite); margin-bottom: .3rem; }

/* Conmutador de formato (segmentado) */
.seg { display: inline-flex; padding: 3px; background: var(--canvas); border-radius: 10px; gap: 2px; }
.seg button, .seg label { padding: .35rem .95rem; border-radius: 8px; font-size: .84rem; font-weight: 600; color: var(--graphite); cursor: pointer; }
.seg .on { background: #fff; color: var(--red); box-shadow: 0 1px 3px rgba(20,23,28,.15); }

/* Zona de subida */
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; width: 100%; min-height: 10rem; border: 2px dashed #c3c8ce; border-radius: 12px; background: #fafbfb; color: var(--graphite); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--red); background: var(--red-tint); }
.drop-icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--red); }

.file-pill { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; padding: .55rem .9rem; border-radius: 10px; background: var(--red-tint); border: 1px solid #f0c4c4; font-size: .88rem; }

.alert { display: flex; gap: .6rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 10px; font-size: .88rem; background: var(--red-tint); border: 1px solid #f0c4c4; color: var(--red-deep); }
.alert-note { background: #fff8e1; border-color: #f1dfa0; color: #6b5300; }

/* Salida de texto */
.out { width: 100%; font: .78rem/1.65 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; background: #101318; color: #d9dde2; border: 0; border-radius: 12px; padding: 1rem 1.1rem; resize: vertical; }
.out:focus { outline: 2px solid var(--red); }
textarea[readonly] { caret-color: transparent; }

.checker { background-color: #fff; background-image: conic-gradient(#e4e6e9 25%, transparent 0 50%, #e4e6e9 0 75%, transparent 0); background-size: 16px 16px; }
.stat { background: var(--canvas); border-radius: 10px; padding: .55rem .75rem; font-size: .75rem; color: var(--mute); }
.stat b { display: block; font-size: .85rem; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--red); cursor: pointer; }
input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; height: 1.25rem; }
input[type="range"]::-webkit-slider-runnable-track { height: .4rem; border-radius: 9999px; background: linear-gradient(90deg, var(--red) var(--fill, 85%), #dcdfe3 var(--fill, 85%)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.15rem; height: 1.15rem; margin-top: -.375rem; border-radius: 50%; background: #fff; border: 3px solid var(--red); cursor: pointer; }
input[type="range"]::-moz-range-track { height: .4rem; border-radius: 9999px; background: #dcdfe3; }
input[type="range"]::-moz-range-progress { height: .4rem; border-radius: 9999px; background: var(--red); }
input[type="range"]::-moz-range-thumb { width: 1rem; height: 1rem; border-radius: 50%; background: #fff; border: 3px solid var(--red); cursor: pointer; }

/* ── Dashboard ────────────────────────────────────────── */
.tool-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; }
.tool-card:hover { border-color: var(--red); box-shadow: 6px 6px 0 var(--red-tint); transform: translate(-2px, -2px); }
.tool-art { background: var(--canvas); border-bottom: 1px solid var(--line); height: 9.5rem; display: grid; place-items: center; }
.tool-art svg { width: 100%; height: 100%; }
.tool-open { font-weight: 600; font-size: .85rem; color: var(--red); }
.tool-card:hover .tool-open { text-decoration: underline; text-underline-offset: 3px; }

.art-scan { transform: translateY(0); }
.art-crop { transform-origin: 120px 70px; }
.art-line { transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  .art-scan { transition: transform .9s ease-in-out; }
  .tool-card:hover .art-scan { transform: translateY(72px); }
  .art-crop { transition: transform .4s cubic-bezier(.3,.7,.3,1); }
  .tool-card:hover .art-crop { transform: scale(.82); }
  .art-line { transition: transform .5s ease; }
  .tool-card:hover .art-line { transform: scaleX(1.18); }
}

/* ── Usuarios ─────────────────────────────────────────── */
.avatar { display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .85rem; }
.avatar.off { background: #c3c8ce; }
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; }
.badge-admin { background: var(--red-tint); color: var(--red); }
.badge-user { background: var(--canvas); color: var(--graphite); }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok); }
.dot.off { background: #b9bec5; }
.users-table th { text-align: left; font-size: .78rem; font-weight: 600; color: var(--mute); padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: #fafbfb; }
.users-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.users-table tr:last-child td { border-bottom: 0; }
details.pw > summary { list-style: none; cursor: pointer; }
details.pw > summary::-webkit-details-marker { display: none; }