/* ValidaFirma: solo lo que el administrador de WordPress no trae. */
.validafirma-tarjeta {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 2px;
	margin: 16px 0;
	max-width: 960px;
	padding: 4px 20px 16px;
}

.validafirma-estado-bloque {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 40px;
	padding-top: 16px;
}

.validafirma-estado-bloque > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.validafirma-rotulo {
	color: #646970;
	font-size: 12px;
	text-transform: uppercase;
}

.validafirma-insignia {
	border-radius: 3px;
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	padding: 2px 8px;
}

.validafirma-insignia-prueba {
	background: #fcf9e8;
	border: 1px solid #dba617;
	color: #614200;
}

.validafirma-insignia-produccion {
	background: #edfaef;
	border: 1px solid #00a32a;
	color: #006a1f;
}

.validafirma-estado {
	font-weight: 600;
}

.validafirma-estado-firmado { color: #006a1f; }
.validafirma-estado-pendiente,
.validafirma-estado-enviando { color: #614200; }
.validafirma-estado-rechazado,
.validafirma-estado-cancelado,
.validafirma-estado-vencido,
.validafirma-estado-no_emitido,
.validafirma-estado-sin_enviar { color: #8a2424; }

.validafirma-en-linea {
	display: inline-block;
	margin: 0 4px 0 0;
}

.validafirma-aparte {
	margin-top: 16px;
}

.validafirma-acciones {
	margin: 12px 0;
}

.validafirma-tabla-corta {
	max-width: 640px;
}

.validafirma-firmante {
	border-bottom: 1px solid #dcdcde;
	margin-bottom: 8px;
	padding-bottom: 4px;
}

.validafirma-firmante label {
	display: inline-block;
	margin: 0 12px 8px 0;
	vertical-align: top;
}

.validafirma-firmante label > span {
	color: #646970;
	display: block;
	font-size: 12px;
}

.validafirma-firmante input[type="text"],
.validafirma-firmante input[type="email"],
.validafirma-firmante input[type="tel"] {
	min-width: 180px;
}

.validafirma-firmante .validafirma-quitar {
	margin-top: 22px;
}

[hidden] {
	display: none !important;
}

@media screen and (max-width: 782px) {
	.validafirma-firmante input[type="text"],
	.validafirma-firmante input[type="email"],
	.validafirma-firmante input[type="tel"] {
		min-width: 0;
		width: 100%;
	}

	.validafirma-firmante label {
		display: block;
		margin-right: 0;
	}
}

.validafirma-mensaje-texto {
	display: block;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.validafirma-tarjeta .widefat td {
	overflow-wrap: anywhere;
}

/* Los campos de ancho fijo de WordPress (regular-text) no se salen de la pantalla en un teléfono. Un fieldset crece por
   defecto hasta el ancho mínimo de su contenido: sin min-width 0, su campo se sale igual. */
.validafirma-wrap input.regular-text {
	max-width: 100%;
	box-sizing: border-box;
}

.validafirma-wrap fieldset {
	min-width: 0;
}

/* Marca (identidad.md, «Panel del emisor»): la horizontal discreta arriba del título y, en la pantalla de conectar, el
   sello. El oro de marca va en un solo botón de la pantalla. Valores de tokens.css del paquete de marca. */
.validafirma-marca {
	margin: 16px 0 0;
}

.validafirma-marca img {
	display: block;
	height: 30px;
	max-width: 100%;
	width: auto;
}

.validafirma-conectar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 24px 32px;
	padding: 24px;
}

.validafirma-conectar .validafirma-sello {
	flex: 0 0 auto;
	height: 128px;
	width: 128px;
}

.validafirma-conectar-texto {
	flex: 1 1 320px;
	min-width: 0;
}

.validafirma-conectar-texto h2 {
	margin-top: 0;
}

.wp-core-ui .validafirma-wrap .button-primary.validafirma-boton-oro {
	background: #8f6515;
	border-color: #8f6515;
	box-shadow: none;
	color: #fff;
	text-shadow: none;
}

.wp-core-ui .validafirma-wrap .button-primary.validafirma-boton-oro:hover,
.wp-core-ui .validafirma-wrap .button-primary.validafirma-boton-oro:active {
	background: #755312;
	border-color: #755312;
	color: #fff;
}

/* Foco de doble anillo: blanco adentro, marino afuera. Nunca el oro como anillo. */
.wp-core-ui .validafirma-wrap .button-primary.validafirma-boton-oro:focus {
	background: #8f6515;
	border-color: #8f6515;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #082454;
	color: #fff;
	outline: 2px solid transparent;
	outline-offset: 0;
}