/*
 * © 2025 Webtool.es . All rights reserved.
 *   This file is subject to the terms of the license located in /LICENSE.txt
 *   Authorized use exclusively on the domain Webtool.es and its subdomains.
 */
/* =================== Temas (claro/oscuro) =================== */
:root[data-theme="light"]{
  --bg:#f7f7fb; --panel:#ffffff; --muted:#6b7280; --fg:#0f172a;
  --overflow-fade: linear-gradient(to right, transparent, rgba(0,0,0,.08) 60%, rgba(0,0,0,.16));
  --overlay:#00000099;
  --accent:#0ea5e9; --accent-2:#7c3aed; --ok:#16a34a; --warn:#ea580c; --err:#dc2626;
  --tab:#eef2f7; --tab-active:#dbe3ef; --chip:#eef6ff; --border:#d7dce6; --panel-2:#f4f6fa;
  /* Ring de enfoque/hover unificado (controrno azulado) */
  --ring: rgba(34,211,238,.45);
  /* Fondos de estado para CodeMirror (claro) */
  --cm-bg-ok:   rgba(34,197,94,.14);
  --cm-bg-warn: rgba(234,88,12,.14);
  --cm-bg-err:  rgba(220,38,38,.16);
  /* 🎛 Toolbar (look del ejemplo): fondo oscuro para buen contraste en modo claro */
  --toolbar-bg:#2b2b2b;
  --toolbar-fg:#f4f6fb;
  --toolbar-muted:#c7cbd3;
  --toolbar-hover:#3a3a3a;    /* al pasar el ratón se aclara el bloque completo */
}
/* Evita la inversión al hover dentro de la barra superior (.top-actions) */
.top-actions .btn-top:hover img,
.top-actions .btn-top:hover svg,
.top-actions .btn-top:focus-visible img,
.top-actions .btn-top:focus-visible svg{
  /* Mantén los iconos en blanco para no perder contraste en hover/focus */
  filter:brightness(0) invert(1) !important;
}
/* Extra compacto para anchos muy pequeños */
@media (max-width: 480px){
  .btn-top{
    min-width:42px; min-height:42px; padding:.24rem .30rem; gap:.20rem;
  }
  .btn-top img{ width:18px; height:18px }
  .top-actions{ gap:.20rem }
}
@media (max-width: 380px){
  .btn-top{
    min-width:38px; min-height:38px; padding:.20rem .26rem;
  }
  .btn-top img{ width:16px; height:16px }
}

/* ====== Toolbar unificado: apilado (icono arriba + texto debajo) ====== */
.top-actions{ align-items:center }
.btn-top{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem;
  background:transparent; border:1px solid transparent; color:var(--fg);
  border-radius:.65rem; padding:.6rem .8rem; cursor:pointer; font-size:.95rem;
  min-width:88px; min-height:82px;            /* área táctil cómoda, estilo “ribbon” */
  transition:
    background .15s ease, transform .12s ease,
    color .18s ease, filter .18s ease,
    border-color .15s ease, box-shadow .15s ease;
}
.btn-top img{
  width:30px; height:30px; display:block; pointer-events:none; opacity:.96;
}
  .btn-top .btn-top-label{
    font-size:.80rem; line-height:1.1; letter-spacing:.1px; color:var(--muted);
  }
  .btn-top:hover .btn-top-label,
  .btn-top:focus-visible .btn-top-label{
    color:var(--accent);
  }
  .btn-top:hover img{ filter:brightness(1.06); } /* seguirá activo fuera de .top-actions */
  .btn-top:focus-visible{
    outline:0;
    border-color:var(--ring);
    box-shadow:0 0 0 2px var(--ring) inset;
  }
/* Reborde azul también al hover en el bloque “apilado” */
.btn-top:hover{
  background:var(--toolbar-hover);
  border-color:var(--ring);
  box-shadow:0 0 0 2px var(--ring) inset;
}
.btn-top:active{ transform:translateY(1px) }
/* matices por variante (solo color del texto, sin cajas) */
.btn-top.btn-primary .btn-top-label{ color:var(--accent); }
.btn-top.btn-danger  .btn-top-label{ color:var(--err); }
:root[data-theme="dark"]{
  --bg:#0f172a; --panel:#0b1220; --muted:#94a3b8; --fg:#e5e7eb;
  --overlay:#00000099;
  --accent:#22d3ee; --accent-2:#a78bfa; --ok:#16a34a; --warn:#ea580c; --err:#dc2626;
  --tab:#111827; --tab-active:#334155; --chip:#0b1220; --border:#1f2937; --panel-2:#0d1526;
  /* Ring igual en dark para “mismo contorno” */
  --ring: rgba(34,211,238,.45);
  /* Fondos de estado para CodeMirror (oscuro) */
  --cm-bg-ok:   rgba(16,185,129,.18);
  --cm-bg-warn: rgba(234,88,12,.22);
  --cm-bg-err:  rgba(239,68,68,.22);
  /* 🎛 Toolbar en dark: mantenemos oscuro y suave */
  --toolbar-bg:#20252e;
  --toolbar-fg:#e8edf6;
  --toolbar-muted:#aab3c2;
  --toolbar-hover:#2a303b;
}

*{box-sizing:border-box}
html,body{height:100%;min-height:100vh;min-height:100dvh;margin:0;background:var(--bg);color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
/* 📐 Disposición fluida por filas: header (auto) + tabs (auto) + main (1fr) */
body{
  display:grid;
  grid-template-rows:auto auto 1fr;
}

/* ===== Toolbar en 2 zonas (izquierda: marca+proyecto / derecha: botones) ===== */
header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;  /* ⬅️ solo dos zonas */
  align-items:center;
  padding:.6rem .75rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:var(--toolbar-bg); color:var(--toolbar-fg);
  position:sticky; top:0; z-index:10;
  color-scheme: dark; /* menús nativos en modo oscuro si el UA lo respeta */
  white-space:nowrap;                 /* ⬅️ jamás pasar a 2 líneas */
  overflow:visible;                   /* ⬅️ deja salir los dropdowns */
}
.toolbar-left{
  display:flex; align-items:center; gap:.6rem; justify-self:stretch;
  min-width:0;                        /* ⬅️ permite ellipsis dentro */
}
/* La marca se comprime con puntos suspensivos si no cabe */
.brand{ line-height:1.05; min-width:0; overflow:hidden }
.brand-title{ font-weight:800; letter-spacing:.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.brand-sub{ font-size:.85rem; color:var(--toolbar-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* Chip de proyecto pegado a la derecha de la ZONA IZQUIERDA */
.project-name{ margin-left:auto }

/* Ocultamos el contenedor central original,
   su contenido se mueve por JS a la izquierda. */
.toolbar-center{ display:none !important }

.toolbar-right{
  display:flex; align-items:center; gap:.35rem; justify-self:end;
  flex-wrap:nowrap;                  /* ⬅️ nunca romper en 2 filas */
  min-width:0;
  max-width:100%;                    /* ⬅️ limita el bloque al viewport */
  overflow:visible;                  /* ⬅️ menús flotan en fixed desde JS */
}

/* Marca (dos líneas) */
/* (estilos de .brand ajustados arriba) */
/* botones genéricos fuera del header (sin cambios visuales de la toolbar) */
.btn{
  background:var(--tab); border:1px solid var(--border); color:var(--fg);
  border-radius:.5rem; padding:.45rem .7rem; cursor:pointer; font-size:.95rem
}
.btn:hover{filter:brightness(1.03)}

/* ====== Toolbar unificado (como el ejemplo): icono arriba + texto debajo ====== */
.top-actions{
  display:flex; gap:.35rem; align-items:center;
  flex-wrap:nowrap;                 /* ⬅️ nunca dos líneas */
  min-width:0;
  /* 👉 En móvil, permitir gesto de desplazamiento horizontal */
  overflow-x:auto; overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  touch-action:pan-x;
}
.top-actions::-webkit-scrollbar{ display:none }
.btn-top{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem;
  color:var(--toolbar-fg);
  background:transparent; border:1px solid transparent;
  border-radius:.55rem; padding:.55rem .75rem; cursor:pointer; font-size:.95rem;
  min-width:88px; min-height:78px;  /* ⬇️ ligeramente más compacto */
  flex:0 0 auto;                    /* ⬅️ no crecer/encoger inesperado */
  transition:
    background .15s ease, transform .1s ease,
    color .15s ease, filter .15s ease,
    border-color .15s ease, box-shadow .15s ease;
}
.btn-top:hover{
  background:var(--toolbar-hover);
  border-color:var(--ring);
  box-shadow:0 0 0 2px var(--ring) inset;
}
.btn-top:active{ transform:translateY(1px) }
.btn-top:focus-visible{ outline:0; border-color:var(--ring); box-shadow:0 0 0 2px var(--ring) inset; }
.btn-top .btn-top-label{ max-width:8.5rem; overflow:hidden; text-overflow:ellipsis; }
/* evita que la última tarjeta “salte” a 2ª línea: */
.top-actions > *{ flex-shrink:0; scroll-snap-align:start }
.btn-top img,
.btn-top svg{
  width:30px; height:30px; display:block; pointer-events:none; opacity:.94;
  /* Iconos blancos en ambos temas para la toolbar superior */
  filter:brightness(0) invert(1);
}
/* 🚫 Evita que el hover sustituya el filtro en la barra superior.
   Mantiene los iconos en blanco para no perder contraste. */
.top-actions .btn-top:hover img,
.top-actions .btn-top:hover svg,
.top-actions .btn-top:focus-visible img,
.top-actions .btn-top:focus-visible svg{
  filter:brightness(0) invert(1) !important;
}

.btn-top .btn-top-label{
  font-size:.80rem; line-height:1.1; letter-spacing:.1px;
  color:var(--toolbar-muted);
}
.btn-top:hover .btn-top-label,
.btn-top:focus-visible .btn-top-label{ color:var(--toolbar-fg); }
/* Sin colores especiales para “Guardar” o “Eliminar” (se quitan azul/rojo) */
.btn-top.btn-primary .btn-top-label,
.btn-top.btn-danger  .btn-top-label{ color:var(--toolbar-muted); }
/* Se usa para esconder botones que pasan al menú “Más” */
.btn-top.hidden-overflow{ display:none !important; }


/* (se elimina el antiguo estilo .btn-icon-top para no mezclar conceptos) */

.btn-ghost{background:transparent; border-color:transparent}
.toolbar-spacer{flex:1}
/* ===== Escalados progresivos para garantizar 1 sola línea ===== */
@media (max-width: 1200px){
  .btn-top{ min-width:74px; min-height:64px; padding:.4rem .5rem }
  .btn-top img{ width:26px; height:26px }
  .btn-top .btn-top-label{ display:none }  /* ⬅️ prioriza iconos */
}
@media (max-width: 900px){
  header{ padding:.35rem .5rem }
  .project-name{ display:none }            /* ganamos aire en móviles */
}
@media (max-width: 560px){
  .btn-top{ min-width:46px; min-height:46px; padding:.28rem .35rem }
}

/* Oculta la flecha vieja en IE/Edge Legacy (por si acaso) */
/* Fondo y texto del menú desplegado (cuando el UA lo permite) */
/* Ajustes explícitos por tema para máxima compatibilidad */
/* 🎚 Menús personalizados (Idioma/Tema) como botones */
.menu-btn{
  background:transparent; color:var(--toolbar-fg);
  border:1px solid rgba(255,255,255,.18);
  border-radius:.55rem; padding:.35rem .55rem; font-size:.95rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.menu-btn:hover{ background:var(--toolbar-hover); transform:translateY(-1px) }
.menu-btn .caret{ width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--toolbar-fg); opacity:.9 }
.menu-wrap{ position:relative; overflow:visible; } /* ⬅️ ancla para .dropdown */
.dropdown{
  position:absolute; margin-top:.35rem; min-width:180px;
  background:var(--toolbar-bg); color:var(--toolbar-fg);
  border:1px solid rgba(255,255,255,.18); border-radius:.55rem;
  box-shadow:0 12px 28px rgba(0,0,0,.35); padding:.35rem; z-index:1000;
  display:none;
}
.dropdown.open{ display:block }
.dropdown .item{
  position:relative;
  display:flex; width:100%; border:0; background:transparent; color:var(--toolbar-fg);
  padding:.45rem .55rem; border-radius:.45rem; cursor:pointer; text-align:left;
  font-size:.95rem;
}
/* Hover/Focus visibles en menús (Tema/Idioma) */
.dropdown .item:hover,
.dropdown .item:focus-visible{
  outline:0;
  background:var(--toolbar-hover);
  box-shadow:0 0 0 2px var(--ring) inset;     /* ring accesible */
}
.dropdown .item:hover .mi-label,
.dropdown .item:focus-visible .mi-label{
  color:var(--accent);                         /* texto resalta */
}
.dropdown .item[aria-current="true"]{
  background:rgba(34,211,238,.18);            /* opción activa bien marcada */
}
.dropdown .item[aria-current="true"] .mi-label{
  color:var(--accent);
}

/* Icono + etiqueta dentro de los ítems del menú “Más…” */
.dropdown .item{ display:flex; align-items:center; gap:.55rem }
.dropdown .item .mi-icon{
  width:18px; height:18px; flex:0 0 18px;
  display:inline-grid; place-items:center;
  opacity:.96; filter:brightness(0) invert(1);
}
.dropdown .item .mi-icon img,
.dropdown .item .mi-icon svg{ width:18px; height:18px; display:block }
.dropdown .item .mi-label{ flex:1; min-width:0 }


/* Nombre de proyecto en la barra */
.project-name{
  margin-left:.5rem; padding:.25rem .55rem;
  background:transparent; border:1px solid rgba(255,255,255,.18);
  border-radius:.5rem; color:var(--toolbar-fg); font-weight:600;
  user-select:none; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.project-name.editing{
  user-select:text;
  background:var(--toolbar-hover);
  box-shadow:none;
}

.tabs{
  display:flex; gap:.35rem; padding:.35rem .5rem; border-bottom:1px solid var(--border);
  background:var(--panel); overflow:auto
}
.tab{
  background:var(--tab); border:1px solid var(--border); color:var(--fg);
  border-radius:.5rem; padding:.3rem .55rem; cursor:pointer; display:flex; gap:.5rem; align-items:center; white-space:nowrap;
}
/* Activa: que destaque más (negrita + borde grueso) */
.tab.active{
  background:var(--tab-active);
  border-width:2px;
  font-weight:700;
}
.tab .label{outline:none; user-select:none; transition:background .12s, box-shadow .12s}
/* Pestaña con cambios sin guardar */
.tab.unsaved{
  background:rgba(220,38,38,.12);
  border-color:rgba(220,38,38,.35);
}
/* Cuando está activa Y sin guardar, que se noten ambas cosas */
.tab.unsaved.active{
  background:linear-gradient(180deg, rgba(220,38,38,.14), var(--tab-active));
  border-color:rgba(220,38,38,.5);
  font-weight:800;
}
.tab.unsaved .label::after{ content:' •'; color:#dc2626; font-weight:700 }

/* Estado de renombrado: mucho más evidente */
.tab .label.editing{
  user-select:text; background:rgba(34,211,238,.20); box-shadow:0 0 0 2px rgba(34,211,238,.35) inset; border-radius:.35rem; color:var(--fg)
}
.tab.renaming{ box-shadow:0 0 0 2px rgba(34,211,238,.25) inset; border-color:rgba(34,211,238,.6) }
.tab .close{opacity:.7; font-weight:700}
.tab .close:hover{opacity:1}
.tab.add{border-style:dashed; color:var(--muted)}
/* Contenedor principal ocupa todo el ancho, el grid lo pone cada .tab-view */
.main{
  display:block; padding:0;
  width:100%; height:auto;
  min-height:0;            /* imprescindible para que el hijo 1fr no se desborde */
  overflow:hidden;         /* que el scroll ocurra dentro de los editores */
}
/* Cada vista de pestaña es un grid 2 columnas por defecto */
.tab-view{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-gap:.5rem;
  min-width:0;
  height:100%;       
}
/* Los paneles se estiran a la altura completa del grid */
.tab-view > .panel{ height:100%; min-height:0; }
/* El cuerpo del panel y CodeMirror llenan su contenedor */
.panel-body{ flex:1; min-height:0; display:flex; }
/* 👇 asegura que CodeMirror ocupe todo el alto disponible */
.panel-body .CodeMirror{ flex:1; height:100%; }
.panel-body .CodeMirror-scroll{ height:100%; }
.panel{
  /* columnas apiladas: header | body | controles | status */
  display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:.75rem; background:var(--panel);
  overflow:hidden; min-height:0; min-width:0;
}
.panel-header{
  display:flex; align-items:center; gap:.5rem; padding:.55rem .7rem;
  border-bottom:1px solid var(--border); background:var(--panel-2)
}
.panel-title{font-size:.9rem; color:var(--fg); margin-right:.5rem}
.panel-body{flex:1; min-height:0}
.cm-container, .CodeMirror{height:100%}
.CodeMirror-scroll{height:100%}
/* Icon buttons dentro de los headers de panel */
.flex-spacer{flex:1}
.btn-icon{
  border:1px solid var(--border);
  background:var(--tab);
  color:var(--fg);
  border-radius:.5rem;
  padding:.25rem;
  width:2.1rem; height:2.1rem;
  display:grid; place-items:center;
  cursor:pointer; text-align:center;
  transition:background .18s ease, box-shadow .18s ease, border-color .18s ease, transform .12s ease;
}

.panel .panel-header .btn-icon{
  /* Modo claro: botones de header con fondo blanco para mayor contraste
     (en vez de var(--tab), que es ligeramente gris) */
  background:#fff;
}
[data-theme="dark"] .panel .panel-header .btn-icon{
  /* Modo oscuro: mantén fondo oscuro del panel pero sube el contraste del borde */
 background:var(--panel-2);
  border-color:rgba(255,255,255,.28);
}
/* === Contorno azulado unificado (hover/focus) en subbotones del panel-header === */
.panel .panel-header .btn-icon:hover,
.panel .panel-header .btn-icon:focus-visible{
  border-color:var(--ring) !important;
  box-shadow:0 0 0 2px var(--ring) inset !important;
  background:linear-gradient(180deg, rgba(34,211,238,.20), rgba(34,211,238,.08));
  transform:translateY(-1px);
}
/* Foco explícito sin depender del hover */
.panel .panel-header .btn-icon:focus-visible{
  outline:0;
}

.btn-icon img,
.btn-icon svg{
  width:16px; height:16px; display:block; pointer-events:none;
  opacity:.96;
}
/* ▶ Iconos blancos en modo oscuro dentro de headers de panel */
:root[data-theme="dark"] .btn-icon img,
:root[data-theme="dark"] .btn-icon svg{
  filter:brightness(0) invert(1);
}

/* Dark: forzar iconos en blanco dentro de los .btn-icon */
:root[data-theme="dark"] .btn-icon img{ filter:brightness(0) invert(1) }
/* Hover genérico se mantiene suave;
   en panel-header ya forzamos ring consistente con la regla anterior */
.btn-icon:hover{
  background:linear-gradient(180deg, rgba(34,211,238,.20), rgba(34,211,238,.08));
  border-color:rgba(34,211,238,.45);
  box-shadow:0 0 0 1px rgba(34,211,238,.30) inset;
  transform:translateY(-1px);
}

.controls{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding:.4rem .6rem;
  border-top:1px solid var(--border); background:var(--panel)
}
.status{
  padding:.5rem .7rem; border-top:1px solid var(--border);
  background:var(--panel-2); color:var(--fg); font-size:.9rem; display:flex; gap:1rem; flex-wrap:wrap
}
.status .cookies-policy{
  margin-left:auto;              /* empuja a la derecha */
  display:inline-flex; gap:.6rem; align-items:center; white-space:nowrap;
}
.status .cookies-policy a{ color:var(--muted); text-decoration:underline; }
.status .cookies-policy a:hover{ color:var(--fg); filter:brightness(1.05); }
.pill{padding:.2rem .45rem; border-radius:.4rem; background:var(--chip); border:1px solid var(--border); color:var(--fg)}
.pill.ok{border-color:#134e2e; color:#16a34a}
.pill.warn{border-color:#7a3b0c; color:#ea580c}
.pill.err{border-color:#7f1d1d; color:#dc2626}
.failed-box{max-height:8rem; overflow:auto; background:var(--panel); border:1px dashed var(--border); padding:.4rem .6rem; border-radius:.5rem}
.failed-box code{white-space:pre}
.muted{color:var(--muted)}
.hidden{display:none !important}
body.modal-open{overflow:hidden}
/* Solo en pantallas pequeñas (<1024px) apilamos en vertical */
@media (max-width: 1024px){
    .tab-view{ grid-template-columns:1fr; height:auto } /* en vertical dejamos que crezca */
}

/* ======= Modo compacto (solo iconos) =======
   - <900px: oculta etiquetas de iconos y centro, oculta nombre de proyecto
   - <560px: iconos aún más pequeños */
@media (max-width: 900px){
  /* Cabecera más densa */
  header{ padding:.35rem .5rem; }
  /* Quita el texto central (marca) y el chip con el nombre del proyecto */
  .toolbar-center, .project-name{ display:none !important; }
  /* Botones tipo icono: solo imagen, sin etiqueta */
  .btn-top{
    min-width:58px; min-height:58px;
    padding:.35rem .45rem; gap:.25rem;
  }
  .btn-top img{ width:24px; height:24px; }
  .btn-top .btn-top-label{ display:none; }
  /* Menús (Tema/Idioma) versión .menu-btn: compactar si aún aparecen */
  .menu-btn{ padding:.3rem .4rem; }
}
@media (max-width: 560px){
  header{ padding:.25rem .4rem; }
  .tabs{ padding:.25rem .25rem; }
  .btn-top{
    min-width:46px; min-height:46px;
    padding:.28rem .35rem;
  }
  .btn-top img{ width:20px; height:20px; }
  /* Si algún texto suelto del “hero”/marca persiste, escondelo también */
  .brand, .brand-title, .brand-sub{ display:none !important; }
}

/* Colores para diffs (tanto en neo como en darcula) */
.cm-s-neo .cm-negative, .cm-s-darcula .cm-negative{background:rgba(239, 68, 68, .15)}
.cm-s-neo .cm-positive, .cm-s-darcula .cm-positive{background:rgba(34, 197, 94, .15)}
.cm-s-neo .cm-meta, .cm-s-darcula .cm-meta{opacity:.9}

/* ======= Fondo de estado del editor (verde/amarillo/rojo) ======= */
.CodeMirror.cm-bg-ok,   .CodeMirror.cm-bg-ok   .CodeMirror-scroll{ background:var(--cm-bg-ok)   !important; transition:background .2s ease; }
.CodeMirror.cm-bg-warn, .CodeMirror.cm-bg-warn .CodeMirror-scroll{ background:var(--cm-bg-warn) !important; transition:background .2s ease; }
.CodeMirror.cm-bg-err,  .CodeMirror.cm-bg-err  .CodeMirror-scroll{ background:var(--cm-bg-err)  !important; transition:background .2s ease; }
/* ⬇️ Estilos de fallos (gutter y línea) */
/* Punto rojo dentro del gutter de números (NO tocar la posición del gutter-elt) */
.CodeMirror-gutter-elt .patch-dot{
  position:absolute; right:3px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--err);
  pointer-events:none;
}

/* (opcional) tiñe el fondo del número */
.CodeMirror-gutter-elt.patch-fail-gutter{ background:rgba(220,38,38,.18) }
.cm-s-neo .patch-fail, .cm-s-darcula .patch-fail{ background:rgba(220,38,38,.10) }
/* ======= Marcas de fallos de aplicación ======= */
.cm-line.patch-fail{ background:rgba(220,38,38,.22) !important }
.pill.linklike{ cursor:pointer; text-decoration:underline; }
.pill.linklike:hover{ filter:brightness(1.1) }
/* =============================================== */

/* Hace que el summary parezca una barrita de sección */
details.status > summary{
  list-style:none; user-select:none; color:var(--muted);
}
details.status[open] > summary{ color:var(--fg); }
details.status > summary::-webkit-details-marker{ display:none; }

/* =================== Panel de Ayuda (overlay modal) =================== */
.help-panel{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  width:100vw; height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:var(--overlay);
  z-index:2147483000; /* por encima de todo */
  padding:2rem;
}
.help-panel.hidden{ display:none !important; }
.help-inner{
  position:relative;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:.75rem;
  width:min(860px, 95vw);
  max-height:85vh;
  overflow:auto;
  padding:1rem 1.1rem 1.2rem;
  box-shadow:0 24px 64px rgba(0,0,0,.40);
}
.help-inner:focus{ outline:none; }
.help-inner h2{ margin:.2rem 0 1rem 0 }
.help-section{ margin:.75rem 0 }
.help-section h3{ margin:.2rem 0 .35rem 0; font-size:1rem; color:var(--fg); }
.help-section ul{ margin:.2rem 0 .2rem 1.2rem; padding:0; }
.help-close{ position:absolute; top:.5rem; inset-inline-end:.5rem; background:transparent; border-color:transparent; font-size:1.25rem; cursor:pointer; color:var(--fg); }

/* Hace que el summary parezca una barrita de sección */
details.status > summary{
  list-style:none; user-select:none; color:var(--muted);
}
details.status[open] > summary{ color:var(--fg); }
details.status > summary::-webkit-details-marker{ display:none; }

/* =================== Panel de Ayuda (overlay modal) =================== */
.help-panel{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  width:100vw; height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:var(--overlay);
  z-index:2147483000; /* por encima de todo */
  padding:2rem;
}
.help-panel.hidden{ display:none !important; }
.help-inner{
  position:relative;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:.75rem;
  width:min(860px, 95vw);
  max-height:85vh;
  overflow:auto;
  padding:1rem 1.1rem 1.2rem;
  box-shadow:0 24px 64px rgba(0,0,0,.40);
}
.help-inner:focus{ outline:none; }
.help-inner h2{ margin:.2rem 0 1rem 0 }
.help-section{ margin:.75rem 0 }
.help-section h3{ margin:.2rem 0 .35rem 0; font-size:1rem; color:var(--fg); }
.help-section ul{ margin:.2rem 0 .2rem 1.2rem; padding:0; }
.help-close{ position:absolute; top:.5rem; inset-inline-end:.5rem; background:transparent; border-color:transparent; font-size:1.25rem; cursor:pointer; color:var(--fg); }