:root{
  /* Tema claro (por defecto) */
  --md-background: transparent;
  --md-foreground: #090a08;
  --md-surface: #ffffff;
  --md-border: rgba(0, 0, 0, 0.12);
  --md-border-strong: #c9ccdb;
  --md-radius: 12px;
  --md-radius-pill: 999px;
  --md-color-primary: #1063ff;
  --md-color-primary-contrast: #fff;
  --md-color-secondary: #f0b138;
  --md-color-secondary-contrast: #090a08;
  --md-color-success: #00c975;
  --md-color-danger: #ff2615;
  --md-color-warning: #edd500;
  --md-color-info: #b3cdff;
  --md-url-color: #1063ff;
  --md-focus: #0a57ff;
  --md-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --md-font-body: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --md-font-display: "DM Serif Text", serif;
}

:root[data-theme="dark"] {
  /* Tema oscuro */
  /* --md-background: #0d0d0d !important; */
  --md-background:transparent;
  --md-foreground: #e8e8e8 !important;
  --md-surface: #1a1a1a !important;
  --md-border: rgba(255, 255, 255, 0.15) !important;
  --md-border-strong: #3a4060 !important;
  --md-url-color: #b3cdff !important;
  --md-focus: #6da1ff !important;
  --md-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.md-btn {
    background-color: var(--wp--preset--color--primary);
    border-radius: 100px;
    color: var(--wp--preset--color--primary-contrast);
    font-family: var(--wp--preset--font-family--default);
    font-style: normal;
    font-weight: 500;
    padding-top: var(--wp--preset--spacing--30);
    padding-bottom: var(--wp--preset--spacing--30);
    border: none;;
}


.md-btn--secondary{
    background-color: var(--wp--preset--color--secondary) !important;
}

/* ── Contexto WordPress: resetea el sizing pensado para viewport completo ── */
[class^="mdt-"] {
    min-height: auto !important;
    box-sizing: border-box;
}
[class^="mdt-"] .md-card {
    width: min(900px, 100%) !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Extension de correcciones y mejroas */ 

.wrapper-app {
  width: min(980px, 92vw);
    background: var(--md-surface, #fff);
    color: var(--md-foreground);
    padding: 1.25rem 1.25rem 1.5rem;
    border-radius: var(--md-radius);
}

.wrapper-app #title {
  display: none !important;
}

body .wrapper-app input[type="text"], textarea, input[type="url"], input[type="search"],input[type="email"], input[type="password"] {
background-color: var(--md-surface) !important;
}

/* Toggle button*/
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .65rem;
    border: 1px solid var(--md-border, rgba(0, 0, 0, .12));
    border-radius: 999px;
    background: transparent;
    color: var(--md-foreground);
    cursor: pointer;
    line-height: 1;
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
}

#iconMoon {
    display: none;
}

[data-theme="dark"] #iconMoon {
    display: block;
}

[data-theme="dark"] #iconSun {
    display: none;
}


.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--md-border);
    border-radius: 50%;
    background: var(--md-surface);
    color: var(--md-foreground);
    cursor: pointer;
}