@charset "utf-8";
/* Componentes comunes de las herramientas CSS de TechRecursos · complementa css-minimo.css */

.tt-page { padding: var(--spacing-md) var(--spacing-sm) var(--spacing-xl); }
.tt-page *, .tt-page *::before, .tt-page *::after { box-sizing: border-box; }
.tt-breadcrumb { font-size: var(--font-size-smm); color: var(--text-light); margin: 0 0 var(--spacing-md); }
.tt-breadcrumb a { color: var(--primary-color); text-decoration: none; }
.tt-breadcrumb a:hover { text-decoration: underline; }

/* Cabecera */
.tt-hero { background: var(--primary-gradient); color: #fff; border-radius: var(--border-radius-lg); padding: var(--spacing-xl); display: grid; grid-template-columns: 1fr auto; gap: var(--spacing-lg); align-items: center; box-shadow: 0 10px 30px rgba(102, 126, 234, .25); }
.tt-hero h1 { margin: var(--spacing-sm) 0; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.2; color: #fff; }
.tt-hero p { margin: 0; max-width: 700px; color: rgba(255, 255, 255, .92); }
.tt-hero .tag-destacado { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .35); }
.tt-hero-badges { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin: var(--spacing-md) 0 0; padding: 0; list-style: none; }
.tt-hero-badges li { font-size: .8rem; font-weight: 600; background: rgba(0, 0, 0, .14); padding: .3rem .7rem; border-radius: 999px; }
.tt-hero-symbol { font: 700 2.4rem/1 Consolas, Menlo, monospace; color: rgba(255, 255, 255, .55); white-space: nowrap; padding: 0 var(--spacing-md); }

/* Herramienta: dos columnas; en móvil una sola, ordenada con --o */
.tt-tool { margin-top: var(--spacing-lg); display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: var(--spacing-md); align-items: start; }
.tt-tool.is-wide-left { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.tt-col { min-width: 0; }
.tt-panel { max-width: 100%; min-width: 0; background: var(--light-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: var(--spacing-lg); box-shadow: 0 2px 12px var(--shadow-color); }
.tt-panel + .tt-panel { margin-top: var(--spacing-md); }
.tt-panel h2, .tt-panel h3 { margin: 0 0 var(--spacing-sm); font-size: 1.05rem; color: var(--text-color); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tt-panel h2 small, .tt-panel h3 small { margin-left: auto; font-weight: 500; font-size: .78rem; color: var(--text-light); }
.tt-step { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--primary-gradient); color: #fff; font-size: .8rem; font-weight: 700; flex-shrink: 0; }
.tt-hint { font-size: .82rem; color: var(--text-light); margin: 0 0 var(--spacing-sm); line-height: 1.5; }
.tt-note { font-size: .82rem; background: rgba(79, 172, 254, .1); border: 1px solid rgba(79, 172, 254, .35); border-radius: var(--border-radius-sm); padding: .5rem .7rem; margin: 0 0 var(--spacing-sm); line-height: 1.5; }

/* Controles */
.tt-segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 3px; gap: 3px; margin-bottom: var(--spacing-md); }
.tt-segmented button { border: 0; background: transparent; padding: .5rem .4rem; border-radius: 6px; font: 600 .84rem var(--font-family); color: var(--text-light); cursor: pointer; }
.tt-segmented button[aria-pressed="true"] { background: var(--light-color); color: var(--primary-color); box-shadow: 0 1px 4px var(--shadow-color); }
.tt-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: var(--spacing-sm); }
.tt-chips button { border: 1px solid var(--border-color); background: var(--light-color); color: var(--text-color); border-radius: 999px; padding: .28rem .75rem; font: 500 .78rem var(--font-family); cursor: pointer; }
.tt-chips button:hover { border-color: var(--primary-color); }
.tt-chips button[aria-pressed="true"] { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.tt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm) var(--spacing-md); }
.tt-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-sm); }
.tt-field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.tt-field > span, .tt-field > label { font-size: .78rem; font-weight: 600; color: var(--text-color); }
.tt-field input[type="number"], .tt-field input[type="text"], .tt-field select, .tt-field textarea, .tt-input { width: 100%; font: 500 .88rem var(--font-family); color: var(--text-color); padding: .45rem .55rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--light-color); }
.tt-field textarea { font-family: Consolas, Menlo, monospace; font-size: .82rem; resize: vertical; }
.tt-field small { font-size: .72rem; color: var(--text-light); line-height: 1.4; }
.tt-range { display: grid; grid-template-columns: 1fr 76px; gap: .5rem; align-items: center; }
.tt-range input[type="range"] { width: 100%; accent-color: var(--primary-color); }
.tt-check { display: flex; gap: .5rem; align-items: flex-start; font-size: .84rem; margin: .3rem 0; cursor: pointer; line-height: 1.4; }
.tt-check input { margin-top: .2rem; accent-color: var(--primary-color); flex-shrink: 0; }
.tt-sep { border: 0; height: 1px; background: var(--border-color); margin: var(--spacing-md) 0; width: 100%; opacity: 1; }

/* Botones */
.tt-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--spacing-sm); align-items: center; }
.tt-btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border: 1px solid var(--border-color); background: var(--light-color); color: var(--text-color); border-radius: var(--border-radius-sm); padding: .5rem .85rem; font: 600 .84rem var(--font-family); cursor: pointer; transition: var(--transition-fast); text-decoration: none; }
.tt-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
.tt-btn-primary { background: var(--primary-gradient); color: #fff; border-color: transparent; }
.tt-btn-primary:hover { color: #fff; box-shadow: 0 6px 16px rgba(102, 126, 234, .35); }
.tt-btn-sm { padding: .32rem .6rem; font-size: .78rem; }
.tt-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Código */
.tt-code { margin: 0; background: #1e1b3a; color: #e2e8f0; border-radius: var(--border-radius-sm); padding: var(--spacing-md); font: 13px/1.6 Consolas, "Cascadia Code", Menlo, monospace; overflow: auto; max-height: 480px; white-space: pre; tab-size: 2; max-width: 100%; }
.tt-code .t-c { color: #8b93b5; font-style: italic; }
.tt-code .t-at { color: #f5a3ff; }
.tt-code .t-s { color: #9fd3ff; }
.tt-code .t-p { color: #7ee2b8; }
.tt-code .t-n { color: #ffcf8a; }
.tt-code .t-i { color: #ff8f8f; font-weight: 700; }
.tt-code .t-str { color: #c3e88d; }
.tt-code .t-tag { color: #9fd3ff; }

/* Editor con números de línea */
.tt-editor { display: grid; grid-template-columns: auto 1fr; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); overflow: hidden; background: #fff; }
.tt-editor:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(102, 126, 234, .15); }
.tt-gutter { margin: 0; padding: .7rem .45rem .7rem .6rem; background: var(--bg-color); color: #a0aec0; font: 13px/1.6 Consolas, Menlo, monospace; text-align: right; user-select: none; overflow: hidden; border-right: 1px solid var(--border-color); white-space: pre; }
.tt-editor textarea { border: 0; outline: none; resize: vertical; padding: .7rem; font: 13px/1.6 Consolas, Menlo, monospace; color: #1a202c; min-height: 260px; width: 100%; white-space: pre; overflow: auto; tab-size: 2; background: transparent; }
.tt-editor textarea:focus { outline: none; }

/* Diagnóstico */
.tt-diag { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.tt-diag li { position: relative; padding: .6rem .7rem .6rem 2.3rem; border-radius: var(--border-radius-sm); font-size: .84rem; line-height: 1.45; border: 1px solid; }
.tt-diag li::before { position: absolute; left: .7rem; top: .58rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: #fff; }
.tt-diag strong { display: block; margin-bottom: .1rem; }
.tt-diag code { background: rgba(0, 0, 0, .06); padding: 0 .25rem; border-radius: 3px; font-size: .9em; }
.tt-diag .is-ok { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.tt-diag .is-ok::before { content: "✓"; background: #10b981; }
.tt-diag .is-info { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.tt-diag .is-info::before { content: "i"; background: #3b82f6; }
.tt-diag .is-warn { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.tt-diag .is-warn::before { content: "!"; background: #f59e0b; }
.tt-diag .is-error { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.tt-diag .is-error::before { content: "×"; background: #ef4444; }

/* Estadísticas */
.tt-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; }
.tt-stat { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: .6rem .7rem; }
.tt-stat b { display: block; font-size: 1.25rem; color: var(--text-color); line-height: 1.2; }
.tt-stat span { font-size: .74rem; color: var(--text-light); }

/* Aviso flotante */
.tt-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--dark-color); color: #fff; padding: .6rem 1rem; border-radius: var(--border-radius-sm); font-size: .85rem; opacity: 0; pointer-events: none; transition: var(--transition-normal); z-index: 1200; max-width: calc(100vw - 32px); }
.tt-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Guía */
.tt-guide { margin-top: var(--spacing-xl); }
.tt-guide > section { background: var(--light-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: var(--spacing-xl); margin-bottom: var(--spacing-md); }
.tt-guide h2 { font-size: 1.45rem; line-height: 1.3; color: var(--text-color); margin: 0 0 var(--spacing-md); scroll-margin-top: 90px; }
.tt-guide h3 { font-size: 1.1rem; color: var(--text-color); margin: var(--spacing-lg) 0 var(--spacing-sm); }
.tt-guide p, .tt-guide li { color: #4a5568; line-height: 1.75; }
.tt-guide code { background: rgba(102, 126, 234, .1); color: #4c51bf; padding: .1rem .35rem; border-radius: 4px; font-size: .88em; font-family: Consolas, Menlo, monospace; }
.tt-guide pre { background: #1e1b3a; color: #e2e8f0; padding: var(--spacing-md); border-radius: var(--border-radius-sm); overflow: auto; font: 13px/1.6 Consolas, Menlo, monospace; }
.tt-guide pre code { background: none; color: inherit; padding: 0; }
.tt-guide .comparison-table table { table-layout: auto; }
.tt-guide .comparison-table td, .tt-guide .comparison-table th { font-size: .82rem; text-align: left; vertical-align: top; }
.tt-guide .comparison-table td:nth-child(2) { color: #4c51bf; background: #f5f7ff; border-left: 3px solid var(--primary-color); font-weight: 500; }
.tt-guide .comparison-table thead th:nth-child(2) { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); width: auto; }
.tt-guide .comparison-table thead th:first-child { width: auto; }
.tt-steps { counter-reset: paso; list-style: none; padding: 0; }
.tt-steps li { counter-increment: paso; position: relative; padding-left: 2.6rem; margin-bottom: var(--spacing-md); }
.tt-steps li::before { content: counter(paso); position: absolute; left: 0; top: .1rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--primary-gradient); color: #fff; font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.tt-faq details { border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 0 var(--spacing-md); margin-bottom: var(--spacing-sm); background: var(--bg-color); }
.tt-faq summary { cursor: pointer; font-weight: 600; padding: var(--spacing-md) 0; color: var(--text-color); }
.tt-faq details[open] summary { color: var(--primary-color); }
.tt-faq details p { margin-top: 0; }
.tt-guide .related-grid { gap: var(--spacing-md); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tt-guide .related-card .card-content h4 { margin-top: 0; }

/* Navegación por secciones (sticky-nav de css-minimo.css) */
#tt-herramienta { scroll-margin-top: 24px; }
@media (min-width: 651px) and (max-width: 1529px) {
  #stickyNav { left: 50%; top: 8px; width: calc(100vw - 32px); max-width: 1168px; max-height: none; padding: 6px 10px; border-radius: 12px; background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--border-color); box-shadow: 0 6px 20px rgba(15, 23, 42, .12); overflow-x: auto; overflow-y: hidden; transform: translateX(-50%) translateY(-20px); scrollbar-width: thin; }
  #stickyNav.visible { transform: translateX(-50%) translateY(0); }
  #stickyNav .sticky-nav__scroll-wrapper { display: flex; align-items: center; gap: 12px; }
  #stickyNav .scroll-wrapper__label { margin: 0; padding: 0; border: 0; white-space: nowrap; flex-shrink: 0; font-size: .75rem; }
  #stickyNav .scroll-wrapper__list { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; gap: 4px; margin: 0; padding: 0; justify-content: flex-start; }
  #stickyNav .list__title { width: auto !important; flex-shrink: 0; }
  #stickyNav .list__title a { display: inline-block; white-space: nowrap; border-left: none !important; padding: 5px 11px; border-radius: 16px; font-size: .78rem; }
  #tt-herramienta, .tt-guide h2 { scroll-margin-top: 70px; }
}

@media (max-width: 1024px) {
  .tt-tool, .tt-tool.is-wide-left { display: flex; flex-direction: column; gap: var(--spacing-md); }
  .tt-col { display: contents; }
  .tt-tool .tt-panel { order: var(--o, 9); margin-top: 0; width: 100%; }
}
@media (max-width: 640px) {
  .tt-page { padding: var(--spacing-sm) var(--spacing-xs) var(--spacing-lg); }
  .tt-hero { grid-template-columns: 1fr; padding: var(--spacing-lg); }
  .tt-hero-symbol { display: none; }
  .tt-panel { padding: var(--spacing-md); }
  .tt-grid2, .tt-grid3 { grid-template-columns: 1fr; }
  .tt-guide > section { padding: var(--spacing-md); }
  .tt-guide h2 { font-size: 1.25rem; }
}
.tt-stat b span { font-size: inherit; color: inherit; }

/* El atributo hidden siempre oculta, aunque el componente defina display */
.tt-page [hidden] { display: none !important; }