/**
 * Canal de Denuncias Escolar — estilos públicos.
 * Mobile first. Todo el layout escala de 320 px a 1920 px.
 */

.cde-app {
	--cde-primary: #f39200;
	--cde-secondary: #e2001a;
	--cde-tertiary: #c1005d;
	--cde-header: #000;
	--cde-header-text: #fff;
	--cde-text: #1a1a1a;
	--cde-muted: #6b6b6b;
	--cde-line: #e2e2e2;
	--cde-line-soft: #efefef;
	--cde-bg: #fff;
	--cde-bg-soft: #fafafa;
	--cde-radius: 4px;
	--cde-focus: #005fcc;
	--cde-error: #c0142b;
	--cde-success: #1c7c3f;

	box-sizing: border-box;
	color: var(--cde-text);
	font-size: 16px;
	line-height: 1.55;
	background: var(--cde-bg);
	-webkit-text-size-adjust: 100%;
}

.cde-app *,
.cde-app *::before,
.cde-app *::after {
	box-sizing: inherit;
}

.cde-app img {
	max-width: 100%;
	height: auto;
}

/*
 * Blindaje de legibilidad.
 *
 * Muchos temas colorean de forma agresiva button, label y los elementos de
 * formulario —a menudo con !important— y dejan ilegibles textos como
 * «Relación con la organización», que va dentro de un <button>, o los propios
 * botones de acción. Aquí se fija color y fondo de forma explícita para todo
 * el componente, sin depender de la herencia del tema.
 *
 * El uso de !important está deliberadamente acotado a la propiedad `color` de
 * las clases propias del plugin: es la única forma de ganar a un tema que
 * declare `button { color: #fff !important }`.
 */
.cde-app,
.cde-app p,
.cde-app span,
.cde-app label,
.cde-app li,
.cde-app dt,
.cde-app dd,
.cde-app h1,
.cde-app h2,
.cde-app h3,
.cde-app input,
.cde-app select,
.cde-app textarea {
	color: var(--cde-text);
}

.cde-app button {
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	box-shadow: none;
}

/* Botones que deben ser transparentes (no todos: los de acción llevan fondo). */
.cde-app .cde-accordion__toggle,
.cde-app .cde-circlebtn,
.cde-app .cde-collapse,
.cde-app .cde-filelist__remove {
	background-color: transparent;
}

/* Texto sobre fondo claro. */
.cde-app .cde-accordion__toggle,
.cde-app .cde-accordion__toggle .cde-field__label,
.cde-app .cde-radio__text,
.cde-app .cde-check__text,
.cde-app .cde-field__label,
.cde-app .cde-circlebtn,
.cde-app .cde-collapse,
.cde-app .cde-pillbtn,
.cde-app .cde-pillbtn span,
.cde-app .cde-pillbtn__icon,
.cde-app .cde-toggle__opt span,
.cde-app .cde-btn--ghost,
.cde-app .cde-btn--ghost span {
	color: var(--cde-text) !important;
	opacity: 1;
	visibility: visible;
}

/* Texto sobre superficies de color: usa el contraste calculado. */
.cde-app .cde-panel__head,
.cde-app .cde-panel__head span,
.cde-app .cde-btn--primary,
.cde-app .cde-btn--primary span,
.cde-app .cde-toggle__opt input:checked + span,
.cde-app .cde-pillbtn--solid,
.cde-app .cde-pillbtn--solid span,
.cde-app .cde-pillbtn--solid .cde-pillbtn__icon,
.cde-app .cde-pillbtn[aria-expanded="true"],
.cde-app .cde-pillbtn[aria-expanded="true"] span,
.cde-app .cde-pillbtn[aria-expanded="true"] .cde-pillbtn__icon {
	color: var(--cde-header-text) !important;
}

.cde-app .cde-pillbtn.is-recording,
.cde-app .cde-pillbtn.is-recording span,
.cde-app .cde-pillbtn.is-recording .cde-pillbtn__icon {
	color: #fff !important;
}

/* Los fondos de los botones de acción no deben depender del tema. */
.cde-app .cde-btn--primary,
.cde-app .cde-pillbtn--solid,
.cde-app .cde-pillbtn[aria-expanded="true"] {
	background-color: var(--cde-header);
}

.cde-app .cde-btn--ghost,
.cde-app .cde-pillbtn,
.cde-app .cde-toggle__opt span {
	background-color: #fff;
}

.cde-app .cde-toggle__opt input:checked + span {
	background-color: var(--cde-header);
}

/* Textos de énfasis y secundarios. */
.cde-app .cde-required-note,
.cde-app .cde-req,
.cde-app .cde-error { color: var(--cde-error) !important; }

.cde-app .cde-hint,
.cde-app .cde-counter,
.cde-app .cde-empty,
.cde-app .cde-doc__date,
.cde-app .cde-card__foot,
.cde-app .cde-dropzone,
.cde-app .cde-control label { color: var(--cde-muted) !important; }

.cde-app .cde-dropzone strong { color: var(--cde-text) !important; }
.cde-app a { color: var(--cde-tertiary); }
.cde-app .cde-doc__link { color: #1a5fd0 !important; }

.cde-app .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------- */
/* Cabecera                                                               */
/* --------------------------------------------------------------------- */

.cde-topbar {
	background: #fff;
}

.cde-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 14px 16px;
}

.cde-topbar__logo {
	max-height: 44px;
	width: auto;
}

.cde-topbar__name {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .01em;
}

.cde-gradient {
	height: 6px;
	background: linear-gradient(
		90deg,
		var(--cde-primary) 0%,
		var(--cde-primary) 22%,
		var(--cde-secondary) 55%,
		var(--cde-tertiary) 100%
	);
}

.cde-lang__select {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	color: var(--cde-text);
	font-size: .95rem;
	font-family: inherit;
	padding: 8px 26px 8px 8px;
	min-height: 40px;
	cursor: pointer;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 2px center;
	background-size: 18px;
}

.cde-lang__select:focus-visible {
	outline: 2px solid var(--cde-focus);
	outline-offset: 2px;
}

.cde-lang {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

/* Mientras se recarga la página en el nuevo idioma. */
.cde-lang.is-loading {
	opacity: .55;
	pointer-events: none;
}

/* Sólo visible sin JavaScript: el JS lo oculta y envía al cambiar. */
.cde-app .cde-lang__go {
	min-height: 40px;
	padding: 6px 14px;
	border: 1px solid #cfcfcf;
	border-radius: 999px;
	background: #fff;
	font-family: inherit;
	font-size: .85rem;
	cursor: pointer;
}

/* --------------------------------------------------------------------- */
/* Contenedor y rejilla                                                   */
/* --------------------------------------------------------------------- */

.cde-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 24px 16px 56px;
}

.cde-container--narrow {
	max-width: 820px;
}

.cde-title {
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: 400;
	line-height: 1.25;
	margin: 8px 0 14px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--cde-primary);
	color: var(--cde-text);
}

.cde-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}

@media (min-width: 900px) {
	.cde-grid {
		grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
		gap: 28px;
	}

	.cde-layout-single .cde-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cde-container {
		padding: 32px 24px 72px;
	}
}

@media (min-width: 1200px) {
	.cde-grid {
		grid-template-columns: 380px minmax(0, 1fr);
		gap: 34px;
	}
}

.cde-aside {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	order: 2;
}

.cde-main {
	min-width: 0;
	order: 1;
}

@media (min-width: 900px) {
	.cde-aside { order: 0; position: sticky; top: 20px; }
	.cde-main { order: 0; }
}

/* --------------------------------------------------------------------- */
/* Tarjetas laterales                                                     */
/* --------------------------------------------------------------------- */

.cde-card {
	border: 1px solid var(--cde-line);
	border-radius: var(--cde-radius);
	background: #fff;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.cde-card__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 16px 18px 12px;
	font-size: 1.12rem;
	font-weight: 400;
	line-height: 1.3;
	border-bottom: 2px solid var(--cde-primary);
	color: var(--cde-text);
}

.cde-card__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--cde-text);
}

.cde-card__title {
	flex: 1 1 auto;
	min-width: 0;
}

.cde-card__plus {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--cde-muted);
}

.cde-card__body {
	padding: 14px 18px 6px;
	overflow: hidden;
	transition: max-height .25s ease, opacity .2s ease, padding .2s ease;
}

.cde-card.is-collapsed .cde-card__body {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
}

.cde-card__subtitle {
	font-size: .95rem;
	font-weight: 600;
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--cde-line);
}

.cde-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding: 10px 18px 14px;
	border-top: 1px solid var(--cde-line-soft);
	font-size: .9rem;
	color: var(--cde-muted);
}

.cde-card__foot--right {
	justify-content: flex-end;
}

/* Botón circular expandir / colapsar (cuatro flechas diagonales) */

.cde-circlebtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2.5px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: var(--cde-text);
	cursor: pointer;
	transition: color .18s ease, background .18s ease, transform .18s ease;
	-webkit-tap-highlight-color: transparent;
}

.cde-circlebtn--sm {
	width: 34px;
	height: 34px;
	border-width: 2px;
	color: #555;
}

.cde-circlebtn:hover {
	color: var(--cde-primary);
	background: color-mix(in srgb, var(--cde-primary) 8%, transparent);
}

.cde-circlebtn:active { transform: scale(.94); }

.cde-circlebtn:focus-visible {
	outline: 2px solid var(--cde-focus);
	outline-offset: 3px;
}

.cde-circlebtn__icon {
	display: none;
	line-height: 0;
}

.cde-circlebtn--sm .cde-circlebtn__icon svg {
	width: 19px;
	height: 19px;
}

/* Contenido desplegado → se ofrece colapsar (flechas hacia dentro). */
.cde-circlebtn[aria-expanded="true"] .cde-circlebtn__icon--in { display: block; }

/* Contenido colapsado → se ofrece expandir (flechas hacia fuera). */
.cde-circlebtn[aria-expanded="false"] .cde-circlebtn__icon--out { display: block; }

.cde-prose {
	font-size: .93rem;
	line-height: 1.6;
	color: #3a3a3a;
	overflow-wrap: break-word;
}

.cde-prose p { margin: 0 0 .8em; }
.cde-prose a { color: var(--cde-tertiary); }
.cde-prose--small { font-size: .85rem; color: var(--cde-muted); }

/* Documentos */

.cde-doclist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cde-doc {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	font-size: .92rem;
	min-height: 44px;
}

.cde-doc__icon { color: var(--cde-secondary); flex: 0 0 auto; display: inline-flex; }

.cde-doc__link {
	flex: 1 1 auto;
	min-width: 0;
	color: #1a5fd0;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cde-doc__link:hover,
.cde-doc__link:focus { text-decoration: underline; }

.cde-doc__date {
	flex: 0 0 auto;
	color: var(--cde-muted);
	font-size: .85rem;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------- */
/* Formulario                                                             */
/* --------------------------------------------------------------------- */

.cde-required-note {
	margin: 0 0 8px;
	text-align: right;
	font-size: .88rem;
	color: var(--cde-error);
}

.cde-panel {
	border: 1px solid var(--cde-line);
	border-radius: var(--cde-radius);
	background: #fff;
	overflow: hidden;
	margin-bottom: 18px;
}

.cde-panel__head {
	margin: 0;
	padding: 16px 18px;
	background: var(--cde-header);
	color: var(--cde-header-text);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
}

.cde-field {
	padding: 14px 16px;
	border-bottom: 1px solid var(--cde-line-soft);
}

.cde-field:last-child { border-bottom: 0; }

@media (min-width: 700px) {
	.cde-field { padding: 16px 20px; }
}

.cde-field__label {
	display: block;
	font-size: .95rem;
	font-weight: 400;
	color: #2b2b2b;
	margin-bottom: 8px;
	line-height: 1.4;
}

.cde-field__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.cde-field__row .cde-field__label { margin-bottom: 6px; flex: 1 1 auto; }

.cde-req {
	color: var(--cde-error);
	text-decoration: none;
	border: 0;
	margin-left: 2px;
	font-size: 1.05em;
	line-height: 1;
}

.cde-hint {
	margin: 10px 0 0;
	font-size: .85rem;
	color: var(--cde-muted);
	line-height: 1.5;
}

.cde-error {
	margin: 6px 0 0;
	font-size: .85rem;
	color: var(--cde-error);
	min-height: 0;
}

.cde-error:empty { display: none; }

.cde-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Campos de texto */

.cde-app input[type="text"],
.cde-app input[type="email"],
.cde-app input[type="tel"],
.cde-app input[type="url"],
.cde-app input[type="date"],
.cde-app input[type="search"],
.cde-app input[type="password"],
.cde-app textarea,
.cde-app select {
	width: 100%;
	max-width: 100%;
	font-family: inherit;
	font-size: 1rem;
	color: var(--cde-text);
	background: #fff;
	border: 1px solid var(--cde-line);
	border-radius: var(--cde-radius);
	padding: 12px 14px;
	min-height: 48px;
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.cde-app textarea {
	resize: vertical;
	min-height: 140px;
}

.cde-app input:focus,
.cde-app textarea:focus,
.cde-app select:focus {
	outline: 0;
	border-color: var(--cde-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cde-primary) 25%, transparent);
}

.cde-app input:focus-visible,
.cde-app textarea:focus-visible,
.cde-app select:focus-visible {
	outline: 2px solid var(--cde-focus);
	outline-offset: 1px;
}

.cde-app input.has-error,
.cde-app textarea.has-error {
	border-color: var(--cde-error);
}

.cde-app ::placeholder { color: #9a9a9a; opacity: 1; }

.cde-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: .06em;
}

.cde-cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

@media (min-width: 640px) {
	.cde-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cde-cols .cde-control:first-child { grid-column: 1 / -1; }
}

.cde-control { margin: 0; }

.cde-control label {
	display: block;
	font-size: .85rem;
	color: var(--cde-muted);
	margin-bottom: 5px;
}

.cde-date { max-width: 220px; }

/* Acordeones */

.cde-field--accordion { padding: 0; }

.cde-accordion__toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	border: 0;
	background: none;
	padding: 16px;
	min-height: 56px;
	font-family: inherit;
	font-size: 1rem;
	text-align: left;
	color: inherit;
	cursor: pointer;
}

@media (min-width: 700px) {
	.cde-accordion__toggle { padding: 16px 20px; }
}

.cde-accordion__toggle .cde-field__label {
	margin: 0;
	flex: 1 1 auto;
}

.cde-accordion__value {
	flex: 0 0 auto;
	font-size: .9rem;
	color: var(--cde-muted);
	max-width: 45%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cde-accordion__toggle:focus-visible {
	outline: 2px solid var(--cde-focus);
	outline-offset: -2px;
}

.cde-accordion__body {
	padding: 0 16px 16px;
}

@media (min-width: 700px) {
	.cde-accordion__body { padding: 0 20px 18px; }
}

.cde-chevron {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='1.5'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat center / 22px;
	transition: transform .2s ease;
}

[aria-expanded="true"] .cde-chevron { transform: rotate(180deg); }

/* Buscador de tipologías */

.cde-search {
	position: relative;
	margin-bottom: 4px;
}

.cde-search__input {
	padding-right: 46px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--cde-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.cde-search__input:focus {
	border-bottom-color: var(--cde-primary) !important;
	box-shadow: 0 1px 0 0 var(--cde-primary) !important;
}

.cde-search__icon {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--cde-muted);
	pointer-events: none;
	padding-left: 10px;
	border-left: 1px solid var(--cde-line);
	display: flex;
}

/* Radios */

.cde-radios {
	display: flex;
	flex-direction: column;
}

.cde-radios--scroll {
	max-height: 340px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding-right: 4px;
}

@media (min-width: 900px) {
	.cde-radios--scroll { max-height: 430px; }
}

.cde-radios--scroll::-webkit-scrollbar { width: 8px; }
.cde-radios--scroll::-webkit-scrollbar-thumb { background: #cfcfcf; border-radius: 8px; }
.cde-radios--scroll::-webkit-scrollbar-track { background: #f4f4f4; }

.cde-radio {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 11px 4px;
	min-height: 48px;
	cursor: pointer;
	border-radius: var(--cde-radius);
	transition: background .12s ease;
}

.cde-radio:hover { background: var(--cde-bg-soft); }

.cde-radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.cde-radio__mark {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border: 1.5px solid #8a8a8a;
	border-radius: 50%;
	background: #fff;
	position: relative;
	transition: border-color .15s ease;
}

.cde-radio__mark::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--cde-primary);
	transform: scale(0);
	transition: transform .15s ease;
}

.cde-radio input:checked + .cde-radio__mark {
	border-color: var(--cde-primary);
	border-width: 2px;
}

.cde-radio input:checked + .cde-radio__mark::after { transform: scale(1); }

.cde-radio input:focus-visible + .cde-radio__mark {
	outline: 2px solid var(--cde-focus);
	outline-offset: 2px;
}

.cde-radio__text {
	font-size: .95rem;
	line-height: 1.45;
	color: #2b2b2b;
	overflow-wrap: break-word;
}

.cde-radio.is-hidden { display: none; }

.cde-empty {
	padding: 16px 4px;
	color: var(--cde-muted);
	font-size: .9rem;
	margin: 0;
}

/* Casilla de verificación */

.cde-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	padding: 4px 0;
}

.cde-check input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.cde-check__mark {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border: 1.5px solid #8a8a8a;
	border-radius: 3px;
	background: #fff;
	position: relative;
}

.cde-check__mark::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 3px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .15s ease;
}

.cde-check input:checked + .cde-check__mark {
	background: var(--cde-primary);
	border-color: var(--cde-primary);
}

.cde-check input:checked + .cde-check__mark::after { transform: rotate(45deg) scale(1); }

.cde-check input:focus-visible + .cde-check__mark {
	outline: 2px solid var(--cde-focus);
	outline-offset: 2px;
}

.cde-check__text { font-size: .9rem; line-height: 1.5; }
.cde-check__text a { color: var(--cde-tertiary); }

/* Toggle Sí/No */

.cde-field--inline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.cde-field--inline .cde-field__label { margin: 0; flex: 1 1 220px; }

.cde-toggle {
	display: inline-flex;
	gap: 8px;
	flex: 0 0 auto;
}

.cde-toggle__opt input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.cde-toggle__opt span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	min-height: 44px;
	padding: 8px 18px;
	border: 1px solid #cfcfcf;
	border-radius: 999px;
	font-size: .95rem;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.cde-toggle__opt input:checked + span {
	background: var(--cde-header);
	border-color: var(--cde-header);
	color: var(--cde-header-text);
}

.cde-toggle__opt input:focus-visible + span {
	outline: 2px solid var(--cde-focus);
	outline-offset: 2px;
}

/* Botones tipo píldora (mismo lenguaje visual que el toggle Sí/No) */

.cde-tools {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	flex: 0 0 auto;
}

.cde-app .cde-pillbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid #cfcfcf;
	border-radius: 999px;
	background: #fff;
	color: var(--cde-text);
	font-family: inherit;
	font-size: .9rem;
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
	-webkit-tap-highlight-color: transparent;
}

.cde-pillbtn__icon { flex: 0 0 auto; }

.cde-app .cde-pillbtn:hover {
	background: var(--cde-bg-soft);
	border-color: #a9a9a9;
	color: var(--cde-text);
}

.cde-app .cde-pillbtn:focus-visible {
	outline: 2px solid var(--cde-focus);
	outline-offset: 2px;
}

/* Estado activo: mismo relleno que la opción marcada del toggle Sí/No. */
.cde-app .cde-pillbtn--solid,
.cde-app .cde-pillbtn[aria-expanded="true"],
.cde-app .cde-pillbtn.is-active {
	background: var(--cde-header);
	border-color: var(--cde-header);
	color: var(--cde-header-text);
}

.cde-app .cde-pillbtn--solid:hover,
.cde-app .cde-pillbtn[aria-expanded="true"]:hover,
.cde-app .cde-pillbtn.is-active:hover {
	background: var(--cde-header);
	border-color: var(--cde-header);
	color: var(--cde-header-text);
	opacity: .88;
}

.cde-app .cde-pillbtn.is-recording {
	background: var(--cde-secondary);
	border-color: var(--cde-secondary);
	color: #fff;
	animation: cde-pulse 1.4s ease-in-out infinite;
}

@keyframes cde-pulse {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cde-secondary) 45%, transparent); }
	50% { box-shadow: 0 0 0 8px transparent; }
}

/* El icono mostrado en el botón Ampliar/Reducir depende del estado. */
.cde-pillbtn .cde-pillbtn__icon--in,
.cde-pillbtn[aria-expanded="true"] .cde-pillbtn__icon--out { display: none; }
.cde-pillbtn[aria-expanded="true"] .cde-pillbtn__icon--in { display: block; }

/* Ayuda contextual en línea (sustituye a los tooltips flotantes) */

.cde-hint--box {
	margin: 12px 0 0;
	padding: 12px 14px;
	background: var(--cde-bg-soft);
	border-left: 3px solid var(--cde-primary);
	border-radius: var(--cde-radius);
	color: #3a3a3a;
	font-size: .87rem;
}

/* Grabador de voz */

.cde-recorder {
	margin: 12px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--cde-secondary);
	border-radius: var(--cde-radius);
	background: color-mix(in srgb, var(--cde-secondary) 5%, #fff);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cde-recorder__status {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .95rem;
}

.cde-recorder__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--cde-secondary);
	flex: 0 0 auto;
	animation: cde-blink 1.1s ease-in-out infinite;
}

@keyframes cde-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: .25; }
}

.cde-app .cde-recorder__label { font-weight: 600; }

.cde-recorder__time {
	margin-left: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
}

.cde-recorder__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cde-app .cde-recorder__note {
	margin: 0;
	font-size: .82rem;
	color: var(--cde-muted) !important;
}

.cde-filelist__row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.cde-filelist li { flex-direction: column; align-items: stretch; }

.cde-filelist__audio {
	width: 100%;
	margin-top: 8px;
	height: 40px;
}

.cde-counter {
	margin: 6px 0 0;
	text-align: right;
	font-size: .78rem;
	color: var(--cde-muted);
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------- */
/* Editor de la descripción a pantalla completa                           */
/* --------------------------------------------------------------------- */

.cde-app.is-expanded .cde-field--textarea {
	position: fixed;
	inset: 0;
	z-index: 99999;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #fff;
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

/* Barra superior del editor: etiqueta a la izquierda, acciones a la derecha. */
.cde-app.is-expanded .cde-field--textarea .cde-field__row {
	flex: 0 0 auto;
	align-items: center;
	gap: 16px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--cde-line);
	background: #fff;
}

.cde-app.is-expanded .cde-field--textarea .cde-field__label {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
}

.cde-app.is-expanded .cde-hint--box {
	flex: 0 0 auto;
	margin: 12px 16px 0;
}

.cde-app.is-expanded .cde-field--textarea textarea {
	flex: 1 1 auto;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	min-height: 0;
	height: auto;
	padding: 20px 18px 24px;
	border: 0;
	border-radius: 0;
	font-size: 1.05rem;
	line-height: 1.7;
	resize: none;
}

.cde-app.is-expanded .cde-field--textarea textarea:focus {
	box-shadow: none;
	border-color: transparent;
}

/*
 * El anillo de foco se dibuja hacia dentro: de lo contrario asoma como una
 * línea suelta bajo la barra del editor, al recortarlo el contenedor.
 */
.cde-app.is-expanded .cde-field--textarea textarea:focus-visible {
	outline: 2px solid var(--cde-focus);
	outline-offset: -3px;
}

.cde-app.is-expanded .cde-counter,
.cde-app.is-expanded .cde-field--textarea .cde-error {
	flex: 0 0 auto;
	margin: 0;
	padding: 12px 16px;
	border-top: 1px solid var(--cde-line);
	background: var(--cde-bg-soft);
}

@media (min-width: 700px) {
	.cde-app.is-expanded .cde-field--textarea .cde-field__row { padding: 14px 24px; }
	.cde-app.is-expanded .cde-field--textarea textarea { padding: 28px 24px 32px; }
	.cde-app.is-expanded .cde-counter { padding: 12px 24px; }
}

/* En móvil la barra apila etiqueta y acciones para no comprimir los botones. */
@media (max-width: 559px) {
	.cde-field__row {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	/*
	 * También dentro del editor a pantalla completa: en 375 px la etiqueta más
	 * las tres píldoras no caben en una línea y «Reducir» quedaba cortado.
	 */
	.cde-app.is-expanded .cde-field--textarea .cde-field__row {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 10px 14px;
	}

	.cde-tools {
		justify-content: flex-end;
		gap: 8px;
	}

	.cde-app .cde-pillbtn {
		flex: 1 1 auto;
		justify-content: center;
		padding: 8px 10px;
	}

	.cde-app.is-expanded .cde-field--textarea .cde-field__label { font-size: 1rem; }
	.cde-app.is-expanded .cde-field--textarea textarea { padding: 16px 14px 20px; }
	.cde-app.is-expanded .cde-counter { padding: 10px 14px; }
}

/* Adjuntos */

.cde-file-input {
	position: absolute !important;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

.cde-dropzone {
	border: 1.5px dashed #c9c9c9;
	border-radius: var(--cde-radius);
	padding: 22px 16px;
	text-align: center;
	color: var(--cde-muted);
	cursor: pointer;
	background: var(--cde-bg-soft);
	transition: border-color .15s ease, background .15s ease;
}

.cde-dropzone p { margin: 0; font-size: .92rem; }
.cde-dropzone strong { color: var(--cde-text); }
.cde-dropzone__meta { margin-top: 6px !important; font-size: .8rem !important; }

.cde-dropzone:hover,
.cde-dropzone:focus-visible,
.cde-dropzone.is-over {
	border-color: var(--cde-primary);
	background: color-mix(in srgb, var(--cde-primary) 6%, #fff);
	outline: none;
}

.cde-filelist {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cde-filelist li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--cde-line);
	border-radius: var(--cde-radius);
	font-size: .88rem;
	background: #fff;
}

.cde-filelist__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cde-filelist__size { flex: 0 0 auto; color: var(--cde-muted); font-size: .8rem; }

.cde-filelist__remove {
	flex: 0 0 auto;
	border: 0;
	background: none;
	color: var(--cde-error);
	font-size: .82rem;
	cursor: pointer;
	min-height: 40px;
	padding: 0 6px;
}

/* Acciones */

.cde-actions {
	display: flex;
	flex-direction: column-reverse;
	gap: 10px;
	margin-top: 18px;
}

@media (min-width: 560px) {
	.cde-actions {
		flex-direction: row;
		justify-content: flex-end;
		gap: 12px;
	}
}

.cde-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 12px 30px;
	border-radius: var(--cde-radius);
	border: 1px solid var(--cde-header);
	background: #fff;
	color: var(--cde-header);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, opacity .15s ease;
	width: 100%;
}

@media (min-width: 560px) {
	.cde-btn { width: auto; min-width: 130px; }
}

.cde-btn--primary {
	background: var(--cde-header);
	color: var(--cde-header-text);
}

.cde-btn--primary:hover { opacity: .88; color: var(--cde-header-text); }
.cde-btn--ghost:hover { background: var(--cde-bg-soft); }
.cde-btn--block { width: 100%; }

.cde-btn:focus-visible {
	outline: 2px solid var(--cde-focus);
	outline-offset: 2px;
}

.cde-btn[disabled] { opacity: .6; cursor: progress; }

.cde-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: cde-spin .7s linear infinite;
}

.cde-btn.is-loading .cde-spinner { display: inline-block; }

@keyframes cde-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.cde-app *,
	.cde-app *::before,
	.cde-app *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* Mensajes de formulario */

.cde-formmsg {
	margin: 14px 0 0;
	padding: 14px 16px;
	border-radius: var(--cde-radius);
	font-size: .93rem;
	border-left: 4px solid var(--cde-error);
	background: #fdf1f2;
	color: #7a0d1c;
}

.cde-formmsg.is-success {
	border-left-color: var(--cde-success);
	background: #f0f8f2;
	color: #14572c;
}

/* Éxito */

.cde-success {
	border: 1px solid var(--cde-line);
	border-top: 4px solid var(--cde-success);
	border-radius: var(--cde-radius);
	padding: 28px 20px;
	text-align: center;
	background: #fff;
}

.cde-success__icon { color: var(--cde-success); }

.cde-success h2 {
	font-size: 1.35rem;
	margin: 10px 0 12px;
	font-weight: 600;
}

.cde-success > p { color: #444; font-size: .95rem; max-width: 60ch; margin: 0 auto 20px; }

.cde-creds {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	max-width: 520px;
	margin: 0 auto 22px;
}

@media (min-width: 560px) {
	.cde-creds { grid-template-columns: repeat(2, 1fr); }
}

.cde-cred {
	border: 1px dashed var(--cde-primary);
	border-radius: var(--cde-radius);
	padding: 14px;
	background: color-mix(in srgb, var(--cde-primary) 6%, #fff);
}

.cde-cred__label {
	display: block;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--cde-muted);
	margin-bottom: 6px;
}

.cde-cred__value {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.15rem;
	letter-spacing: .08em;
	overflow-wrap: break-word;
}

.cde-success__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 18px;
}

.cde-success__legal {
	font-size: .84rem;
	color: var(--cde-muted);
	max-width: 62ch;
	margin: 0 auto;
}

/* --------------------------------------------------------------------- */
/* Seguimiento                                                            */
/* --------------------------------------------------------------------- */

.cde-summary {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	padding: 4px 0;
}

@media (min-width: 640px) {
	.cde-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cde-summary > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--cde-line-soft);
}

.cde-summary dt { font-size: .8rem; color: var(--cde-muted); text-transform: uppercase; letter-spacing: .04em; }
.cde-summary dd { margin: 0; font-size: .98rem; }

.cde-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: .85rem;
	background: #eee;
	color: #333;
}

.cde-badge--received { background: #fff3e0; color: #9a5b00; }
.cde-badge--acknowledged,
.cde-badge--admitted { background: #e8f1fd; color: #14488f; }
.cde-badge--investigating,
.cde-badge--info_required { background: #f3ecfb; color: #5a2d92; }
.cde-badge--resolved { background: #e9f7ee; color: #14572c; }
.cde-badge--inadmissible,
.cde-badge--archived { background: #f0f0f0; color: #555; }

.cde-thread {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px;
}

.cde-msg {
	border: 1px solid var(--cde-line);
	border-radius: var(--cde-radius);
	padding: 14px 16px;
	background: #fff;
}

.cde-msg--manager { background: var(--cde-bg-soft); border-left: 3px solid var(--cde-primary); }
.cde-msg--reporter { border-left: 3px solid var(--cde-line); }

.cde-msg header {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 8px;
	font-size: .85rem;
	color: var(--cde-muted);
}

.cde-msg__body { font-size: .95rem; }
.cde-msg__body p { margin: 0 0 .7em; }
.cde-msg__body p:last-child { margin-bottom: 0; }

.cde-reply { padding: 0 16px 18px; }
.cde-reply .cde-field__label { margin-bottom: 8px; }

.cde-track__panel { margin-top: 4px; }