:root {
  --bg: #f3f0e9;
  --bg2: #ebe7de;
  --panel: #fffdf8;
  --line: #ddd8ce;
  --text: #1d1e1c;
  --muted: #75756e;
  --blue: #f25c3b;
  --cyan: #0aa678;
  --violet: #7057d6;
  --amber: #d99515;
  --danger: #d84758;
  --white: #fff;
  --ink: #1b1c1a;
  --ink-soft: #282925;
  --accent: #f25c3b;
  --success: #0aa678;
  --shadow: 0 18px 50px rgba(38, 34, 26, .1);
}

html,
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", sans-serif;
}

body {
  background-image:
    linear-gradient(rgba(38, 35, 28, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 35, 28, .025) 1px, transparent 1px);
  background-size: 32px 32px;
}

h1,
h2,
h3,
.brand strong,
.metric-grid strong,
.plan-price {
  font-family: "Space Grotesk", sans-serif !important;
}

.eyebrow {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: .15em;
}

em {
  color: var(--accent);
  font-family: "Space Grotesk", sans-serif;
  font-style: normal;
  font-weight: 700;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 7px;
  background: var(--accent);
  box-shadow: none;
  color: #fff;
  font: 700 12px/1 "Space Grotesk", sans-serif;
  letter-spacing: -.05em;
}

.brand--large .brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 8px;
}

.brand small {
  color: #928f87;
}

/* Acceso: una sola pieza centrada, no una portada de emisora. */
.login-shell {
  display: grid;
  grid-template-columns: 1fr;
  width: min(520px, calc(100% - 34px));
  min-height: 0;
  margin: 46px auto;
  overflow: hidden;
  border: 1px solid #d5d0c6;
  border-radius: 12px;
  background: #fffdf8;
  box-shadow: 0 26px 80px rgba(45, 39, 28, .14);
}

.login-art {
  min-height: 0;
  padding: 28px 32px 30px;
  background:
    radial-gradient(circle at 91% 0, rgba(242, 92, 59, .28), transparent 30%),
    var(--ink);
}

.login-art .brand strong {
  color: #fffdf8;
}

.login-art .brand small {
  color: #aaa89f;
}

.login-art::after,
.signal-line {
  display: none;
}

.login-copy {
  margin: 48px 0 0;
}

.login-copy h1 {
  max-width: 430px;
  color: #fffdf8;
  font: 600 clamp(36px, 7vw, 52px)/.98 "Space Grotesk", sans-serif;
  letter-spacing: -.055em;
}

.login-copy h1 em {
  color: var(--accent);
}

.login-copy p:last-child {
  max-width: 410px;
  margin: 20px 0 0;
  color: #aaa89f;
  font-size: 13px;
  line-height: 1.6;
}

.login-panel {
  display: block;
  padding: 32px;
  background: #fffdf8;
}

.login-card {
  width: 100%;
}

.login-card h2 {
  font-size: 32px;
  font-weight: 600;
}

.login-card > .muted {
  margin: 7px 0 28px;
}

.login-card label,
.form-panel label,
dialog label {
  color: #66665f;
}

.login-card input,
.form-panel input,
dialog input,
dialog select,
.table-tools input {
  border-color: #d9d4ca;
  border-radius: 7px;
  background: #fff;
  color: var(--text);
}

.login-card input:focus,
.form-panel input:focus,
dialog input:focus,
dialog select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(242, 92, 59, .12);
}

.primary-btn {
  border-radius: 7px;
  background: var(--accent);
  box-shadow: 0 8px 20px rgba(242, 92, 59, .2);
}

.primary-btn:hover {
  background: #db4d2f;
}

/* Aplicación */
.app-shell {
  grid-template-columns: 232px minmax(0, 1fr);
}

.sidebar {
  padding: 24px 16px;
  border-right: 0;
  background: var(--ink);
}

.sidebar .brand {
  padding: 0 8px 28px;
}

.sidebar .brand strong {
  color: #fff;
}

.sidebar .brand small {
  color: #74766f;
}

.sidebar nav {
  gap: 3px;
}

.nav-item {
  border-radius: 6px;
  padding: 11px 12px;
  color: #999b94;
  font-size: 12px;
  font-weight: 600;
}

.nav-item span {
  color: #70736c;
}

.nav-item:hover {
  background: #282925;
  color: #fff;
}

.nav-item.active {
  background: var(--accent);
  box-shadow: none;
  color: #fff;
}

.nav-item.active span {
  color: #fff;
}

.server-mini {
  border-color: #363833;
}

.server-mini b {
  color: #e8e6df;
}

.server-mini small,
.logout-btn {
  color: #7f817a;
}

.workspace {
  background: rgba(243, 240, 233, .92);
}

.topbar {
  height: 76px;
  padding: 0 34px;
  border-color: var(--line);
  background: rgba(255, 253, 248, .9);
}

.topbar p {
  color: #99968e;
}

.topbar h2,
.user-chip b {
  color: var(--text);
}

.user-chip > span {
  border-radius: 7px;
  background: #252623;
  color: #fff;
}

.content {
  padding-top: 34px;
}

.hero-row,
.section-head {
  margin-bottom: 26px;
}

.hero-row h1,
.section-head h1 {
  color: var(--text);
  font-weight: 600;
  letter-spacing: -.055em;
}

.metric-grid {
  gap: 12px;
}

.metric-grid article {
  min-height: 116px;
  padding: 18px;
  border-color: var(--line);
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 5px 18px rgba(47, 42, 32, .035);
}

.metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 7px;
}

.metric-icon.blue { background: #ffebe5; color: var(--accent); }
.metric-icon.cyan { background: #e4f5ef; color: var(--success); }
.metric-icon.violet { background: #eeeafd; color: var(--violet); }
.metric-icon.amber { background: #fff3d9; color: var(--amber); }
.metric-grid small { color: #8b8982; }
.metric-grid strong { color: var(--text); font-size: 27px; }
.metric-grid p { color: #98958d; }

.dashboard-grid {
  gap: 12px;
  margin-top: 12px;
}

.panel,
.table-panel,
.station-card {
  border-color: var(--line);
  border-radius: 8px;
  background: #fffdf8;
  box-shadow: 0 5px 18px rgba(47, 42, 32, .035);
}

.panel h3,
.station-card h3 {
  color: var(--text);
}

.station-row,
.station-card dl div,
.server-card dl div,
th,
td,
.audience-breakdown div,
.track-row {
  border-color: #e7e2d9;
}

.station-name > span,
.track-row > span:first-child {
  border-radius: 6px;
  background: #f3eee6;
  color: var(--accent);
}

.station-name b,
.station-card dd,
td,
.server-card dd,
.audience-breakdown dd {
  color: var(--text);
}

.text-btn,
.endpoint code,
.station-card .mount {
  color: var(--accent);
}

.server-orbit {
  border-color: #d8d1c5;
  box-shadow: 0 0 0 14px rgba(242, 92, 59, .035);
}

.server-orbit span {
  background: #252623;
  color: #fff;
}

.server-orbit i:last-child {
  background: var(--accent);
}

.table-tools {
  border-color: var(--line);
}

.table-tools input {
  border-color: var(--line);
  background: #fff;
  color: var(--text);
}

th {
  color: #8b8880;
}

.station-card {
  background: #fffdf8;
}

.station-card::before {
  width: 4px;
  background: var(--accent);
}

.secondary-btn {
  border-color: #d5d0c6;
  border-radius: 6px;
  background: #fff;
  color: #55564f;
}

.secondary-btn:hover {
  border-color: #bdb6aa;
  background: #f6f2eb;
}

.danger-btn {
  border-color: #e9c4c9;
  color: var(--danger);
}

.endpoint {
  border-color: var(--line);
  border-radius: 7px;
  background: #f7f3ec;
}

.check-list li {
  border-color: #e7e2d9;
  color: #66665f;
}

.check-list li::before {
  color: var(--success);
}

.form-panel input,
.analytics-filters select,
#autodjMount,
.autodj-settings select {
  border-color: #d9d4ca;
  background: #fff;
  color: #4f504a;
}

dialog {
  border-color: #d5d0c6;
  border-radius: 10px;
  background: #fffdf8;
  color: var(--text);
}

dialog::backdrop {
  background: rgba(24, 24, 21, .62);
}

dialog label {
  color: #66665f;
}

.close-btn {
  color: #77776f;
}

.credential-box > div {
  border-color: #dfd9cf;
  border-radius: 7px;
  background: #f7f3ec;
}

.credential-box small {
  color: #85837b;
}

.credential-box code {
  color: #bd452c;
}

#clientAccessDialog {
  width: min(640px, calc(100% - 30px));
}

.client-access-grid input[name="password"] {
  color: #bd452c !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: .02em;
}

.client-access-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e7e2d9;
}

.toast {
  border-color: #bde1d3;
  background: #e8f6f0;
  color: #087451;
}

.toast.error {
  border-color: #edc6cb;
  background: #fbecef;
  color: #b42e43;
}

/* Vistas especiales */
.backup-monitor,
.billing-automation,
.autodj-hero {
  background: #fffdf8;
}

.backup-summary,
.autodj-fallback {
  border-color: #e3dcd2;
  border-radius: 7px;
  background: #f7f3ec;
}

.backup-icon,
.automation-icon,
.autodj-icon {
  border-color: #f2c1b5;
  border-radius: 7px;
  background: #ffebe5;
  color: var(--accent);
}

.backup-details div,
.billing-alert,
.encoder-dialog-actions {
  border-color: #e7e2d9;
}

.plan-price {
  color: var(--text);
}

.plan-price small,
.legacy-badge,
.protected-note {
  color: var(--muted);
}

.upload-zone {
  border-color: #cfc8bc;
  border-radius: 8px;
  background: #f8f4ed;
}

.upload-zone:hover {
  border-color: var(--accent);
  background: #fff1ec;
}

.upload-zone span {
  color: var(--accent);
}

.chart-grid { stroke: #e5e0d7; }
.chart-average { stroke: var(--accent); }
.chart-peak { stroke: var(--success); }
.chart-legend i { background: var(--accent); }
.chart-legend .legend-peak { background: var(--success); }

/* Evita que los nombres extensos de las pistas ensanchen el panel. */
.track-panel,
.track-list,
.track-row,
.track-row > div {
  min-width: 0;
}

.track-row {
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
}

.track-row b {
  width: 100%;
  max-width: 100%;
}

.pill.active {
  background: #e4f5ef;
  color: #087b59;
}

.pill.suspended,
.pill.offline {
  background: #f9e9eb;
  color: #b83e50;
}

.pill.setup,
.pill.pending {
  background: #fff2d7;
  color: #9a6700;
}

@media (max-width: 760px) {
  .login-shell {
    width: calc(100% - 24px);
    margin: 12px auto;
  }

  .login-art {
    min-height: 0;
    padding: 24px;
  }

  .login-copy {
    margin-top: 34px;
  }

  .login-copy h1 {
    font-size: 38px;
  }

  .login-panel {
    padding: 26px 24px;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    background: var(--ink);
  }

  .menu-btn {
    color: var(--text);
  }

  .topbar {
    height: 68px;
  }

  /* Los valores largos del encoder necesitan el ancho completo en móvil. */
  #encoderDialog .credential-box > div:nth-child(3),
  #encoderDialog .credential-box > div:nth-child(8) {
    grid-column: 1 / -1;
  }

  #encoderDialog .credential-box code {
    line-height: 1.3;
  }

  .track-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .client-access-grid {
    grid-template-columns: 1fr;
  }
}

/* Contraste consistente en todos los formularios. */
html {
  color-scheme: light;
}

.login-card label,
.form-panel label,
dialog label,
.check-field,
.autodj-settings label {
  color: #50514b !important;
  -webkit-text-fill-color: #50514b;
}

.login-card input,
.form-panel input,
dialog input,
dialog select,
.table-tools input,
.analytics-filters select,
#autodjMount,
.autodj-settings select {
  border-color: #cfc8bd !important;
  background-color: #fff !important;
  color: #20211f !important;
  caret-color: var(--accent);
  -webkit-text-fill-color: #20211f !important;
  opacity: 1;
}

.login-card input::placeholder,
.form-panel input::placeholder,
dialog input::placeholder,
.table-tools input::placeholder {
  color: #77766f !important;
  -webkit-text-fill-color: #77766f !important;
  opacity: 1;
}

.login-card input:focus,
.form-panel input:focus,
dialog input:focus,
dialog select:focus,
.table-tools input:focus,
.analytics-filters select:focus,
#autodjMount:focus,
.autodj-settings select:focus {
  border-color: var(--accent) !important;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(242, 92, 59, .14) !important;
}

select option,
select optgroup {
  background: #fff;
  color: #20211f;
  -webkit-text-fill-color: #20211f;
}

input:disabled,
select:disabled,
input[readonly] {
  background-color: #f1ede6 !important;
  color: #5e5f59 !important;
  -webkit-text-fill-color: #5e5f59 !important;
  opacity: 1;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #20211f !important;
  caret-color: var(--accent);
}

.form-error {
  color: #b82f43;
}