/* ===== Variables de tema (scoped a .mdt-textfmt) ===== */
.mdt-textfmt {
  /* Tema claro (por defecto) */
  --md-background: #f5f5f5;
  --md-foreground: #090a08;
  --md-surface: #ffffff;
  --md-border: rgba(0, 0, 0, 0.12);
  --md-radius: 12px;
  --md-color-primary: #1063ff;
  --md-color-primary-contrast: #fff;
  --md-color-secondary: #f0b138;
  --md-color-secondary-contrast: #090a08;
  --md-url-color: #1063ff;
  --md-focus: #0a57ff;
  --md-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

/* ===== Reset crítico para inputs: evita desbordes ===== */
*,
*::before,
*::after { box-sizing: border-box; }

/* === Botón de tema (restaurado) === */
.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:hover{ background:rgba(0,0,0,.04); }
[data-theme="dark"] .theme-toggle:hover{ background:rgba(255,255,255,.06); }
.theme-toggle svg{ width:18px; height:18px; display:block; }
#iconMoon{ display:none; }
[data-theme="dark"] #iconSun{ display:none; }
[data-theme="dark"] #iconMoon{ display:block; }

/* ===== Card / base ===== */
.mdt-textfmt{
  /* background: var(--md-background); */
  background: transparent;
  color: var(--md-foreground);
  min-height: 100vh;
  display:grid; place-items:start center; padding:2rem;
}
@supports (height:1dvh){ .mdt-textfmt{ min-height:100dvh; } }

/* ➜ padding interno para que nada toque los bordes redondos */
.mdt-textfmt .md-card{
  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);
}

/* Header */
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }

/* ===== Skip link (otra vez oculta salvo foco) ===== */
.skip-link{
  position:absolute; left:.5rem; top:-1000px;
  background:var(--md-foreground); color:var(--md-background);
  padding:.5rem .75rem; border-radius:6px; text-decoration:none;
}
.skip-link:focus{ top:.5rem; z-index:10; }

/* ===== IO (Entrada/Salida) ===== */
.io-grid{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
@media (max-width:840px){ .io-grid{ grid-template-columns:1fr; } }

/* ➜ clave para que los campos no “empujen” el grid */
.io-col{ min-width:0; }

.form-label{ display:inline-flex; align-items:center; gap:.35rem; font-weight:600; color:var(--md-foreground); }

/* === Flechita decorativa en encabezados de campo === */
.form-label, .regex-grid .opt span { position: relative; display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--md-foreground); }

.form-label::before, .regex-grid .opt span::before {
  content: ""; display: inline-block; width: 1.4rem; height: 1.4rem;
  background: url("https://mindsetdigital.io/wp-content/uploads/2025/10/arrowSimple.svg")
              center/contain no-repeat;
  opacity: .9; translate: 0 .05rem; flex-shrink: 0;
}

textarea{
  width:100%; max-width:100%; resize:vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  min-height:6rem;
  color: var(--md-foreground);
  border:1px solid var(--md-border); border-radius: var(--md-radius);
  background:var(--md-surface); padding:.75rem .9rem;
}
input[type="text"], select{
  width:100%; max-width:100%;
  padding:.45rem .6rem;
  border:1px solid var(--md-border); border-radius:.5rem;
  background:var(--md-surface); color:var(--md-foreground);
}
.meter{ margin-top:.35rem; opacity:.85; font-size:.9rem; }

/* === Campos activos (azules) === */
textarea#input, input#rx-pattern, input#rx-replace, input#rx-flags { color: var(--md-url-color, #1063ff); caret-color: var(--md-url-color, #1063ff); font-weight: 500; }
textarea#input::placeholder, input#rx-pattern::placeholder, input#rx-replace::placeholder, input#rx-flags::placeholder { color: color-mix(in srgb, var(--md-url-color, #1063ff) 55%, currentColor); opacity: .7; }
/* === Campos de sólo lectura (salida) más neutros === */
textarea#output[readonly] { color: var(--md-foreground); opacity: .95; }

/* ===== Presets ===== */
.presets{ margin-top:1rem; border:1px solid var(--md-border); border-radius:var(--md-radius); padding:1rem; }
.preset-row{
  display:grid; grid-template-columns: 1fr auto; gap:1rem; align-items:center;
}
.opt--select.inline{ display:grid; grid-template-columns: 180px 1fr; align-items:center; }
.opt--select.inline > span{ white-space:nowrap; }
.preset-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }
.preset-hint{ display:block; margin-top:.5rem; opacity:.8; }

/* ===== Opciones ===== */
.options{ margin:1rem 0; border:1px solid var(--md-border); border-radius:var(--md-radius); padding:1rem; }
.options .grid{ display:grid; gap:.6rem 1rem; }
.options .grid.grid--three{ grid-template-columns: repeat(3, minmax(220px,1fr)); }
@media (max-width:1000px){ .options .grid.grid--three{ grid-template-columns: repeat(2, minmax(220px,1fr)); } }
@media (max-width:640px){ .options .grid.grid--three{ grid-template-columns: 1fr; } }

.opt{ display:inline-grid; grid-template-columns: 1.1rem auto; align-items:start; column-gap:.55rem; line-height:1.35; }
.opt--select{ grid-template-columns: auto; }
.options .opt input{
  width:1.1rem; height:1.1rem;
  margin-top:.15rem;                   /* compensa altura si el texto ocupa 2 líneas */
}

/* Controles nativos: mismo comportamiento en ambos temas */
input[type="checkbox"], input[type="radio"]{
  accent-color: var(--md-color-primary, #1063ff);
}

/* ===== Regex (look unificado) ===== */
.regex{ margin:1rem 0; border:1px solid var(--md-border); border-radius:var(--md-radius); padding:1rem; }
.regex-grid{ display:grid; gap:.75rem 1rem; grid-template-columns: repeat(3, minmax(200px,1fr)); align-items:start; }
/* Cada campo “Patrón / Reemplazo / Flags” apila etiqueta + input */
.regex-grid .opt{ display:flex; flex-direction:column; align-items:stretch; min-width:0; }
.regex-grid .opt span{ font-weight:600; margin:0 0 .3rem; line-height:1.2; }
/* Evitar solapes y asegurar tamaño fluido */
.regex-grid input[type="text"], .regex-grid select{ margin:0; width:100%; max-width:100%; position:relative; z-index:0; }

.regex-apply{ display:flex; align-items:center; gap:.75rem; grid-column: 1 / -1; }
.rx-result{ opacity:.85; font-size:.9rem; }
.regex-actions{ display:flex; justify-content:flex-start; margin-top:.35rem; }
.regex-hint{ display:block; margin-top:.35rem; opacity:.8; }
/* === Regex: que las etiquetas no queden “debajo” de los inputs === */
@media (max-width:900px){ .regex-grid{ grid-template-columns: repeat(2, minmax(200px,1fr)); } }
@media (max-width:640px){ .regex-grid{ grid-template-columns: 1fr; } }

/* ===== Botones / ayuda ===== */
.actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin:1rem 0; align-items:center; position:relative; }
.md-btn{ background: var(--md-color-primary,#1063ff); color: var(--md-color-primary-contrast,#fff); }
.md-btn--secondary{ background: var(--md-color-secondary,#f0b138); color: var(--md-color-secondary-contrast,#090a08); }

.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);
}
.icon-btn svg{ width:18px; height:18px; }
.help-popover{
  position:absolute; right:0; top:100%; margin-top:.5rem; z-index:1000;
  width:min(520px, 86vw);
  background:var(--md-surface); color:var(--md-foreground);
  border:1px solid var(--md-border); border-radius:var(--md-radius);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:.85rem 1rem; display:none;
}
.help-popover.is-open{ display:block; }

/* ===== Historial / status ===== */
.history{ margin-top: 1rem; }
.history-list{ display:grid; gap:.5rem; margin-top:.75rem; }
.history-item{ display:grid; gap:.5rem; padding:.65rem .75rem; border:1px solid var(--md-border); border-radius:.5rem; background: color-mix(in srgb, var(--md-surface) 92%, transparent); }
.history-head{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.history-meta{ font-size:.9rem; opacity:.85; }

.status-line{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.95rem; color:var(--md-foreground);
  display:inline-block; padding:.3rem .5rem; border-radius:6px;
  background: color-mix(in srgb, var(--md-surface) 85%, transparent);
  min-height:1.4em;
}
.status-line::after{ content:"▊"; margin-left:.3rem; opacity:.7; animation:blink 1s steps(2,end) infinite; }
@keyframes blink{ 0%,50%{opacity:0} 50.01%,100%{opacity:1} }