.rau-ot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
	margin: 20px 0;
}
.rau-ot-card {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	padding: 18px 20px;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.rau-ot-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}
.rau-ot-fecha { color: #777; font-size: .9em; }
.rau-ot-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: .78em;
	font-weight: 600;
	background: #eee;
	color: #444;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.rau-ot-badge-pendiente { background: #fdecea; color: #b3261e; }
.rau-ot-badge-en-curso { background: #fff4e0; color: #9a6700; }
.rau-ot-badge-completada { background: #e6f4ea; color: #1e7e34; }
.rau-ot-desc { margin: 8px 0; color: #333; }
.rau-ot-meta { list-style: none; margin: 10px 0 0; padding: 0; font-size: .92em; }
.rau-ot-meta li { margin-bottom: 4px; color: #444; }
.rau-ot-empty { color: #777; font-style: italic; }

.rau-ot-form {
	max-width: 560px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 20px 0;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	padding: 24px;
}
.rau-ot-form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-weight: 600;
	color: #333;
	font-size: .95em;
}
.rau-ot-form input,
.rau-ot-form select,
.rau-ot-form textarea {
	font-weight: 400;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 1em;
	font-family: inherit;
	background: #fafafa;
}
.rau-ot-form select[multiple] { min-height: 130px; }
.rau-ot-form textarea { resize: vertical; }

.rau-ot-materiales-wrap { display: flex; flex-direction: column; gap: 10px; }
.rau-ot-material-fila {
	display: grid;
	grid-template-columns: 1fr 120px 32px;
	gap: 8px;
	align-items: center;
}
.rau-ot-material-fila select,
.rau-ot-material-fila input { margin: 0; }
.rau-ot-quitar-fila {
	background: #fdecea;
	color: #b3261e;
	border: none;
	border-radius: 6px;
	width: 32px;
	height: 38px;
	cursor: pointer;
	font-weight: 700;
}
.rau-ot-quitar-fila:hover { background: #f7cfcb; }
#rau-ot-anadir-fila {
	align-self: flex-start;
	background: none;
	border: 1px dashed #2b6cb0;
	color: #2b6cb0;
	border-radius: 6px;
	padding: 8px 14px;
	cursor: pointer;
	font-weight: 600;
}
#rau-ot-anadir-fila:hover { background: #eaf2fa; }
.rau-ot-form button {
	align-self: flex-start;
	padding: 12px 26px;
	background: #2b6cb0;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease;
}
.rau-ot-form button:hover { background: #1f4e80; }
.rau-ot-success {
	background: #e6f4ea; color: #1e7e34;
	border-radius: 6px; padding: 12px 16px; margin-bottom: 16px;
}
.rau-ot-error {
	background: #fdecea; color: #b3261e;
	border-radius: 6px; padding: 12px 16px; margin-bottom: 16px;
}

.rau-ot-resumen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 16px;
	margin: 20px 0;
}
.rau-ot-resumen-item {
	background: #f7f8fa;
	border-radius: 10px;
	padding: 16px 18px;
	text-align: center;
}
.rau-ot-resumen-item strong { display: block; font-size: 1.5em; color: #2b6cb0; }
.rau-ot-resumen-item span { font-size: .85em; color: #666; }
.rau-ot-resumen-personas { margin-top: 8px; font-size: .8em; color: #555; }


/* ── Ficha individual de orden de trabajo ── */
.rau-ot-ficha {
	max-width: 1200px;
	margin: 20px 0;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	padding: 26px 28px;
}
.rau-ot-ficha-header {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: flex-start;
	gap: 20px;
	margin: -26px -28px 20px;
	padding: 26px 28px;
	border-radius: 12px 12px 0 0;
	background: linear-gradient(135deg, #2C5AA0 0%, #1e3a70 100%);
	color: #fff;
}

/* Datos de la empresa (columna izquierda) */
.rau-ot-ficha-header__empresa {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.rau-ot-ficha-header__logo {
	width: 100%;
	max-width: 150px;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
	background: #fff;
	padding: 5px;
	margin-bottom: 12px;
}
.rau-ot-ficha-header__empresa-nombre {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 6px;
	color: #fff;
	letter-spacing: .5px;
}
.rau-ot-ficha-header__empresa-datos {
	font-size: .72rem;
	margin: 0;
	opacity: .9;
	line-height: 1.4;
}

/* Título / fecha / estado (columna central) */
.rau-ot-ficha-header__info {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 150px;
}
.rau-ot-ficha-icon {
	font-size: 1.8rem;
	line-height: 1;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .2));
}
.rau-ot-ficha-titulo { margin: 0; font-size: 1.3em; color: #fff; }
.rau-ot-ficha-fecha { font-size: .85em; color: rgba(255, 255, 255, .75); }
.rau-ot-badge-lg { font-size: .85em; padding: 6px 14px; }

/* Datos del cliente (columna derecha) */
.rau-ot-ficha-header__cliente {
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.rau-ot-ficha-header__cliente-titulo {
	font-size: .78rem;
	font-weight: 700;
	margin: 0 0 10px;
	color: rgba(255, 255, 255, .85);
	text-transform: uppercase;
	letter-spacing: .5px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.rau-ot-ficha-header__cliente-editar {
	color: rgba(255, 255, 255, .85) !important;
	text-decoration: none !important;
	font-weight: 400;
}
.rau-ot-ficha-header__cliente-editar:hover { color: #fff !important; }
.rau-ot-ficha-header__cliente-datos {
	background: rgba(255, 255, 255, .1);
	padding: 12px 14px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, .2);
	backdrop-filter: blur(10px);
	width: 100%;
}
.rau-ot-ficha-header__cliente-nombre {
	font-size: .92rem;
	font-weight: 700;
	margin: 0 0 4px;
	color: #fff;
}
.rau-ot-ficha-header__cliente-linea {
	font-size: .74rem;
	margin: 2px 0;
	opacity: .9;
	line-height: 1.35;
}

.rau-ot-ficha-servicio { margin-bottom: 16px; font-size: .95em; }
.rau-ot-ficha-servicio a { color: #2b6cb0; font-weight: 600; text-decoration: none; }
.rau-ot-ficha-servicio a:hover { text-decoration: underline; }

.rau-ot-ficha-bloque { margin-bottom: 22px; }
.rau-ot-ficha-bloque h3 {
	margin: 0 0 10px;
	font-size: .9em;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #777;
}
.rau-ot-ficha-bloque p { margin: 0; color: #333; line-height: 1.5; }

.rau-ot-ficha-tiempo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.rau-ot-ficha-tiempo-estimado { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; font-size: .95em; color: #666; }
.rau-ot-ficha-tiempo-label { font-size: .78em; text-transform: uppercase; letter-spacing: .03em; color: #999; font-weight: 600; }
.rau-ot-ficha-tiempo-label-real { color: #2b6cb0; }
.rau-ot-ficha-tiempo-restante { color: #1e7e34; }
.rau-ot-tiempo-sobrepasado { color: #b3261e; }
.rau-ot-tiempo-sobrepasado .rau-ot-ficha-tiempo-label { color: #b3261e; }
.rau-ot-ficha-tiempo-valor { font-size: 1.6em; font-weight: 700; color: #2b6cb0; }
.rau-ot-ficha-tiempo-detalle { font-size: .82em; color: #777; }
.rau-ot-ficha-tiempo-live-dot {
	font-size: .78em;
	color: #1e7e34;
	font-weight: 600;
	animation: rau-ot-pulso 1.6s ease-in-out infinite;
}
@keyframes rau-ot-pulso {
	0%, 100% { opacity: 1; }
	50% { opacity: .4; }
}

.rau-ot-ficha-tabla { width: 100%; border-collapse: collapse; }
.rau-ot-ficha-tabla th {
	text-align: left; padding: 8px 10px; font-size: .78em; text-transform: uppercase;
	letter-spacing: .02em; color: #777; border-bottom: 2px solid #e5e5e5;
}
.rau-ot-ficha-tabla td { padding: 8px 10px; border-bottom: 1px solid #eee; font-size: .92em; }
.rau-ot-ficha-tabla tbody tr:last-child td { border-bottom: none; }

@media (max-width: 600px) {
	.rau-ot-ficha-header {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 18px;
		margin: -20px -18px 18px;
		padding: 22px 18px;
	}
	.rau-ot-ficha-header__empresa,
	.rau-ot-ficha-header__cliente { align-items: center; text-align: center; }
	.rau-ot-ficha-header__cliente-titulo { justify-content: center; }
	.rau-ot-ficha-header__logo { max-width: 110px; }
}

/* Aviso de material sin coincidencia en el formulario, y precarga desde servicio */
.rau-ot-hint {
	display: block;
	font-size: .78em;
	color: #2b6cb0;
	font-weight: 400;
	margin-top: 4px;
}
.rau-ot-sin-coincidencia {
	font-size: .8em;
	color: #9a6700;
	background: #fff8ea;
	border-left: 3px solid #f0b429;
	padding: 8px 10px;
	margin: 0 0 8px;
	border-radius: 0 6px 6px 0;
}

/* ── Control de tiempo (Iniciar/Pausar/Reanudar/Finalizar) ──────────
   Fila propia, botones grandes y visuales, tanto en la ficha individual
   como en las cards del listado. ── */
.rau-ot-tiempo-controles {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid #eee;
	width: 100%;
}
.rau-ot-btn-tiempo {
	flex: 1;
	min-width: 140px;
	border: none;
	border-radius: 10px;
	padding: 16px 20px;
	font-size: 1.05em;
	font-weight: 700;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, opacity .15s ease;
	box-shadow: 0 2px 4px rgba(0,0,0,.06);
}
.rau-ot-btn-tiempo:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.rau-ot-btn-tiempo:active { transform: translateY(0); }
.rau-ot-btn-tiempo:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }

.rau-ot-btn-iniciar { background: linear-gradient(135deg, #2e9e5b, #1e7e34); color: #fff; }
.rau-ot-btn-iniciar:hover { background: linear-gradient(135deg, #279653, #1a6e2d); }

.rau-ot-btn-pausar { background: linear-gradient(135deg, #f0a93a, #c78a1e); color: #fff; }
.rau-ot-btn-pausar:hover { background: linear-gradient(135deg, #e29c2f, #b37c17); }

.rau-ot-btn-finalizar { background: linear-gradient(135deg, #e15a4f, #b3261e); color: #fff; }
.rau-ot-btn-finalizar:hover { background: linear-gradient(135deg, #d34e43, #a02019); }

.rau-ot-completada-msg {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 1em;
	font-weight: 700;
	color: #1e7e34;
	background: #e6f4ea;
	border-radius: 10px;
	padding: 14px 20px;
	margin-top: 18px;
}

@media (max-width: 480px) {
	.rau-ot-btn-tiempo { min-width: 100%; }
}