/* ============================================================ MAPPING DOC - editor de texto por temporalidad (M4.5) Sensacion de documento, no de formulario: encabezado, filete y texto. Sin dropzone, sin tarjeta por parrafo, sin toolbar, sin caja de input. Enter escribe un salto de linea DENTRO del parrafo, asi que una temporalidad se lee como un bloque continuo de texto. Solo tokens existentes; se carga en las dos superficies. ============================================================ */ .kmd{display:flex;flex-direction:column;gap:18px} .kmd-tf{display:flex;flex-direction:column;gap:6px;min-width:0} /* M5-C: el encabezado ya no dibuja la linea; la tipografia vive en el distintivo y el filete de la cabecera aporta la continuacion visual. */ .kmd-h{margin:0;padding:0;border:0;line-height:1} .kmd-body{display:flex;flex-direction:column;gap:2px;min-width:0} /* El parrafo casi no se ve como control: es texto sobre la hoja. La altura la manda el contenido (autoGrow en JS), por eso no hay scroll interno nunca. white-space explicito para que ninguna hoja del tema pise el salto de linea. El selector se escribe .kmd .kmd-p -no .kmd-p a secas- a proposito: Astra define una sombra base y un fondo sobre el selector `textarea`, que a un textarea aislado le ganaria por orden de fuente. Subir a especificidad de dos clases (0,2,0) le gana a `textarea` (0,0,1) sin recurrir a !important, y deja el editor como documento y no como campo de formulario. El mismo contenedor .kmd envuelve al editor en el formulario y en el drawer, asi que la regla vale en las dos superficies. */ .kmd .kmd-p{display:block;width:100%;box-sizing:border-box; margin:0;padding:6px 8px 6px 10px;border:0;border-radius:6px; background:transparent;color:var(--text); font-family:var(--font-ui);font-size:13.5px;line-height:1.62; white-space:pre-wrap; resize:none;overflow:hidden;min-height:34px;outline:none; /* Anula explicitamente la sombra de input de Astra: box-shadow no se suma entre reglas, la ganadora reemplaza. En reposo, ninguna sombra. */ box-shadow:none; transition:background-color .12s ease,box-shadow .12s ease} .kmd .kmd-p::placeholder{color:var(--text-4)} /* Hover y foco se notan pero NO dibujan una caja de ancho completo: un filete a la izquierda marca el parrafo activo, como la linea viva de un documento. El foco redeclara box-shadow entero (filete inset), reemplazando la sombra de Astra; no hay sombra de cuatro aristas. */ .kmd .kmd-p:hover{background:rgba(var(--primary-rgb),.03)} .kmd .kmd-p:focus{background:rgba(var(--primary-rgb),.045); box-shadow:inset 2px 0 0 rgba(var(--primary-rgb),.45)} .kmd .kmd-p[readonly]{opacity:.6;cursor:not-allowed} .kmd .kmd-p[readonly]:hover,.kmd .kmd-p[readonly]:focus{background:transparent;box-shadow:none} /* Aviso de bloqueo: corrupcion o imagenes previas a M5. */ .kmd-lock{margin:0 0 4px;padding:9px 12px;border-radius:9px; border:1px solid var(--border);background:var(--surface-2); font-family:var(--font-ui);font-size:12px;line-height:1.45;color:var(--text-2)} @media(max-width:720px){ .kmd{gap:16px} .kmd .kmd-p{font-size:14px;min-height:36px;padding:7px 8px 7px 10px} } /* M4: contenedor inerte del mapeo legacy. Sigue en el formulario porque JetFormBuilder lo necesita para enviar, pero no ocupa, no se ve y no se tabula. [hidden] ya lo oculta; esto blinda contra hojas que lo pisen. */ .k-nf-maplegacy,.k-nf-maplegacy[hidden]{display:none !important} /* El editor ocupa todo el ancho de su superficie en ambas pantallas. */ .k-nf-tfgrid{display:block} #k-nf-mapdoc,#klog-dw-mapdoc{display:block;width:100%;box-sizing:border-box} #klog-dw-mapdoc{margin:2px 0 6px} /* ============================================================ M5-B - BLOQUES DE IMAGEN INLINE. La captura pertenece al documento: grande, sin recorte, con un marco minimo; nada de tarjeta pesada. Estados transitorios (subiendo / error) compactos pero inconfundibles. Solo tokens semanticos: dark y light salen del mismo CSS. ============================================================ */ .kmd-img{position:relative;margin:8px 0 6px;max-width:100%} .kmd-img-frame img{display:block;max-width:100%;height:auto; border:1px solid var(--border);border-radius:10px} /* Esqueleto de carga: reserva sitio sin saltos bruscos. */ .kmd-img-skel{height:160px;border-radius:10px;border:1px solid var(--border); background:var(--surface-2);animation:kmdpulso 1.1s ease-in-out infinite alternate} @keyframes kmdpulso{from{opacity:.55}to{opacity:1}} /* Barra de estado bajo la imagen: texto pequeno + acciones. */ .kmd-img-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap; font-family:var(--font-ui);font-size:12px;color:var(--text-3);padding:4px 2px 0} .kmd-img-bar:empty{display:none} .kmd-img-msg{color:var(--text-3)} .kmd-img-err{color:var(--red)} .kmd-img-b{font-family:var(--font-ui);font-size:12px;line-height:1; padding:5px 10px;border:1px solid var(--border);border-radius:7px; background:transparent;color:var(--text-2);cursor:pointer} .kmd-img-b:hover{background:rgba(var(--primary-rgb),.06);color:var(--text)} /* La subida en curso atenua un poco la vista: se ve que aun no es definitiva. */ .kmd-img.is-subiendo .kmd-img-frame img{opacity:.7} .kmd-img.is-error .kmd-img-frame img{opacity:.45} .kmd-img.is-error .kmd-img-frame img, .kmd-img.is-error .kmd-img-skel{border-color:rgba(var(--red-rgb),.5)} /* Quitar: discreto, aparece al pasar o enfocar; siempre alcanzable en movil. */ .kmd-img-x{position:absolute;top:6px;right:6px;width:26px;height:26px; border:1px solid var(--border);border-radius:50%; background:var(--surface-2);color:var(--text-2); font-size:15px;line-height:1;cursor:pointer;opacity:0; transition:opacity .12s ease;z-index:2} .kmd-img:hover .kmd-img-x,.kmd-img:focus-within .kmd-img-x,.kmd-img-x:focus{opacity:1} .kmd-img-x:hover{color:var(--red);border-color:rgba(var(--red-rgb),.5)} /* Aviso de guardado bloqueado: pulso breve sobre el bloque culpable. */ .kmd-img.is-atencion{outline:2px solid rgba(var(--primary-rgb),.55); outline-offset:3px;border-radius:10px} /* Region viva para lectores de pantalla, invisible en la maqueta. */ .kmd-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0; clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap} @media(max-width:720px){ .kmd-img-x{opacity:1} .kmd-img-skel{height:130px} } /* ============================================================ M5-C (enmienda visual) - FRANJA DE SECCION A TODO EL ANCHO. El problema real: despues de dos charts grandes y varios parrafos, el ojo ya no sabe donde acabo una temporalidad y empezo la siguiente. Un distintivo pequeno no basta a esa escala. Cada temporalidad abre ahora con una franja horizontal completa, compacta y tintada: marca el limite del documento de un vistazo, sin necesidad de buscar la etiqueta. La franja ABRE la seccion; no la encierra. Debajo el documento sigue abierto -sin tarjeta, sin borde, sin riel- para que texto e imagenes se lean de corrido. La franja de la temporalidad siguiente es, a la vez, el cierre perceptual de la anterior. Identidad y nada mas: la franja es IGUAL para las cinco temporalidades. Ningun color propio por marco temporal, porque eso inventaria categorias que no existen. Todo sale de los tokens de Kairo, asi que dark y light derivan del mismo CSS. ============================================================ */ .kmd{gap:0} .kmd-tf{gap:0} /* Aire de transicion entre temporalidades: suficiente para que el ultimo parrafo de una no toque la franja de la siguiente, sin perder densidad. */ .kmd-tf + .kmd-tf{margin-top:30px} .kmd-sec{display:flex;align-items:center;gap:0; min-height:32px;padding:6px 10px;margin:0 0 10px; border-radius:8px; background:rgba(var(--primary-rgb),.07); box-shadow:inset 2px 0 0 rgba(var(--primary-rgb),.35)} .kmd-h{margin:0;padding:0;border:0;line-height:1.2} /* La etiqueta es texto de seccion, no una pastilla ni un filtro. */ .kmd-badge{display:inline;padding:0;border:0;border-radius:0;background:none; font-family:var(--font-ui);font-size:14px;font-weight:600;letter-spacing:.01em; text-transform:none;color:var(--text);white-space:nowrap} /* Resto de la franja: espacio libre que la lleva a todo el ancho. */ .kmd-rule{flex:1 1 auto;min-width:0;height:auto;background:transparent} /* El cuerpo empieza directamente bajo la franja, alineado con su etiqueta. */ .kmd-body{padding-left:0;border-left:0} /* Temporalidad activa: orientacion, no foco de formulario. */ .kmd-tf:focus-within > .kmd-sec{background:rgba(var(--primary-rgb),.12); box-shadow:inset 2px 0 0 rgba(var(--primary-rgb),.60)} /* Imagen seleccionada por teclado: anillo sutil y el boton Quitar a la vista. La senal no es solo color: el estado se anuncia y el control aparece. */ .kmd-img.is-sel{outline:2px solid rgba(var(--primary-rgb),.55);outline-offset:3px; border-radius:10px;background:rgba(var(--primary-rgb),.06)} .kmd-img.is-sel .kmd-img-x{opacity:1} @media(max-width:720px){ .kmd-tf + .kmd-tf{margin-top:24px} .kmd-sec{min-height:28px;padding:5px 9px;margin-bottom:8px;border-radius:6px} .kmd-badge{font-size:13px} } /* ============================================================ M5-C1 - LIENZO DE CUADERNO CONTINUO. El almacenamiento sigue siendo por bloques (p / img / p), pero eso es estructura de datos, no una caja que el usuario deba ver. Hasta ahora el parrafo se delataba al pasar el raton y sobre todo al enfocarlo: tinte de fondo y filete dibujaban un rectangulo del tamano exacto del bloque, y en oscuro eso se lee como "otro campo de formulario" debajo de la imagen. Aqui se retira esa capa entera. El texto se apoya directamente en el lienzo de la seccion: sin fondo propio, sin borde, sin sombra, sin radio y sin relleno de tarjeta. Quien escribe no puede distinguir donde acaba un ParagraphBlock y empieza el siguiente, que es justo la idea. La orientacion la da la jerarquia correcta: SECCION -> franja de temporalidad, visible. PARRAFO -> invisible. IMAGEN -> visible, porque es contenido de verdad. El foco ya no dibuja el rectangulo del bloque: lo marcan el cursor de escritura y la franja de la temporalidad activa, que es orientacion de documento y no de formulario. ============================================================ */ .kmd-body{gap:0} .kmd .kmd-p{ margin:0;padding:0 0 0 10px; border:0;border-radius:0;background:transparent;box-shadow:none; min-height:26px; /* El navegador ajusta el alto al contenido por su cuenta. Donde exista, esto hace imposible el recorte aunque el editor monte oculto y no haya podido medir; donde no, mandan rows y el autoGrow de siempre. */ field-sizing:content} /* Ni el raton ni el foco revelan los limites del bloque. */ .kmd .kmd-p:hover{background:transparent} .kmd .kmd-p:focus, .kmd .kmd-p:focus-visible{background:transparent;box-shadow:none;outline:none} .kmd .kmd-p[readonly]:hover,.kmd .kmd-p[readonly]:focus{background:transparent;box-shadow:none} /* Ritmo de documento alrededor de la imagen: la captura respira sin abrir un hueco que parezca separacion de secciones. El margen del propio
lo anula el tema (Elementor lo pone a 0 con especificidad alta), asi que el aire lo aportan los parrafos vecinos, que si son nuestros. */ .kmd .kmd-body > .kmd-p:has(+ .kmd-img){padding-bottom:16px} .kmd .kmd-body > .kmd-img + .kmd-p{padding-top:16px} .kmd .kmd-tf .kmd-body figure.kmd-img + figure.kmd-img{margin-top:16px} .kmd-img-bar{padding:6px 2px 0} @media(max-width:720px){ .kmd .kmd-p{padding:0 0 0 9px;min-height:28px} .kmd .kmd-body > .kmd-p:has(+ .kmd-img){padding-bottom:14px} .kmd .kmd-body > .kmd-img + .kmd-p{padding-top:14px} } /* ============================================================ M5-D1 - SECCIONES DE REFLEXION POST-TRADE. Misma franja, misma geometria, mismo lienzo: para quien escribe, la libreta sigue siendo una sola y la frontera entre los dos documentos del servidor no se ve por ningun lado. La unica diferencia es un matiz de tono, suficiente para notar que se ha pasado del mapeo a la reflexion. Nada de verde para el resultado ni rojo para los errores: una operacion ganadora puede estar llena de fallos y una perdedora estar bien ejecutada. El color no debe sugerir un juicio que no existe. ============================================================ */ .kmd-tf[data-kind="review"] > .kmd-sec{ background:rgba(var(--primary-rgb),.045); box-shadow:inset 2px 0 0 var(--border-hover)} .kmd-tf[data-kind="review"] > .kmd-sec .kmd-badge{color:var(--text-2)} .kmd-tf[data-kind="review"]:focus-within > .kmd-sec{ background:rgba(var(--primary-rgb),.09); box-shadow:inset 2px 0 0 rgba(var(--primary-rgb),.45)} .kmd-tf[data-kind="review"]:focus-within > .kmd-sec .kmd-badge{color:var(--text)} /* ============================================================ M5-D1-UX1 - LIENZO ESCRIBIBLE Y AYUDA DE REFLEXION. Una seccion vacia no debe ser una rendija de una linea: la libreta tiene que invitar a escribir. El cuerpo reserva una altura minima que ES zona de escritura -pulsar ahi lleva el cursor al parrafo final-, distinta del aire exterior que separa una seccion de la siguiente. Ese aire no se escribe. Sin altura fija y sin scroll interno: el minimo solo actua cuando el contenido es mas corto, y a partir de ahi crece con el texto. La ayuda de las dos secciones de reflexion es texto de presentacion: su significado es canonico, al reves que el de una temporalidad, que cada trader usa a su manera. ============================================================ */ .kmd-ayuda{margin:0 0 8px;padding:0 0 0 10px; font-family:var(--font-ui);font-size:12.5px;line-height:1.5;color:var(--text-3); max-width:72ch} .kmd-body{min-height:96px;cursor:text} @media(max-width:720px){ .kmd-ayuda{font-size:12px;padding-left:9px} .kmd-body{min-height:80px} } /* ============================================================ M5-D1-UX2 - JERARQUIA DE SECCION: FILETE, DEGRADADO Y RITMO. El separador pertenece al INICIO de cada seccion, no flota entre dos: es un pseudo-elemento del propio bloque, asi que no hay nodos decorativos en el DOM, no se puede enfocar y no aparece ante un lector de pantalla. La primera seccion no lo lleva: una linea antes del primer titulo se leeria como el borde de una caja, justo lo que no queremos. El degradado nace en el acento lateral, acompana al titulo y se apaga antes de la mitad de la franja. Da profundidad sin convertir la cabecera en un boton ni en una banda de color. Todo sale de los tokens de Kairo: en claro y en oscuro cambia el token, no la regla. ============================================================ */ /* Separador: unico para las ocho secciones, nunca antes de la primera. */ .kmd-tf + .kmd-tf{margin-top:22px;padding-top:22px;position:relative} .kmd-tf + .kmd-tf::before{content:"";position:absolute;top:0;left:0;right:0; height:1px;background:var(--border);opacity:.65} /* La franja: superficie neutra + degradado que arranca en el acento. */ .kmd-sec{ background:linear-gradient(90deg, rgba(var(--primary-rgb),.16) 0%, rgba(var(--primary-rgb),.10) 18%, rgba(var(--primary-rgb),.04) 42%, rgba(var(--primary-rgb),0) 68%), rgba(var(--primary-rgb),.045)} .kmd-tf:focus-within > .kmd-sec{ background:linear-gradient(90deg, rgba(var(--primary-rgb),.24) 0%, rgba(var(--primary-rgb),.15) 18%, rgba(var(--primary-rgb),.06) 42%, rgba(var(--primary-rgb),0) 68%), rgba(var(--primary-rgb),.07)} /* Las tres secciones de reflexion: misma familia, un punto mas neutra. */ .kmd-tf[data-kind="review"] > .kmd-sec{ background:linear-gradient(90deg, rgba(var(--primary-rgb),.11) 0%, rgba(var(--primary-rgb),.07) 18%, rgba(var(--primary-rgb),.03) 42%, rgba(var(--primary-rgb),0) 68%), rgba(var(--primary-rgb),.03)} .kmd-tf[data-kind="review"]:focus-within > .kmd-sec{ background:linear-gradient(90deg, rgba(var(--primary-rgb),.20) 0%, rgba(var(--primary-rgb),.12) 18%, rgba(var(--primary-rgb),.05) 42%, rgba(var(--primary-rgb),0) 68%), rgba(var(--primary-rgb),.06)} /* Ritmo: la franja y su ayuda se leen juntas; el lienzo respira despues. */ .kmd-sec{margin-bottom:6px} .kmd-ayuda{margin:0 0 10px} @media(max-width:720px){ .kmd-tf + .kmd-tf{margin-top:18px;padding-top:18px} .kmd-sec{margin-bottom:5px} .kmd-ayuda{margin-bottom:8px} } /* ============================================================ M5-D1-UX2 - SISTEMA CANONICO DE CABECERA DE SECCION. Este bloque SUSTITUYE a los cuatro intentos anteriores (gradient tuning, fix3, dark depth y header rebuild), que quedaron cortados del fichero en vez de sobreescritos: un solo sistema, sin capas contradictorias. La premisa anterior era equivocada. No hay una banda de ancho completo con un degradado dentro: la seccion NO tiene superficie propia. El contenedor es estructural y transparente, y lo unico que se pinta es una pieza local alrededor del titulo -acento, fondo y remate redondeado como una sola unidad-, que mide lo que mide el texto. Pasado el desvanecido no queda nada: el fondo que se ve es el del cuaderno. En oscuro esa pieza se HUNDE respecto al cuaderno (profundidad por sombra, no por luz) y en claro es un tinte limpio de la familia Kairo. Lo unico que recorre todo el ancho es el separador: 1px plano y neutro. ============================================================ */ /* 1. CONTENEDOR DE SECCION: estructural, sin superficie. */ .kmd-sec, .kmd-tf:focus-within > .kmd-sec, .kmd-tf[data-kind="review"] > .kmd-sec, .kmd-tf[data-kind="review"]:focus-within > .kmd-sec{ display:flex;align-items:center; min-height:0;padding:0;border-radius:0; background:none;background-color:transparent;background-image:none; box-shadow:none; margin-bottom:6px} /* 2. PIEZA LOCAL DEL TITULO: acento + fondo + remate, una sola composicion. El ancho lo decide el contenido; el acento es una sombra interior de esta misma pieza, asi que sigue su radio y se lee integrado, no superpuesto. */ .kmd-h, .kmd-tf:focus-within .kmd-h, .kmd-tf[data-kind="review"] .kmd-h, .kmd-tf[data-kind="review"]:focus-within .kmd-h{ display:flex;align-items:center; width:fit-content;max-width:100%; min-height:32px;margin:0;padding:6px 22px 6px 13px; border-radius:8px; box-shadow:inset 2px 0 0 rgba(var(--primary-rgb),.55); background:linear-gradient(90deg, rgba(var(--primary-rgb),.14) 0%, rgba(var(--primary-rgb),.09) 45%, rgba(var(--primary-rgb),.04) 78%, rgba(var(--primary-rgb),0) 100%)} .kmd-tf:focus-within .kmd-h{box-shadow:inset 2px 0 0 rgba(var(--primary-rgb),.85)} /* 3. OSCURO: la pieza queda por debajo del cuaderno en luminancia. */ :root[data-theme="dark"] .kmd-h, :root[data-theme="dark"] .kmd-tf:focus-within .kmd-h, :root[data-theme="dark"] .kmd-tf[data-kind="review"] .kmd-h, :root[data-theme="dark"] .kmd-tf[data-kind="review"]:focus-within .kmd-h{ background:linear-gradient(90deg, rgba(11,14,22,.96) 0%, rgba(11,14,22,.78) 45%, rgba(11,14,22,.36) 78%, rgba(11,14,22,0) 100%)} /* 4. TITULO: un solo nivel en las ocho secciones. */ .kmd-badge, .kmd-tf[data-kind="review"] > .kmd-sec .kmd-badge, .kmd-tf[data-kind="review"]:focus-within > .kmd-sec .kmd-badge{color:var(--text)} /* 5. SEPARADOR: lo unico de ancho completo. Plano y neutro. */ .kmd-tf + .kmd-tf::before{background:rgba(255,255,255,.075)} :root[data-theme="light"] .kmd-tf + .kmd-tf::before{background:rgba(16,20,26,.10)} @media(max-width:720px){ .kmd-h, .kmd-tf[data-kind="review"] .kmd-h{min-height:28px;padding:5px 18px 5px 12px;border-radius:6px} } /* ============================================================ M5-D1-UX2 - COLOR DEL ACENTO, RITMO DE REFLEXION Y SECCION OPCIONAL. Degradado: misma geometria local, color del borde activo de Kairo -rgba(91,124,217,.42)- desvaneciendo a nada. El acento lateral usa la misma familia, para que acento y fondo se lean como una sola pieza. Ritmo: el subtitulo sigue pegado a su titulo (6px) y gana algo de aire antes del lienzo (14px), que es donde hacia falta. Informacion adicional: el titulo es el control. El area pulsable es el boton, que vive DENTRO de la pieza pintada, asi que volverla clicable no ensancha el degradado ni devuelve ninguna banda. ============================================================ */ .kmd-h, .kmd-tf:focus-within .kmd-h, .kmd-tf[data-kind="review"] .kmd-h, .kmd-tf[data-kind="review"]:focus-within .kmd-h, :root[data-theme="dark"] .kmd-h, :root[data-theme="dark"] .kmd-tf:focus-within .kmd-h, :root[data-theme="dark"] .kmd-tf[data-kind="review"] .kmd-h, :root[data-theme="dark"] .kmd-tf[data-kind="review"]:focus-within .kmd-h{ box-shadow:inset 2px 0 0 rgba(91,124,217,.42); background:linear-gradient(90deg, rgba(91,124,217,.42) 0%, rgba(91,124,217,.20) 45%, rgba(91,124,217,.07) 78%, rgba(91,124,217,0) 100%)} .kmd-tf:focus-within .kmd-h{box-shadow:inset 2px 0 0 rgba(91,124,217,.70)} /* Claro: misma familia, alfa contenido para no ensuciar el blanco. */ :root[data-theme="light"] .kmd-h, :root[data-theme="light"] .kmd-tf[data-kind="review"] .kmd-h{ box-shadow:inset 2px 0 0 rgba(63,95,199,.42); background:linear-gradient(90deg, rgba(63,95,199,.20) 0%, rgba(63,95,199,.11) 45%, rgba(63,95,199,.04) 78%, rgba(63,95,199,0) 100%)} /* Ritmo de las secciones con ayuda. */ .kmd-ayuda{margin:0 0 14px} @media(max-width:720px){ .kmd-ayuda{margin-bottom:12px} } /* Control de despliegue: hereda el aspecto del titulo, no parece un boton. */ .kmd-disc{display:inline-flex;align-items:center;gap:7px; margin:0;padding:0;border:0;background:none;cursor:pointer; font:inherit;color:inherit;text-align:left} .kmd-disc:focus-visible{outline:2px solid rgba(var(--primary-rgb),.75);outline-offset:3px;border-radius:3px} .kmd-chev{width:0;height:0;flex:none; border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent; opacity:.55;transform-origin:35% 50%;transition:transform .16s ease} .kmd-disc[aria-expanded="true"] .kmd-chev{transform:rotate(90deg)} /* Plegada: solo separador, pieza de titulo y chevron. Sin lienzo reservado. */ .kmd-tf[data-abierta="0"] > .kmd-sec{margin-bottom:0} /* El atributo hidden no basta: .kmd-body declara display:flex y una declaracion de display siempre gana al comportamiento por defecto de [hidden]. Se cierra explicitamente. */ .kmd-body[hidden]{display:none} /* Chevron: tono del titulo pero un peldano por debajo, en ambos temas. */ .kmd-chev{border-left-color:var(--text-3);opacity:1} /* ============================================================ M5-D1-UX2 - AJUSTE FINO FINAL: COLOR Y AIRE. Degradado: misma pieza local, familia rebajada a rgba(91,124,217,.14). La geometria no cambia -sigue midiendo lo que mide el titulo- y la franja sigue sin superficie propia. Aire: el titulo y su ayuda siguen juntos (6px), y lo que gana espacio es la entrada al lienzo. En las temporalidades manda el margen de la franja; en las secciones con ayuda manda el de la ayuda; en Informacion adicional, abierta, manda de nuevo el de la franja porque no lleva ayuda. Cerrada sigue a cero: compacta de verdad. ============================================================ */ /* --- Color: familia .14 --- */ .kmd-h, .kmd-tf:focus-within .kmd-h, .kmd-tf[data-kind="review"] .kmd-h, .kmd-tf[data-kind="review"]:focus-within .kmd-h, :root[data-theme="dark"] .kmd-h, :root[data-theme="dark"] .kmd-tf:focus-within .kmd-h, :root[data-theme="dark"] .kmd-tf[data-kind="review"] .kmd-h, :root[data-theme="dark"] .kmd-tf[data-kind="review"]:focus-within .kmd-h{ background:linear-gradient(90deg, rgba(91,124,217,.14) 0%, rgba(91,124,217,.08) 45%, rgba(91,124,217,.03) 78%, rgba(91,124,217,0) 100%)} :root[data-theme="light"] .kmd-h, :root[data-theme="light"] .kmd-tf[data-kind="review"] .kmd-h{ background:linear-gradient(90deg, rgba(63,95,199,.14) 0%, rgba(63,95,199,.08) 45%, rgba(63,95,199,.03) 78%, rgba(63,95,199,0) 100%)} /* --- Aire: entrada al lienzo --- */ /* Temporalidades: de la franja al primer renglon escribible. */ .kmd-tf[data-kind="tf"] > .kmd-sec{margin-bottom:18px} /* Secciones con ayuda: titulo y ayuda siguen a 6px; el aire va despues. */ .kmd-ayuda{margin:0 0 18px} /* Informacion adicional abierta: sin ayuda, asi que el aire vuelve a la franja. */ .kmd-tf[data-tf="additional"][data-abierta="1"] > .kmd-sec{margin-bottom:18px} /* Cerrada: compacta, sin aire sobrante. */ .kmd-tf[data-abierta="0"] > .kmd-sec{margin-bottom:0} @media(max-width:720px){ .kmd-tf[data-kind="tf"] > .kmd-sec{margin-bottom:14px} .kmd-ayuda{margin-bottom:14px} .kmd-tf[data-tf="additional"][data-abierta="1"] > .kmd-sec{margin-bottom:14px} .kmd-tf[data-abierta="0"] > .kmd-sec{margin-bottom:0} } /* El tema declara button:hover{background-color:...} para cualquier