/* ===========================================================
   Material You 3 – Paleta Rojo / Negro / Blanco (Pro)
   - Tokens de color (light/dark)
   - Tipografía, elevaciones, radios
   - Botones (filled/tonal/outline/text/elevated)
   - Inputs “outlined” con focus ring MD3
   - Cards, paginación, utilidades
   - Sin tocar tu HTML existente (clases originales conservadas)
   =========================================================== */

/* Base reset */
* { box-sizing: border-box; }
html, body { padding: 0; margin: 0; min-width: 320px; }

/* =========================
   Tokens (Light)
   ========================= */
:root{
  /* Marca (rojo) */
  --md3-primary:                 #D32F2F;
  --md3-on-primary:              #FFFFFF;
  --md3-primary-container:       #FFEBEE;
  --md3-on-primary-container:    #5E0F12;

  /* Soporte (gris/negro) */
  --md3-secondary:               #2E2E2E;
  --md3-on-secondary:            #FFFFFF;
  --md3-secondary-container:     #EEEEEE;
  --md3-on-secondary-container:  #111111;

  /* Terciario (acento) */
  --md3-tertiary:                #B71C1C;
  --md3-on-tertiary:             #FFFFFF;
  --md3-tertiary-container:      #FDE7E9;
  --md3-on-tertiary-container:   #3B0A0B;

  /* Error */
  --md3-error:                   #C62828;
  --md3-on-error:                #FFFFFF;
  --md3-error-container:         #FCE4EC;
  --md3-on-error-container:      #40000A;

  /* Superficies */
  --md3-surface:                 #FFFFFF;
  --md3-surface-container:       #F7F7F7;
  --md3-surface-container-high:  #EFEFEF;
  --md3-on-surface:              #0B0B0C;
  --md3-on-surface-variant:      #545454;

  /* Líneas */
  --md3-outline:                 #BDBDBD;
  --md3-outline-variant:         #E0E0E0;

  /* Sombra base (RGB) */
  --md3-shadow:                  0,0,0;

  /* Tipografía y ritmo */
  --md3-font: "Inter","Open Sans","Helvetica Neue",system-ui,Segoe UI,Arial,sans-serif;
  --md3-line: 1.6;

  /* Radios */
  --md3-radius-xs: 8px;
  --md3-radius-sm: 12px;
  --md3-radius-md: 16px;
  --md3-radius-lg: 24px;

  /* Elevaciones */
  --elev-0: 0 0 0 0 rgba(var(--md3-shadow),0);
  --elev-1: 0 1px 2px rgba(var(--md3-shadow),0.3), 0 1px 3px 1px rgba(var(--md3-shadow),0.15);
  --elev-2: 0 2px 6px rgba(var(--md3-shadow),0.25), 0 1px 2px rgba(var(--md3-shadow),0.12);
  --elev-3: 0 4px 8px rgba(var(--md3-shadow),0.22), 0 2px 4px rgba(var(--md3-shadow),0.12);

  /* Estados */
  --state-hover: .08;
  --state-focus: .12;
  --state-press: .12;

  /* Transiciones */
  --t-fast: 120ms cubic-bezier(.2,.0,.2,1);
  --t-med:  200ms cubic-bezier(.2,.0,.2,1);
}

/* =========================
   Tokens (Dark)
   ========================= */
@media (prefers-color-scheme: dark){
  :root{
    --md3-primary:                 #FF5252;
    --md3-on-primary:              #2B0000;
    --md3-primary-container:       #8A2C2C;
    --md3-on-primary-container:    #FFEDEE;

    --md3-secondary:               #E0E0E0;
    --md3-on-secondary:            #1E1E1E;
    --md3-secondary-container:     #3A3A3A;
    --md3-on-secondary-container:  #FAFAFA;

    --md3-tertiary:                #FF8A80;
    --md3-on-tertiary:             #2B0A0A;
    --md3-tertiary-container:      #6A2A2A;
    --md3-on-tertiary-container:   #FFE9EA;

    --md3-error:                   #FF6F61;
    --md3-on-error:                #300606;
    --md3-error-container:         #742A2A;
    --md3-on-error-container:      #FFDADA;

    /* 👇 Cambiado: gris oscuro en vez de negro puro */
    --md3-surface:                 #1E1E1E;     /* fondo principal */
    --md3-surface-container:       #2A2A2A;     /* cards/container */
    --md3-surface-container-high:  #333333;     /* contraste */
    --md3-on-surface:              #F5F5F5;     /* texto */
    --md3-on-surface-variant:      #C0C0C0;     /* texto secundario */

    --md3-outline:                 #5C5C5C;
    --md3-outline-variant:         #3A3A3A;
  }
}
/* =========================
   Base tipográfica / colores
   ========================= */
body{
  background: var(--md3-surface);
  color: var(--md3-on-surface);
  font-family: var(--md3-font);
  font-size: 16px;
  line-height: var(--md3-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{
  color: var(--md3-primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--md3-primary), transparent 60%);
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
a:hover{ text-decoration-color: currentColor; }
a:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--md3-primary), white 60%);
  outline-offset: 2px;
  border-radius: 6px;
}

label{ cursor: pointer; color: var(--md3-on-surface-variant); }
h1,h2,h3,h4{ font-weight: 600; letter-spacing:.1px; }
h1{ font-size: clamp(28px,3vw,34px); line-height:1.2; }
h2{ font-size: clamp(22px,2.2vw,28px); line-height:1.25; }
h3{ font-size: 20px; }
h4{ font-size: 18px; }
.section{ margin-block: 32px 40px; }

/* =========================
   Contenedores / Cards
   ========================= */
.container{
  margin: 56px auto 24px;
  max-width: 640px;
  padding-inline: 16px;
}

.wrap{
  background: var(--md3-surface-container);
  border: 1px solid var(--md3-outline-variant);
  border-radius: var(--md3-radius-md);
  padding: 28px;
  box-shadow: var(--elev-1);
  transition: box-shadow var(--t-med), background var(--t-med), border-color var(--t-fast);
}
.wrap:hover{ box-shadow: var(--elev-2); }

.header{
  border-bottom: 1px solid var(--md3-outline-variant);
  padding-bottom: 12px;
  margin-bottom: 24px;
}
.header .logo img{ width:auto; max-width: 160px; height:auto; }

/* =========================
   Inputs (Outlined)
   ========================= */
input[type="text"], input[type="email"], input[type="password"], select{
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  color: var(--md3-on-surface);
  background: var(--md3-surface);
  border: 1px solid var(--md3-outline);
  border-radius: var(--md3-radius-sm);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
input::placeholder{ color: color-mix(in oklab, var(--md3-on-surface-variant), transparent 30%); }
input:focus{
  border-color: var(--md3-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--md3-primary), transparent 80%);
}
input:focus::placeholder{ color: transparent; }
input[disabled]{ opacity:.38; }

.form .nonce{ display:none; }
.form .captcha{ margin-top: 30px; }

/* =========================
   Botones (MD3)
   ========================= */
.button{
  --_bg: var(--md3-primary);
  --_fg: var(--md3-on-primary);
  --_elev: var(--elev-1);

  appearance: none;
  background: var(--_bg);
  color: var(--_fg);
  border: none;
  border-radius: 9999px; /* Stadium */
  padding: 12px 20px;
  min-width: 150px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  box-shadow: var(--_elev);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
  text-decoration: none;
  text-align: center;
}
.button:hover{ box-shadow: var(--elev-2); }
.button:active{ transform: translateY(1px); }
.button:disabled{ opacity:.38; cursor:not-allowed; box-shadow: var(--elev-0); }

/* State layer */
.button::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background: currentColor;
  opacity:0; transition: opacity var(--t-fast);
}
.button:hover::after{ opacity: var(--state-hover); }
.button:active::after{ opacity: var(--state-press); }

/* Variantes */
.button.button-outline{
  --_bg: transparent;
  --_fg: var(--md3-primary);
  box-shadow: var(--elev-0);
  border: 1px solid var(--md3-outline);
  background: transparent;
}
.button.button-outline:hover{ background: color-mix(in oklab, var(--md3-primary), transparent 92%); }

.button.button-tonal{
  --_bg: var(--md3-primary-container);
  --_fg: var(--md3-on-primary-container);
  box-shadow: var(--elev-0);
}

.button.button-elevated{
  --_bg: var(--md3-surface);
  --_fg: var(--md3-primary);
  box-shadow: var(--elev-1);
  border: 1px solid var(--md3-outline-variant);
}

.button.button-text{
  --_bg: transparent;
  --_fg: var(--md3-primary);
  box-shadow: var(--elev-0);
  min-width: auto; padding: 10px 12px;
}

/* Compatibilidad con tu :hover anterior */
.button:hover{ color: var(--_fg); }

/* =========================
   Estados / Utilidades
   ========================= */
.center{ text-align: center; }
.right{ text-align: right; }
.row{ margin-bottom: 18px; }

.error{ color: var(--md3-error); }

/* =========================
   Listas y descripciones
   ========================= */
.lists{ list-style: none; padding: 0; margin: 0; }
.lists li{ margin: 0 0 10px 0; }
.lists .description{
  margin: 6px 0 16px 26px;
  font-size: .9rem;
  line-height: 1.4rem;
  color: var(--md3-on-surface-variant);
}

/* =========================
   Archivo / feeds
   ========================= */
.archive{ list-style: none; margin: 24px 0 0; padding: 0; }
.archive .date{ display:block; color: var(--md3-on-surface-variant); font-size: .9rem; }
.archive li{ margin-bottom: 14px; }
.feed{ margin-right: 12px; }

/* =========================
   Unsubscribe / secciones
   ========================= */
.unsub-all{
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--md3-outline-variant);
}

.home-options{ margin-top: 24px; }
.home-options a{ margin: 0 6px; }

/* =========================
   Paginación
   ========================= */
.pagination{
  margin-top: 28px; text-align:center;
}
.pg-page{
  display:inline-block;
  padding: 8px 12px;
  border-radius: 9999px;
  text-decoration:none;
  color: var(--md3-primary);
  transition: background var(--t-fast), color var(--t-fast);
}
.pg-page:hover{
  background: color-mix(in oklab, var(--md3-primary), transparent 90%);
}
.pg-page.pg-selected{
  background: var(--md3-primary);
  color: var(--md3-on-primary);
  font-weight: 700;
}

/* =========================
   Login
   ========================= */
.login .submit{ margin-top: 20px; }
.login button{
  width: 100%;
  display:flex; align-items:center; justify-content:center;
}
.login button img{ max-width: 24px; margin-right: 10px; }

/* =========================
   Navegación / Back
   ========================= */
#btn-back{ display:none; }

/* =========================
   Footer
   ========================= */
footer.container{
  margin-top: 28px; margin-bottom: 28px;
  text-align:center; color: var(--md3-on-surface-variant);
  font-size: .85rem;
}
footer a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
footer a:hover{ color: var(--md3-on-surface); }

/* =========================
   Header
   ========================= */
.header .logo img{
  filter: none; /* listo para logos en negro/blanco/rojo */
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 650px){
  .wrap{ margin: 0; padding: 22px; border-radius: var(--md3-radius-sm); }
}

/* =========================
   Accesibilidad global
   ========================= */
:where(a,button,[role="button"],input,select,textarea):focus-visible{
  outline: 3px solid color-mix(in oklab, var(--md3-primary), white 60%);
  outline-offset: 2px;
  border-radius: 8px;
}