:root { --bg:#f6f7f9; --card:#fff; --ink:#1c2230; --mut:#667085; --acc:#1f3a5f; --line:#e3e6ec; --ok:#e8f3ec; --me:#e7eefb; --rec:#c62828; --g:#174a3c; --g-tile:rgba(255,255,255,.13); --g-mint:#a8e6cf; --g-mut:#b9d7cb; --gok:#1a9168; }
@media (prefers-color-scheme: dark) { :root { --bg:#14171c; --card:#1d222a; --ink:#e8ebf0; --mut:#9aa3b2; --acc:#8fb4ff; --line:#2c333f; --ok:#1b2e22; --me:#1f2c44; --rec:#ef5350; --gok:#3fc095; } }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 system-ui, sans-serif; background:var(--bg); color:var(--ink); min-height:100vh; display:flex; flex-direction:column; }
header { position:relative; padding:12px 16px; border-bottom:1px solid var(--line); }
h1 { margin:0 0 8px; font-size:18px; color:var(--acc); }
.bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:13px; color:var(--mut); }
.bar label, .chk { display:flex; gap:6px; align-items:center; }
select, button, input[type=text], input[type=password], input[type=number], textarea { font:inherit; color:inherit; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:6px 10px; }
select { max-width:240px; }
button { cursor:pointer; }
button:hover:not(:disabled) { border-color:var(--acc); }
button:disabled { opacity:.5; cursor:default; }
.ddbtn[aria-expanded="true"] { outline:2px solid var(--acc); outline-offset:1px; }
.ddbtn.green { background:var(--g); color:#fff; border-color:var(--g); border-radius:999px; padding:6px 14px; font-weight:600; }
.ddbtn.green:hover { border-color:var(--g-mint); }
.ddbtn.green[aria-expanded="true"] { outline-color:var(--g-mint); }

/* ventanas modales: estilo de la extensión; las de consumo y calculadora (.green) llevan marco verde e interior claro */
.backdrop { position:fixed; inset:0; z-index:20; background:rgba(0,0,0,.55); }
.backdrop[hidden] { display:none; }
.gcard { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:30; width:min(680px, calc(100vw - 24px)); max-height:90vh; overflow:auto; padding:16px 18px; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.3); }
.gcard[hidden] { display:none; }
.ghead { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.ghead h2 { margin:0; font-size:18px; color:var(--acc); }
.gx { width:34px; height:34px; padding:0; font-size:20px; line-height:1; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:6px; }
.gnote { margin:8px 0; color:var(--mut); font-size:12.5px; }
.gnote.err { color:var(--rec); }
.gnote a { color:var(--acc); }
.gform label { display:block; margin-top:12px; font-size:13px; font-weight:600; color:var(--ink); }
.gform label.gchk { display:flex; gap:6px; align-items:center; font-weight:400; color:var(--mut); }
.gform input[type=text], .gform input[type=password], .gform input[type=number], .gform select, .gform textarea { width:100%; max-width:none; margin-top:4px; padding:6px 10px; }
.gform input::placeholder { color:var(--mut); }
.gform textarea { min-height:110px; }
.gform small { display:block; font-weight:400; color:var(--mut); font-size:12px; }
.glimits { margin:16px 0 0; padding:8px 12px 12px; border:1px solid var(--line); border-radius:10px; }
.glimits legend { padding:0 6px; font-weight:600; font-size:13px; }
.grow { display:flex; gap:8px; align-items:center; margin-top:14px; }
.gbtn { display:inline-block; padding:6px 14px; color:var(--bg); background:var(--acc); border:1px solid var(--acc); border-radius:6px; font-weight:600; text-decoration:none; font-size:14px; cursor:pointer; }
.gbtn:hover:not(:disabled) { opacity:.9; }
.gbtn.ghost { color:var(--ink); background:var(--card); border-color:var(--line); }
.gbtn.ghost:hover:not(:disabled) { opacity:1; border-color:var(--acc); }
.gok { color:var(--gok); font-size:13px; }
.pill { display:inline-block; margin-left:6px; padding:2px 10px; color:var(--mut); background:var(--card); border:1px solid var(--line); border-radius:999px; font-size:12px; word-break:break-all; }

/* ventana verde (Consumo de IA y Calculadora): marco verde, interior con los estilos de la extensión */
.gcard.green { background:var(--g); color:#fff; border:none; border-radius:16px; box-shadow:0 12px 32px rgba(0,0,0,.35); }
.green .ghead h2 { color:#fff; font-size:17px; }
.green .gx { color:#fff; background:var(--g-tile); border:none; border-radius:10px; }
.green .gx:hover:not(:disabled) { background:rgba(255,255,255,.25); }
.green .gnote { color:var(--g-mut); }
.green .gnote a { color:var(--g-mint); }
.green .gbtn { color:var(--g); background:#fff; border:none; border-radius:999px; font-weight:700; }
.green .gbtn:hover:not(:disabled) { background:var(--g-mint); opacity:1; }
.green .gbtn.ghost { color:#fff; background:var(--g-tile); }
.green .gbtn.ghost:hover:not(:disabled) { background:rgba(255,255,255,.25); }

.umodel { margin-top:14px; padding:12px 14px; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px; }
.urow { display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; }
.ucount b { font-size:28px; }
.ucount span { color:var(--mut); font-size:14px; }
.ugroq { color:var(--mut); font-size:13px; letter-spacing:.04em; }
.track { position:relative; height:12px; margin:8px 0 12px; background:var(--line); border-radius:999px; }
.track i { position:absolute; left:0; top:0; height:100%; min-width:12px; width:0; background:var(--gok); border-radius:999px; transition:width .3s; }
.track i::after { content:''; position:absolute; right:-4px; top:50%; width:24px; height:24px; margin-top:-12px; background:var(--card); border:4px solid var(--gok); border-radius:50%; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr)); gap:10px; }
.tile { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.tile b { display:block; font-size:20px; }
.tile span { color:var(--mut); font-size:12px; }
.uname { margin-top:10px; font-size:13px; color:var(--mut); }
.rep { min-height:16px; margin-top:6px; color:var(--gok); font-size:12px; }
.ufoot { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; font-size:13px; }
.green .ufoot { padding:10px 14px; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px; }
.green .ufoot .gbtn { color:#fff; background:var(--g); }

main { flex:1; width:100%; max-width:760px; margin:0 auto; padding:16px 16px 150px; }
.intro { color:var(--mut); }
#chat { display:flex; flex-direction:column; gap:10px; }
.msg { max-width:88%; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--card); }
.msg.ai { align-self:flex-start; }
.msg.me { align-self:flex-end; background:var(--me); }
.msg .who { font-size:12px; color:var(--mut); margin-bottom:2px; }
.fb { margin-top:8px; padding:8px 10px; background:var(--ok); border-radius:8px; font-size:13px; }
.fb .better { margin-top:4px; font-style:italic; }
.nofb .fb { display:none; }
.sug { margin-top:8px; padding:8px 10px; background:var(--ok); border-radius:8px; font-size:13px; }
.sug summary { cursor:pointer; font-weight:600; color:var(--acc); }
.sug-en { margin-top:6px; font-size:14px; }
.sug-es { margin-top:4px; color:var(--mut); font-style:italic; }
.sug-hear { margin-top:6px; font-size:12px; padding:3px 10px; }
#review { margin-top:18px; padding:14px; background:var(--card); border:1px solid var(--line); border-radius:10px; white-space:pre-wrap; }
footer { position:fixed; left:0; right:0; bottom:0; background:var(--bg); border-top:1px solid var(--line); padding:10px 16px; display:flex; flex-direction:column; align-items:center; gap:8px; }
#status { color:var(--mut); font-size:13px; min-height:18px; text-align:center; }
#status.err { color:var(--rec); }
.ctrl { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.primary { background:var(--acc); color:var(--bg); border-color:var(--acc); }
.mic { min-width:200px; font-weight:600; }
.mic.rec { background:var(--rec); color:#fff; border-color:var(--rec); }

.gcard.wide { width:min(1040px, 96vw); height:90vh; overflow:hidden; }
.gcard.wide:not([hidden]) { display:flex; flex-direction:column; }
.gtools { display:flex; align-items:center; gap:8px; }
/* ventana de búsqueda de empleo (mismos estilos que la página Oferta de la extensión) */
.gcard.jobs { width:min(860px, calc(100vw - 24px)); }
.jtabs { display:flex; gap:8px; flex-wrap:wrap; }
.jtab { padding:6px 12px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:6px; font-weight:400; }
.jtab.on { color:var(--bg); background:var(--acc); border-color:var(--acc); }
.jpane[hidden] { display:none; }
.gform textarea.tall { min-height:200px; }
.grow.wrap { flex-wrap:wrap; }
.jres { margin-top:14px; padding:12px 14px; background:var(--bg); border:1px solid var(--line); border-radius:10px; font-size:14px; }
.jscore { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.jscore b { font-size:30px; }
.jscore .pill { margin-left:0; color:var(--acc); border-color:var(--acc); }
.jsec { margin-top:10px; }
.jsec h3 { margin:0 0 4px; font-size:13px; color:var(--acc); }
.jsec ul { margin:0; padding-left:18px; }
.jsec li { margin:2px 0; }
.jout { margin:10px 0 0; padding:12px 14px; max-height:50vh; overflow:auto; white-space:pre-wrap; word-break:break-word; font:13px/1.5 system-ui, sans-serif; background:var(--bg); border:1px solid var(--line); border-radius:10px; }
.jrow { display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center; margin-top:10px; padding:10px 12px; background:var(--bg); border:1px solid var(--line); border-radius:10px; }
.jrow .jmeta { font-size:12px; color:var(--mut); }
.jrow .jact { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.jrow select { font-size:12px; padding:4px 8px; }
.jrow .gbtn { padding:4px 10px; font-size:12px; }
#printSheet { display:none; }
@media print {
  body > *:not(#printSheet) { display:none !important; }
  #printSheet { display:block; margin:0; padding:0; white-space:pre-wrap; font:12pt/1.45 Georgia, serif; color:#000; background:#fff; }
}
.gcard.wide { width:min(1040px, 96vw); height:90vh; overflow:hidden; }
.gcard.wide:not([hidden]) { display:flex; flex-direction:column; }
.gtools { display:flex; align-items:center; gap:8px; }
.gframe, #calcFrame { flex:1; width:100%; min-height:0; border:0; border-radius:12px; background:#fff; }

/* explicación: buscar ofertas y configurar la entrevista */
.howto-wrap { margin-top:18px; }
.howto-title { margin:18px 0 8px; font-size:15px; color:var(--acc); }
.howto { width:100%; border-collapse:collapse; font-size:14px; color:var(--ink); }
.howto th, .howto td { text-align:left; vertical-align:top; padding:9px 10px; border-bottom:1px solid var(--line); }
.howto th { color:var(--ink); font-weight:700; border-bottom:2px solid var(--line); }
.howto td:first-child { font-weight:600; white-space:nowrap; }
.howto code { background:var(--card); border:1px solid var(--line); padding:1px 5px; border-radius:4px; font-size:12.5px; }
.howto-note { color:var(--mut); font-size:13px; }
.howto-note a { color:var(--acc); }
@media (max-width:640px) { .howto td:first-child { white-space:normal; } .howto { font-size:13px; } }
.addsteps { margin:8px 0; padding-left:20px; font-size:13px; color:var(--mut); }
.gadd .addsteps code { font-size:12px; }



/* Búsqueda de empleo (oferta): portales */
#portalsPane h3 { margin:16px 0 6px; font-size:14px; color:var(--acc); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.gform textarea.mid { min-height:120px; }
.gadd { margin-top:10px; }
.gadd summary { cursor:pointer; font-size:13px; color:var(--acc); }
a.gbtn { display:inline-block; }
@media (max-width:640px) { .grid2 { grid-template-columns:1fr; } }
.jrow .jmeta, .jrow > div:first-child { min-width:0; overflow-wrap:anywhere; }

/* botones del encabezado: todos en el azul de la extensión */
.ddbtn { background:var(--acc); color:var(--bg); border-color:var(--acc); font-weight:600; }
.ddbtn:hover:not(:disabled) { opacity:.92; }
.startwrap { display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; }
.startwrap[hidden] { display:none; }
.startwrap .ready { font-size:12px; color:var(--mut); }
.b2tag { margin-top:8px; font-size:12px; color:var(--acc); font-weight:600; }

/* sin zoom en móviles (el visor puede ignorar la etiqueta viewport) */
html, body { touch-action:manipulation; -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* ===== pasos 1 → 4: un color e icono por paso (botón, ventana y acordeón del cuerpo) ===== */
:root {
  --i-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.8 3 2.8 15 0 18M12 3c-2.8 3-2.8 15 0 18'/%3E%3C/svg%3E");
  --i-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E");
  --i-match:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 40 24'%3E%3Ccircle cx='7' cy='7' r='3.5'/%3E%3Cpath d='M1 21c0-3.6 2.7-6 6-6s6 2.4 6 6'/%3E%3Cpath d='M15 12h6M18.5 9l3 3-3 3'/%3E%3Ccircle cx='32' cy='12' r='8'/%3E%3Cpath d='M24 12h16'/%3E%3Cpath d='M32 4c2.4 2.6 2.4 13.4 0 16M32 4c-2.4 2.6-2.4 13.4 0 16'/%3E%3C/svg%3E");
  --i-mic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3M8 21h8'/%3E%3C/svg%3E");
  --c1:#1f3a5f; --c1-ink:#fff;
  --c2:#174a3c; --c2-ink:#fff;
  --c3:#5b4a8a; --c3-ink:#fff;
  --c4:#9a4f2a; --c4-ink:#fff;
}
@media (prefers-color-scheme: dark) { :root {
  --c1:#8fb4ff; --c1-ink:#0e1a2b;
  --c2:#3fc095; --c2-ink:#0c1f18;
  --c3:#b8a4f0; --c3-ink:#17112b;
  --c4:#f0a57c; --c4-ink:#2a150a;
} }
.s1 { --sc:var(--c1); --si:var(--c1-ink); --ico:var(--i-globe); }
.s2 { --sc:var(--c2); --si:var(--c2-ink); --ico:var(--i-user); }
.s3 { --sc:var(--c3); --si:var(--c3-ink); --ico:var(--i-match); }
.s4 { --sc:var(--c4); --si:var(--c4-ink); --ico:var(--i-mic); }
.num { display:inline-grid; place-items:center; flex:none; width:24px; height:24px; border-radius:50%; font-size:13px; font-weight:700; background:color-mix(in srgb, var(--si) 22%, transparent); }
.ic { display:inline-block; flex:none; width:20px; height:20px; background:currentColor; -webkit-mask:var(--ico) center/contain no-repeat; mask:var(--ico) center/contain no-repeat; }
.s3 .ic { width:34px; }

/* botones del encabezado */
.steps { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; margin-top:12px; }
.steps .sep { align-self:center; color:var(--mut); font-size:20px; line-height:1; }
.stepbtn { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; color:var(--si); background:var(--sc); border:1px solid var(--sc); border-radius:8px; font-weight:600; text-align:left; }
.stepbtn::before { content:attr(data-n); order:-2; display:inline-grid; place-items:center; flex:none; width:22px; height:22px; border-radius:50%; font-size:12px; background:color-mix(in srgb, var(--si) 22%, transparent); }
.stepbtn::after { content:''; order:-1; flex:none; width:18px; height:18px; background:currentColor; -webkit-mask:var(--ico) center/contain no-repeat; mask:var(--ico) center/contain no-repeat; }
.stepbtn.s3::after { width:32px; }
.stepbtn:hover:not(:disabled) { filter:brightness(1.1); border-color:var(--sc); }
.stepbtn[aria-expanded="true"] { outline:2px solid var(--sc); outline-offset:2px; }

/* ventanas: franja de color con número e icono, y el color del paso como acento */
.gcard.s1, .gcard.s2, .gcard.s3 { --acc:var(--sc); }
.gcard:is(.s1, .s2, .s3) .ghead { margin:-16px -18px 12px; padding:12px 18px; color:var(--si); background:var(--sc); border-radius:11px 11px 0 0; }
.gcard:is(.s1, .s2, .s3) .ghead h2 { display:flex; align-items:center; gap:10px; color:var(--si); }
.gcard:is(.s1, .s2, .s3) .gx { color:var(--si); background:transparent; border:1px solid color-mix(in srgb, var(--si) 45%, transparent); }

/* cuerpo: acordeón de los 4 pasos */
.flowhead h2 { margin:0 0 4px; font-size:17px; color:var(--ink); }
.flowhead p { margin:0 0 12px; color:var(--mut); font-size:13.5px; }
details.step { margin-top:10px; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
details.step > summary { list-style:none; display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; color:var(--si); background:var(--sc); }
details.step > summary::-webkit-details-marker { display:none; }
details.step > summary::after { content:''; flex:none; width:8px; height:8px; margin:0 4px 0 auto; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .15s; }
details.step[open] > summary::after { transform:rotate(-135deg); }
details.step > summary:focus-visible { outline:2px solid var(--ink); outline-offset:-3px; }
.stitle b { display:block; font-size:15px; }
.stitle small { display:block; font-weight:400; font-size:12.5px; opacity:.92; }
.sbody { padding:6px 16px 16px; border-left:4px solid var(--sc); color:var(--ink); }
.sbody h3.sub { margin:18px 0 6px; font-size:14px; color:var(--ink); }
.sbody .howto-title { color:var(--ink); }
.sbody a { color:var(--acc); }
.stepsl { margin:10px 0; padding-left:22px; }
.stepsl li { margin:4px 0; }
.callout { margin:10px 0; padding:8px 12px; font-size:13.5px; color:var(--mut); background:var(--bg); border-left:3px solid var(--sc); border-radius:0 8px 8px 0; }
.sbody code { background:var(--bg); border:1px solid var(--line); padding:1px 5px; border-radius:4px; font-size:12.5px; }

/* los 4 pasos en una fila (2 columnas en pantallas medianas, 1 en móvil) */
.steps { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; align-items:end; }
.steps .sep { display:none; }
.steps .stepbtn { width:100%; }
.steps .startwrap { display:flex; flex-direction:column; align-items:stretch; }
@media (max-width:900px) { .steps { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:520px) { .steps { grid-template-columns:1fr; } }
.steps { align-items:stretch; margin-top:26px; }
.steps .stepbtn { height:100%; min-height:48px; }
.steps .startwrap { position:relative; display:block; }
.steps .startwrap .ready { position:absolute; top:-18px; left:2px; }

/* ===== paso 0: configura tu modelo de IA (enlace, ventana y acordeón) ===== */
:root { --i-chip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3Cpath d='M9 2v4M15 2v4M9 18v4M15 18v4M2 9h4M2 15h4M18 9h4M18 15h4'/%3E%3Cpath d='M10 12h4'/%3E%3C/svg%3E"); --c0:#0e6b78; --c0-ink:#fff; }
@media (prefers-color-scheme: dark) { :root { --c0:#5cc8d8; --c0-ink:#06242a; } }
.s0 { --sc:var(--c0); --si:var(--c0-ink); --ico:var(--i-chip); }
.gcard.s0 { --acc:var(--sc); }
.gcard.s0 .ghead { margin:-16px -18px 12px; padding:12px 18px; color:var(--si); background:var(--sc); border-radius:11px 11px 0 0; }
.gcard.s0 .ghead h2 { display:flex; align-items:center; gap:10px; color:var(--si); }
.gcard.s0 .gx { color:var(--si); background:transparent; border:1px solid color-mix(in srgb, var(--si) 45%, transparent); }
.linkbtn { display:inline-flex; align-items:center; gap:6px; padding:0 2px; color:var(--sc); background:none; border:none; border-radius:4px; font:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.linkbtn:hover:not(:disabled) { text-decoration-thickness:2px; border-color:transparent; }
.linkbtn[aria-expanded="true"] { outline:2px solid var(--sc); outline-offset:2px; }
.linkbtn .num { width:20px; height:20px; font-size:12px; color:var(--si); background:var(--sc); }

/* ===== ¿Cómo funciona esto?: privacidad y condiciones de uso ===== */
:root { --i-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.2 8-8 9-4.8-1-8-4.5-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); --c5:#475569; --c5-ink:#fff; }
@media (prefers-color-scheme: dark) { :root { --c5:#a9b7cc; --c5-ink:#0f1722; } }
.s5 { --sc:var(--c5); --si:var(--c5-ink); --ico:var(--i-shield); }
.gcard.s5 { --acc:var(--sc); }
.gcard.s5 .ghead { margin:-16px -18px 12px; padding:12px 18px; color:var(--si); background:var(--sc); border-radius:11px 11px 0 0; }
.gcard.s5 .ghead h2 { display:flex; align-items:center; gap:10px; color:var(--si); font-size:16px; }
.gcard.s5 .gx { color:var(--si); background:transparent; border:1px solid color-mix(in srgb, var(--si) 45%, transparent); }
.infobody { font-size:14px; color:var(--ink); }
.infobody .lead { margin:0 0 6px; padding:10px 12px; background:var(--bg); border-left:4px solid var(--sc); border-radius:0 8px 8px 0; }
.infobody h3 { margin:16px 0 6px; font-size:14px; color:var(--sc); }
.infobody ul { margin:6px 0; padding-left:20px; }
.infobody li { margin:4px 0; }
.infobody p { margin:8px 0; }
.infobody a { color:var(--sc); }
.infobody code { background:var(--bg); border:1px solid var(--line); padding:1px 5px; border-radius:4px; font-size:12.5px; }

/* aviso de privacidad y mensajes de error de guardado */
.gnote.privacy { padding:8px 12px; color:var(--ink); background:var(--bg); border-left:4px solid var(--sc, var(--acc)); border-radius:0 8px 8px 0; font-size:13px; }
.gok.err { color:var(--rec); }

/* tablas dentro de "¿Cómo funciona esto?": el texto largo se parte en líneas, nunca se sale de la ventana */
.infobody .howto { table-layout:fixed; width:100%; }
.infobody .howto th, .infobody .howto td { width:50%; white-space:normal; overflow-wrap:anywhere; word-break:normal; }
.infobody .howto td:first-child { font-weight:400; white-space:normal; }

/* marca en la barra de controles y frase de apertura del cuerpo */
:root { --brand:#000; }
@media (prefers-color-scheme: dark) { :root { --brand:#f2f4f8; } }
.bar .brand { margin:0; font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--brand); }
.tagline { margin:6px 0 14px; font-size:17px; line-height:1.5; color:var(--ink); }
.tagline .t1 { display:inline-flex; align-items:center; gap:6px; color:var(--sc); }
.tagline .t1 .ic { width:20px; height:20px; }
.bar .brand { display:inline-flex; align-items:center; gap:5px; }
.bar .brand .bsep { font-weight:400; opacity:.6; }
.bar .brand .ic { --ico:var(--i-mic); width:15px; height:15px; }
.infobody .lead + .lead { margin-top:8px; }
.infobody .fine { margin:8px 0 0; font-size:12.5px; color:var(--mut); }
.infobody .howto.voices th, .infobody .howto.voices td { width:auto; font-size:13px; }
.infobody .howto.voices th:nth-child(1) { width:42%; }
.infobody .howto.voices th:nth-child(2) { width:14%; }
.infobody #voiceInfo { max-height:240px; overflow:auto; margin:6px 0; }

/* aviso legal de la ventana "¿Cómo funciona esto?" */
:root { --orange:#b45309; }
@media (prefers-color-scheme: dark) { :root { --orange:#fb923c; } }
.infobody .legal { margin:14px 0 0; padding:10px 12px; font-weight:700; font-size:13px; line-height:1.5; color:var(--orange); background:color-mix(in srgb, var(--orange) 10%, transparent); border-left:4px solid var(--orange); border-radius:0 8px 8px 0; }

/* frase de apertura: cada tramo con el color e icono de su paso, corriendo como texto normal */
.tagline .t1 { display:inline; }
.tagline .t1 .ic { width:20px; height:20px; margin-left:6px; vertical-align:-4px; }
.tagline .s3 .ic { width:34px; }

/* frase de apertura más discreta: texto más pequeño y color en lugar de negrilla */
.tagline { font-size:14.5px; line-height:1.6; margin:4px 0 12px; }
.tagline b.t1 { font-weight:500; }
.tagline .t1 .ic { width:16px; height:16px; margin-left:5px; vertical-align:-3px; }
.tagline .s3 .ic { width:28px; }