/* === Layout base / Tema === */
.mdt-wcpro{
    background: var(--md-background);
    color: var(--md-foreground);
    min-height: 100vh;
    display: grid;
    place-items: start center;
    padding: 2rem;
  }
  @supports (height: 1dvh){ .mdt-wcpro{ min-height: 100dvh; } }
  .mdt-wcpro .md-card{ width: min(980px, 92vw); background: var(--md-surface,#fff); color: var(--md-foreground); }
  
  /* Header */
  .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: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; }
  @media (max-width:480px){ .theme-toggle__label{ display:none; } }
  
  /* Formulario */
  .form-row{ display:grid; gap:.5rem; margin-block:1rem; }
  .form-label{ display:inline-flex; align-items:center; gap:.35rem; font-weight:600; color:var(--md-foreground); }
  .form-label img{ width:1.4rem; height:auto; translate:0 .05rem; opacity:.9; flex-shrink:0; }
  textarea, input, select{
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  textarea{
    resize:vertical;
    color: var(--md-url-color, #1063ff);
    caret-color: var(--md-color-primary, #1063ff);
  }
  textarea::placeholder{ opacity:.7; color: color-mix(in srgb, var(--md-url-color, #1063ff) 55%, currentColor); }
  
  /* Opciones */
  .options{ margin:1rem 0; border:1px solid var(--md-border); border-radius:var(--md-radius); padding:1rem; }
  .opt-grid{ display:grid; gap:.6rem 1rem; grid-template-columns: repeat(3, minmax(240px,1fr)); }
  @media (max-width:900px){ .opt-grid{ grid-template-columns: repeat(2, minmax(240px,1fr)); } }
  @media (max-width:640px){ .opt-grid{ grid-template-columns: 1fr; } }
  .opt{ display:grid; grid-template-columns: 1.1rem auto; align-items:center; column-gap:.55rem; }
  .opt input[type="checkbox"]{ margin-top:.1rem; }
  .opt .label-bullet{ grid-column: 1 / span 1; opacity:.7; }
  .opt > span:nth-of-type(2), .opt select, .opt input[type="number"]{ grid-column: 2 / -1; }
  
  /* Controles nativos */
  input[type="checkbox"], input[type="radio"]{ accent-color: var(--md-color-primary, #1063ff); }
  
  /* 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{ top:.5rem; z-index:10; }
  textarea:focus-visible, input:focus-visible, button:focus-visible, select:focus-visible{ outline:3px solid var(--md-focus,#0a57ff); outline-offset:2px; }
  
  /* Acciones + 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; }
  
  /* Resultados */
  .results{ display:grid; gap:1rem; margin-top:1rem; }
  .table-wrap{ overflow:hidden; border:1px solid var(--md-border); border-radius: var(--md-radius); }
  .metrics-table, .keywords-table{
    table-layout: fixed; width:100%; border-collapse: collapse; margin:0; font-size:.95rem;
  }
  .metrics-table th, .metrics-table td,
  .keywords-table th, .keywords-table td{
    border-bottom:1px solid var(--md-border);
    padding:.65rem .75rem; text-align:left; vertical-align:top; overflow-wrap:anywhere; word-break: break-word; white-space: normal;
  }
  .metrics-table thead th, .keywords-table thead th{
    position:sticky; top:0; background: color-mix(in srgb, var(--md-surface) 92%, transparent); z-index:1;
  }
  
  /* Status línea */
  .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} }
  
  /* Utilidades */
  :root{ color-scheme: light dark; --md-url-color:#1063ff; }
  [data-theme="dark"]{ --md-url-color:#b3cdff; }
  .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); }
  .help-inline{ opacity:.8; }