/* ==========================================================================
   fichas/comun.css · CAPA DE MARCA COMÚN A LAS 38 FICHAS Y ACTIVIDADES
   --------------------------------------------------------------------------
   Se carga al final. Ajusta lo que la paleta vieja resolvía distinto:
   textos sobre fondos oscuros, botones y detalles de identidad. Debajo
   van las utilidades que sustituyen los estilos que estaban en el HTML.
   Colores y fuentes: siempre desde variables.css.
   ========================================================================== */

/* Base: tipografía y color del sistema nuevo */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
::selection { background: rgba(var(--rgb-taupe), .7); }

/* Sobre fondos oscuros (portada, franjas, pasos, reflexiones) la tinta es clara */
.cover .eyebrow,
.cover .tech-tag,
.pageband .num,
.step .step-eyebrow,
.step .scale-labels,
.reflexion-box .ref-eyebrow,
.reflexion-box .ref-note { color: var(--color-on-dark-muted); }
.cover .tech-tag { border-color: rgba(var(--rgb-taupe), .45); }

/* Barra de herramientas: una acción principal y una secundaria */
.toolbar .btn-limpiar { color: rgba(var(--rgb-ivory), .8); }
.toolbar .btn-descargar { background: var(--color-olive); color: var(--color-cta-text); border: 1px solid var(--color-olive); }
.toolbar .btn-imprimir { background: transparent; color: var(--color-on-dark); border: 1px solid rgba(var(--rgb-ivory), .4); }
.toolbar .btn-descargar:hover { background: var(--color-cta-hover); border-color: var(--color-cta-hover); }
.toolbar .btn-imprimir:hover { border-color: var(--color-accent); }
.toolbar button { transition: background-color 250ms ease-out, border-color 250ms ease-out; }

/* Notas y recuadros de apoyo: beige con filete terracota, no taupe */
.note-box, .decision-box { background: var(--color-beige); }

/* Etiqueta sobre taupe: la terracota no alcanza, se usa chocolate */
.mito-card .mito-label { color: var(--color-chocolate); }

/* Campos sobre bloques oscuros: el texto de ejemplo en taupe */
.step :is(textarea, input)::placeholder,
.reflexion-box :is(textarea, input)::placeholder { color: rgba(var(--rgb-taupe), .75); }

/* Inventario: tres categorías, tres colores (la reflexión habla de "rojo (ajeno)") */
.item-tag.compartido { background: var(--color-mocha); border-color: var(--color-mocha); }
.legend .leg-item:nth-child(2) .leg-dot { background: var(--color-mocha) !important; }

/* Al imprimir no se muestran controles */
@media print { .toolbar { display: none !important; } }

/* Utilidades que sustituyen los estilos que estaban escritos dentro del HTML.
   Cada una conserva la prioridad que tenía el estilo en línea (!important),
   salvo display y width, que JavaScript sigue controlando. */

.st-62e8ef { font-family:var(--font-display) !important;font-size:28px !important;color:var(--color-chocolate) !important;font-weight:400 !important;margin-bottom:6px !important; }
.st-7397a1 { width:100%;max-width:600px !important;height:auto !important;display:block;margin:0 auto !important; }
.st-7b1fa2 { background:var(--color-taupe) !important;border-left:3px solid var(--color-terracotta) !important;padding:12px 16px !important;border-radius:0 !important;font-size:12px !important;line-height:1.6 !important;color:var(--color-chocolate) !important;font-style:italic !important;margin-top:14px !important; }
.st-812489 { font-size:13px !important;line-height:1.7 !important;color:var(--color-mocha) !important;font-weight:300 !important;max-width:600px !important; }
.st-84ec56 { font-size:13.5px !important;line-height:1.75 !important;color:var(--color-mocha) !important;font-weight:300 !important;margin-top:16px !important; }
.st-8921eb { display:flex;align-items:center !important;justify-content:space-between !important;margin-bottom:1rem !important;flex-wrap:wrap !important;gap:.75rem !important; }
.st-a92d5d { font-size:12px !important;color:var(--color-mocha) !important;font-style:italic !important;margin-bottom:4px !important;max-width:600px !important; }
.st-b81151 { font-size:13.5px !important;line-height:1.75 !important;color:var(--color-mocha) !important;font-weight:300 !important;margin-bottom:14px !important;max-width:600px !important; }
.st-bgBCE3CE { background:#BCE3CE !important; }
.st-bgBFDAEC { background:#BFDAEC !important; }
.st-bgD9C8E8 { background:#D9C8E8 !important; }
.st-bgEDDDA8 { background:#EDDDA8 !important; }
.st-bgF3C9C9 { background:#F3C9C9 !important; }
.st-bgF6EAAA { background:#F6EAAA !important; }
.st-bgbeige { background:var(--color-beige) !important; }
.st-bgolive { background:var(--color-olive) !important; }
.st-bgtaupe { background:var(--color-taupe) !important; }
.st-bgterracotta { background:var(--color-terracotta) !important; }
.st-cmocha-mt18px-mb8px { color:var(--color-mocha) !important;margin-top:18px !important;margin-bottom:8px !important; }
.st-db1822 { display:block;width:100%;background:var(--color-olive) !important;color:var(--color-cta-text) !important;font-family:var(--font-body) !important;font-weight:600 !important;font-size:16px !important;border:none !important;border-radius:0 !important;padding:.9rem !important;margin-top:1.25rem !important;cursor:pointer !important; }
.st-dblock-mb6px { display:block;margin-bottom:6px !important; }
.st-dc8cf4 { font-size:13.5px !important;line-height:1.75 !important;color:var(--color-mocha) !important;font-weight:300 !important;margin-top:12px !important; }
.st-dgrid-cols1fr-1fr-gap0-24px { display:grid;grid-template-columns:1fr 1fr !important;gap:0 24px !important; }
.st-dnone { display:none; }
.st-flex0-0-auto { flex:0 0 auto !important; }
.st-fs12px-cchocolate-fw500-wsnowrap { font-size:12px !important;color:var(--color-chocolate) !important;font-weight:500 !important;white-space:nowrap !important; }
.st-fs12px-cmocha { font-size:12px !important;color:var(--color-mocha) !important; }
.st-fs12px-cmocha-fstitalic-mb10px { font-size:12px !important;color:var(--color-mocha) !important;font-style:italic !important;margin-bottom:10px !important; }
.st-fs12px-cmocha-fstitalic-mb4px { font-size:12px !important;color:var(--color-mocha) !important;font-style:italic !important;margin-bottom:4px !important; }
.st-fs12px-cmocha-mb16px { font-size:12px !important;color:var(--color-mocha) !important;margin-bottom:16px !important; }
.st-fs12px-cmocha-mbp5rem { font-size:12px !important;color:var(--color-mocha) !important;margin-bottom:.5rem !important; }
.st-fs13px-cmocha-lh1p6-fw300-mb8px { font-size:13px !important;color:var(--color-mocha) !important;line-height:1.6 !important;font-weight:300 !important;margin-bottom:8px !important; }
.st-fs13px-lh1p7-cmocha-fw300 { font-size:13px !important;line-height:1.7 !important;color:var(--color-mocha) !important;font-weight:300 !important; }
.st-fs15p5px-cmocha-lh1p7 { font-size:15.5px !important;color:var(--color-mocha) !important;line-height:1.7 !important; }
.st-fs15p5px-cmocha-mb1rem { font-size:15.5px !important;color:var(--color-mocha) !important;margin-bottom:1rem !important; }
.st-fs17p5px-fw500-cchocolate { font-size:17.5px !important;font-weight:500 !important;color:var(--color-chocolate) !important; }
.st-fs20px { font-size:20px !important; }
.st-fs21px { font-size:21px !important; }
.st-fs23px { font-size:23px !important; }
.st-fstnormal-dblock { font-style:normal !important;display:block; }
.st-hp5px-bgtaupe-m14px-0 { height:.5px !important;background:var(--color-taupe) !important;margin:14px 0 !important; }
.st-mb0 { margin-bottom:0 !important; }
.st-mb18px { margin-bottom:18px !important; }
.st-mb4px { margin-bottom:4px !important; }
.st-mbp75rem { margin-bottom:.75rem !important; }
.st-minh110px { min-height:110px !important; }
.st-minh56px { min-height:56px !important; }
.st-minh64px { min-height:64px !important; }
.st-mt0 { margin-top:0 !important; }
.st-mt10px { margin-top:10px !important; }
.st-mt14px { margin-top:14px !important; }
.st-mt16px { margin-top:16px !important; }
.st-mt18px { margin-top:18px !important; }
.st-mt1p75rem { margin-top:1.75rem !important; }
.st-mt20px { margin-top:20px !important; }
.st-mt22px { margin-top:22px !important; }
.st-mt24px { margin-top:24px !important; }
.st-mt26px { margin-top:26px !important; }
.st-mt30px { margin-top:30px !important; }
.st-mt4px { margin-top:4px !important; }
.st-mt8px { margin-top:8px !important; }
.st-posstatic-mt14px { position:static !important;margin-top:14px !important; }
.st-posstatic-mt18px { position:static !important;margin-top:18px !important; }
.st-posstatic-mt20px { position:static !important;margin-top:20px !important; }
.st-posstatic-mt24px { position:static !important;margin-top:24px !important; }
.st-w0pc { width:0%; }
.st-w14pc { width:14%; }