/* Una superficie amarilla propia del recorrido, igual de legible en ambos temas. */
@layer superficie {
  .tour { --tour-flecha-y:var(--e5); position:fixed; z-index:var(--z-tour); width:min(340px, calc(100vw - var(--e6))); padding:var(--e5); border-radius:var(--r-dialogo); background:var(--color-tour-fondo); color:var(--color-tour-texto); box-shadow:var(--sombra-2); font-size:var(--t-2); line-height:var(--interlineado-cuerpo); max-height:calc(100dvh - var(--e6)); overflow:visible; }
  .tour::before { content:""; position:absolute; top:var(--tour-flecha-y, var(--e5)); width:var(--e3); height:var(--e3); background:var(--color-tour-fondo); transform:rotate(45deg); }
  .tour[data-lado="derecha"]::before { left:calc(-1 * var(--e1)); }
  .tour[data-lado="izquierda"]::before { right:calc(-1 * var(--e1)); }
  .tour[data-lado="abajo"]::before { top:calc(-1 * var(--e1)); left:var(--e5); }
  .tour[data-lado="arriba"]::before { top:auto; bottom:calc(-1 * var(--e1)); left:var(--e5); }
  .tour--sin-ancla::before,.tour--acoplado::before { display:none; }
  .tour h2 { font-size:var(--t-4); color:inherit; margin:0; }
  .tour p { margin:var(--e3) 0; max-width:65ch; }
  .tour-cabecera { display:flex; align-items:start; gap:var(--e3); justify-content:space-between; }
  .tour-cabecera .c-boton { min-width:0; padding-inline:var(--e2); }
  .tour-contexto { font-size:var(--t-1); color:var(--color-tour-secundario); }
  .tour-campo { display:grid; gap:var(--e2); margin-block:var(--e3); }
  .tour .c-campo__control { color:var(--color-tour-texto); background:var(--color-tour-control); border-color:var(--color-tour-secundario); min-height:var(--alto-control); }
  .tour-acciones { display:flex; flex-wrap:wrap; gap:var(--e2); margin-top:var(--e4); }
  .tour .c-boton { white-space:normal; text-align:left; max-width:100%; }
  .tour .tour-primario { color:var(--color-tour-fondo); background:var(--color-tour-texto); border-color:var(--color-tour-texto); }
  .tour .tour-primario:hover { background:var(--color-tour-secundario); }
  .tour .tour-secundario { color:var(--color-tour-texto); background:transparent; border-color:var(--color-tour-secundario); }
  .tour .tour-secundario:hover { background:var(--color-tour-control); }
  .tour :focus-visible { outline:2px solid var(--color-tour-texto); outline-offset:var(--e1); }
  .tour-opciones { margin-top:var(--e4); }
  .tour-opciones summary { color:var(--color-tour-texto); cursor:pointer; text-decoration:underline; text-underline-offset:var(--e1); padding-block:var(--e2); }
  .tour-opciones button { margin-top:var(--e2); }
  .tour-error,.tour-confirmacion { font-weight:600; }
  .tour-ancla { outline:3px solid var(--color-tour-anillo); outline-offset:var(--e1); scroll-margin:var(--e5); }
  .tour--acoplado { position:relative; top:auto; left:auto; width:auto; max-width:100%; max-height:none; margin:var(--e4); padding:var(--e4); flex-shrink:0; }
  .tour--modal { padding:var(--e3) var(--e4); margin:var(--e3) var(--e4); }
  .tour--modal h2 { font-size:var(--t-3); }
  .tour--modal p { margin:var(--e2) 0 0; }
  .tour--modal .tour-acciones:empty { display:none; }
  .wizard-cliente-superficie > .tour--modal { width:min(46rem, calc(100% - 2 * var(--e4))); margin-inline:auto; }
  .tour-retomar { color:var(--color-tour-texto); background:var(--color-tour-fondo); border-color:var(--color-tour-secundario); margin:var(--e2) var(--e4); }
  .wizard-cliente-cabecera .tour-retomar { margin:0; flex-shrink:0; }
  .tour-retomar:focus-visible { outline:2px solid var(--color-tour-texto); outline-offset:var(--e1); }
  .tour-aviso { position:fixed; bottom:var(--e4); right:var(--e4); z-index:var(--z-tour); max-width:min(440px, calc(100vw - var(--e6))); padding:var(--e4); background:var(--color-tour-fondo); color:var(--color-tour-texto); border-radius:var(--r-tarjeta); box-shadow:var(--sombra-2); }
  .tour-aviso button { margin-top:var(--e2); }
  @media (max-width:640px) { .tour { font-size:var(--t-2); } .tour--acoplado { margin:var(--e3) 0 var(--e4); } .tour .c-boton { min-height:var(--alto-control-tactil); } .tour-campo .c-campo__control { min-height:var(--alto-control-tactil); } }
}