/*
	Aspecto del CKEditor (13/09/2026).

	CKEditor 4 se queda tal cual (decisión cerrada del 06/08/2026, ver docs/roadmap.md): lo que
	cambia es solo la piel. El skin «moono-lisa» que trae dibuja el editor como una ventana de
	2015: borde gris oscuro, barra gris con relieve y botones que al pasar el ratón se ponen un
	marco. Aquí se le da el mismo lenguaje que al resto de campos del formulario (main.css):
	borde fino, esquinas redondeadas, barra casi blanca y el mismo aro lila de foco que un <input>.

	No toca ningún fichero de assets/ckeditor/, así que si algún día se actualiza el editor esto
	sigue valiendo o, como mucho, deja de aplicarse. Solo sobrescribe clases públicas del skin
	(.cke_chrome, .cke_top, .cke_button…). Las reglas repiten los selectores del skin porque
	editor.css usa la misma especificidad y, si no, ganaría la suya.

	Lo que pasa DENTRO del cuadro (el iframe) no se estila desde aquí: eso lo manda contentsCss
	en includes/inputs_funciones.php.
*/

/* El marco: como un <input> de main.css. `.cke_focus` la pone CKEditor al entrar en el editor. */
.cke_chrome {
	border: solid 1px rgba(188, 192, 194, 0.75);
	border-radius: 0.375em;
	box-shadow: none;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.cke_chrome.cke_focus {
	border-color: #100183;
	box-shadow: 0 0 0 1px #100183;
}

/* La barra de botones: casi blanca, sin relieve, con las esquinas de arriba redondeadas. */
.cke_chrome .cke_top {
	background: #f9fafb;
	border: 0;
	border-bottom: 1px solid #eceaf5;
	border-radius: 0.375em 0.375em 0 0;
	padding: 6px 8px 2px;
}
.cke_chrome .cke_contents {
	border-radius: 0 0 0.375em 0.375em;
}
.cke_chrome .cke_bottom {
	background: #f9fafb;
	border-top: 1px solid #eceaf5;
	border-radius: 0 0 0.375em 0.375em;
}

/* Los botones: cuadrados sin borde en todos sus estados (el skin les cambia borde y relleno al
   pasar el ratón, y por eso hay que repetir aquí cada estado con el mismo tamaño). */
.cke_chrome a.cke_button,
.cke_chrome a.cke_button_on,
.cke_chrome a.cke_button_off:hover,
.cke_chrome a.cke_button_off:focus,
.cke_chrome a.cke_button_off:active,
.cke_chrome a.cke_button_disabled:hover,
.cke_chrome a.cke_button_disabled:focus,
.cke_chrome a.cke_button_disabled:active {
	border: 0;
	border-radius: 4px;
	padding: 5px;
	margin: 0 1px 4px 0;
	height: 18px;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.1s, box-shadow 0.1s;
}
/* Al pasar el ratón se levanta en blanco; pulsado o activo (negrita encendida) se tiñe de lila. */
.cke_chrome a.cke_button_off:hover,
.cke_chrome a.cke_button_off:focus {
	background: #ffffff;
	box-shadow: 0 0 0 1px #e2e3e8;
}
.cke_chrome a.cke_button_on,
.cke_chrome a.cke_button_off:active {
	background: #e2dbf9;
}
.cke_chrome a.cke_button_disabled {
	cursor: default;
}

/* Las rayitas que separan grupos: más claras, y quietas al pasar el ratón (el skin las movía
   un píxel porque el botón ganaba un borde). */
.cke_chrome .cke_toolbar_separator {
	background-color: #e2e3e8;
	height: 18px;
	margin: 5px 4px 0;
}
.cke_chrome .cke_toolgroup a.cke_button:last-child:after,
.cke_chrome .cke_toolgroup a.cke_button.cke_button_disabled:hover:last-child:after,
.cke_chrome .cke_toolgroup a.cke_button:hover:last-child:after,
.cke_chrome .cke_toolgroup a.cke_button:focus:last-child:after,
.cke_chrome .cke_toolgroup a.cke_button.cke_button_on:last-child:after {
	border-right-color: #e2e3e8;
	top: 0;
	right: -3px;
	margin-top: 5px;
}

/* ==================================================================
   LOS DIÁLOGOS DEL EDITOR (13/09/2026): en el build básico solo hay
   uno, el de «Vínculo». Se le da el mismo aire que a un modal de la
   aplicación: título limpio, pestañas subrayadas en naranja como las
   de las pantallas, campos como los del formulario y el botón de
   aceptar en el azul de marca en vez del verde del skin.

   ⚠️ El skin carga su CSS DESPUÉS de este fichero (lo inyecta
      ckeditor.js al arrancar), así que a igual especificidad gana él.
      Por eso todas las reglas van precedidas de .cke_dialog: no es
      manía, es lo que las hace ganar.
   ================================================================== */

/* main.css pinta las tablas con filas alternas grises y una línea entre filas; los diálogos de
   CKEditor se maquetan con tablas y salían con franjas grises detrás de cada campo. */
.cke_dialog table tbody tr { background: transparent; border: 0; }
.cke_dialog table thead, .cke_dialog table tfoot { border: 0; }

/* La letra de la aplicación en vez de la Arial del skin (.cke_reset_all la fija en todo lo que cuelga). */
.cke_dialog .cke_dialog_body, .cke_dialog .cke_dialog_body * { font-family: "Geomanist", "Open Sans", sans-serif; }

.cke_dialog .cke_dialog_body {
	border: 1px solid rgba(188, 192, 194, 0.75);
	border-radius: 0.5em;
	box-shadow: 0 14px 36px rgba(16, 1, 131, 0.18);
	overflow: hidden;
}
.cke_dialog .cke_dialog_title {
	background: #fff;
	border-bottom: 1px solid #eceaf5;
	color: #100183;
	font-size: 14px;
	padding: 13px 44px 12px 18px;
}
.cke_dialog .cke_dialog_contents { border-top: 0; padding: 12px 18px 6px; }
.cke_dialog .cke_dialog_footer { background: #f9fafb; border-top: 1px solid #eceaf5; padding: 6px 10px; }

/* Pestañas: solo texto y el subrayado naranja de las pestañas de la aplicación. La altura se
   deja como la del skin (33px en total) porque el contenido va desplazado justo esa medida. */
.cke_dialog .cke_dialog_tabs { left: 18px; }
.cke_dialog a.cke_dialog_tab,
.cke_dialog a.cke_dialog_tab:hover,
.cke_dialog a.cke_dialog_tab_selected {
	box-sizing: border-box;
	height: 33px;
	line-height: 29px;
	min-width: 0;
	margin: 0 14px 0 0;
	padding: 0 2px;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: #666;
	font-size: 12px;
}
.cke_dialog a.cke_dialog_tab:hover { color: #100183; }
.cke_dialog a.cke_dialog_tab_selected { color: #100183; font-weight: 600; border-bottom-color: #FF6124; }

/* Rótulos y campos, como los del formulario */
.cke_dialog .cke_dialog_ui_labeled_label { display: block; margin: 0 0 4px 1px; font-size: 12px; font-weight: 600; color: #454545; }
.cke_dialog input.cke_dialog_ui_input_text,
.cke_dialog input.cke_dialog_ui_input_password,
.cke_dialog input.cke_dialog_ui_input_tel,
.cke_dialog textarea.cke_dialog_ui_input_textarea,
.cke_dialog select.cke_dialog_ui_input_select {
	border: 1px solid rgba(188, 192, 194, 0.75);
	border-radius: 0.375em;
	min-height: 34px;
	padding: 4px 10px;
	font-size: 13px;
	color: #454545;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.cke_dialog input.cke_dialog_ui_input_text:hover,
.cke_dialog input.cke_dialog_ui_input_password:hover,
.cke_dialog input.cke_dialog_ui_input_tel:hover,
.cke_dialog textarea.cke_dialog_ui_input_textarea:hover { border: 1px solid rgba(188, 192, 194, 0.75); }
.cke_dialog input.cke_dialog_ui_input_text:focus,
.cke_dialog input.cke_dialog_ui_input_password:focus,
.cke_dialog input.cke_dialog_ui_input_tel:focus,
.cke_dialog textarea.cke_dialog_ui_input_textarea:focus,
.cke_dialog select.cke_dialog_ui_input_select:focus {
	border: 1px solid #100183;
	box-shadow: 0 0 0 1px #100183;
	padding: 4px 10px;
}

/* Botones del pie: «Aceptar» en el azul de marca, «Cancelar» en blanco con borde */
.cke_dialog a.cke_dialog_ui_button,
.cke_dialog a.cke_dialog_ui_button:hover {
	border: 1px solid rgba(188, 192, 194, 0.75);
	border-radius: 0.375em;
	background: #fff;
	color: #454545;
	padding: 6px 4px;
	line-height: 18px;
	transition: background-color 0.15s ease-in-out;
}
.cke_dialog a.cke_dialog_ui_button:hover { background: #f1f0fb; border-color: #c9c0f2; }
.cke_dialog a.cke_dialog_ui_button span { font-size: 12px; font-weight: 600; padding: 0 14px; }
.cke_dialog a.cke_dialog_ui_button_ok,
.cke_dialog a.cke_dialog_ui_button_ok:hover { background: #1900dc; border-color: #1900dc; color: #fff; }
.cke_dialog a.cke_dialog_ui_button_ok:hover { background: #100183; border-color: #100183; }

/* El botón «?» (About) se quita en assets/ckeditor/config.js, pero CKEditor pide ese fichero con
   una marca FIJA de su build (?t=J39A), no con la fecha del fichero: el navegador que ya lo tenía
   guardado sigue usando el viejo hasta que caduque. Esta regla lo esconde mientras tanto, y esta
   hoja sí va versionada con asset_v(). Cinturón y tirantes. */
.cke_chrome .cke_button__about { display: none; }

/* El botón ⤢ del plugin propio «ampliar» solo sirve si la pantalla tiene la ventana grande
   (dialogo_lectura_pintar()). Si no la tiene, plugin.js marca <html class="sin-dlec"> y se esconde. */
.sin-dlec .cke_chrome .cke_button__ampliar { display: none; }