/* === Card / Tema base === */
.mdt-meta-extractor{
    background: var(--md-background);
    color: var(--md-foreground);
    min-height: 100vh;
    display: grid;
    place-items: start center;
    padding: 2rem;
  }
  @supports (height: 1dvh){ .mdt-meta{ min-height: 100dvh; } }
  
  .mdt-meta-extractor .md-card{
    width: min(980px, 92vw);   /* mismo patrón que el resto de apps */
    margin-inline: auto;
    background: var(--md-surface,#fff);
    color: var(--md-foreground);
  }

  /* === Header (título + toggle) === */
  .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{
    resize:vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    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; }
  .options .grid{ display:grid; gap:.6rem 1rem; grid-template-columns: repeat(3, minmax(240px,1fr)); }
  @media (max-width:900px){ .options .grid{ grid-template-columns: repeat(2, minmax(240px,1fr)); } }
  @media (max-width:640px){ .options .grid{ grid-template-columns: 1fr; } }
  .options .opt{ display:inline-grid; grid-template-columns: 1.1rem auto; align-items:start; column-gap:.55rem; line-height:1.35; }
  .options .opt input{ width:1.1rem; height:1.1rem; margin-top:.15rem; }
  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{ 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); }
  
  /* Botón (i) */
  .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; }
  
  /* Popover de ayuda */
  .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 (tabla) === */
  .table-wrap{
    /* Permitimos scroll x si es estrictamente necesario en pantallas pequeñas
       pero sin “doble borde” ni recortes extraños */
    overflow-x: auto;
    overflow-y: hidden;
    border:1px solid var(--md-border);
    border-radius: var(--md-radius);
  }
  
  .results-table{
    width:100%;
    table-layout: auto;         /* <- volvemos a auto para evitar alturas raras */
    border-collapse: collapse;
    margin: 0;
    font-size:.95rem;
  }
  
  .results-table th, .results-table td{
    border-bottom:1px solid var(--md-border);
    padding:.7rem .8rem;        /* aire */
    text-align:left;
    vertical-align: top;
    overflow-wrap:anywhere;     /* URLs largas rompen bien */
    word-break: break-word;
    white-space: normal;
    line-height: 1.35;
  }
  
  /* Cabecera pegajosa consistente */
  .results-table thead th{
    position:sticky; top:0;
    background: color-mix(in srgb, var(--md-surface) 92%, transparent);
    z-index:1;
  }
  
  /* Sub-líneas dentro de celdas (meta de título/description) */
  .cell-meta{
    margin-top:.25rem;
    font: 600 .8rem/1.15 var(--md-font-sans, system-ui, sans-serif);
    opacity:.8;
  }
  
  /* Chips/badges */
  .badge{
    display:inline-flex; min-width:2.75ch; justify-content:center; align-items:center;
    padding:.15rem .45rem; border-radius:.5rem;
    font:600 .85rem/1 var(--md-font-sans, system-ui, sans-serif);
    letter-spacing:.01em; border:1px solid transparent;
    white-space: nowrap;          /* <- no se parte en vertical */
  }
  :root{
    --http-ok-bg:#e7f5e9;   --http-ok-fg:#126a2f;
    --http-3xx-bg:#fff3d6;  --http-3xx-fg:#7a4d00;
    --http-4xx-bg:#fde8e8;  --http-4xx-fg:#8a1f1f;
    --http-5xx-bg:#f3e8ff;  --http-5xx-fg:#5b21b6;
    --http-unk-bg:#eef2f7;  --http-unk-fg:#374151;
  }
  [data-theme="dark"]{
    --http-ok-bg:  color-mix(in srgb, #1a2b1f 70%, #28a745); --http-ok-fg:#a8f0b9;
    --http-3xx-bg: color-mix(in srgb, #2b2415 70%, #f59e0b); --http-3xx-fg:#ffd89a;
    --http-4xx-bg: color-mix(in srgb, #2a1515 70%, #ef4444); --http-4xx-fg:#ffb3b3;
    --http-5xx-bg: color-mix(in srgb, #1f1a2b 70%, #8b5cf6); --http-5xx-fg:#d7c8ff;
    --http-unk-bg:#202531; --http-unk-fg:#d1d5db;
  }
  .badge.ok{     background:var(--http-ok-bg);  color:var(--http-ok-fg);  border-color:color-mix(in srgb,var(--http-ok-fg) 18%, transparent); }
  .badge.redir{  background:var(--http-3xx-bg); color:var(--http-3xx-fg); border-color:color-mix(in srgb,var(--http-3xx-fg) 18%, transparent); }
  .badge.client{ background:var(--http-4xx-bg); color:var(--http-4xx-fg); border-color:color-mix(in srgb,var(--http-4xx-fg) 18%, transparent); }
  .badge.server{ background:var(--http-5xx-bg); color:var(--http-5xx-fg); border-color:color-mix(in srgb,var(--http-5xx-fg) 18%, transparent); }
  .badge.unknown{background:var(--http-unk-bg); color:var(--http-unk-fg); border-color:color-mix(in srgb,var(--http-unk-fg) 18%, transparent); }
  
  /* Píldoras para flags */
  .flag{
    display:inline-block; padding:.15rem .4rem; border-radius:.4rem;
    font:600 .78rem/1 var(--md-font-sans, system-ui, sans-serif);
    background: color-mix(in srgb, var(--md-surface) 85%, transparent);
    border: 1px solid var(--md-border);
    margin-right:.35rem; margin-bottom:.25rem;
  }
  
  /* Status tipo terminal */
  .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); }
  
  /* === Responsive: en móviles ocultamos columnas secundarias para legibilidad === */
  @media (max-width: 900px){
    .results-table th:nth-child(5),
    .results-table td:nth-child(5), /* Canonical */
    .results-table th:nth-child(6),
    .results-table td:nth-child(6), /* Robots */
    .results-table th:nth-child(7),
    .results-table td:nth-child(7), /* Flags */
    .results-table th:nth-child(8),
    .results-table td:nth-child(8)  /* Final URL */
    { display:none; }
  }