/* =========================================================
   MetroHost WebTools · styles.css (seguro y accesible)
   - Ajustes mínimos: accesibilidad, focus visibles,
     respeto a reduced-motion y pequeños refuerzos de contraste.
   ========================================================= */
:root{
  --brand-primary:#0d6efd;
  --surface:#ffffff;
  --surface-2:#f8f9fb;
  --focus-ring: 0 0 0 .2rem rgba(13,110,253,.35);
}
html[data-bs-theme="dark"]{
  --surface:#0b1220;
  --surface-2:#0e1526;
  --focus-ring: 0 0 0 .2rem rgba(13,110,253,.45);
}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* Layout util */
.container-narrow{max-width:1140px}
.section-pt{padding-top:3rem}
.section-pb{padding-bottom:3rem}

.wt-breadcrumb-wrap{
  background:var(--surface);
  border-bottom:1px solid rgba(13,110,253,.08);
}
html[data-bs-theme="dark"] .wt-breadcrumb-wrap{
  background:var(--surface-2);
  border-bottom-color:rgba(148,163,184,.22)!important;
}
.wt-breadcrumb{
  display:flex;
  gap:.5rem;
  font-size:.875rem;
  --bs-breadcrumb-divider-color:rgba(108,117,125,.65);
}
.wt-breadcrumb .breadcrumb-item{
  display:flex;
  align-items:center;
  color:var(--bs-secondary-color);
  font-weight:500;
}
.wt-breadcrumb .breadcrumb-item a{
  color:var(--brand-primary);
  text-decoration:none;
}
.wt-breadcrumb .breadcrumb-item a:hover{
  color:color-mix(in srgb,var(--brand-primary) 85%, #000 15%);
  text-decoration:underline;
}
.wt-breadcrumb .breadcrumb-item.active{
  color:var(--brand-primary);
  font-weight:700;
}

/* Hero */
.wt-hero{
  background:radial-gradient(900px 300px at 10% 0%,rgba(13,110,253,.08),transparent 60%);
}
html[data-bs-theme="dark"] .wt-hero{
  background:radial-gradient(900px 300px at 10% 0%,rgba(255,255,255,.05),transparent 60%);
}

/* Tarjetas base */
.card-soft{
  border:1px solid rgba(0,0,0,.06);
  border-radius:1rem;
  box-shadow:0 1rem 2rem -1rem rgba(0,0,0,.08);
}

/* Tarjeta de herramienta (no romper UI existente) */
.card-tool{
  display:flex;flex-direction:column;justify-content:space-between;min-height:200px;
  color:#fff;position:relative;cursor:pointer;
  transition:transform .08s ease,box-shadow .2s ease,filter .2s ease;
}
.card-tool .tool-icon{font-size:28px;color:#fff}
.card-tool .tool-desc{color:rgba(255,255,255,.85)}
.card-tool:hover,.card-tool:focus-within{
  transform:translateY(-2px);
  box-shadow:0 1.25rem 2.25rem -1rem rgba(0,0,0,.18);
  filter:saturate(1.03);
}

/* Gradientes (con buen contraste) */
.grad-indigo{background:linear-gradient(135deg,#6f42c1,#0d6efd)}
.grad-green{background:linear-gradient(135deg,#20c997,#198754)}
.grad-cyan{background:linear-gradient(135deg,#0dcaf0,#0d6efd)}

/* Botones de filtro activos: tono consistente y no invasivo */
.filter-btn.active{
  border-color:var(--brand-primary)!important;
  color:var(--brand-primary)!important;
  background:rgba(13,110,253,.08)!important;
}

/* Layout herramientas (sidebar+panel en herramientas individuales) */
.wt-tool-wrap{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:992px){.wt-tool-wrap{grid-template-columns:420px 1fr}}

/* Paneles */
.wt-panel{
  background:var(--surface);
  border:1px solid rgba(0,0,0,.08);
  border-radius:1rem;
  padding:0;overflow:hidden;
}
.wt-panel-header{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;color:#fff}
.wt-panel-header .icon{font-size:20px}
.wt-panel-body{padding:1rem;background:var(--surface)}
.wt-panel.grad-indigo .wt-panel-header{background:linear-gradient(135deg,#6f42c1,#0d6efd)}
.wt-panel.grad-green .wt-panel-header{background:linear-gradient(135deg,#20c997,#198754)}
.wt-panel.grad-cyan .wt-panel-header{background:linear-gradient(135deg,#0dcaf0,#0d6efd);color:#0b1220}

/* Estados de foco visibles (accesibilidad, sin cambiar brand) */
:where(a,button,.btn,.form-control,.form-select,.tool-link):focus-visible{
  outline:0!important;
  box-shadow:var(--focus-ring)!important;
}

/* Inputs/Buttons: focus suave consistente */
.form-control:focus,.form-select:focus,.btn:focus{
  box-shadow:var(--focus-ring);outline:0;
}

/* Área de resultado */
.wt-result{
  background:var(--surface-2);
  border:1px dashed rgba(0,0,0,.15);
  border-radius:.75rem;
  padding:1rem;min-height:220px;color:inherit;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  line-height:1.4;
}

.wt-panel-body.drag-active{
  border:1px dashed rgba(13,110,253,.45);
  border-radius:.75rem;
  background:rgba(13,110,253,.05);
}

.wt-tool-wrap.wt-tool-vertical{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.wt-tool-wrap.wt-tool-vertical .wt-panel{
  width:100%;
}
#editorPanel.is-collapsed #editorPanelBody{
  display:none;
}
#editorPanel.is-collapsed .wt-panel-header{
  border-bottom-left-radius:1rem;
  border-bottom-right-radius:1rem;
}

.markdown-body{
  line-height:1.65;
  font-size:1rem;
  color:inherit;
  max-width:100%;
}
.markdown-body :where(h1,h2,h3,h4,h5,h6){
  font-weight:700;
  line-height:1.3;
  margin-top:1.5rem;
  margin-bottom:.75rem;
}
.markdown-body h1{font-size:1.9rem}
.markdown-body h2{font-size:1.55rem}
.markdown-body h3{font-size:1.35rem}
.markdown-body h4{font-size:1.2rem}
.markdown-body h5{font-size:1.05rem}
.markdown-body h6{font-size:1rem;color:rgba(33,37,41,.75)}
html[data-bs-theme="dark"] .markdown-body h6{color:rgba(222,226,230,.75)}
.markdown-body h1,
.markdown-body h2{
  border-bottom:1px solid rgba(0,0,0,.08);
  padding-bottom:.4rem;
}
html[data-bs-theme="dark"] .markdown-body h1,
html[data-bs-theme="dark"] .markdown-body h2{
  border-bottom-color:rgba(255,255,255,.12);
}
.markdown-body :where(p,ul,ol,pre,table,blockquote){margin-bottom:1rem}
.markdown-body> :first-child{margin-top:0}
.markdown-body> :last-child{margin-bottom:0}
.markdown-body ul,
.markdown-body ol{
  padding-left:1.4rem;
  margin-left:0;
}
.markdown-body ul{list-style:disc}
.markdown-body ol{list-style:decimal}
.markdown-body li+li{margin-top:.35rem}
.markdown-body li > p{margin-top:.35rem}
.markdown-body li ul,
.markdown-body li ol{margin-top:.35rem;margin-bottom:.35rem}
.markdown-body blockquote{
  border-left:.25rem solid rgba(13,110,253,.35);
  padding-left:.75rem;
  color:rgba(33,37,41,.75);
  background:rgba(13,110,253,.05);
}
html[data-bs-theme="dark"] .markdown-body blockquote{
  border-left-color:rgba(13,110,253,.6);
  color:rgba(222,226,230,.8);
  background:rgba(13,110,253,.12);
}
.markdown-body pre{
  background:rgba(13,110,253,.08);
  padding:1rem;
  border-radius:.75rem;
  overflow:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
html[data-bs-theme="dark"] .markdown-body pre{
  background:rgba(13,110,253,.18);
}
.markdown-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:.9em;
  background:rgba(13,110,253,.08);
  padding:.1rem .35rem;
  border-radius:.35rem;
}
html[data-bs-theme="dark"] .markdown-body code{
  background:rgba(13,110,253,.18);
}
.markdown-body pre code{
  background:transparent;
  padding:0;
}
.markdown-body table{
  width:100%;
  display:block;
  overflow:auto;
  border-collapse:collapse;
  font-size:.95rem;
}
.markdown-body table th,
.markdown-body table td{
  border:1px solid rgba(0,0,0,.08);
  padding:.5rem .65rem;
}
html[data-bs-theme="dark"] .markdown-body table th,
html[data-bs-theme="dark"] .markdown-body table td{
  border-color:rgba(255,255,255,.1);
}
.markdown-body table th{
  background:rgba(13,110,253,.08);
  font-weight:600;
}
html[data-bs-theme="dark"] .markdown-body table th{
  background:rgba(13,110,253,.18);
}
.markdown-body a{
  color:var(--brand-primary);
  text-decoration:underline dotted;
}
.markdown-body a:hover{text-decoration:underline}
.markdown-body img{
  max-width:100%;
  height:auto;
  border-radius:.5rem;
}
.markdown-body hr{
  border:0;
  border-top:1px solid rgba(0,0,0,.12);
  margin:2rem 0;
}
html[data-bs-theme="dark"] .markdown-body hr{
  border-top-color:rgba(255,255,255,.15);
}
.markdown-body kbd{
  background:rgba(0,0,0,.08);
  border-radius:.35rem;
  padding:.2rem .4rem;
  font-size:.8rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
html[data-bs-theme="dark"] .markdown-body kbd{
  background:rgba(255,255,255,.15);
}
.markdown-body details{
  border:1px solid rgba(0,0,0,.12);
  background:rgba(0,0,0,.03);
  padding:.75rem 1rem;
  border-radius:.75rem;
}
.markdown-body details[open]{
  box-shadow:0 .5rem 1.5rem -.75rem rgba(0,0,0,.2);
}
html[data-bs-theme="dark"] .markdown-body details{
  border-color:rgba(255,255,255,.15);
  background:rgba(255,255,255,.05);
}
.markdown-body summary{
  cursor:pointer;
  font-weight:600;
}
.markdown-body mark{
  background:rgba(255,193,7,.45);
  padding:.1rem .25rem;
  border-radius:.35rem;
}

/* Badges de categoría (mejor contraste) */
.badge-content{background:#198754}
.badge-devops{background:#0dcaf0;color:#0b1220}

/* Navbar fija (blur suave; sin comportamientos engañosos) */
.navbar.sticky-top{
  background-color:var(--bs-body-bg)!important;z-index:1200;
  box-shadow:0 .25rem .75rem rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
  backdrop-filter:saturate(180%) blur(6px);
}
html[data-bs-theme="dark"] .navbar.sticky-top{border-bottom-color:rgba(255,255,255,.06)}
.navbar .navbar-toggler{border:0;box-shadow:none}
.navbar .navbar-toggler:focus-visible{box-shadow:var(--focus-ring)}
.navbar-nav .dropdown-menu{width:min(24rem,90vw);padding:.75rem 1rem;border-radius:.75rem}
@media (min-width:992px){.navbar-nav .dropdown-menu{width:26rem}}
.navbar-nav .dropdown-item{border-radius:.5rem}
.navbar-nav .dropdown-item.active,.navbar-nav .dropdown-item:active{background:rgba(13,110,253,.12);color:inherit}
html[data-bs-theme="dark"] .navbar-nav .dropdown-item.active,
html[data-bs-theme="dark"] .navbar-nav .dropdown-item:active{background:rgba(13,110,253,.22)}
.navbar-nav .dropdown-item small{white-space:normal}
.navbar-nav .dropdown-header{font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
.navbar-nav .dropdown-divider{opacity:.2}

/* Toast */
.toast{z-index:2000;top:var(--toast-top,12px)!important}
@media (max-width:575.98px){.toast{width:calc(100vw - 1.5rem)}}

.metroweb-toast{
  --toast-bg-main: linear-gradient(135deg, rgba(13,110,253,.92), rgba(6,54,164,.92));
  --toast-bg-solid: #0d3aa6;
  --toast-border: rgba(6,48,148,.55);
  --toast-accent: rgba(111,66,193,.65);
  --toast-progress-color: rgba(255,255,255,.75);
  --toast-contrast: #f8f9ff;
  border-radius:1rem;
  overflow:hidden;
  border:1px solid var(--toast-border);
  border-inline-start:.35rem solid var(--toast-accent);
  box-shadow:0 1.25rem 2.5rem -1.35rem rgba(15,23,42,.55);
  padding:0;
  min-width:280px;
  max-width:380px;
  pointer-events:auto;
  backdrop-filter:saturate(150%) blur(6px);
  background:var(--toast-bg-main);
  color:var(--toast-contrast);
}
.metroweb-toast .toast-inner{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1rem 1.15rem;
  min-height:3.5rem;
}
.metroweb-toast .toast-text{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  flex:1;
  min-width:0;
}
.metroweb-toast .toast-title{
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.01em;
}
.metroweb-toast .toast-message{
  font-size:1rem;
  font-weight:600;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.metroweb-toast .toast-close{
  margin:0;
  align-self:center;
  --bs-btn-close-color: var(--toast-contrast);
  --bs-btn-close-opacity:.45;
  --bs-btn-close-hover-opacity:.85;
  --bs-btn-close-focus-shadow:0 0 0 .15rem rgba(0,0,0,.15);
}
.metroweb-toast .toast-close:focus-visible{
  outline:0;
  box-shadow:var(--bs-btn-close-focus-shadow);
}
.metroweb-toast .toast-progress{
  height:4px;
  width:100%;
  background:var(--toast-progress-color, rgba(255,255,255,.75));
  transform-origin:left center;
  animation:toast-progress var(--toast-duration,2800ms) linear forwards;
}
@media (prefers-reduced-motion: reduce){
  .metroweb-toast{
    backdrop-filter:none;
  }
  .metroweb-toast .toast-progress{
    animation:none;
  }
}

.metroweb-toast.text-bg-primary{
  --toast-bg-main: linear-gradient(135deg,#6f42c1,#0d6efd);
  --toast-bg-solid: #3055d8;
  --toast-border: rgba(13,110,253,.45);
  --toast-accent: rgba(111,66,193,.85);
  --toast-progress-color: rgba(255,255,255,.65);
  background: var(--toast-bg-main) !important;
}
.metroweb-toast.text-bg-success{
  --toast-bg-main: linear-gradient(135deg,#20c997,#198754);
  --toast-bg-solid: #1e9f78;
  --toast-border: rgba(25,135,84,.45);
  --toast-accent: rgba(11,101,62,.85);
  --toast-progress-color: rgba(235,255,247,.55);
  background: var(--toast-bg-main) !important;
}
.metroweb-toast.text-bg-info{
  --toast-bg-main: linear-gradient(135deg,#0dcaf0,#0d6efd);
  --toast-bg-solid: #1a98ff;
  --toast-border: rgba(13,202,240,.45);
  --toast-accent: rgba(9,149,255,.8);
  --toast-progress-color: rgba(13,202,240,.5);
  background: var(--toast-bg-main) !important;
}
.metroweb-toast.text-bg-warning{
  --toast-bg-main: linear-gradient(135deg,#ffe08a,#ff9f1c);
  --toast-bg-solid: #ffb347;
  --toast-border: rgba(255,159,28,.45);
  --toast-accent: rgba(255,143,0,.85);
  --toast-progress-color: rgba(255,159,28,.5);
  background: var(--toast-bg-main) !important;
}
.metroweb-toast.text-bg-danger{
  --toast-bg-main: linear-gradient(135deg,#ff6b6b,#dc3545);
  --toast-bg-solid: #e64a58;
  --toast-border: rgba(220,53,69,.45);
  --toast-accent: rgba(173,24,43,.85);
  --toast-progress-color: rgba(255,255,255,.45);
  background: var(--toast-bg-main) !important;
}
.metroweb-toast.text-bg-secondary{
  --toast-bg-main: linear-gradient(135deg,#6c757d,#212529);
  --toast-bg-solid: #3b434b;
  --toast-border: rgba(0,0,0,.18);
  --toast-accent: rgba(108,117,125,.9);
  --toast-progress-color: rgba(230,232,236,.45);
  background: var(--toast-bg-main) !important;
}
.metroweb-toast.text-bg-light{
  --toast-bg-main: linear-gradient(135deg,#f8f9fb,#e9eefc);
  --toast-bg-solid: #e3e8fb;
  --toast-border: rgba(13,110,253,.18);
  --toast-accent: rgba(13,110,253,.55);
  --toast-progress-color: rgba(13,110,253,.35);
  background: var(--toast-bg-main) !important;
}
.metroweb-toast.text-bg-dark{
  --toast-bg-main: linear-gradient(135deg,#141a2b,#020817);
  --toast-bg-solid: #0b1220;
  --toast-border: rgba(0,0,0,.35);
  --toast-accent: rgba(111,66,193,.6);
  --toast-progress-color: rgba(255,255,255,.55);
  background: var(--toast-bg-main) !important;
}


@keyframes toast-progress{
  from{transform:scaleX(1);}to{transform:scaleX(0);}
}

/* Localización */
.lang-en{display:none}
html[data-lang="en"] .lang-en{display:inline}
html[data-lang="en"] .lang-es{display:none}

/* Botón de acción (procesamiento seguro y claro) */
.btn-action{
  background-image: linear-gradient(135deg, #6f42c1, #0d6efd) !important;
  color:#fff !important;border:0 !important;text-shadow:0 1px 0 rgba(0,0,0,.25);
  padding:.65rem 1rem;font-weight:600;border-radius:.75rem;
  box-shadow:0 .6rem 1.25rem -.4rem rgba(13,110,253,.45);
}
.btn-action:hover{filter:brightness(1.03);box-shadow:0 .75rem 1.5rem -.5rem rgba(13,110,253,.55)}
.btn-action.processing{opacity:.85;cursor:wait}
.btn-action .spinner{
  display:none;width:1rem;height:1rem;border:.18rem solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;margin-right:.5rem;
}
.btn-action.processing .spinner{display:inline-block}

/* Keyframes */
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Accesibilidad adicional / seguridad de interacción ===== */

/* Evita que la tarjeta se “desplace” demasiado en hover si el usuario prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .card-tool:hover,.card-tool:focus-within{transform:none;filter:none}
  .btn-action .spinner{animation-duration:1.2s}
}

/* Mejor foco para enlaces “stretched-link” invisibles dentro de tarjetas */
.tool-link{
  border-radius:1rem; /* debe coincidir con la tarjeta para focus ring limpio */
}

/* Ayuda para el enlace "Skip to content" si se usa .visually-hidden-focusable */
.visually-hidden-focusable:not(:focus):not(:focus-within){
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within{
  position:static!important;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;border:1px solid rgba(0,0,0,.15);
  border-radius:.5rem;padding:.25rem .5rem;
}

/* Modo alto contraste (soporte opcional) */
@media (forced-colors: active){
  :where(a,button,.btn,.form-control,.form-select,.tool-link):focus-visible{
    outline: 2px solid CanvasText !important;
    box-shadow:none !important;
  }
  .card-tool,.wt-panel{border:1px solid CanvasText}
}

/* Pequeña mejora de contraste en texto blanco sobre gradientes */
.grad-green .tool-desc{color:rgba(255,255,255,.92)}
.grad-cyan .tool-desc{color:rgba(255,255,255,.93)}
.grad-indigo .tool-desc{color:rgba(255,255,255,.93)}