/* === Card / Tema base === */
.mdt-http-status{
    background: var(--md-background);
    color: var(--md-foreground);
    min-height: 100vh;
    display: grid;
    place-items: start center;
    padding: 2rem;
  }
  @supports (height: 1dvh){ .mdt-http-status{ min-height: 100dvh; } }
  .mdt-http-status .md-card{
    width: min(980px, 92vw);
    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; } }
  
  /* Control + texto con alineación consistente */
  .options .opt{
    display:inline-grid;
    grid-template-columns: 1.1rem auto;   /* columna fija para el control */
    align-items:start;
    column-gap:.55rem;
    line-height:1.35;
  }
  .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);
  }
  
  /* Accesibilidad general */
  .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) minimal */
  .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 accesible (sin solapar tabla) */
  .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 moderna y con aire) === */
  .table-wrap{
    width:100%;
    overflow:auto;
    border:1px solid var(--md-border);
    border-radius: var(--md-radius);
    background: var(--md-surface, #fff);
    margin-top: .75rem;
  }
  
  /* usamos .status-table (la que inyecta el JS) */
  .status-table{
    width:100%;
    table-layout: fixed;           /* columnas estables */
    border-collapse: separate;
    border-spacing: 0;
    font-size:.98rem;
    line-height:1.45;
  }
  
  /* cabeceras */
  .status-table thead th{
    position: sticky; top: 0; z-index: 1;
    background: color-mix(in oklab, var(--md-surface) 92%, transparent);
    padding: .7rem .9rem;
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid var(--md-border);
  }
  
  /* celdas */
  .status-table td{
    padding: .65rem .9rem;
    vertical-align: top;
    border-bottom: 1px solid var(--md-border);
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  
/* widths de columnas (1: URL, 2: Estado, 3: Final, 4: Final Status, 5: Tiempo) */
/* columnas: bajamos un poco el % total para evitar desbordes */
.status-table th:nth-child(1),
.status-table td:nth-child(1){ width: 33%; }  /* URL */
.status-table th:nth-child(2),
.status-table td:nth-child(2){ width: 10%; text-align: center; } /* Estado */
.status-table th:nth-child(3),
.status-table td:nth-child(3){ width: 29%; }  /* Final */
.status-table th:nth-child(4),
.status-table td:nth-child(4){ width: 12%; text-align: center; } /* Final (Status) */
.status-table th:nth-child(5),
.status-table td:nth-child(5){ width: 14%; text-align: right; }  /* Tiempo */

/* aseguramos que la tabla no pinte borde arriba (para que no duplique con .table-wrap) */
.status-table{ border-top: 0; }
.status-table thead th{ border-top: 0; }
  
  /* URLs y “Final” con monoespaciada */
  .status-table td:nth-child(1) code,
  .status-table td:nth-child(3) code{
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .95rem;
  }
  
  /* Zebra + hover sutil */
  .status-table tbody tr:nth-child(even){
    background: color-mix(in oklab, var(--md-surface) 96%, transparent);
  }
  .status-table tbody tr:hover{
    background: color-mix(in oklab, var(--md-surface) 90%, transparent);
  }
  
  /* Badges estado HTTP (tokens ya definidos más abajo) */
  .badge{
    display:inline-flex; min-width:2.75ch; justify-content:center; align-items:center;
    padding:.18rem .5rem; border-radius:.5rem;
    font:600 .85rem/1 var(--md-font-sans, system-ui, sans-serif);
    letter-spacing:.01em; border:1px solid transparent;
  }
  
  /* === Tokens de badges === */
  :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); }
  
  /* === 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); }

/* --- Fix: sin scroll horizontal ni “línea doble” --- */
.table-wrap{
    overflow: hidden;                 /* sin scroll en desktop */
    border-top: 1px solid var(--md-border);
  }
  
  /* si hace falta, sólo en móviles permitimos scroll x */
  @media (max-width: 720px){
    .table-wrap{ overflow-x: auto; }
  }