/* ------- landing page clara / login en beta ------- */
  #login { position: fixed; inset: 0; z-index: 70; background: #f8fafc; color: #1e293b;
           display: flex; flex-direction: column; overflow-y: auto; padding: 24px 16px;
           background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
           background-size: 24px 24px; }
  #login[hidden] { display: none; }
  .landing-container { max-width: 1040px; width: 100%; margin: auto; display: flex;
                       flex-direction: column; gap: 36px; padding: 8px 0; }

  .landing-nav { display: flex; justify-content: space-between; align-items: center;
                 padding-bottom: 18px; border-bottom: 1px solid #e2e8f0; }
  .landing-logo { display: flex; align-items: center; gap: 12px; }
  .landing-logo-icon { font-size: 26px; }
  .landing-logo-title { font-family: var(--serif); font-size: 1.35rem; letter-spacing: -.01em; color: #0f172a; font-weight: 700; }
  .landing-logo-title b { color: #059669; font-weight: 700; }
  .landing-logo-sub { font-size: 11.5px; color: #64748b; font-family: var(--mono); }

  .landing-badge { display: inline-flex; align-items: center; gap: 7px;
                   background: #ecfdf5; border: 1px solid #a7f3d0;
                   padding: 5px 12px; border-radius: 999px; font-family: var(--mono);
                   font-size: 11px; font-weight: 600; color: #047857; }
  .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981;
               box-shadow: 0 0 8px #10b981; }

  .landing-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 36px;
                  align-items: center; padding: 6px 0; }
  .landing-hero-content { display: flex; flex-direction: column; gap: 16px; }
  .landing-pill { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
                  font-size: 12px; color: #475569; font-family: var(--mono);
                  background: #f1f5f9; border: 1px solid #cbd5e1;
                  padding: 4px 12px; border-radius: 999px; font-weight: 500; }
  .landing-title { font-family: var(--serif); font-size: 2.45rem; line-height: 1.18;
                   margin: 0; font-weight: 700; letter-spacing: -.02em; color: #0f172a; }
  .landing-title span { color: #047857; }
  .landing-desc { font-size: 15.5px; line-height: 1.6; color: #475569; margin: 0; }

  .landing-auth-card { background: #ffffff; border: 1px solid #e2e8f0;
                       border-radius: 20px; box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
                       padding: 26px 22px; display: flex; flex-direction: column; align-items: center;
                       text-align: center; gap: 14px; }
  .auth-card-head h3 { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 4px;
                       font-weight: 700; color: #0f172a; }
  .auth-card-head p { font-size: 12.5px; color: #64748b; margin: 0; }
  .gsi-container { min-height: 44px; display: flex; justify-content: center; width: 100%; }
  .loginerror { color: #dc2626; font-size: 13px; margin: 0; }
  .auth-card-footer { font-size: 11.5px; color: #64748b; border-top: 1px solid #f1f5f9;
                      padding-top: 12px; width: 100%; }
  .landing-footer p { margin: 0 0 6px; }
  .landing-footer p + p { font-size: 11.5px; color: #94a3b8; }

  .landing-solicitar-wrap { width: 100%; margin: -4px 0 2px; }
  .btn-link-solicitar { background: none; border: none; padding: 6px 10px; font-size: 13px;
                        color: #047857; cursor: pointer; text-decoration: underline;
                        font-family: inherit; font-weight: 600; border-radius: 6px; }
  .btn-link-solicitar:hover { background: #ecfdf5; color: #065f46; }

  /* Modal de solicitud */
  .modal-solicitud-dialog { border: 1px solid #e2e8f0; border-radius: 20px;
    background: #ffffff; color: #0f172a; box-shadow: 0 20px 40px rgba(15,23,42,.15);
    padding: 0; max-width: 480px; width: calc(100vw - 32px); margin: auto; }
  .modal-solicitud-dialog::backdrop { background: rgba(15,23,42,0.5); backdrop-filter: blur(2px); }
  .modal-solicitud-caja { padding: 24px 22px; display: flex; flex-direction: column; gap: 14px; }
  .modal-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
  .modal-cab h3 { margin: 0; font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: #0f172a; }
  .modal-cab .cerrar { background: none; border: none; font-size: 18px; cursor: pointer; color: #64748b; }
  .modal-sub { margin: 0; font-size: 12.5px; color: #64748b; line-height: 1.45; }
  #form-solicitud-beta { display: flex; flex-direction: column; gap: 12px; }
  .campo { display: flex; flex-direction: column; gap: 5px; text-align: left; }
  .campo label { font-size: 12px; font-weight: 600; color: #334155; }
  .campo input, .campo select, .campo textarea {
    background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px;
    padding: 8px 12px; font-family: inherit; font-size: 13.5px; color: #0f172a; }
  .campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none; border-color: #059669; }
  .campo-fila { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; }
  .modal-acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
  .modal-exito { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 0; }
  .modal-exito .exito-icono { font-size: 36px; }
  .modal-exito h4 { margin: 0; font-size: 1.1rem; color: #0f172a; font-weight: 700; }
  .modal-exito p { margin: 0; font-size: 13px; color: #64748b; line-height: 1.5; }