/*
 * DoliBrain Creative — interfaz del asistente
 *
 * Piel metal, calcada de la maqueta de dolibrain.com (la ventana ".erp" de
 * dolibrain-web/pagina.html). La web y el modulo tienen que verse igual: quien
 * ve la demostracion y despues abre su ERP tiene que reconocer lo que ha visto.
 *
 * Antes esta hoja tenia tres capas apiladas: la base azul, una piel metal y un
 * acabado de vidrio anadido al final. La cascada hacia ganar al vidrio, asi que
 * el chat no se parecia a la maqueta aunque la piel metal siguiera ahi debajo.
 * Ahora hay una sola capa, con los valores de la maqueta.
 *
 * Todo va bajo el prefijo .dbc- porque esta hoja se carga en todas las
 * pantallas de Dolibarr: no puede filtrar estilos al resto del ERP.
 *
 * Tipografias alojadas en el propio modulo, igual que en la web: sin llamadas a
 * servidores de terceros (RGPD). Solo se descargan en las pantallas que las
 * usan, aunque la declaracion este en todas.
 */

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
}

@font-face {
	font-family: "Martian Mono";
	font-style: normal;
	font-weight: 300 700;
	font-stretch: 75% 112.5%;
	font-display: swap;
	src: url("../fonts/martian-mono-latin.woff2") format("woff2");
}

/* ---------- Ventana ---------- */

.dbc-shell {
	--dbc-tinta: #F2F5F9;
	--dbc-tinta-2: #A9B4C4;
	--dbc-tinta-3: #7E8A9B;
	--dbc-naranja: #FF6A02;
	--dbc-naranja-1: #FF7B1C;
	--dbc-naranja-2: #E85D00;
	--dbc-naranja-tinta: #1A1206;
	--dbc-exito: #3FD48A;
	--dbc-error: #FF6B7A;
	--dbc-canto: rgba(210, 222, 238, 0.13);
	--dbc-f-texto: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--dbc-f-placa: "Martian Mono", ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

	position: relative;
	display: flex;
	flex-direction: column;
	height: clamp(460px, calc(100vh - 230px), 820px);
	overflow: hidden;
	border-radius: 16px;
	background:
		linear-gradient(115deg, rgba(255, 255, 255, 0.045) 0%, transparent 22%, transparent 78%, rgba(255, 255, 255, 0.03) 100%),
		repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.014) 0 2px, transparent 2px 5px),
		linear-gradient(160deg, #232830 0%, #191D24 55%, #14171C 100%);
	border: 1px solid var(--dbc-canto);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.07),
		inset 0 -1px 0 rgba(0, 0, 0, 0.5),
		0 26px 64px rgba(0, 0, 0, 0.45);
	color: var(--dbc-tinta);
	font-family: var(--dbc-f-texto);
	font-size: 1.0625rem;
	line-height: 1.6;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.dbc-shell,
.dbc-shell *,
.dbc-shell *::before,
.dbc-shell *::after {
	box-sizing: border-box;
}

.dbc-shell p {
	margin: 0;
}

.dbc-shell button,
.dbc-shell textarea {
	font: inherit;
	color: inherit;
}

/* El widget flotante ocupa todo su iframe. */
.dbc-shell--embedded {
	height: 100vh;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* ---------- Barra ---------- */

.dbc-bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.65rem 1rem;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 60%),
		linear-gradient(180deg, #2A303A, #1E232B);
	border-bottom: 1px solid rgba(210, 222, 238, 0.16);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dbc-bar__lights {
	display: flex;
	gap: 0.35rem;
}

.dbc-bar__lights i {
	display: block;
	width: 0.62rem;
	height: 0.62rem;
	border-radius: 50%;
	background: #3A3F47;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.55);
}

.dbc-bar__name {
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--dbc-tinta);
}

.dbc-bar__name b {
	font-weight: 700;
	color: var(--dbc-naranja);
}

.dbc-bar__by {
	margin-left: auto;
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.4);
	white-space: nowrap;
}

/* ---------- Cuerpo: robot + hilo ---------- */

.dbc-body {
	flex: 1;
	display: flex;
	min-height: 0;
}

/* ---------- Robot ----------
 * Columna propia a la izquierda del hilo, fuera de la zona con scroll para que
 * no se vaya al desplazar. Las poses van apiladas y precargadas: cambiar el src
 * en caliente provoca un parpadeo la primera vez que se pide cada imagen.
 *
 * Si faltan los archivos, el PHP no pinta esta columna y el chat funciona igual.
 */

.dbc-stage {
	flex: 0 0 164px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 1rem 0.35rem 0.4rem;
	border-right: 1px solid rgba(210, 222, 238, 0.12);
	background: linear-gradient(180deg, transparent, rgba(255, 106, 2, 0.07));
}

.dbc-stage__figure {
	position: relative;
	width: 100%;
	max-width: 150px;
	/* La proporcion real la inyecta el PHP leyendola del archivo. Este valor solo
	   actua si el robot esta instalado como imagen fija sin tira. */
	aspect-ratio: 288 / 412;
	filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5));
}

.dbc-pose {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.28s ease;
	pointer-events: none;
	user-select: none;
}

.dbc-single {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom center;
}

/* Tira de fotogramas: la ventana recorta y la tira se desplaza a saltos.
   translateX(-100%) equivale al ancho completo de la tira, asi que con steps(n)
   cada salto avanza exactamente un fotograma. El ancho de la tira y el numero de
   pasos los inyecta el PHP, porque cambian por instalacion. */
.dbc-film {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.dbc-strip {
	display: block;
	height: 100%;
	max-width: none;
	object-fit: fill;
	transform: translateX(0);
}

.dbc-stage[data-state="greet"] .dbc-pose--greet,
.dbc-stage[data-state="idle"] .dbc-pose--idle,
.dbc-stage[data-state="think"] .dbc-pose--think,
.dbc-stage[data-state="wow"] .dbc-pose--wow {
	opacity: 1;
}

/* Capa de luces: solo los puntos naranjas, en modo screen. Latir su opacidad da
   sensacion de maquina en marcha sin dibujar fotogramas. */
.dbc-glow {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: bottom center;
	mix-blend-mode: screen;
	opacity: 0.35;
	pointer-events: none;
}

.dbc-stage[data-state="idle"] .dbc-pose--idle {
	animation: dbc-respirar 5.2s ease-in-out infinite;
	transform-origin: 50% 100%;
}

.dbc-stage[data-state="idle"] .dbc-pose--idle .dbc-glow {
	animation: dbc-latir 4.4s ease-in-out infinite;
}

.dbc-stage[data-state="greet"] .dbc-pose--greet {
	animation: dbc-hola 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both, dbc-respirar 4.6s ease-in-out 0.5s infinite;
	transform-origin: 50% 100%;
}

.dbc-stage[data-state="greet"] .dbc-pose--greet .dbc-glow {
	animation: dbc-latir 3.8s ease-in-out infinite;
}

.dbc-stage[data-state="think"] .dbc-pose--think {
	animation: dbc-cavilar 3.4s ease-in-out infinite;
	transform-origin: 50% 95%;
}

.dbc-stage[data-state="think"] .dbc-pose--think .dbc-glow {
	animation: dbc-latir 1.05s ease-in-out infinite;
}

.dbc-stage[data-state="wow"] .dbc-pose--wow {
	animation: dbc-salto 0.34s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.dbc-stage[data-state="wow"] .dbc-pose--wow .dbc-glow {
	animation: dbc-destello 0.6s ease-out both;
}

@keyframes dbc-respirar {
	0%, 100% { transform: translateY(0) scale(1); }
	50% { transform: translateY(-5px) scale(1.006); }
}

@keyframes dbc-cavilar {
	0%, 100% { transform: rotate(-1.1deg) translateY(0); }
	50% { transform: rotate(1.1deg) translateY(-3px); }
}

@keyframes dbc-hola {
	0% { transform: translateY(14px) scale(0.97); }
	60% { transform: translateY(-4px) scale(1.02); }
	100% { transform: none; }
}

@keyframes dbc-salto {
	0% { transform: scale(0.94) translateY(8px); }
	60% { transform: scale(1.04) translateY(-2px); }
	100% { transform: none; }
}

@keyframes dbc-latir {
	0%, 100% { opacity: 0.22; filter: brightness(1); }
	50% { opacity: 0.85; filter: brightness(1.45); }
}

@keyframes dbc-destello {
	0% { opacity: 1; filter: brightness(2.1); }
	100% { opacity: 0.35; filter: brightness(1); }
}

/* ---------- Hilo ---------- */

.dbc-log {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 1.1rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(210, 222, 238, 0.26) transparent;
}

/* Sin esto, una tarjeta larga se encoge en vez de hacer scroll: un elemento
   flexible con overflow oculto puede quedarse por debajo de su contenido. */
.dbc-log > * {
	flex-shrink: 0;
}

.dbc-log::-webkit-scrollbar {
	width: 8px;
}

.dbc-log::-webkit-scrollbar-thumb {
	background: rgba(210, 222, 238, 0.26);
	border-radius: 4px;
}

.dbc-msg {
	max-width: 88%;
	padding: 0.6rem 0.85rem;
	border-radius: 14px;
	font-size: 0.94rem;
	line-height: 1.45;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.dbc-msg--user {
	align-self: flex-end;
	border-bottom-right-radius: 4px;
	background: linear-gradient(180deg, #FF7B1C, #E85D00);
	border: 1px solid rgba(255, 160, 90, 0.5);
	color: #1A1206;
	font-weight: 500;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.dbc-msg--agent {
	align-self: flex-start;
	border-bottom-left-radius: 4px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 42%),
		linear-gradient(180deg, #2B313B, #232830);
	border: 1px solid rgba(210, 222, 238, 0.15);
	color: var(--dbc-tinta);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.dbc-msg--error {
	align-self: flex-start;
	border-bottom-left-radius: 4px;
	background: rgba(255, 107, 122, 0.08);
	border: 1px solid rgba(255, 107, 122, 0.4);
	color: #FFC2C8;
}

.dbc-enter {
	animation: dbc-subir 0.22s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes dbc-subir {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* ---------- Pildoras: herramienta en marcha y "pensando" ---------- */

.dbc-pill,
.dbc-think {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
	font-family: var(--dbc-f-placa);
	font-size: 0.66rem;
	line-height: 1.6;
	color: var(--dbc-tinta-2);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 55%),
		linear-gradient(180deg, #2A303A, #21262D);
	border: 1px solid rgba(210, 222, 238, 0.17);
}

.dbc-pill i,
.dbc-think__pulse {
	flex: none;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--dbc-exito);
}

/* Pensando: el mismo punto, latiendo en naranja. */
.dbc-think__pulse {
	background: var(--dbc-naranja);
	animation: dbc-pulso 1.15s ease-in-out infinite;
}

@keyframes dbc-pulso {
	0%, 100% { opacity: 0.3; transform: scale(0.75); }
	50% { opacity: 1; transform: scale(1); }
}

/* ---------- Enlaces a las fichas creadas ---------- */

.dbc-trail {
	align-self: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.dbc-trail a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.28rem 0.75rem;
	border-radius: 999px;
	font-size: 0.8rem;
	color: var(--dbc-tinta);
	text-decoration: none;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 55%),
		linear-gradient(180deg, #2A303A, #21262D);
	border: 1px solid rgba(210, 222, 238, 0.17);
	transition: border-color 0.15s ease, color 0.15s ease;
}

.dbc-trail a:hover {
	border-color: rgba(255, 106, 2, 0.55);
	color: #FFD6B4;
}

.dbc-trail svg {
	width: 0.9rem;
	height: 0.9rem;
}

/* ---------- Tarjeta de aprobacion ----------
 * El unico sitio donde el diseno levanta la voz: una accion que toca los datos
 * tiene que interrumpir de verdad, no parecerse a un mensaje mas.
 */

.dbc-gate {
	align-self: stretch;
	padding: 1rem 1.05rem 1.05rem;
	border-radius: 14px;
	border: 1px solid rgba(255, 106, 2, 0.38);
	background: linear-gradient(180deg, rgba(255, 106, 2, 0.07), rgba(255, 255, 255, 0.02));
	box-shadow: 0 0 0 4px rgba(255, 106, 2, 0.05);
	animation: dbc-tarjeta 0.3s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes dbc-tarjeta {
	from { opacity: 0; transform: translateY(10px) scale(0.985); }
	to { opacity: 1; transform: none; }
}

.dbc-gate__head {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.6;
	color: var(--dbc-naranja);
}

.dbc-gate__head i {
	flex: none;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--dbc-naranja);
	box-shadow: 0 0 10px rgba(255, 106, 2, 0.7);
}

/* Rechazar va arriba a la derecha, lejos del deslizador: pequeno, para que la
   tarjeta se lea igual que la de la maqueta, y apartado, para no darle sin
   querer al ir a aprobar. */
.dbc-gate__reject {
	margin-left: auto;
	padding: 0.1rem 0;
	border: 0;
	background: none;
	color: var(--dbc-tinta-3);
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.dbc-gate__reject:hover {
	color: var(--dbc-tinta);
}

.dbc-gate__what {
	margin-top: 0.45rem;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--dbc-tinta);
}

.dbc-gate__sub {
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--dbc-tinta-2);
}

.dbc-plan {
	margin: 0.75rem 0 0.9rem;
	border: 1px solid rgba(255, 106, 2, 0.28);
	border-radius: 10px;
	overflow: hidden;
}

.dbc-plan__row {
	display: grid;
	grid-template-columns: minmax(84px, 38%) minmax(0, 1fr);
	gap: 0.6rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.86rem;
	line-height: 1.6;
	border-bottom: 1px solid rgba(255, 106, 2, 0.14);
}

.dbc-plan__row:last-child {
	border-bottom: 0;
}

.dbc-plan__k {
	color: var(--dbc-tinta-2);
}

.dbc-plan__v {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.15rem 0.6rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.dbc-plan__old {
	color: var(--dbc-tinta-3);
	text-decoration: line-through;
}

.dbc-plan__new {
	color: var(--dbc-tinta);
	font-weight: 700;
}

.dbc-plan__warn {
	display: flex;
	gap: 0.5rem;
	padding: 0.55rem 0.75rem;
	font-size: 0.8rem;
	line-height: 1.5;
	color: #FFD3B0;
	background: rgba(255, 106, 2, 0.1);
	border-top: 1px solid rgba(255, 106, 2, 0.22);
}

.dbc-plan__warn svg {
	flex: none;
	width: 0.95rem;
	height: 0.95rem;
	margin-top: 0.15rem;
}

/* ---------- Deslizador: hay que recorrer el 92 % del carril ----------
 * Un boton se pulsa sin querer; un deslizamiento de extremo a extremo no. Para
 * una accion que toca los datos, ese gesto deliberado es justo lo que se busca.
 */

.dbc-slide {
	--dbc-tirador: 48px;
	position: relative;
	height: 56px;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 106, 2, 0.45);
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

.dbc-slide__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: calc(var(--dbc-tirador) + 8px);
	background: rgba(255, 106, 2, 0.28);
	transition: width 0.18s ease;
}

.dbc-slide__label {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding-left: calc(var(--dbc-tirador) + 4px);
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--dbc-naranja);
	white-space: nowrap;
	pointer-events: none;
}

.dbc-slide__knob {
	position: absolute;
	left: 4px;
	top: 50%;
	width: var(--dbc-tirador);
	height: var(--dbc-tirador);
	margin-top: calc(var(--dbc-tirador) / -2);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: linear-gradient(180deg, #FF8A33, #FF6A02);
	color: #2B1200;
	font-weight: 800;
	font-size: 1.15rem;
	line-height: 1;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 12px rgba(0, 0, 0, 0.4);
	cursor: grab;
	transition: left 0.18s ease, background 0.18s ease;
}

.dbc-slide__knob svg {
	width: 20px;
	height: 20px;
}

.dbc-slide--dragging .dbc-slide__knob,
.dbc-slide--dragging .dbc-slide__fill {
	transition: none;
}

.dbc-slide--dragging .dbc-slide__knob {
	cursor: grabbing;
}

.dbc-slide--done {
	border-color: rgba(63, 212, 138, 0.45);
}

.dbc-slide--done .dbc-slide__knob {
	background: linear-gradient(180deg, #5BE3A0, #2FBF71);
	color: #06301A;
}

.dbc-slide--done .dbc-slide__fill {
	background: rgba(63, 212, 138, 0.28);
}

.dbc-slide--done .dbc-slide__label {
	color: #8FE3B4;
}

.dbc-slide:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.dbc-slide__hint {
	margin-top: 0.55rem;
	font-size: 0.74rem;
	line-height: 1.6;
	color: var(--dbc-tinta-3);
	text-align: center;
}

/* ---------- Zona de escritura ---------- */

.dbc-compose {
	flex: 0 0 auto;
	padding: 0.7rem 1rem;
	border-top: 1px solid rgba(210, 222, 238, 0.16);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 50%),
		linear-gradient(180deg, #232830, #1A1E25);
}

.dbc-files {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.dbc-files:not(:empty) {
	margin-bottom: 0.6rem;
}

.dbc-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.5rem 0.3rem 0.7rem;
	border-radius: 8px;
	font-size: 0.78rem;
	color: var(--dbc-tinta);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 55%),
		linear-gradient(180deg, #2A303A, #21262D);
	border: 1px solid rgba(210, 222, 238, 0.17);
	animation: dbc-subir 0.18s ease both;
}

.dbc-chip button {
	padding: 0 2px;
	border: 0;
	background: transparent;
	color: var(--dbc-tinta-2);
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
}

.dbc-chip button:hover {
	color: var(--dbc-error);
}

.dbc-compose__row {
	display: flex;
	align-items: flex-end;
	gap: 0.55rem;
}

.dbc-icon-btn {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	margin: 0;
	padding: 0;
	border-radius: 10px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 55%),
		linear-gradient(180deg, #2A303A, #21262D);
	border: 1px solid rgba(210, 222, 238, 0.17);
	color: var(--dbc-tinta);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.dbc-icon-btn:hover {
	border-color: rgba(255, 106, 2, 0.55);
	color: #FFD6B4;
}

.dbc-icon-btn svg {
	width: 1.15rem;
	height: 1.15rem;
}

/* Grabando: rojo y latido, para que nadie deje el microfono abierto sin querer. */
.dbc-icon-btn.dbc-tool--recording {
	color: #fff;
	background: var(--dbc-error);
	border-color: var(--dbc-error);
	animation: dbc-grabando 1.3s ease-in-out infinite;
}

@keyframes dbc-grabando {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 122, 0.5); }
	60% { box-shadow: 0 0 0 7px rgba(255, 107, 122, 0); }
}

/* Dictado no disponible en este navegador: el boton sigue visible y explica el
   motivo al pulsarlo, en vez de desaparecer sin dar ninguna pista. */
.dbc-tool--muted {
	opacity: 0.5;
}

.dbc-field {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	min-height: 2.6rem;
	padding: 0 0.85rem;
	border-radius: 10px;
	background: linear-gradient(180deg, #171B21, #1E232A);
	border: 1px solid rgba(210, 222, 238, 0.18);
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
	transition: border-color 0.15s ease;
}

.dbc-field:focus-within {
	border-color: rgba(255, 106, 2, 0.55);
}

.dbc-shell .dbc-field textarea {
	flex: 1;
	display: block;
	width: 100%;
	min-height: 1.4rem;
	max-height: 160px;
	margin: 0;
	padding: 0.6rem 0;
	border: 0;
	border-radius: 0;
	outline: none;
	resize: none;
	overflow-y: hidden;
	background: transparent;
	box-shadow: none;
	color: var(--dbc-tinta);
	font-size: 0.88rem;
	line-height: 1.45;
}

/* El texto de ejemplo en una sola linea: partido en dos, en el panel flotante
   estrecho, hacia crecer el campo y le sacaba una barra estando vacio. */
.dbc-shell .dbc-field textarea::placeholder {
	color: #7E8A9B;
	opacity: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* La accion principal en naranja. Con el campo vacio escanea un documento, que
   es lo que mas se usa; en cuanto hay algo escrito o adjunto, envia. */
.dbc-primary {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.6rem;
	padding: 0 0.95rem;
	border-radius: 10px;
	background: linear-gradient(180deg, #FF7B1C, #E85D00);
	border: 1px solid rgba(255, 170, 100, 0.55);
	color: #1A1206;
	font-weight: 700;
	font-size: 0.86rem;
	line-height: 1.1;
	white-space: nowrap;
	cursor: pointer;
	transition: filter 0.15s ease, opacity 0.15s ease;
}

.dbc-primary:hover:not(:disabled) {
	filter: brightness(1.08);
}

.dbc-primary:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ---------- Superposicion al arrastrar un archivo ---------- */

.dbc-drop {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: rgba(20, 23, 28, 0.94);
	color: var(--dbc-tinta);
	pointer-events: none;
}

.dbc-shell--dragging .dbc-drop {
	display: flex;
	animation: dbc-aparecer 0.14s ease both;
}

@keyframes dbc-aparecer {
	from { opacity: 0; }
	to { opacity: 1; }
}

.dbc-drop__ring {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	border-radius: 22px;
	border: 2px dashed var(--dbc-naranja);
	color: var(--dbc-naranja);
}

.dbc-drop__ring svg {
	width: 30px;
	height: 30px;
}

.dbc-drop__label {
	font-size: 0.92rem;
}

.dbc-drop__types {
	font-size: 0.78rem;
	color: var(--dbc-tinta-2);
}

/* ---------- Pantalla vacia: una invitacion, no un cartel ---------- */

.dbc-empty {
	align-self: center;
	width: 100%;
	max-width: 460px;
	margin: 5vh auto 0;
	text-align: center;
	color: var(--dbc-tinta-2);
}

.dbc-shell .dbc-empty h2 {
	margin: 0 0 0.4rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--dbc-tinta);
}

.dbc-empty p {
	margin: 0 0 1.1rem;
	font-size: 0.88rem;
}

.dbc-seeds {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.dbc-seed {
	padding: 0.6rem 0.9rem;
	border-radius: 10px;
	font-size: 0.86rem;
	text-align: left;
	color: var(--dbc-tinta);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 55%),
		linear-gradient(180deg, #2A303A, #21262D);
	border: 1px solid rgba(210, 222, 238, 0.17);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.dbc-seed:hover {
	border-color: rgba(255, 106, 2, 0.55);
	color: #FFD6B4;
}

/* ---------- Aviso de configuracion pendiente ---------- */

.dbc-notice {
	padding: 0.7rem 0.9rem;
	border: 1px solid rgba(255, 106, 2, 0.45);
	border-radius: 10px;
	background: rgba(255, 106, 2, 0.08);
	color: #FFD3B0;
	font-size: 0.84rem;
}

.dbc-notice a {
	color: var(--dbc-naranja);
}

/* ---------- Titulo sobre la ficha ---------- */

.dbc-title {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 4px 0 14px;
	font-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.dbc-title__main {
	font-size: 2.05rem;
	font-weight: 700;
	letter-spacing: -0.6px;
	line-height: 1.1;
	background: linear-gradient(180deg, #FFFFFF, #B8C2D0);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.dbc-title__accent {
	color: #FF6A02;
	-webkit-text-fill-color: #FF6A02;
}

.dbc-title__sub {
	font-size: 0.86rem;
	color: #8A96A8;
}

/* ---------- Accesibilidad ---------- */

.dbc-shell :focus-visible {
	outline: 2px solid var(--dbc-naranja);
	outline-offset: 3px;
}

/* Texto solo para lectores de pantalla: los botones de icono siguen diciendo
   lo que hacen aunque no se vea. */
.dbc-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Pantallas pequenas y panel flotante ---------- */

.dbc-shell--embedded .dbc-stage {
	display: none;
}

@media (max-width: 640px) {
	.dbc-stage,
	.dbc-bar__by {
		display: none;
	}

	.dbc-shell {
		height: calc(100vh - 190px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dbc-shell *,
	.dbc-shell *::before,
	.dbc-shell *::after {
		animation: none !important;
		transition: none !important;
	}
}