/* XIPALAPLUTS · CATEGORÍA TEXTO V1 */
.text-tool-page {
  min-height: 100vh;
  color: var(--text, #0b1b33);
  background:
    radial-gradient(circle at 8% 0%, rgba(37, 99, 235, .10), transparent 30rem),
    radial-gradient(circle at 96% 4%, rgba(124, 58, 237, .08), transparent 26rem),
    linear-gradient(180deg, #fbfcff 0%, #f5f8fc 48%, #eef3f9 100%);
}
.text-tool-page * { box-sizing: border-box; }
.text-tool-page .container { width: min(1160px, calc(100% - 32px)); margin-inline: auto; }
.text-tool-header {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid rgba(30, 58, 96, .08);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(18px) saturate(150%);
}
.text-tool-header__inner {
  min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.text-tool-brand { display: inline-flex; align-items: center; gap: 11px; color: #0b1b33; text-decoration: none; font-weight: 950; letter-spacing: .05em; }
.text-tool-brand::before {
  content: "⚡"; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px;
  color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); box-shadow: 0 12px 28px rgba(49, 92, 214, .25);
}
.text-tool-nav { display: flex; align-items: center; gap: 22px; }
.text-tool-nav a { color: #586b82; text-decoration: none; font-weight: 780; font-size: .92rem; }
.text-tool-nav a:hover { color: #0b1b33; }
.theme-toggle {
  width: 42px; height: 42px; border: 1px solid rgba(30, 58, 96, .11); border-radius: 13px;
  background: rgba(255,255,255,.94); color: #18304d; cursor: pointer; box-shadow: 0 8px 24px rgba(30,58,96,.06);
}
.tool-hero { padding: 62px 0 32px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; color: #718198; font-size: .88rem; }
.breadcrumbs a { color: #315f9f; text-decoration: none; font-weight: 780; }
.tool-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 36px; }
.category-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(124, 58, 237, .16);
  border-radius: 999px; background: rgba(124, 58, 237, .07); color: #6d35bd; font-size: .76rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
}
.tool-hero h1 { margin: 17px 0 14px; max-width: 820px; color: #0b1b33; font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: .97; letter-spacing: -.045em; }
.tool-hero p { max-width: 760px; margin: 0; color: #5f7188; font-size: 1.04rem; line-height: 1.75; }
.tool-trust { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 23px; }
.tool-trust span { padding: 8px 11px; border: 1px solid rgba(30,58,96,.09); border-radius: 999px; background: rgba(255,255,255,.75); color: #52657d; font-size: .8rem; font-weight: 760; }
.tool-icon-large {
  display: grid; place-items: center; width: 110px; height: 110px; border-radius: 30px; color: #fff; font-size: 2.5rem; font-weight: 950;
  background: linear-gradient(135deg, #8b5cf6 0%, #6d4dd7 45%, #2563eb 100%);
  box-shadow: 0 28px 70px rgba(85, 65, 190, .26);
}
.workspace-section { padding: 30px 0 76px; }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 22px; align-items: start; }
.tool-app-card {
  position: relative; padding: clamp(20px, 4vw, 34px); border: 1px solid rgba(31,57,94,.10); border-radius: 28px;
  background: rgba(255,255,255,.97); box-shadow: 0 28px 72px rgba(31,55,91,.13); overflow: hidden;
}
.tool-app-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #8b5cf6, #2563eb, #22d3ee); }
.tool-app-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.tool-app-heading h2 { margin: 0 0 7px; color: #0b1b33; font-size: 1.35rem; }
.tool-app-heading p { margin: 0; color: #708096; line-height: 1.55; }
.available-pill { flex: 0 0 auto; padding: 8px 11px; border-radius: 999px; background: rgba(34,197,94,.10); color: #15803d; font-size: .76rem; font-weight: 900; }
.tool-side { display: grid; gap: 14px; }
.side-card { padding: 20px; border: 1px solid rgba(31,57,94,.09); border-radius: 20px; background: rgba(255,255,255,.78); box-shadow: 0 14px 38px rgba(31,55,91,.07); }
.side-card h3 { margin: 0 0 12px; color: #0b1b33; font-size: 1rem; }
.side-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.side-list li { position: relative; padding-left: 24px; color: #63748a; font-size: .9rem; line-height: 1.45; }
.side-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #2563eb; font-weight: 950; }
.editor-layout { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { color: #18304d; font-weight: 850; font-size: .92rem; }
.field-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.micro-copy { color: #76869a; font-size: .78rem; font-weight: 700; }
.tool-input, .tool-select, .tool-textarea {
  width: 100%; border: 1px solid rgba(31,57,94,.12); border-radius: 15px; outline: none; color: #0b1b33; background: #f9fbfe;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.tool-input, .tool-select { min-height: 48px; padding: 0 14px; }
.tool-textarea { min-height: 190px; padding: 15px; resize: vertical; line-height: 1.65; }
.tool-textarea-large { min-height: 270px; }
.tool-textarea-small { min-height: 120px; }
.tool-input:focus, .tool-select:focus, .tool-textarea:focus { border-color: #5f79e8; background: #fff; box-shadow: 0 0 0 4px rgba(96, 116, 232, .10); }
.row-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.metrics-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.metrics-grid-six { grid-template-columns: repeat(6, minmax(0,1fr)); }
.metric-card { padding: 16px 12px; border: 1px solid rgba(31,57,94,.09); border-radius: 16px; background: linear-gradient(155deg, #fff, #f4f7fc); text-align: center; }
.metric-card strong { display: block; color: #0b1b33; font-size: 1.45rem; }
.metric-card span { color: #74849a; font-size: .76rem; }
.panel-soft { padding: 19px; border: 1px solid rgba(31,57,94,.09); border-radius: 18px; background: #f5f8fc; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.panel-heading h3 { margin: 3px 0 0; color: #0b1b33; font-size: 1rem; }
.panel-kicker { color: #7550c4; font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .10em; }
.status-pill { padding: 6px 9px; border-radius: 999px; color: #265ea9; background: rgba(37,99,235,.08); font-size: .75rem; font-weight: 850; }
.keyword-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.keyword-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 999px; color: #264463; background: #fff; border: 1px solid rgba(31,57,94,.09); font-size: .78rem; }
.keyword-chip strong { color: #6d3fc0; }
.empty-inline { color: #8090a4; font-size: .86rem; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 13px; border: 1px solid transparent;
  font: inherit; font-weight: 880; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: linear-gradient(135deg, #2563eb 0%, #4774e8 52%, #7c3aed 100%); box-shadow: 0 15px 30px rgba(49,92,214,.22); }
.button-secondary { color: #18304d; border-color: rgba(31,57,94,.11); background: #fff; box-shadow: 0 8px 22px rgba(31,55,91,.055); }
.button-ghost-danger { color: #be3151; border-color: rgba(190,49,81,.13); background: rgba(251,113,133,.055); }
.button-wide { width: 100%; }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.tool-status { min-height: 22px; margin: 0; color: #6e7f94; font-size: .87rem; font-weight: 700; }
.tool-status.success { color: #168143; }
.tool-status.error { color: #c53b59; }
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.option-grid-compact { grid-template-columns: repeat(3, minmax(0,1fr)); }
.check-card { display: flex; align-items: flex-start; gap: 10px; padding: 13px; border: 1px solid rgba(31,57,94,.09); border-radius: 14px; background: #f8fafd; cursor: pointer; }
.check-card input { margin-top: 3px; accent-color: #6c55d9; }
.check-card span { display: grid; gap: 3px; }
.check-card strong { color: #203a59; font-size: .86rem; }
.check-card small { color: #7a899d; line-height: 1.4; }
.single-check { width: 100%; }
.conversion-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-button { padding: 10px 13px; border: 1px solid rgba(31,57,94,.10); border-radius: 12px; background: #f7f9fc; color: #53667e; font-weight: 820; cursor: pointer; }
.choice-button.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, #7056dc, #356fe1); box-shadow: 0 10px 23px rgba(74,77,194,.20); }
.limit-box { display: grid; gap: 9px; padding: 14px; border: 1px solid rgba(31,57,94,.09); border-radius: 15px; background: #f7f9fd; }
.hidden { display: none !important; }
.limit-heading { display: flex; justify-content: space-between; gap: 12px; color: #5f7188; font-size: .82rem; }
.progress-track { height: 9px; overflow: hidden; border-radius: 999px; background: #e5eaf2; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#22c55e,#2563eb); transition: width .2s ease, background .2s ease; }
.result-box { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; padding: 17px; border: 1px solid rgba(31,57,94,.10); border-radius: 16px; background: #f5f8fc; }
.result-label { grid-column: 1 / -1; color: #718198; font-size: .75rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.result-box code { min-width: 0; overflow-wrap: anywhere; color: #4d3a9f; font-size: 1rem; font-weight: 850; }
.copy-inline { border: 0; border-radius: 10px; padding: 8px 11px; color: #fff; background: #315fca; font-weight: 850; cursor: pointer; }
.url-preview { padding: 12px 14px; border-radius: 13px; background: #0d1d34; color: #aebfd3; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; }
.url-preview strong { color: #83c9ff; }
.compare-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.diff-summary { display: flex; flex-wrap: wrap; gap: 12px; }
.diff-legend { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; background: #f5f7fb; color: #5b6d83; font-size: .78rem; }
.diff-legend i { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.diff-legend.added i { background: #22c55e; }
.diff-legend.removed i { background: #f43f5e; }
.diff-result { max-height: 480px; overflow: auto; border: 1px solid rgba(31,57,94,.10); border-radius: 15px; background: #0b1728; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.diff-line { display: grid; grid-template-columns: 42px 1fr; min-height: 32px; border-bottom: 1px solid rgba(148,163,184,.08); color: #c6d2e3; font-size: .82rem; line-height: 1.55; }
.diff-line:last-child { border-bottom: 0; }
.diff-line .mark { display: grid; place-items: center; color: #7890a9; background: rgba(255,255,255,.025); }
.diff-line .content { padding: 6px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.diff-line.added { background: rgba(34,197,94,.08); }
.diff-line.added .mark { color: #86efac; background: rgba(34,197,94,.12); }
.diff-line.removed { background: rgba(244,63,94,.08); }
.diff-line.removed .mark { color: #fda4af; background: rgba(244,63,94,.12); }
.empty-state { margin: 0; padding: 35px 20px; color: #8fa2b8; text-align: center; }
.table-shell { overflow-x: auto; border: 1px solid rgba(31,57,94,.10); border-radius: 16px; background: #fff; }
.result-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.result-table th, .result-table td { padding: 12px 14px; border-bottom: 1px solid rgba(31,57,94,.08); text-align: left; }
.result-table th { color: #52667e; background: #f4f7fb; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }
.result-table td { color: #354d68; font-size: .87rem; }
.result-table tr:last-child td { border-bottom: 0; }
.table-empty { padding: 30px !important; color: #7d8ca0 !important; text-align: center !important; }
.density-bar { width: 100%; min-width: 100px; height: 8px; overflow: hidden; border-radius: 999px; background: #e9edf4; }
.density-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#8b5cf6,#2563eb); }
.info-section { padding: 76px 0; }
.info-section.alt { border-block: 1px solid rgba(31,57,94,.07); background: rgba(255,255,255,.52); }
.section-heading { max-width: 720px; margin-bottom: 28px; }
.section-kicker { color: #6f45be; font-size: .76rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.section-heading h2 { margin: 9px 0 10px; color: #0b1b33; font-size: clamp(1.8rem,4vw,3rem); }
.section-heading p { margin: 0; color: #66778d; line-height: 1.7; }
.steps-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.step-card { padding: 22px; border: 1px solid rgba(31,57,94,.09); border-radius: 20px; background: #fff; box-shadow: 0 14px 38px rgba(31,55,91,.07); }
.step-card span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #fff; background: linear-gradient(135deg,#7056dc,#2f70df); font-weight: 900; }
.step-card h3 { margin: 16px 0 7px; color: #0b1b33; font-size: 1rem; }
.step-card p { margin: 0; color: #708096; line-height: 1.55; }
.related-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.related-card { display: block; padding: 20px; border: 1px solid rgba(31,57,94,.09); border-radius: 19px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 14px 36px rgba(31,55,91,.065); transition: transform .2s ease, box-shadow .2s ease; }
.related-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(31,55,91,.11); }
.related-card span { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 13px; border-radius: 13px; background: rgba(124,58,237,.09); font-size: 1.2rem; }
.related-card h3 { margin: 0 0 6px; color: #0b1b33; font-size: 1rem; }
.related-card p { margin: 0; color: #718198; font-size: .86rem; line-height: 1.5; }
.faq-list { display: grid; gap: 10px; max-width: 900px; }
.faq-item { border: 1px solid rgba(31,57,94,.09); border-radius: 16px; background: #fff; overflow: hidden; }
.faq-item summary { padding: 17px 19px; color: #193451; font-weight: 850; cursor: pointer; }
.faq-item p { margin: 0; padding: 0 19px 18px; color: #6b7c92; line-height: 1.65; }
.text-tool-footer { padding: 44px 0; color: #a8b9cd; background: linear-gradient(145deg,#071426,#0c1d36); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-inner strong { color: #fff; }
.footer-inner a { color: #a8b9cd; text-decoration: none; }
.footer-inner a:hover { color: #fff; }

/* Dark mode compatible with the approved Home */
html[data-theme="dark"] .text-tool-page {
  --text: #f8fafc;
  color: #f8fafc;
  background:
    radial-gradient(circle at 10% 0%, rgba(59,130,246,.17), transparent 30rem),
    radial-gradient(circle at 96% 4%, rgba(124,58,237,.14), transparent 26rem),
    linear-gradient(180deg,#07111f,#0a1729 48%,#07111f);
}
html[data-theme="dark"] .text-tool-header { border-color: rgba(148,163,184,.14); background: rgba(7,17,31,.84); }
html[data-theme="dark"] .text-tool-brand,
html[data-theme="dark"] .tool-hero h1,
html[data-theme="dark"] .tool-app-heading h2,
html[data-theme="dark"] .side-card h3,
html[data-theme="dark"] .field label,
html[data-theme="dark"] .panel-heading h3,
html[data-theme="dark"] .check-card strong,
html[data-theme="dark"] .section-heading h2,
html[data-theme="dark"] .step-card h3,
html[data-theme="dark"] .related-card h3,
html[data-theme="dark"] .faq-item summary { color: #f8fafc; }
html[data-theme="dark"] .text-tool-nav a,
html[data-theme="dark"] .tool-hero p,
html[data-theme="dark"] .side-list li,
html[data-theme="dark"] .tool-app-heading p,
html[data-theme="dark"] .section-heading p,
html[data-theme="dark"] .step-card p,
html[data-theme="dark"] .related-card p,
html[data-theme="dark"] .faq-item p { color: #9fb0c8; }
html[data-theme="dark"] .tool-app-card,
html[data-theme="dark"] .side-card,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .related-card,
html[data-theme="dark"] .faq-item { border-color: rgba(148,163,184,.15); background: rgba(15,29,51,.96); box-shadow: 0 25px 65px rgba(2,8,23,.35); }
html[data-theme="dark"] .tool-input,
html[data-theme="dark"] .tool-select,
html[data-theme="dark"] .tool-textarea { color: #f8fafc; border-color: rgba(148,163,184,.17); background: #081526; }
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .panel-soft,
html[data-theme="dark"] .check-card,
html[data-theme="dark"] .limit-box,
html[data-theme="dark"] .result-box,
html[data-theme="dark"] .table-shell { border-color: rgba(148,163,184,.14); background: #0a182b; }
html[data-theme="dark"] .metric-card strong,
html[data-theme="dark"] .result-table td { color: #e7eef8; }
html[data-theme="dark"] .button-secondary,
html[data-theme="dark"] .choice-button { color: #dce7f5; border-color: rgba(148,163,184,.15); background: #0a182b; }
html[data-theme="dark"] .result-table th { color: #b4c3d6; background: #0d1c31; }
html[data-theme="dark"] .result-table td { border-color: rgba(148,163,184,.10); }
html[data-theme="dark"] .info-section.alt { border-color: rgba(148,163,184,.10); background: rgba(255,255,255,.018); }
html[data-theme="dark"] .keyword-chip { color: #cbd8e8; border-color: rgba(148,163,184,.13); background: #0d1c31; }

@media (max-width: 940px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .tool-side { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metrics-grid, .metrics-grid-six { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .text-tool-page .container { width: min(100% - 22px, 1160px); }
  .text-tool-header__inner { min-height: 66px; }
  .text-tool-nav { display: none; }
  .tool-hero { padding-top: 45px; }
  .tool-hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .tool-icon-large { width: 82px; height: 82px; border-radius: 23px; font-size: 1.9rem; }
  .workspace-section { padding-bottom: 56px; }
  .tool-app-card { border-radius: 22px; }
  .tool-app-heading { display: grid; }
  .available-pill { width: max-content; }
  .row-fields, .compare-grid, .option-grid, .option-grid-compact, .steps-grid, .related-grid, .tool-side { grid-template-columns: 1fr; }
  .metrics-grid, .metrics-grid-six { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tool-actions .button { flex: 1 1 100%; }
  .info-section { padding: 58px 0; }
  .footer-inner { display: grid; }
}