/* =========================
   Mindset Digital · URL Cleaner (compact)
   ========================= */

/* Lienzo */
.mdt-url-cleaner{
  background:var(--md-background); color:var(--md-foreground);
  min-height:100vh; display:grid; place-items:start center; padding:2rem;
}
@supports(height:1dvh){ .mdt-url-cleaner{ min-height:100dvh } }
.mdt-url-cleaner .md-card{ width:min(980px,92vw); background:var(--md-surface,#fff); }

/* Cabecera (h1 + tema) */
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.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:inherit; cursor:pointer; line-height:1;
  transition:background .15s ease,border-color .15s ease;
}
.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; flex:0 0 18px }
#iconMoon{ display:none } [data-theme="dark"] #iconSun{ display:none } [data-theme="dark"] #iconMoon{ display:block }
@media (max-width:480px){ .theme-toggle__label{ display:none } }

/* Filas de formulario */
.form-row{ display:grid; gap:.25rem; margin-block:1rem }
.form-row img+label,.form-label{ display:inline-flex; align-items:center; gap:.25rem; font-weight:600 }
.form-row img,.form-label img{ width:1.6rem; height:auto; translate:0 .05rem; opacity:.9; vertical-align:middle }
[data-theme="dark"] .form-row img{ filter:brightness(1.3) }

/* Campos */
textarea,input[type="text"],input[type="search"]{
  border:1px solid var(--md-border); border-radius:8px; padding:.6rem .75rem; background:var(--md-surface,#fff);
}
textarea{ resize:vertical; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace }

/* Color corporativo para URLs */
:root{ --md-url-color:#1063ff; --md-url-color-dark:#b3cdff; --md-control-accent:#1063ff; }
[data-theme="dark"]{ --md-url-color:var(--md-url-color-dark); --md-control-accent:#6da1ff }
textarea{ color:var(--md-url-color); caret-color:var(--md-color-primary,#1063ff) }
textarea::placeholder{ opacity:.7; color:color-mix(in oklab,var(--md-url-color) 55%, currentColor) }

/* Opciones */
.options{ margin-block:1rem; border:1px solid var(--md-border); border-radius:var(--md-radius); padding:1rem }
.options .grid{
  display:grid; gap:.75rem 1.25rem; grid-template-columns:repeat(3,minmax(260px,1fr));
}
@media (max-width:900px){ .options .grid{ grid-template-columns:repeat(2,minmax(260px,1fr)) } }
@media (max-width:640px){ .options .grid{ grid-template-columns:1fr } }

/* Alineación consistente de checkboxes/radios + texto
   (funciona igual en claro/oscuro sin trucos de appearance) */
.options .grid label,
.trailing label{
  display:inline-flex; align-items:top;gap:.55rem; line-height:1.35; color:var(--md-foreground);
}
.options .grid input,
.trailing input{
  width:1rem; height:1rem; margin:0; flex:0 0 auto; vertical-align:middle; accent-color:var(--md-control-accent);
}

/* Radios “Barra final” en línea */
.trailing{ display:flex; align-items:center; flex-wrap:wrap; gap:1rem 1.5rem }

/* Acciones */
.actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin-block:1rem }

/* Línea de estado “terminal” con cursor */
.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 oklab,var(--md-surface) 85%, transparent); min-height:1.4em;
}
[data-theme="dark"] .status-line{ background:color-mix(in oklab,#000 20%, transparent) }
.status-line::after{ content:"▊"; margin-left:.3rem; opacity:.7; animation:md-caret 1s steps(2,end) infinite }
@keyframes md-caret{ 0%,50%{opacity:0} 50.01%,100%{opacity:1} }

/* Accesibilidad */
.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,.skip-link:focus-visible{ top:.5rem; z-index:10 }
textarea:focus-visible,input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible,button:focus-visible{
  outline:3px solid var(--md-focus,#0a57ff); outline-offset:2px;
}
:root{ color-scheme: light dark }

/* Botones (tokens) */
.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) }

/* Botón (i) */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border:1px solid var(--md-border);
  border-radius:999px; background:transparent; color:inherit; cursor:pointer;
}
.icon-btn:hover{ background:rgba(0,0,0,.04) }
[data-theme="dark"] .icon-btn:hover{ background:rgba(255,255,255,.06) }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* Popover */
.help-popover{ position:relative; z-index:20 }
.help-popover[hidden]{ display:none }
.help-popover__card{
  position: absolute; right: 0; /* se abre hacia la derecha del bloque actions */
  translate: 0 .5rem;
  min-width: clamp(260px, 38vw, 420px);
  background: var(--md-surface); color: var(--md-foreground);
  border:1px solid var(--md-border); border-radius:12px; box-shadow: var(--md-shadow);
  padding: .9rem 1rem; 
}
.help-list{ margin:.25rem 0 1rem; padding-left:1rem; display:grid; gap:.5rem }
.help-list li{ list-style: disc }
@media (max-width:640px){
  .help-popover__card{ left: 0; right: auto; min-width: min(92vw,420px) }
}