/* Capí 1.0.1 · burbuja y chat. Pasteles de RetosMEDIA, naranja solo de detalle.
   Todo cuelga de #capi: el tema y Elementor no le cambian botones, letras ni íconos.
   Sin flex-gap ni variables (navegadores viejos). */
#capi, #capi *, #capi *:before, #capi *:after { box-sizing: border-box; }
#capi { font-family: inherit; color: #1F1A24; line-height: 1.4; -webkit-text-size-adjust: 100%; text-transform: none; letter-spacing: normal; }
#capi ::selection { background: #F2DDF7; color: #1F1A24; }

/* Blindaje contra los estilos del tema (button, input, svg) */
#capi button, #capi input, #capi select {
	font-family: inherit; font-size: inherit; font-style: normal; line-height: 1.3; margin: 0; min-width: 0; min-height: 0; width: auto; height: auto;
	border: 0; border-radius: 0; box-shadow: none; text-shadow: none; background-image: none; outline: 0;
	text-transform: none !important; letter-spacing: normal !important; text-decoration: none; -webkit-appearance: none; appearance: none;
}
#capi button { cursor: pointer; }
#capi svg { display: block; width: 18px !important; height: 18px !important; max-width: none; flex-shrink: 0; fill: none; }
#capi .capi-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#capi .capi-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#capi [hidden] { display: none !important; }

/* Burbuja */
#capi .capi-boton { position: fixed; right: 20px; bottom: 20px; z-index: 999991; width: 54px; height: 54px; padding: 0; border-radius: 50%; background: #F2DDF7; color: #74307F; box-shadow: 0 6px 18px rgba(116,48,127,.22); display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: transform .2s ease; }
#capi .capi-boton:hover { transform: translateY(-2px); background: #F2DDF7; }
#capi .capi-boton:focus-visible { outline: 3px solid #FF7900; outline-offset: 3px; }
#capi .capi-boton svg { width: 22px !important; height: 22px !important; }
#capi .capi-boton-ic { display: flex; }
#capi .capi-boton .capi-ic-x { display: none; }
#capi.capi-abierta .capi-boton .capi-ic-chat { display: none; }
#capi.capi-abierta .capi-boton .capi-ic-x { display: flex; }
#capi .capi-punto { position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; border-radius: 50%; background: #3DBE7A; border: 2px solid #fff; }
#capi .capi-globo { position: absolute; top: -4px; left: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #FF7900; color: #1F1A24; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; display: none; }
#capi.capi-sin-leer .capi-globo { display: block; }

/* Globito «Hola, soy Capí» */
#capi .capi-aviso { position: fixed; right: 84px; bottom: 26px; z-index: 999990; max-width: 210px; padding: 9px 30px 9px 13px; background: #fff; border-radius: 16px 16px 4px 16px; box-shadow: 0 4px 18px rgba(116,48,127,.14); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease, visibility .25s; }
#capi .capi-aviso-si { opacity: 1; visibility: visible; transform: translateY(0); }
#capi .capi-aviso b { display: block; font-size: 14px; font-weight: 700; }
#capi .capi-aviso span { display: block; font-size: 13px; color: #5E5866; }
#capi .capi-aviso-x { position: absolute; top: 3px; right: 3px; width: 28px; height: 28px; padding: 0; border-radius: 8px; background: transparent; color: #5E5866; display: flex; align-items: center; justify-content: center; }
#capi .capi-aviso-x:hover { background: #F6F0F8; }
#capi .capi-aviso-x svg { width: 14px !important; height: 14px !important; }

/* Ventana: alto según lo que tenga adentro (sin hueco vacío), con tope */
#capi .capi-caja { position: fixed; right: 20px; bottom: 84px; z-index: 999992; width: 360px; max-width: calc(100% - 20px); height: auto; max-height: 500px; max-height: calc(100vh - 116px); background: #fff; border-radius: 22px; box-shadow: 0 14px 44px rgba(116,48,127,.2); display: none; flex-direction: column; overflow: hidden; }
#capi.capi-abierta .capi-caja { display: flex; }
@media (min-height: 640px) { #capi .capi-caja { max-height: 520px; } }

#capi .capi-cab { display: flex; align-items: center; padding: 6px 4px 6px 12px; border-bottom: 1px solid #F1ECF3; flex-shrink: 0; }
#capi .capi-av { width: 30px; height: 30px; border-radius: 50%; background: #F2DDF7; color: #74307F; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 9px; }
#capi .capi-cab-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
#capi .capi-cab-t b { font-size: 15px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#capi .capi-est { font-size: 11.5px; color: #5E5866; display: flex; align-items: center; }
#capi .capi-est i { width: 7px; height: 7px; border-radius: 50%; background: #3DBE7A; margin-right: 5px; flex-shrink: 0; }
#capi .capi-est i.capi-e-esp { background: #FF7900; }
#capi .capi-est i.capi-e-hum { background: #1B5A73; }
#capi .capi-est em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#capi .capi-ib { width: 34px; height: 40px; padding: 0; background: transparent; color: #5E5866; display: flex; align-items: center; justify-content: center; border-radius: 12px; flex-shrink: 0; }
@media (hover: hover) { #capi .capi-ib:hover { background: #F6F0F8; color: #1F1A24; } }
#capi .capi-ib:focus-visible { outline: 3px solid #FF7900; outline-offset: -3px; }
#capi .capi-son[aria-pressed="true"] { color: #74307F; }
#capi .capi-atras { width: 32px; margin: 0 4px 0 -6px; color: #74307F; }
#capi .capi-atras svg { width: 20px !important; height: 20px !important; }

/* Conectando */
#capi .capi-con { flex: 1 1 auto; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
#capi .capi-con-av { width: 56px; height: 56px; border-radius: 50%; background: #F2DDF7; color: #74307F; font-weight: 800; font-size: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; animation: capiPulso 1.1s ease-in-out infinite; }
#capi .capi-con b { font-size: 15px; margin-bottom: 10px; }
#capi .capi-puntos { display: inline-flex; }
#capi .capi-puntos i { width: 7px; height: 7px; border-radius: 50%; background: #FF7900; margin: 0 3px; animation: capiPunto 1.2s infinite; }
#capi .capi-puntos i:nth-child(2) { animation-delay: .2s; }
#capi .capi-puntos i:nth-child(3) { animation-delay: .4s; }
@keyframes capiPulso { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .75; } }
@keyframes capiPunto { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #capi .capi-anim, #capi .capi-puntos i { animation: none !important; } #capi .capi-boton, #capi .capi-aviso { transition: none; } }

/* Mensajes */
#capi .capi-msgs { flex: 1 1 auto; min-height: 64px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 10px 4px; scrollbar-width: thin; scrollbar-color: #E4D8E8 transparent; }
#capi .capi-msgs::-webkit-scrollbar, #capi .capi-ui::-webkit-scrollbar { width: 6px; }
#capi .capi-msgs::-webkit-scrollbar-thumb, #capi .capi-ui::-webkit-scrollbar-thumb { background: #E4D8E8; border-radius: 3px; }
#capi .capi-m { display: flex; flex-direction: column; margin-bottom: 6px; }
#capi .capi-m-b { max-width: 86%; padding: 8px 12px; font-size: 14px; line-height: 1.42; word-wrap: break-word; overflow-wrap: break-word; }
#capi .capi-m-b a { color: #74307F; text-decoration: underline; text-underline-offset: 2px; }
#capi .capi-m-capi .capi-m-b { align-self: flex-start; background: #F6F0F8; border-radius: 6px 16px 16px 16px; }
#capi .capi-m-agente .capi-m-b { align-self: flex-start; background: #D5EEF8; border-radius: 6px 16px 16px 16px; }
#capi .capi-m-visitante .capi-m-b { align-self: flex-end; background: #FFE6D2; border-radius: 16px 6px 16px 16px; }
#capi .capi-m-sistema { align-items: center; }
#capi .capi-m-sistema .capi-m-b { max-width: 92%; background: #F5F2F7; color: #5E5866; font-size: 12px; border-radius: 12px; text-align: center; padding: 5px 11px; }
#capi .capi-m-n { font-size: 11px; font-weight: 700; color: #1B5A73; margin: 0 0 3px 4px; }
#capi .capi-esc .capi-m-b { padding: 11px 13px; }

/* Lo de abajo: opciones, carreras, formularios */
#capi .capi-ui { flex: 0 0 auto; min-height: 0; padding: 0 10px; max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #E4D8E8 transparent; }
#capi .capi-ui:empty { display: none; }
#capi .capi-ops { display: flex; flex-wrap: wrap; margin: 0 -3px 6px; }
#capi .capi-op { margin: 3px; padding: 6px 10px; border-radius: 12px; background: #F5F2F7; color: #1F1A24; font-size: 13px; font-weight: 700; text-align: left; display: flex; flex-direction: column; min-height: 36px; justify-content: center; transition: filter .15s ease; }
#capi .capi-op:hover { filter: brightness(.97); }
#capi .capi-op:focus-visible { outline: 3px solid #FF7900; outline-offset: 2px; }
#capi .capi-op-s { font-size: 11.5px; font-weight: 600; opacity: .85; margin-top: 1px; }
#capi .capi-ops-grid .capi-op { width: calc(50% - 6px); min-height: 40px; }
#capi .capi-ops-lista .capi-op { width: calc(100% - 6px); flex-direction: row; align-items: center; justify-content: space-between; }
#capi .capi-ops-lista .capi-op-s { margin: 0 0 0 10px; white-space: nowrap; }
#capi .capi-ops-chips .capi-op { min-height: 34px; min-width: 40px; align-items: center; padding: 6px 12px; border-radius: 17px; font-size: 13px; }
#capi .capi-ops-reto .capi-op { width: calc(33.33% - 6px); align-items: center; font-size: 17px; background: #fff; color: #1B5A73; }
#capi .capi-c-celeste { background: #D5EEF8; color: #1B5A73; }
#capi .capi-c-durazno { background: #FFE6D2; color: #8A3C00; }
#capi .capi-c-amarillo { background: #FFF1C9; color: #7A4F00; }
#capi .capi-c-lila { background: #F2DDF7; color: #74307F; }
#capi .capi-c-naranja { background: #FF7900; color: #1F1A24; }

#capi .capi-evs { margin: 0 0 6px; }
#capi .capi-ev { width: 100%; margin: 0 0 5px; padding: 5px; border-radius: 14px; background: #FBF8F4; display: flex; align-items: center; text-align: left; color: #1F1A24; }
#capi .capi-ev:hover { background: #F6F0F8; }
#capi .capi-ev:focus-visible { outline: 3px solid #FF7900; outline-offset: 1px; }
#capi .capi-ev-img { width: 50px; height: 38px; border-radius: 9px; background-color: #EDE6F0; background-size: cover; background-position: center; flex-shrink: 0; margin-right: 10px; display: flex; align-items: center; justify-content: center; color: #8C8494; }
#capi .capi-ev-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
#capi .capi-ev-t b { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#capi .capi-ev-t span { font-size: 12px; color: #5E5866; }
#capi .capi-ev-t em { font-style: normal; font-size: 11.5px; color: #8A3C00; font-weight: 700; margin-top: 1px; }

#capi .capi-m-res { align-items: stretch; }
#capi .capi-res { background: #FBF8F4; border: 1px solid #F1ECF3; border-radius: 16px; padding: 11px 11px 5px; margin: 2px 0; }
#capi .capi-res-cab b { font-size: 14.5px; font-weight: 800; }
#capi .capi-res dl { margin: 7px 0 0; display: flex; flex-wrap: wrap; }
#capi .capi-res dl div { width: 50%; margin-bottom: 6px; padding-right: 8px; }
#capi .capi-res dt { font-size: 11px; color: #5E5866; margin: 0; }
#capi .capi-res dd { font-size: 13px; font-weight: 700; margin: 0; }
#capi .capi-res-tot { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #EFE9F1; padding-top: 7px; margin-top: 2px; }
#capi .capi-res-tot span { font-size: 12.5px; color: #5E5866; }
#capi .capi-res-tot b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
#capi .capi-res-nota { font-size: 11.5px; color: #5E5866; margin: 4px 0; }

#capi .capi-ced, #capi .capi-login { margin: 2px 0 8px; }
#capi .capi-ced { display: flex; }
#capi .capi-ced select, #capi .capi-ced input, #capi .capi-login input { height: 42px; border: 1px solid #DCD4E0; border-radius: 12px; padding: 0 11px; font-size: 16px; background: #fff; color: #1F1A24; caret-color: #74307F; }
#capi .capi-ced select:focus, #capi .capi-ced input:focus, #capi .capi-login input:focus { border-color: #B98AC4; }
#capi .capi-ced select { width: 88px; margin-right: 6px; padding: 0 6px; }
#capi .capi-ced input { flex: 1 1 auto; min-width: 0; margin-right: 6px; }
#capi .capi-login label { display: block; font-size: 12px; color: #5E5866; margin: 6px 0 3px; }
#capi .capi-login input { width: 100%; }
#capi .capi-login .capi-btn { width: 100%; margin-top: 9px; }
#capi .capi-login-l { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: 12.5px; }
#capi .capi-login-l a, #capi .capi-link { color: #74307F; }
#capi .capi-salir { display: block; margin: -2px 0 4px 2px; padding: 4px 0; }
#capi .capi-link { background: transparent; padding: 7px 0; text-decoration: underline; text-underline-offset: 2px; font-size: 12.5px; }
#capi .capi-btn { height: 38px; border-radius: 12px; padding: 0 14px; background: #FF7900; color: #1F1A24; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
#capi .capi-btn:hover { background: #F07000; color: #1F1A24; }
#capi .capi-btn:focus-visible { outline: 3px solid #74307F; outline-offset: 2px; }
#capi .capi-pagar { width: 100%; margin: 2px 0 8px; }

#capi .capi-form { display: flex; align-items: center; padding: 7px 8px 9px; border-top: 1px solid #F1ECF3; flex-shrink: 0; }
#capi .capi-in { flex: 1 1 auto; min-width: 0; height: 38px; border-radius: 19px; padding: 0 14px; background: #F5F2F7; color: #1F1A24; font-size: 15px; margin: 0 7px 0 0; caret-color: #74307F; }
#capi .capi-in::placeholder { color: #6E6676; opacity: 1; }
#capi .capi-in:focus { box-shadow: 0 0 0 2px #E2C7EA; }
#capi .capi-env { width: 38px; height: 38px; padding: 0; border-radius: 50%; background: #FF7900; color: #1F1A24; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#capi .capi-env:hover { background: #F07000; }
#capi .capi-env:focus-visible { outline: 3px solid #74307F; outline-offset: 2px; }

/* Celular: tarjeta flotante compacta, no pantalla completa */
@media (max-width: 767px) {
	#capi .capi-boton { width: 50px; height: 50px; }
	#capi .capi-boton svg { width: 20px !important; height: 20px !important; }
	#capi .capi-caja { right: 10px; left: auto; width: calc(100% - 20px); max-width: 360px; max-height: 68vh; border-radius: 20px; }
	#capi .capi-aviso { right: 72px; max-width: 190px; }
	#capi .capi-in { font-size: 16px; } /* 16px: iPhone no hace zoom al escribir */
	#capi .capi-m-b { font-size: 14px; }
	#capi .capi-ui { max-height: 42vh; }
	#capi .capi-ops-grid .capi-op { min-height: 40px; }
}
@media print { #capi { display: none !important; } }

/* 1.0.2 · la «r» de Retos (isotipo de RetosMEDIA o ícono del sitio) */
#capi img.capi-logo { display: block; max-width: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; object-fit: contain; }
#capi .capi-av-logo { background: transparent; border-radius: 0; }
#capi .capi-av-logo img.capi-logo { width: 30px; height: 30px; border-radius: 8px; }
#capi .capi-con-av.capi-av-logo img.capi-logo { width: 52px; height: 52px; border-radius: 13px; }
#capi .capi-boton .capi-ic-chat img.capi-logo { width: 26px; height: 26px; border-radius: 7px; }
#capi .capi-aviso-logo { position: absolute; left: 12px; top: 50%; margin-top: -13px; }
#capi .capi-aviso-logo ~ b, #capi .capi-aviso-logo ~ span { margin-left: 36px; }
#capi .capi-aviso-logo img.capi-logo { width: 26px; height: 26px; border-radius: 7px; }
@media (max-width: 767px) { #capi .capi-boton .capi-ic-chat img.capi-logo { width: 24px; height: 24px; } }

/* 1.0.3 · «Volver al menú», aviso BETA, enlace de cuenta */
#capi .capi-menu { height: 30px; padding: 0 10px 0 8px; margin: 0 2px 0 6px; border-radius: 15px; background: #F6F0F8; color: #74307F; font-size: 12px; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; flex-shrink: 0; }
#capi .capi-menu svg { width: 14px !important; height: 14px !important; margin-right: 4px; }
@media (hover: hover) { #capi .capi-menu:hover { background: #F2DDF7; } }
#capi .capi-menu:focus-visible { outline: 3px solid #FF7900; outline-offset: 1px; }
#capi .capi-beta { display: inline-block; vertical-align: 2px; margin-left: 4px; padding: 1px 5px; border-radius: 6px; background: #FFF1C9; color: #7A4F00; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; line-height: 1.4; }
#capi .capi-aviso-beta { display: flex; align-items: center; flex-shrink: 0; padding: 5px 4px 5px 12px; background: #FFF8E1; border-bottom: 1px solid #F6E7B8; color: #6B4600; font-size: 11.5px; line-height: 1.35; }
#capi .capi-aviso-beta span { flex: 1 1 auto; min-width: 0; }
#capi .capi-aviso-beta b { font-weight: 800; }
#capi .capi-beta-x { width: 28px; height: 28px; padding: 0; margin-left: 4px; border-radius: 8px; background: transparent; color: #7A4F00; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#capi .capi-beta-x svg { width: 13px !important; height: 13px !important; }
#capi .capi-enlace { display: block; margin: -2px 0 6px 2px; padding: 3px 0; }
/* Pantallas muy angostas: el botón del menú queda solo con la casita */
@media (max-width: 359px) { #capi .capi-menu span { display: none; } #capi .capi-menu svg { margin-right: 0; } #capi .capi-menu { padding: 0 8px; } }
