/* ==========================================================
   Comunidad SCA — CSS personalizado estable
   Branding: SuarezCoss Academy
   Objetivo: moderno, profesional, legible y sin romper admin
   ========================================================== */

:root {
  --sca-gold: #d4af37;
  --sca-gold-light: #f2d46b;
  --sca-gold-dark: #b8891d;

  --sca-purple: #7c3aed;
  --sca-purple-dark: #6d28d9;
  --sca-purple-soft: rgba(124, 58, 237, 0.12);

  --sca-black: #0b0b0b;
  --sca-ink: #111827;
  --sca-text: #1f2937;
  --sca-muted: #64748b;

  --sca-bg: #f5f7fb;
  --sca-card: #ffffff;
  --sca-border: rgba(15, 23, 42, 0.12);

  --sca-radius-sm: 10px;
  --sca-radius-md: 14px;
  --sca-radius-lg: 20px;

  --sca-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06);
  --sca-shadow-md: 0 14px 34px rgba(15, 23, 42, 0.10);
}

/* ==========================================================
   Base general
   ========================================================== */

body,
button,
input,
select,
textarea {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: -0.01em;
}

body,
.admin-wrapper,
.ui {
  background: var(--sca-bg) !important;
  color: var(--sca-text) !important;
}

/* Links normales: legibles, no dorados globales */
a {
  color: var(--sca-purple-dark) !important;
}

a:hover {
  color: var(--sca-purple) !important;
}

/* Títulos */
h1,
h2,
h3,
h4,
h5 {
  color: var(--sca-ink) !important;
  letter-spacing: -0.025em;
}

/* ==========================================================
   Paneles, tarjetas y layout
   ========================================================== */

.column,
.drawer__inner,
.getting-started,
.status,
.account,
.account__section-headline,
.notification,
.compose-form,
.announcements-list,
.regeneration-indicator,
.columns-area__panels__pane,
.simple_form,
.box-widget,
.rules-list,
.report,
.item-list,
.dashboard__item,
.admin-wrapper .content,
.table-wrapper {
  border-radius: var(--sca-radius-md) !important;
  border: 1px solid var(--sca-border) !important;
  box-shadow: var(--sca-shadow-sm) !important;
  background: var(--sca-card) !important;
}

/* Evita que formularios admin se conviertan en login cards */
.admin-wrapper .simple_form,
.admin-wrapper form.simple_form {
  background: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--sca-radius-md) !important;
}

/* Cabeceras */
.column-header,
.tabs-bar,
.account__section-headline,
.admin-wrapper .content__heading,
.getting-started__wrapper {
  border-radius: var(--sca-radius-md) !important;
}

.column-header,
.tabs-bar {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid var(--sca-border) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Publicaciones */
.status,
.notification {
  margin-bottom: 10px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.status:hover,
.notification:hover {
  transform: translateY(-1px);
  box-shadow: var(--sca-shadow-md) !important;
  border-color: rgba(124, 58, 237, 0.20) !important;
}

/* ==========================================================
   Sidebar / navegación
   ========================================================== */

.navigation-panel,
.getting-started,
.drawer__inner {
  background: rgba(255, 255, 255, 0.92) !important;
}

/* Links del menú: legibles */
.navigation-panel a,
.getting-started a,
.drawer__inner a,
.admin-wrapper .sidebar a,
.admin-wrapper .content a {
  color: var(--sca-text) !important;
}

/* Link activo */
.tabs-bar__link.active,
.navigation-panel .column-link--transparent.active,
.column-link--transparent.active,
.admin-wrapper a.selected,
.admin-wrapper .selected,
.admin-wrapper .active {
  color: var(--sca-purple-dark) !important;
}

/* Iconos y labels del admin */
.admin-wrapper nav a,
.admin-wrapper .sidebar a,
.admin-wrapper .content a {
  font-weight: 500;
}

/* ==========================================================
   Inputs
   ========================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
select {
  border-radius: 12px !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  box-shadow: none !important;
  background: #ffffff !important;
  color: #0f172a !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--sca-purple-dark) !important;
  box-shadow: 0 0 0 4px var(--sca-purple-soft) !important;
  outline: none !important;
}

/* Labels y ayuda */
label,
.hint,
.input .hint,
.simple_form .hint,
.admin-wrapper p,
.admin-wrapper small {
  color: var(--sca-text) !important;
}

.hint,
.input .hint,
.simple_form .hint,
.admin-wrapper small {
  color: var(--sca-muted) !important;
}

/* ==========================================================
   Botones
   ========================================================== */

.button,
a.button,
button,
.simple_form .button,
.simple_form button,
.compose-form .button {
  border-radius: 12px !important;
  border: none !important;
  background: linear-gradient(135deg, var(--sca-purple-dark) 0%, var(--sca-purple) 100%) !important;
  color: #ffffff !important;
  font-weight: 750 !important;
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.22) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.button:hover,
a.button:hover,
button:hover,
.simple_form .button:hover,
.simple_form button:hover,
.compose-form .button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(124, 58, 237, 0.28) !important;
  opacity: 0.98;
}

/* Botones secundarios */
.button.button-secondary,
.button.logo-button,
.button-alternative {
  background: #ffffff !important;
  color: var(--sca-purple-dark) !important;
  border: 1px solid rgba(124, 58, 237, 0.22) !important;
  box-shadow: none !important;
}

/* Botón principal de guardar cambios */
.admin-wrapper button[type="submit"],
.admin-wrapper .button[type="submit"],
.admin-wrapper input[type="submit"] {
  background: linear-gradient(135deg, var(--sca-purple-dark), var(--sca-purple)) !important;
  color: #ffffff !important;
}

/* ==========================================================
   Compositor, búsqueda, tablas, chips
   ========================================================== */

.compose-form {
  background: #ffffff !important;
}

.compose-form .autosuggest-textarea__textarea,
.reply-indicator,
.compose-form__buttons-wrapper {
  border-radius: 12px !important;
}

.search,
.search__input,
.search input {
  border-radius: 999px !important;
}

table,
.table {
  border-collapse: separate;
  border-spacing: 0;
}

table th,
table td,
.table th,
.table td {
  border-color: rgba(148, 163, 184, 0.22) !important;
}

.tag,
.trends__item,
.batch-table__row,
.report-card,
.announcements-list__item {
  border-radius: 12px !important;
}

img,
.avatar,
.account__avatar,
.status__avatar img,
.account__avatar img,
.media-gallery__item-thumbnail img {
  border-radius: 12px;
}

/* ==========================================================
   Footer SCA: reemplazo visual del footer genérico
   ========================================================== */

.link-footer {
  margin-top: 24px !important;
  padding: 18px 16px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0.96), rgba(31, 41, 55, 0.96)) !important;
  border: 1px solid rgba(212, 175, 55, 0.26) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
  color: #f8fafc !important;
  text-align: left !important;
}

.link-footer p,
.link-footer a {
  display: none !important;
}

.link-footer::before {
  content: "Comunidad SCA\A Red social privada de SuarezCoss Academy\A\A Educación financiera · Mercados · Opciones · Gestión de riesgo\A\A Solo para miembros autorizados.\A support@suarezcossacademy.com";
  white-space: pre-line !important;
  display: block !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: #f8fafc !important;
  letter-spacing: -0.01em !important;
}

.link-footer::first-line {
  color: var(--sca-gold-light) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}

/* ==========================================================
   LOGIN / AUTH — limitado solo a páginas de autenticación
   Evita romper admin/settings
   ========================================================== */

/*
  Aplicamos look premium SOLO cuando la página parece ser auth.
  Esto usa rutas comunes de Mastodon/Hometown:
  - /auth/sign_in
  - /auth/sign_up
  - /auth/password/new
  - /auth/confirmation/new
*/

body:has(form[action*="/auth/sign_in"]),
body:has(form[action*="/auth"]),
body:has(.simple_form[action*="/auth"]) {
  background:
    radial-gradient(circle at top center, rgba(212, 175, 55, 0.12), transparent 34%),
    linear-gradient(135deg, #050505 0%, #0b0b0b 44%, #111827 100%) !important;
}

/* Título institucional solo en auth */
body:has(form[action*="/auth/sign_in"])::before,
body:has(form[action*="/auth"])::before {
  content: "SuarezCoss Academy Community";
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--sca-gold-light);
  font-weight: 850;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-align: center;
  z-index: 0;
}

body:has(form[action*="/auth/sign_in"])::after,
body:has(form[action*="/auth"])::after {
  content: "Red social privada para miembros autorizados";
  position: fixed;
  top: 118px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(248, 250, 252, 0.78);
  font-weight: 500;
  font-size: 13px;
  text-align: center;
  z-index: 0;
}

/* Tarjeta auth */
body:has(form[action*="/auth"]) form.simple_form,
body:has(form[action*="/auth/sign_in"]) form.simple_form {
  border-radius: 24px !important;
  border: 1px solid rgba(212, 175, 55, 0.24) !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
  padding: 34px !important;
  max-width: 520px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Badge solo en auth */
body:has(form[action*="/auth"]) form.simple_form::before,
body:has(form[action*="/auth/sign_in"]) form.simple_form::before {
  content: "ACCESO PRIVADO SCA";
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 18px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.15);
  color: #8a6414;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Titulares auth */
body:has(form[action*="/auth"]) form.simple_form h1,
body:has(form[action*="/auth/sign_in"]) form.simple_form h1 {
  font-size: 30px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
  font-weight: 850 !important;
  color: #0b0b0b !important;
  margin-bottom: 20px !important;
}

/* Texto auth */
body:has(form[action*="/auth"]) form.simple_form p,
body:has(form[action*="/auth/sign_in"]) form.simple_form p {
  color: #475569 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* Labels auth */
body:has(form[action*="/auth"]) form.simple_form label,
body:has(form[action*="/auth/sign_in"]) form.simple_form label {
  color: #111827 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

/* Inputs auth */
body:has(form[action*="/auth"]) form.simple_form input[type="email"],
body:has(form[action*="/auth"]) form.simple_form input[type="password"],
body:has(form[action*="/auth"]) form.simple_form input[type="text"] {
  height: 52px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(148, 163, 184, 0.42) !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  font-size: 15px !important;
  padding: 0 16px !important;
}

body:has(form[action*="/auth"]) form.simple_form input[type="email"]:focus,
body:has(form[action*="/auth"]) form.simple_form input[type="password"]:focus,
body:has(form[action*="/auth"]) form.simple_form input[type="text"]:focus {
  background: #ffffff !important;
  border-color: var(--sca-gold) !important;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18) !important;
}

/* Botón auth dorado */
body:has(form[action*="/auth"]) form.simple_form button,
body:has(form[action*="/auth"]) form.simple_form .button,
body:has(form[action*="/auth"]) form.simple_form input[type="submit"] {
  height: 52px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, var(--sca-gold) 0%, var(--sca-gold-light) 48%, var(--sca-gold-dark) 100%) !important;
  color: #0b0b0b !important;
  font-weight: 850 !important;
  font-size: 15px !important;
  box-shadow: 0 18px 36px rgba(212, 175, 55, 0.24) !important;
  border: none !important;
}

/* Links auth */
body:has(form[action*="/auth"]) .form-footer a,
body:has(form[action*="/auth"]) .sign-in__footer a,
body:has(form[action*="/auth"]) form.simple_form + p a {
  color: var(--sca-gold) !important;
  font-weight: 650 !important;
  text-decoration: none !important;
}

body:has(form[action*="/auth"]) .form-footer a:hover,
body:has(form[action*="/auth"]) .sign-in__footer a:hover,
body:has(form[action*="/auth"]) form.simple_form + p a:hover {
  color: var(--sca-gold-light) !important;
  text-decoration: underline !important;
}

/* Texto legal bajo auth */
body:has(form[action*="/auth"]) .auth-wrapper::after,
body:has(form[action*="/auth"]) .container::after {
  content: "Comunidad cerrada para miembros autorizados de SuarezCoss Academy. Contenido educativo; no asesoría financiera personalizada.";
  display: block;
  max-width: 560px;
  margin: 22px auto 0;
  color: rgba(248, 250, 252, 0.72);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

/* ==========================================================
   Modo oscuro controlado
   ========================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --sca-bg: #0b1220;
    --sca-card: #111827;
    --sca-text: #e5e7eb;
    --sca-muted: #94a3b8;
    --sca-border: rgba(148, 163, 184, 0.16);
    --sca-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.22);
    --sca-shadow-md: 0 14px 32px rgba(0, 0, 0, 0.28);
  }

  body,
  .admin-wrapper,
  .ui {
    background: var(--sca-bg) !important;
    color: var(--sca-text) !important;
  }

  .column,
  .drawer__inner,
  .getting-started,
  .status,
  .account,
  .account__section-headline,
  .notification,
  .compose-form,
  .announcements-list,
  .columns-area__panels__pane,
  .simple_form,
  .box-widget,
  .rules-list,
  .report,
  .item-list,
  .dashboard__item,
  .admin-wrapper .content,
  .table-wrapper,
  .navigation-panel {
    background: var(--sca-card) !important;
    border-color: var(--sca-border) !important;
    box-shadow: var(--sca-shadow-sm) !important;
  }

  .admin-wrapper .simple_form,
  .admin-wrapper form.simple_form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .column-header,
  .tabs-bar {
    background: rgba(17, 24, 39, 0.92) !important;
    border-color: var(--sca-border) !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  label,
  .admin-wrapper p {
    color: #e5e7eb !important;
  }

  .hint,
  .input .hint,
  .simple_form .hint,
  .admin-wrapper small {
    color: #94a3b8 !important;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="number"],
  textarea,
  select {
    background: #0f172a !important;
    color: #e5e7eb !important;
    border-color: rgba(148, 163, 184, 0.24) !important;
  }

  .button.button-secondary,
  .button.logo-button,
  .button-alternative {
    background: #111827 !important;
    color: #c4b5fd !important;
    border: 1px solid rgba(196, 181, 253, 0.25) !important;
  }

  .link-footer {
    background: linear-gradient(180deg, rgba(11, 11, 11, 0.98), rgba(17, 24, 39, 0.98)) !important;
    border-color: rgba(212, 175, 55, 0.28) !important;
  }

  /* Auth mantiene tarjeta clara para legibilidad */
  body:has(form[action*="/auth"]) form.simple_form {
    background: rgba(255, 255, 255, 0.97) !important;
  }

  body:has(form[action*="/auth"]) form.simple_form h1,
  body:has(form[action*="/auth"]) form.simple_form label,
  body:has(form[action*="/auth"]) form.simple_form p {
    color: #111827 !important;
  }

  body:has(form[action*="/auth"]) form.simple_form input[type="email"],
  body:has(form[action*="/auth"]) form.simple_form input[type="password"],
  body:has(form[action*="/auth"]) form.simple_form input[type="text"] {
    background: #f8fafc !important;
    color: #0f172a !important;
  }
}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 640px) {
  body:has(form[action*="/auth"])::before {
    top: 48px;
    font-size: 17px;
  }

  body:has(form[action*="/auth"])::after {
    top: 76px;
    font-size: 12px;
  }

  body:has(form[action*="/auth"]) form.simple_form {
    margin: 120px 16px 0 !important;
    padding: 26px !important;
    max-width: none !important;
  }

  body:has(form[action*="/auth"]) form.simple_form h1 {
    font-size: 25px !important;
  }
}