/* Diseño del mockup del módulo 1: pantallas del grupo «entrar» (D175).
   Entrar (01), el link de la clave (30), el error, Yo (10) y Cómo se usa (11). Los colores del mockup que no tiene
   estilo.css salen del acento de la empresa: el texto sobre el acento suave y el borde de la línea de pasos. */
:root { --marca-texto: color-mix(in srgb, var(--marca-fuerte) 65%, #000); --marca-borde: color-mix(in srgb, var(--marca) 50%, #fff); }

/* ── Entrar, el link de la clave y el error sin usuario: la parte oscura y la hoja blanca (mockup 01 y 30) ── */
.entrar-pagina { min-height: 100vh; min-height: 100dvh; background: var(--papel); }
.entrar-marca { flex: none; gap: 12px; padding: 44px 24px 52px; background: var(--g800); color: #fff; }
.entrar-marca::after { display: none; }
.entrar-marca .sello { flex: none; }
.entrar-sello { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: #b6bec6; }
.entrar-sello b { color: #fff; letter-spacing: .16em; }
.entrar-logo { width: 150px; }
.entrar-logo.sin-blanco { background: var(--papel); padding: 10px 14px; border-radius: 14px; }   /* un logo oscuro, sobre blanco */
.entrar-sun { margin: 4px 0 -4px; padding-left: .22em; font-size: 40px; letter-spacing: .22em; color: #fff; line-height: 1.2; }
.entrar-frase { color: #b6bec6; font-size: 15px; letter-spacing: .04em; }
.entrar-tiendas { color: var(--g400); font-size: 12.5px; letter-spacing: .06em; margin-top: 0; }
.invitacion .entrar-marca { padding: 34px 24px 48px; }

main.entrar-hoja { flex: 1; display: flex; flex-direction: column; width: 100%; max-width: none; margin: -26px 0 0; padding: 26px 22px 20px;
                   position: relative; background: var(--papel); border-radius: 26px 26px 0 0; }
.entrar-form { flex: 1; width: 100%; max-width: 420px; margin: 0 auto; padding: 0; gap: 16px; }
.entrar-form form { display: flex; flex-direction: column; gap: 16px; }
.entrar-form p { margin: 0; }
.entrar-titulo { display: flex; flex-direction: column; gap: 4px; }
.entrar-form h1 { margin: 0; font-size: 26px; line-height: 1.2; }
.invitacion .entrar-form h1 { font-size: 23px; line-height: 1.25; }
.entrar-titulo .icono-circ { margin-bottom: 8px; }
.entrar-form .campo { display: flex; flex-direction: column; gap: 6px; }
.entrar-form label { margin: 0; font-size: 13.5px; font-weight: 700; }
.select-caja { position: relative; }
.entrar-form .select-caja select { appearance: none; -webkit-appearance: none; font-size: 16px; padding: 13px 44px 13px 14px; cursor: pointer; }
.select-caja .ico { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--tinta); }
.entrar-form .clave { font-size: 16px; }
.entrar-form .boton { margin-top: 4px; min-height: 52px; padding: 14px 18px; font-size: 16px; }
.entrar-form .con-sun { margin-top: auto; padding-top: 6px; text-align: center; font-size: 11.5px; }
.pill-clave { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; padding: 3px 10px 3px 8px;
              border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--marca-suave); color: var(--marca-texto); }
.pill-clave.gris { background: var(--gris); color: var(--suave); }

/* La clave en 6 casillas: el input queda encima, sin verse (clave_casillas.html). Sin JavaScript, el input de siempre. */
.pin { display: none; }
.pin-caja.con-casillas { position: relative; }
.pin-caja.con-casillas .pin { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.pin span { height: 54px; display: flex; align-items: center; justify-content: center; background: var(--papel);
            border: 1.5px solid var(--linea-fuerte); border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.pin span.lleno::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--g800); }
.pin span.foco { border-color: var(--marca-fuerte); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 35%, transparent); }
.entrar-form .pin-caja.con-casillas .clave { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
    background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; letter-spacing: 0;
    box-shadow: none; outline: none; cursor: pointer; }
.pin-caja.con-casillas .clave::selection { background: transparent; }
.pin-caja.con-casillas .clave:-webkit-autofill { transition: background-color 600000s 0s, color 600000s 0s; }

/* ── El error con usuario: una tarjeta con el aviso ── */
.icono-circ.alerta { width: 44px; height: 44px; border-radius: 14px; background: var(--alerta-suave); color: var(--alerta); }
.error-caja { max-width: 460px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.error-caja p { margin: 0; font-size: 15px; }

/* ── Yo (mockup 10) y Cómo se usa (11): el rótulo sobre el nombre, en el encabezado oscuro ── */
body:has(main > .yo) .barra-textos::before, body:has(main > .guia) .barra-textos::before { font-size: 14px; color: #b6bec6; line-height: 1.3; }
body:has(main > .yo) .barra-textos::before { content: "Tu cuenta"; }
body:has(main > .guia) .barra-textos::before { content: "Tu guía"; }
.yo, .guia { display: flex; flex-direction: column; gap: 14px; }
.yo-col, .guia-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.yo .seccion, .guia .seccion { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: -6px; }
.yo .seccion h2, .guia .seccion h2 { margin: 0; font-size: 15px; }
.yo-datos { padding: 0; overflow: hidden; }
.yo-datos p { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; padding: 11px 16px; font-size: 13px;
              border-top: 1px solid var(--linea); }
.yo-datos p:first-child { border-top: 0; }
.yo-datos .suave { flex: none; }
.yo-datos strong { text-align: right; text-wrap: balance; }
.yo .lista-links { display: flex; flex-direction: column; gap: 0; overflow: hidden; background: var(--papel); border: 1px solid var(--linea);
                   border-radius: var(--radio); box-shadow: var(--sombra); }
.yo .lista-links li a { justify-content: flex-start; gap: 12px; min-height: 56px; padding: 12px 16px; border: 0; border-top: 1px solid var(--linea);
                        border-radius: 0; box-shadow: none; }
.yo .lista-links li:first-child a { border-top: 0; }
.yo .lista-links li a::after { display: none; }
.yo .lista-links .icono-circ { width: 44px; height: 44px; border-radius: 14px; background: var(--marca-suave); color: var(--marca-texto); }
.yo .lista-links .icono-circ.gris { background: var(--gris); color: var(--suave); }
.yo .lista-links .tx { flex: 1; min-width: 0; line-height: 1.35; }
.yo .lista-links .tx small { display: block; font-size: 12.5px; font-weight: 400; color: var(--suave); }
.yo .lista-links .chev { color: var(--tenue); }
.yo-salir { margin: 0; }
.yo-salir .boton { min-height: 52px; font-size: 16px; }
.firma-sun { margin: 0; text-align: center; font-size: 11.5px; color: var(--tenue); letter-spacing: .03em; }
.firma-sun b { color: var(--suave); letter-spacing: .16em; }

/* Cómo se usa: dos tarjetas para elegir la tarea (los radios van antes, así no hace falta :has), los pasos numerados y las preguntas */
.guia-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.guia-op { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.guia-op label { display: flex; flex-direction: column; gap: 8px; padding: 14px; line-height: 1.25; cursor: pointer; background: var(--papel);
                 border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.guia-op label b { font-family: var(--letra-titulos); font-weight: 600; font-size: 15px; }
.guia-op label small { font-size: 12px; color: var(--suave); }
.guia-op .icono-circ { width: 38px; height: 38px; border-radius: 11px; background: var(--marca-suave); color: var(--marca-texto); }
/* La tienda tiene tres tareas (el pedido, recibir y el inventario del grupo D): van en tres columnas */
.guia-op:has(label[for="g-3"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.guia-op:has(label[for="g-3"]) label { padding: 12px 10px; }
.guia-op:has(label[for="g-3"]) label b { font-size: 14px; }
#g-1:checked ~ .guia-op label[for="g-1"], #g-2:checked ~ .guia-op label[for="g-2"], #g-3:checked ~ .guia-op label[for="g-3"] { background: var(--g800); border-color: var(--g800); color: #fff; }
#g-1:checked ~ .guia-op label[for="g-1"] small, #g-2:checked ~ .guia-op label[for="g-2"] small, #g-3:checked ~ .guia-op label[for="g-3"] small { color: #b6bec6; }
#g-1:checked ~ .guia-op label[for="g-1"] .icono-circ, #g-2:checked ~ .guia-op label[for="g-2"] .icono-circ, #g-3:checked ~ .guia-op label[for="g-3"] .icono-circ { background: var(--g700); color: var(--marca); }
#g-1:focus-visible ~ .guia-op label[for="g-1"], #g-2:focus-visible ~ .guia-op label[for="g-2"], #g-3:focus-visible ~ .guia-op label[for="g-3"] { outline: 3px solid var(--marca-fuerte); outline-offset: 2px; }
.ruta { display: flex; flex-direction: column; padding: 18px 16px 6px; background: var(--papel); border: 1px solid var(--linea);
        border-radius: var(--radio); box-shadow: var(--sombra); }
.ruta.en-guia:not(.sola) { display: none; }
#g-1:checked ~ .ruta-1.en-guia, #g-2:checked ~ .ruta-2.en-guia, #g-3:checked ~ .ruta-3.en-guia { display: flex; }
.pasos-g { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.pasos-g li { position: relative; counter-increment: paso; padding: 4px 0 18px 42px; font-size: 14.5px; line-height: 1.45; }
.pasos-g li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: flex; align-items: center;
                      justify-content: center; border-radius: 50%; background: var(--marca); color: var(--g900); font-family: var(--letra-titulos);
                      font-weight: 600; font-size: 14px; }
.pasos-g li::after { content: ""; position: absolute; left: 14px; top: 34px; bottom: 4px; width: 2px; background: var(--marca-borde); }
.pasos-g li:last-child::after { display: none; }
.faq { overflow: hidden; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); }
.faq details { border-top: 1px solid var(--linea); }
.faq details:first-child { border-top: 0; }
.faq summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 14px 16px; cursor: pointer;
               font-weight: 700; font-size: 14.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { margin-left: auto; color: var(--tenue); transition: transform .15s; }
.faq details[open] summary .ico { transform: rotate(90deg); }
.faq details > p { margin: 0; padding: 0 16px 14px; font-size: 13.5px; color: var(--suave); }
.otros-pasos { padding: 0 16px 6px; }
.otros-pasos .ruta { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.otros-pasos .ruta + .ruta { margin-top: 4px; }
.otros-pasos h3 { margin: 2px 0 10px; font-size: 14px; }
.otros-pasos .pasos-g li { font-size: 13.5px; color: var(--suave); }
.otros-pasos .pasos-g li strong { color: var(--tinta); }
.anotar h2 { margin: 0 0 6px; font-size: 15px; }
.anotar ul { margin: 0; padding-left: 20px; font-size: 14px; color: var(--suave); }
.anotar li { margin: 4px 0; }

@media (min-width: 900px) {
  /* Entrar: mitad y mitad, como el mockup */
  .entrar-pagina { flex-direction: row; }
  .entrar-marca { flex: 1; width: auto; padding: 40px; }
  .invitacion .entrar-marca { padding: 40px; }
  .entrar-logo { width: 300px; }
  .entrar-frase { font-size: 15px; }
  main.entrar-hoja { flex: 1; margin: 0; padding: 40px 32px; border-radius: 0; align-items: center; justify-content: center; }
  .entrar-form { flex: none; width: 420px; max-width: 100%; margin: 0; }
  .entrar-form .con-sun { margin-top: 0; }

  /* Yo y Cómo se usa: el título en la tarjeta oscura de arriba y lo demás en dos columnas */
  main:has(> .yo) > .titulo-pagina, main:has(> .guia) > .titulo-pagina { display: block; margin: 0; padding: 20px 24px 2px; font-size: 24px;
      background: var(--g800); color: #fff; border-radius: 20px 20px 0 0; }
  main:has(> .yo) > .titulo-pagina::before, main:has(> .guia) > .titulo-pagina::before { display: block; margin-bottom: 2px; font-family: var(--letra);
      font-size: 14px; font-weight: 400; letter-spacing: 0; color: #b6bec6; }
  main:has(> .yo) > .titulo-pagina::before { content: "Tu cuenta"; }
  main:has(> .guia) > .titulo-pagina::before { content: "Tu guía"; }
  main:has(> .yo) > .sub-pagina, main:has(> .guia) > .sub-pagina { margin: 0 0 16px; padding: 2px 24px 20px; font-size: 14px;
      background: var(--g800); color: #b6bec6; border-radius: 0 0 20px 20px; }
  .yo, .guia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
}

/* Entrar (mockup de la reestructura, 01; Camila, 20-10): a la izquierda solo SUN; a la derecha, la empresa por su logo. */
.entrar-sun-solo { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.entrar-sun-solo .sello { width: 64px; height: 64px; }
.entrar-raya { display: block; width: 44px; height: 2px; background: rgba(255,255,255,.28); border-radius: 2px; margin: 4px 0; }
.entrar-form .etiqueta { font-size: 13.5px; font-weight: 700; }
.entrar-empresas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.entrar-emp { height: 64px; display: grid; place-items: center; padding: 8px; background: var(--papel); border: 1.5px solid var(--linea-fuerte);
              border-radius: 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.entrar-emp img { max-width: 100%; max-height: 44px; object-fit: contain; }
.entrar-emp b { font-size: 12px; }
.entrar-emp:hover { border-color: var(--g400); }
.entrar-emp[aria-checked="true"] { border-color: var(--g800); box-shadow: 0 0 0 3px rgba(29,33,38,.12); }