/* Estilos propios del portal de Studio Hub. Sin fuentes externas (RGPD). */
:root {
  --sh-ink: #2f2c28;
  --sh-ink-soft: #5f5a52;
  --sh-line: #d9d4cc;
  --sh-canvas: #f5f3f0;
  --sh-card: #ffffff;
  --sh-accent: #2399a6;
  --sh-accent-dark: #1b7781;
  --sh-danger: #c23e2b;
  --sh-success-bg: #e6f4ec;
  --sh-success-line: #3fa96b;
  --sh-error-bg: #fbe9e6;
  --sh-error-line: #e2543f;
  --sh-info-bg: #eaf0fd;
  --sh-info-line: #4c7df0;
  --sh-radius: 10px;
}

html, body {
  margin: 0;
  background: var(--sh-canvas);
  color: var(--sh-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

a { color: var(--sh-accent-dark); }

.sh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: var(--sh-ink);
  color: #fff;
}

.sh-brand { color: #fff; font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.sh-nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sh-nav a, .sh-user { color: #fff; }
.sh-main { padding: 2rem 1rem 3rem; min-height: calc(100vh - 9rem); }
.sh-footer { padding: 1rem; text-align: center; color: var(--sh-ink-soft); font-size: 0.85rem; }

.sh-card, .sh-panel {
  margin: 0 auto;
  background: var(--sh-card);
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-radius);
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.sh-card { max-width: 28rem; }
.sh-panel { max-width: 64rem; }
.sh-card-title, .sh-panel h1 { margin: 0 0 0.5rem; font-size: 1.5rem; }
.sh-card-subtitle { margin: 0 0 1.25rem; color: var(--sh-ink-soft); }

.sh-form { display: flex; flex-direction: column; gap: 0.35rem; }
.sh-form h2 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.sh-form label { font-weight: 600; margin-top: 0.6rem; }
.sh-form input, .sh-form textarea {
  font: inherit;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--sh-line);
  border-radius: 6px;
  background: #fff;
}
.sh-form input:focus, .sh-form textarea:focus { outline: 2px solid var(--sh-accent); outline-offset: 1px; }
.sh-form input.invalid { border-color: var(--sh-error-line); }
.sh-help { color: var(--sh-ink-soft); font-size: 0.85rem; }
.sh-field-error, .validation-message { color: var(--sh-danger); font-size: 0.9rem; }

.sh-button, .sh-link-button {
  font: inherit;
  cursor: pointer;
}

.sh-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.65rem 1.25rem;
  border: 0;
  border-radius: 6px;
  background: var(--sh-accent);
  color: #fff;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.sh-button:hover { background: var(--sh-accent-dark); }
.sh-button:disabled { background: var(--sh-line); color: var(--sh-ink-soft); cursor: not-allowed; }
.sh-button-secondary { background: #fff; color: var(--sh-accent-dark); border: 1px solid var(--sh-accent); }
.sh-button-secondary:hover { background: var(--sh-canvas); }
.sh-button-danger { background: var(--sh-danger); }
.sh-button-danger:hover { background: #9e3122; }

.sh-link-button { background: none; border: 0; color: #fff; text-decoration: underline; padding: 0; }
.sh-inline-form { display: inline; margin: 0; }

.sh-links { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin: 1.25rem 0 0; }
.sh-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.sh-notice { border-left: 4px solid var(--sh-info-line); background: var(--sh-info-bg); padding: 0.75rem 1rem; border-radius: 6px; margin: 0 0 1rem; }
.sh-notice p { margin: 0.25rem 0; }
.sh-notice-success { border-color: var(--sh-success-line); background: var(--sh-success-bg); }
.sh-notice-error { border-color: var(--sh-error-line); background: var(--sh-error-bg); }

.sh-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.sh-table th, .sh-table td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--sh-line); }
.sh-table th { font-size: 0.85rem; color: var(--sh-ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }

.sh-details { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.5rem; margin: 1rem 0 1.5rem; }
.sh-details dt { font-weight: 600; color: var(--sh-ink-soft); }
.sh-details dd { margin: 0; }

.sh-decisions { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2rem; }

.sh-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1:focus { outline: none; }

/* Equipos: código de emparejamiento y filas de equipos revocados. */
.sh-code-box { border: 1px solid var(--sh-accent); border-radius: var(--sh-radius); background: var(--sh-info-bg); padding: 1rem 1.25rem; margin: 0 0 1rem; }
.sh-code-box p { margin: 0.25rem 0; }
.sh-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 2.2rem; font-weight: 700; letter-spacing: 0.35em; color: var(--sh-ink); }
.sh-row-muted td { color: var(--sh-ink-soft); }
.sh-panel h2 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }
.sh-table td.sh-wrap { overflow-wrap: anywhere; }
.sh-table td code, .sh-table td a { white-space: nowrap; }
.sh-toolbar { margin: 0 0 1.25rem; }

/* Eventos y sites: enlace, QR y tabla ancha. */
.sh-panel-wide { max-width: 80rem; }
.sh-table-scroll { overflow-x: auto; }
.sh-link-box { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0 1rem; }
.sh-link-box .sh-button { margin-top: 0; }
.sh-link-input { flex: 1 1 22rem; font: inherit; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; padding: 0.6rem 0.75rem; border: 1px solid var(--sh-line); border-radius: 6px; background: var(--sh-canvas); }
.sh-qr { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; margin: 0 0 1.5rem; }
.sh-form select { font: inherit; padding: 0.55rem 0.6rem; border: 1px solid var(--sh-line); border-radius: 6px; background: #fff; }
@media (max-width: 40rem) {
  .sh-card, .sh-panel { padding: 1.25rem; }
  .sh-details { grid-template-columns: 1fr; }
}