/* Login + alta de cliente nuevo (Paso 1 plan / Paso 2 tipo / Paso 3 pago), fuera del admin.
   Portado 1:1 desde el mockup (artifact 3gactaCzgbAkuoSRGX6LVk): Main.dc.html/Desktop.dc.html
   (login), SeleccionNicho(Desktop).dc.html (paso 1 — a pesar del nombre del archivo, es la
   selección de PLAN, no de nicho), SeleccionTipo(Desktop).dc.html (paso 2, tipo de negocio),
   Pago(Desktop).dc.html (paso 3). Valores (colores, radios, tipografías) copiados literales;
   adaptado de los lienzos fijos (390px / 1440px) a un layout fluido con los mismos valores. */

.smc-ob { display: flex; min-height: 100vh; background: #FFFFFF; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.smc-ob * { box-sizing: border-box; }
.smc-ob a { text-decoration: none; }
.smc-ob input::placeholder { color: #A6A9B1; }

.smc-ob-marca { flex: 0 0 42%; min-height: 100vh; background: linear-gradient(160deg, var(--smc-ob-accent, #2554EB) 0%, #14171F 130%); position: relative; overflow: hidden; padding: 56px; display: flex; flex-direction: column; color: #FFFFFF; }
.smc-ob-marca--login { flex-basis: 46%; }
.smc-ob-marca__circulo1 { position: absolute; top: -120px; right: -140px; width: 420px; height: 420px; border-radius: 50%; background: rgba(255,255,255,.06); }
.smc-ob-marca__circulo2 { position: absolute; bottom: -160px; left: -100px; width: 380px; height: 380px; border-radius: 50%; background: rgba(255,255,255,.05); }
.smc-ob-marca__topfila { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.smc-ob-marca__logo-fila { display: flex; align-items: center; gap: 10px; }
.smc-ob-marca__logo { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; backdrop-filter: blur(6px); }
.smc-ob-marca__texto { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.smc-ob-marca__atras { display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,.85); font-size: 13px; font-weight: 700; }
.smc-ob-marca__paso { display: flex; align-items: center; gap: 8px; }
.smc-ob-marca__paso-num { width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; color: var(--smc-ob-accent, #2554EB); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; flex-shrink: 0; }
.smc-ob-marca__paso-texto { font-size: 13px; font-weight: 700; opacity: .85; }
.smc-ob-marca__cuerpo { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; max-width: 460px; }
.smc-ob-marca__cuerpo--login { max-width: 460px; }
.smc-ob-marca__cuerpo h1 { margin: 16px 0 0; font-size: 34px; font-weight: 800; line-height: 1.2; }
.smc-ob-marca__cuerpo--login h1 { margin: 0; font-size: 38px; }
.smc-ob-marca__cuerpo p { margin: 14px 0 0; font-size: 15px; line-height: 1.6; opacity: .88; }
.smc-ob-marca__pie { position: relative; z-index: 2; font-size: 12.5px; opacity: .65; }

.smc-ob-chips { margin-top: 36px; display: flex; flex-direction: column; gap: 12px; }
.smc-ob-chip { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); }
.smc-ob-chip__icono { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.smc-ob-chip__titulo { font-size: 13.5px; font-weight: 700; }
.smc-ob-chip__sub { font-size: 12px; opacity: .75; }

.smc-ob-panel { flex: 1 1 auto; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 64px; }
.smc-ob-panel__caja { width: 100%; max-width: 400px; }
.smc-ob-panel__caja--planes { max-width: 480px; }
.smc-ob-panel__caja--tipo { max-width: 460px; }
.smc-ob-panel__caja h1 { margin: 0; font-size: 26px; font-weight: 800; color: #14171F; line-height: 1.2; }
.smc-ob-panel__caja p.smc-ob-sub { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #6B6E76; }
.smc-ob-solo-escritorio { }

.smc-ob-campo { margin-top: 18px; }
.smc-ob-campo:first-child { margin-top: 32px; }
.smc-ob-campo label { display: block; font-size: 12.5px; font-weight: 700; color: #14171F; margin-bottom: 6px; }
.smc-ob-campo input[type=email], .smc-ob-campo input[type=password], .smc-ob-campo input[type=text] { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1.5px solid #E3E0D8; font-size: 14.5px; font-family: inherit; color: #14171F; background: #FFFFFF; }
.smc-ob-campo input:focus { outline: none; border-color: var(--smc-ob-accent, #2554EB); box-shadow: 0 0 0 3px rgba(37,84,235,.12); }
.smc-ob-campo--pass-fila { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.smc-ob-campo--pass-fila label { margin-bottom: 0; }
.smc-ob-campo--pass-fila a { font-size: 12.5px; font-weight: 700; color: var(--smc-ob-accent, #2554EB); }
.smc-ob-campo--pass-fila a:hover { text-decoration: underline; }
.smc-ob-pass-wrap { position: relative; }
.smc-ob-pass-wrap input { padding-right: 42px; }
.smc-ob-pass-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: #8A8D94; cursor: pointer; }
.smc-ob-recordarme { display: flex; align-items: center; gap: 8px; margin-top: 18px; cursor: pointer; font-size: 13px; color: #6B6E76; }
.smc-ob-recordarme input { width: 16px; height: 16px; accent-color: var(--smc-ob-accent, #2554EB); }

.smc-ob-btn { margin-top: 24px; display: flex; align-items: center; justify-content: center; width: 100%; padding: 14px; border-radius: 12px; background: var(--smc-ob-accent, #2554EB); color: #FFFFFF; font-size: 15px; font-weight: 700; border: none; cursor: pointer; transition: filter .15s ease, box-shadow .18s ease, transform .15s ease; }
.smc-ob-btn:hover { filter: brightness(1.05); box-shadow: 0 10px 20px -8px rgba(37,84,235,.45); }
.smc-ob-btn:active { transform: scale(.99); }
.smc-ob-btn[disabled] { background: #C7C9CE; cursor: not-allowed; box-shadow: none; filter: none; }
.smc-ob-pie { margin-top: 32px; text-align: center; font-size: 13.5px; color: #6B6E76; }
.smc-ob-pie a { font-weight: 700; color: var(--smc-ob-accent, #2554EB); }
.smc-ob-pie a:hover { text-decoration: underline; }
.smc-ob-error { margin: 0 0 16px; font-size: 12.5px; color: #C7382C; }

.smc-ob-opciones { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.smc-ob-opcion { display: flex; align-items: flex-start; gap: 13px; padding: 16px; border-radius: 14px; border: 1.5px solid #ECEDF0; background: #FFFFFF; cursor: pointer; transition: border-color .15s ease, background .15s ease; position: relative; }
.smc-ob-opcion:hover { border-color: var(--smc-ob-accent, #2554EB); }
.smc-ob-opcion--activa, .smc-ob-opcion:has(input:checked) { border-color: var(--smc-ob-accent, #2554EB); background: rgba(37,84,235,.05); }
.smc-ob-opcion--fila { align-items: center; padding: 14px 15px; border-radius: 12px; }
.smc-ob-opcion input { position: absolute; opacity: 0; width: 0; height: 0; }
.smc-ob-opcion__icono { width: 42px; height: 42px; border-radius: 10px; background: #EEF2FF; color: var(--smc-ob-accent, #2554EB); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.smc-ob-opcion__cuerpo { flex: 1; }
.smc-ob-opcion__nombre-fila { display: flex; align-items: center; gap: 8px; }
.smc-ob-opcion__nombre { font-size: 15.5px; font-weight: 800; color: #14171F; }
.smc-ob-opcion__nombre--fila { font-size: 14.5px; font-weight: 700; }
.smc-ob-opcion__recomendado { font-size: 9px; font-weight: 800; color: #0F6B5A; background: #E4F5EF; border-radius: 999px; padding: 2px 7px; }
.smc-ob-opcion__precio { font-size: 13.5px; font-weight: 700; color: var(--smc-ob-accent, #2554EB); margin-top: 2px; }
.smc-ob-opcion__desc { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: #8A8D94; }
.smc-ob-opcion__desc--fila { margin: 1px 0 0; font-size: 12px; }
.smc-ob-opcion__check { width: 21px; height: 21px; border-radius: 50%; border: 2px solid #D7D9DE; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.smc-ob-opcion--fila .smc-ob-opcion__check { margin-top: 0; width: 20px; height: 20px; }
.smc-ob-opcion--activa .smc-ob-opcion__check, .smc-ob-opcion:has(input:checked) .smc-ob-opcion__check { border-color: var(--smc-ob-accent, #2554EB); background: var(--smc-ob-accent, #2554EB); }
.smc-ob-opcion__check svg { display: none; }
.smc-ob-opcion--activa .smc-ob-opcion__check svg, .smc-ob-opcion:has(input:checked) .smc-ob-opcion__check svg { display: block; }

.smc-ob-nota { margin: 16px 2px 0; font-size: 11.5px; line-height: 1.55; color: #8A8D94; }

.smc-ob-resumen { margin-top: 22px; border: 1px solid #ECEDF0; border-radius: 14px; padding: 16px 18px; background: #FAFAFB; }
.smc-ob-resumen__fila { display: flex; align-items: center; justify-content: space-between; }
.smc-ob-resumen__plan { font-size: 14.5px; font-weight: 800; color: #14171F; }
.smc-ob-resumen__tarjeta { font-size: 12px; color: #8A8D94; margin-top: 1px; }
.smc-ob-resumen__precio { font-size: 16px; font-weight: 800; color: #14171F; }
.smc-ob-resumen__total { margin-top: 12px; padding-top: 12px; border-top: 1px solid #ECEDF0; display: flex; align-items: center; justify-content: space-between; }
.smc-ob-resumen__total-label { font-size: 12.5px; font-weight: 700; color: #6B6E76; }
.smc-ob-resumen__total-valor { font-size: 16px; font-weight: 800; color: var(--smc-ob-accent, #2554EB); }

.smc-ob-seguro { margin-top: 16px; display: flex; align-items: center; gap: 7px; color: #8A8D94; font-size: 11.5px; }
.smc-ob-aviso { margin-top: 18px; font-size: 12.5px; color: #8A8D94; background: #F7F8FA; border-radius: 10px; padding: 12px 14px; line-height: 1.5; }

/* Responsive: apilado en móvil, portada de Main.dc.html / SeleccionNicho.dc.html / SeleccionTipo.dc.html / Pago.dc.html. */
@media (max-width: 900px) {
	.smc-ob { flex-direction: column; min-height: auto; }
	.smc-ob-marca, .smc-ob-marca--login { flex: 0 0 auto; min-height: auto; padding: 28px 28px 30px; }
	.smc-ob-marca--login { padding: 32px 28px 40px; }
	.smc-ob-marca__logo { width: 30px; height: 30px; border-radius: 8px; }
	.smc-ob-marca--login .smc-ob-marca__logo { width: 34px; height: 34px; border-radius: 9px; }
	.smc-ob-marca__texto { font-size: 15px; }
	.smc-ob-marca--login .smc-ob-marca__texto { font-size: 17px; }
	.smc-ob-marca__cuerpo, .smc-ob-marca__cuerpo--login { max-width: none; }
	.smc-ob-marca__cuerpo h1 { font-size: 20px; margin-top: 10px; }
	.smc-ob-marca__cuerpo--login h1 { font-size: 22px; margin-top: 22px; }
	.smc-ob-marca__cuerpo p { font-size: 12.5px; margin-top: 6px; }
	.smc-ob-marca__pie { display: none; }
	.smc-ob-chips { margin-top: 18px; gap: 8px; flex-direction: row; }
	.smc-ob-chip { flex: 1; flex-direction: row; padding: 10px 12px; border-radius: 12px; gap: 8px; }
	.smc-ob-chip__icono { display: none; }
	.smc-ob-chip__sub { display: none; }
	.smc-ob-chip__titulo { font-size: 11.5px; }

	.smc-ob-panel { padding: 0; }
	.smc-ob-panel__caja, .smc-ob-panel__caja--planes, .smc-ob-panel__caja--tipo { max-width: none; margin-top: -14px; border-radius: 20px 20px 0 0; background: #FFFFFF; position: relative; z-index: 3; padding: 22px 20px 20px; }
	.smc-ob-panel__caja--login { margin-top: -20px; padding: 28px 28px 32px; }
	.smc-ob-solo-escritorio { display: none; }
	.smc-ob-campo:first-child { margin-top: 24px; }
	.smc-ob-pie { margin-top: 28px; }
}

/* 0.1.219: el tema pintaba los botones de blanco con borde; estos estilos mandan. */
.smc-ob button.smc-ob-btn, .smc-ob a.smc-ob-btn { background: var(--smc-ob-accent, #2554EB) !important; color: #FFFFFF !important; border: none !important; border-radius: 12px !important; font-weight: 700 !important; }
.smc-ob button.smc-ob-btn[disabled] { background: #C7C9CE !important; }
.smc-ob button.smc-ob-pass-toggle { background: transparent !important; border: none !important; color: #8A8D94 !important; }
.smc-ob button.smc-al-chip { background: #FFFFFF !important; color: #14171F !important; border: 1.5px solid #ECEDF0 !important; }
.smc-ob button.smc-al-chip.on { border-color: #2554EB !important; background: rgba(37,84,235,.07) !important; color: #2554EB !important; }
.smc-ob button.smc-al-color { border: 0 !important; padding: 0 !important; }

/* Logo grande (Ajustes → Marca): sin recuadro; en modo «grande» tampoco se muestra el nombre. */
.smc-ob-marca__logo:has(.smc-logo-grande),.smc-sidebar__marca-icono:has(.smc-logo-grande),.ll-logo__i:has(.smc-logo-grande){width:auto !important;height:auto !important;background:none !important;border-radius:0 !important;backdrop-filter:none !important}
.smc-ob-marca__logo-fila:has(.smc-logo-grande--grande) .smc-ob-marca__texto,.smc-sidebar__marca:has(.smc-logo-grande--grande) .smc-sidebar__marca-texto{display:none}