/* Portal de clientes — Vela Producciones
   Diseño con profundidad (sombras en dos capas + elevación al pasar el ratón),
   que es la preferencia de Carla recogida en webdev/02-diseno-moderno.md §5.
   Todo el color de acento sale de --vela-color, que pone el color de marca del
   cliente desde el propio shortcode. */

/* ── TANDA 1 · tokens del sistema de diseño (rediseño, 9-oct-2026) ──────────
   Un solo acento (el del sitio), cuatro estados compartidos y cinco pasos
   tipográficos. Todo el color y el tamaño del portal salen de aquí.
   REVERTIR: volver a --vela-color:#1d4ed8 y a los tamaños sueltos (ver diff). */
.vela-portal {
	--vela-color: #6254E7;          /* acento primario = marca del sitio */
	--vela-acento-2: #FF7426;       /* acento secundario: aviso / pedir cambios */
	--vela-tinta: #111827;
	--vela-gris: #4B5563;
	--vela-borde: #E4E4EF;
	--vela-fondo: #F7F7FB;
	--vela-radio: 14px;
	/* escala tipográfica — 5 pasos */
	--vela-t1: 12px;
	--vela-t2: 14px;
	--vela-t3: 16px;
	--vela-t4: 20px;
	--vela-t5: 26px;
	/* estados compartidos: tinte · texto · sólido · texto sobre el sólido */
	--vela-ok-tinte: #ECFDF5;     --vela-ok-texto: #065F46;     --vela-ok: #047857;     --vela-ok-sobre: #FFFFFF;
	--vela-aviso-tinte: #FFF1E8;  --vela-aviso-texto: #9A3412;  --vela-aviso: #FF7426;  --vela-aviso-sobre: #111827;
	--vela-alerta-tinte: #FEF2F2; --vela-alerta-texto: #991B1B; --vela-alerta: #B91C1C; --vela-alerta-sobre: #FFFFFF;
	--vela-info-tinte: #EEF2FF;   --vela-info-texto: #3730A3;   --vela-info: #4338CA;   --vela-info-sobre: #FFFFFF;
	--vela-sombra-1: 0 1px 2px rgba(16, 24, 40, .06);
	--vela-sombra-2: 0 12px 28px -12px rgba(16, 24, 40, .22);
	max-width: 1120px;
	margin: 0 auto;
	padding: 8px 16px 48px;
	color: var(--vela-tinta);
	font-size: var(--vela-t3);
	line-height: 1.55;
}

/* ── cabecera ─────────────────────────────────────────────── */
.vela-cabecera {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
	padding: 22px 24px;
	margin-bottom: 24px;
	background: #fff;
	border: 1px solid var(--vela-borde);
	border-radius: var(--vela-radio);
	box-shadow: var(--vela-sombra-1), var(--vela-sombra-2);
	border-top: 4px solid var(--vela-color);
}
.vela-marca { display: flex; align-items: center; gap: 16px; }
.vela-marca img.vela-logo {
	max-height: 64px;
	width: auto;
	border-radius: 10px;
	display: block;
}
.vela-etiqueta-marca {
	display: block;
	font-size: var(--vela-t1);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vela-gris);
}
.vela-marca h1 { margin: 2px 0 0; font-size: var(--vela-t5); line-height: 1.15; }
.vela-cuenta { text-align: right; }
.vela-contador {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--vela-color) 12%, #fff);
	color: var(--vela-color);
	font-weight: 600;
}
.vela-contador strong { font-size: var(--vela-t4); }
.vela-contador-cero { background: var(--vela-ok-tinte); color: var(--vela-ok-texto); }
.vela-salir {
	display: inline-block;
	margin-top: 10px;
	font-size: var(--vela-t1);
	color: var(--vela-gris);
}
.vela-salir:hover { color: var(--vela-color); }

/* ── avisos ───────────────────────────────────────────────── */
.vela-aviso {
	padding: 12px 16px;
	border-radius: 10px;
	margin-bottom: 18px;
	border-left: 4px solid;
}
.vela-aviso-ok { background: var(--vela-ok-tinte); border-color: var(--vela-ok); color: var(--vela-ok-texto); }
.vela-aviso-aviso { background: var(--vela-aviso-tinte); border-color: var(--vela-aviso); color: var(--vela-aviso-texto); }
.vela-aviso-error { background: var(--vela-alerta-tinte); border-color: var(--vela-alerta); color: var(--vela-alerta-texto); }

/* ── filtros ──────────────────────────────────────────────── */
.vela-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.vela-filtro {
	border: 1px solid var(--vela-borde);
	background: #fff;
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	font: inherit;
	font-size: var(--vela-t2);
	color: var(--vela-gris);
	transition: all .15s ease;
}
.vela-filtro span { opacity: .7; margin-left: 4px; }
.vela-filtro:hover { border-color: var(--vela-color); color: var(--vela-color); }
.vela-filtro.activo {
	background: var(--vela-color);
	border-color: var(--vela-color);
	color: #fff;
}

/* ── parrilla de tarjetas ─────────────────────────────────── */
.vela-parrilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
	align-items: start;
}
.vela-tarjeta-pieza {
	background: #fff;
	border: 1px solid var(--vela-borde);
	border-radius: var(--vela-radio);
	overflow: hidden;
	box-shadow: var(--vela-sombra-1);
	transition: box-shadow .18s ease, transform .18s ease;
}
.vela-tarjeta-pieza:hover {
	box-shadow: var(--vela-sombra-1), var(--vela-sombra-2);
	transform: translateY(-2px);
}
.vela-tarjeta-pieza:target,
.vela-tarjeta-pieza.abierta {
	grid-column: 1 / -1;
}
.vela-tarjeta-pieza:target .vela-extracto { display: none; }
.vela-tarjeta-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 16px;
	background: color-mix(in srgb, var(--vela-estado) 10%, #fff);
	border-bottom: 1px solid var(--vela-borde);
}
.vela-chip {
	font-size: var(--vela-t1);
	font-weight: 600;
	color: var(--vela-estado-texto, #fff);   /* TANDA 1: sobre naranja va tinta oscura */
	background: var(--vela-estado);
	padding: 3px 10px;
	border-radius: 999px;
}
.vela-chip-formato { font-size: var(--vela-t1); color: var(--vela-gris); }
.vela-tarjeta-cuerpo { padding: 16px; }
.vela-fecha { margin: 0 0 6px; font-size: var(--vela-t1); color: var(--vela-gris); }
.vela-version {
	display: inline-block;
	margin-left: 6px;
	background: var(--vela-info-tinte);
	color: var(--vela-info-texto);
	border-radius: 6px;
	padding: 1px 6px;
	font-size: var(--vela-t1);
}
.vela-tarjeta-cuerpo h3 { margin: 0 0 10px; font-size: var(--vela-t4); line-height: 1.25; }
.vela-extracto { margin: 0 0 12px; color: #374151; }
.vela-ver-mas {
	display: inline-block;
	font-weight: 600;
	color: var(--vela-color);
	text-decoration: none;
}
.vela-ver-mas:hover { text-decoration: underline; }

/* ── detalle ──────────────────────────────────────────────── */
.vela-copy-completo {
	border: 1px solid var(--vela-borde);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 14px;
}
.vela-copy-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	background: var(--vela-fondo);
	border-bottom: 1px solid var(--vela-borde);
	font-size: var(--vela-t1);
}
.vela-copiar {
	border: 1px solid var(--vela-borde);
	background: #fff;
	border-radius: 8px;
	padding: 4px 10px;
	cursor: pointer;
	font: inherit;
	font-size: var(--vela-t1);
}
.vela-copiar:hover { border-color: var(--vela-color); color: var(--vela-color); }
.vela-copy-texto {
	margin: 0;
	padding: 14px;
	white-space: pre-wrap;
	word-break: break-word;
	font-family: inherit;
	font-size: var(--vela-t2);
	background: #fff;
	max-height: 420px;
	overflow: auto;
}
.vela-destinos { font-size: var(--vela-t2); color: #374151; }
.vela-historial { margin: 16px 0; font-size: var(--vela-t2); }
.vela-historial ul { list-style: none; margin: 8px 0 0; padding: 0; }
.vela-historial li {
	padding: 10px 0;
	border-top: 1px solid var(--vela-borde);
}
.vela-historial li p { margin: 6px 0 0; color: #374151; }
.vela-chip-mini {
	font-size: var(--vela-t1);
	background: var(--vela-info-tinte);
	color: var(--vela-info-texto);
	border-radius: 6px;
	padding: 2px 7px;
}
.vela-hist-fecha { color: var(--vela-gris); font-size: var(--vela-t1); margin-left: 6px; }

/* ── acciones ─────────────────────────────────────────────── */
.vela-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.vela-boton {
	display: inline-block;
	border: 0;
	border-radius: 10px;
	padding: 11px 20px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	background: var(--vela-color);
	color: #fff;
	text-decoration: none;
	box-shadow: var(--vela-sombra-1);
	transition: filter .15s ease, transform .15s ease;
}
.vela-boton:hover { filter: brightness(1.08); transform: translateY(-1px); }
.vela-boton-ok { background: var(--vela-ok); }
.vela-boton-cambios { background: var(--vela-acento-2); color: var(--vela-tinta); }
.vela-form-aprobar { margin: 0; }
.vela-form-cambios {
	margin-top: 14px;
	padding: 16px;
	background: var(--vela-fondo);
	border: 1px solid var(--vela-borde);
	border-radius: 12px;
}
.vela-form-cambios textarea {
	width: 100%;
	border: 1px solid var(--vela-borde);
	border-radius: 10px;
	padding: 10px 12px;
	font: inherit;
	margin: 8px 0 12px;
	box-sizing: border-box;
}
.vela-motivos { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--vela-t2); }
.vela-cancelar {
	background: none;
	border: 0;
	color: var(--vela-gris);
	cursor: pointer;
	font: inherit;
	margin-left: 8px;
	text-decoration: underline;
}
.vela-ya-aprobada { color: var(--vela-ok); font-weight: 600; }
.vela-vacio, .vela-aviso-caja {
	padding: 28px;
	text-align: center;
	background: #fff;
	border: 1px dashed var(--vela-borde);
	border-radius: var(--vela-radio);
	color: var(--vela-gris);
}

/* ── login ────────────────────────────────────────────────── */
.vela-login { max-width: 420px; margin: 40px auto; }
.vela-login h1 { margin-bottom: 6px; }
.vela-login-form { display: grid; gap: 14px; margin-top: 20px; }
.vela-login-form label { display: grid; gap: 6px; font-size: var(--vela-t2); font-weight: 600; }
.vela-login-form input {
	padding: 11px 12px;
	min-height: 44px;          /* TANDA 1: mínimo táctil cómodo (antes 41 px) */
	box-sizing: border-box;
	border: 1px solid var(--vela-borde);
	border-radius: 10px;
	font: inherit;
}
.vela-login-pie { margin-top: 16px; font-size: var(--vela-t2); }

@media (max-width: 620px) {
	.vela-cabecera { flex-direction: column; align-items: flex-start; }
	.vela-cuenta { text-align: left; }
	.vela-marca h1 { font-size: var(--vela-t4); }
	.vela-parrilla { grid-template-columns: 1fr; }
}

/* ── materiales del cliente (subida, estado y decisión) ────────────────
   Misma receta visual que el resto del portal: tarjetas con sombra en dos
   capas y elevación al pasar el ratón. */
.vela-materiales {
	margin-top: 36px;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--vela-borde);
	border-radius: var(--vela-radio);
	box-shadow: var(--vela-sombra-1), var(--vela-sombra-2);
}
.vela-materiales-cabecera h2 { margin: 0 0 8px; font-size: var(--vela-t4); }
.vela-materiales-cabecera p { margin: 0; color: #374151; max-width: 70ch; }
.vela-materiales-titulo { margin: 28px 0 12px; font-size: var(--vela-t3); }
.vela-materiales-vacio { margin: 18px 0 0; color: var(--vela-gris); }

/* espacio usado */
.vela-cuota { margin: 18px 0 20px; }
.vela-cuota-texto { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: var(--vela-t2); }
.vela-cuota-texto span { color: var(--vela-gris); }
.vela-cuota-barra {
	height: 8px;
	margin-top: 8px;
	background: var(--vela-fondo);
	border: 1px solid var(--vela-borde);
	border-radius: 999px;
	overflow: hidden;
}
.vela-cuota-barra > span {
	display: block;
	height: 100%;
	background: var(--vela-color);
	transition: width .25s ease;
}

/* zona de subida */
.vela-subir { margin: 0; }
.vela-soltar {
	display: grid;
	justify-items: center;
	gap: 6px;
	padding: 28px 20px;
	text-align: center;
	background: var(--vela-fondo);
	border: 2px dashed var(--vela-borde);
	border-radius: var(--vela-radio);
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
}
.vela-soltar:hover { border-color: var(--vela-color); background: #fff; }
.vela-soltar input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.vela-soltar-icono { font-size: var(--vela-t5); color: var(--vela-color); }
.vela-soltar-texto { font-weight: 600; }
.vela-soltar small { color: var(--vela-gris); }
.vela-soltando .vela-soltar { border-color: var(--vela-color); background: #fff; }
.vela-subir-campos { display: grid; gap: 14px; margin: 18px 0; }
.vela-campo { display: grid; gap: 6px; font-size: var(--vela-t2); font-weight: 600; }
.vela-campo select, .vela-campo textarea {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	font-weight: 400;
	color: var(--vela-tinta);
	background: #fff;
	border: 1px solid var(--vela-borde);
	border-radius: 10px;
}
.vela-subir-aviso { margin: 12px 0 0; font-size: var(--vela-t1); color: var(--vela-gris); }

/* progreso de subida */
.vela-progreso { margin-top: 18px; display: grid; gap: 14px; }
.vela-progreso-fila {
	padding: 12px 14px;
	background: var(--vela-fondo);
	border: 1px solid var(--vela-borde);
	border-radius: 10px;
}
.vela-progreso-datos { display: flex; justify-content: space-between; gap: 12px; font-size: var(--vela-t2); }
.vela-progreso-datos span { color: var(--vela-gris); }
.vela-progreso-nota { margin: 8px 0 0; font-size: var(--vela-t1); color: var(--vela-gris); }
.vela-progreso-nota.vela-error { color: var(--vela-alerta); }
.vela-progreso-resumen { margin: 0; font-weight: 600; }

/* lista de materiales */
.vela-lista-materiales { display: grid; gap: 18px; }
.vela-material {
	background: #fff;
	border: 1px solid var(--vela-borde);
	border-radius: var(--vela-radio);
	box-shadow: var(--vela-sombra-1), var(--vela-sombra-2);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.vela-material:hover { transform: translateY(-2px); }
.vela-material.es-editado { border-left: 4px solid var(--vela-acento-2); }
.vela-material-cabecera {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 16px;
	background: var(--vela-fondo);
	border-bottom: 1px solid var(--vela-borde);
	border-left: 4px solid var(--vela-estado, var(--vela-color));
}
.vela-material-cuerpo { padding: 16px; }
.vela-material-cuerpo h4 { margin: 0 0 6px; font-size: var(--vela-t3); line-height: 1.3; }
.vela-material-meta { margin: 0 0 12px; font-size: var(--vela-t1); color: var(--vela-gris); }
.vela-material-vista { margin: 0 0 12px; background: #0b1020; border-radius: 10px; overflow: hidden; }
.vela-material-vista video, .vela-material-vista img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: contain; }
.vela-material-vista audio { display: block; width: 100%; padding: 10px; }
.vela-material-notas {
	margin: 0 0 12px;
	padding: 10px 12px;
	font-size: var(--vela-t2);
	background: var(--vela-fondo);
	border-radius: 10px;
	white-space: pre-wrap;
}
.vela-material-enlaces { display: flex; gap: 16px; margin: 0 0 4px; font-size: var(--vela-t2); }
.vela-material-enlaces a { color: var(--vela-color); font-weight: 600; }
.vela-form-cambios-material {
	margin-top: 14px;
	padding: 14px;
	background: var(--vela-fondo);
	border: 1px solid var(--vela-borde);
	border-radius: 10px;
}
.vela-form-cambios-material textarea {
	width: 100%;
	margin: 8px 0 12px;
	padding: 10px 12px;
	font: inherit;
	border: 1px solid var(--vela-borde);
	border-radius: 10px;
}

@media (max-width: 620px) {
	.vela-materiales { padding: 18px 14px; }
	.vela-material-cuerpo { padding: 14px; }
}

/* ── menú de secciones (Subir material · Todas · Por aprobar · …) ─────
   Son enlaces de verdad (no botones con JavaScript): cada sección tiene su
   dirección, se puede recargar, compartir y funciona sin JS. */
.vela-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
	padding: 8px;
	background: #fff;
	border: 1px solid var(--vela-borde);
	border-radius: var(--vela-radio);
	box-shadow: var(--vela-sombra-1), var(--vela-sombra-2);
}
.vela-menu-enlace {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	font-size: var(--vela-t2);
	font-weight: 600;
	color: #374151;
	text-decoration: none;
	background: var(--vela-fondo);
	border: 1px solid transparent;
	border-radius: 999px;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.vela-menu-enlace:hover { border-color: var(--vela-color); color: var(--vela-color); }
.vela-menu-enlace.activo {
	color: #fff;
	background: var(--vela-color);
	border-color: var(--vela-color);
}
.vela-menu-enlace span {
	min-width: 22px;
	padding: 1px 7px;
	font-size: var(--vela-t1);
	text-align: center;
	background: rgba(17, 24, 39, .12);
	border-radius: 999px;
}
.vela-menu-enlace.activo span { background: rgba(255, 255, 255, .28); }

/* ── selector «Material original / Material trabajado» ────────────── */
.vela-versiones { margin-top: 14px; }
.vela-versiones-menu {
	display: inline-flex;
	gap: 4px;
	margin-bottom: 14px;
	padding: 4px;
	background: var(--vela-fondo);
	border: 1px solid var(--vela-borde);
	border-radius: 999px;
}
.vela-version-boton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	font: inherit;
	font-size: var(--vela-t2);
	font-weight: 600;
	color: #374151;
	background: transparent;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}
.vela-version-boton span { font-size: var(--vela-t1); font-weight: 400; color: var(--vela-gris); }
.vela-version-boton:hover { color: var(--vela-color); }
.vela-version-boton.activo { color: #fff; background: var(--vela-color); }
.vela-version-boton.activo span { color: rgba(255, 255, 255, .8); }
.vela-version { display: none; }
.vela-version.vela-version-activa { display: block; }
.vela-panel-material { padding-top: 4px; }
.vela-material-nota-version { margin: 0 0 12px; font-size: var(--vela-t1); color: var(--vela-gris); }
.vela-campo-ayuda { display: block; margin-top: 4px; font-weight: 400; font-size: var(--vela-t1); color: var(--vela-gris); }

@media (max-width: 620px) {
	.vela-menu { padding: 6px; gap: 6px; }
	.vela-menu-enlace { padding: 8px 12px; font-size: var(--vela-t1); }
	.vela-versiones-menu { width: 100%; }
	.vela-version-boton { flex: 1; justify-content: center; padding: 8px 10px; font-size: var(--vela-t1); }
}

/* ── arreglos del menú y de las tarjetas (pedido de Carla, 4-oct) ───── */

/* 1) Los botones del menú se veían como texto suelto: el fondo era casi blanco
   sobre una barra blanca y el borde, transparente. Ahora son botones de verdad:
   fondo blanco, borde visible y sombra. Se sube la especificidad por si el tema
   del sitio tiene sus propias reglas para los enlaces. */
.vela-portal nav.vela-menu a.vela-menu-enlace {
	background: #fff;
	border: 1px solid var(--vela-borde);
	box-shadow: var(--vela-sombra-1);
	color: #1f2937;
	text-decoration: none;
}
.vela-portal nav.vela-menu a.vela-menu-enlace:hover {
	background: #fff;
	border-color: var(--vela-color);
	color: var(--vela-color);
	box-shadow: var(--vela-sombra-2);
	transform: translateY(-1px);
}
.vela-portal nav.vela-menu a.vela-menu-enlace.activo,
.vela-portal nav.vela-menu a.vela-menu-enlace.activo:hover {
	background: var(--vela-color);
	border-color: var(--vela-color);
	color: #fff;
}

/* 2) Tarjetas del mismo tamaño y botones centrados debajo del vídeo.
   La tarjeta es una columna: el vídeo ocupa una caja de altura fija (así todas
   miden igual, tanto en vertical como en apaisado) y los botones se apoyan abajo,
   centrados. */
.vela-lista-materiales {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	align-items: stretch;
}
.vela-material { display: flex; flex-direction: column; height: 100%; }
.vela-material-cuerpo { display: flex; flex-direction: column; flex: 1 1 auto; }
.vela-versiones { display: flex; flex-direction: column; flex: 1 1 auto; }
.vela-version.vela-version-activa { display: flex; flex-direction: column; flex: 1 1 auto; }
.vela-panel-material { display: flex; flex-direction: column; flex: 1 1 auto; }
.vela-panel-material .vela-material-vista {
	height: 300px;
	background: #0b1020;
}
.vela-panel-material .vela-material-vista video,
.vela-panel-material .vela-material-vista img,
.vela-panel-material .vela-material-vista audio {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: contain;
}
.vela-panel-material .vela-material-vista audio { height: auto; padding: 12px; }
.vela-acciones {
	justify-content: center;
	margin-top: auto;          /* los botones se apoyan siempre abajo */
	padding-top: 14px;
}
.vela-acciones .vela-boton,
.vela-acciones form { margin: 0; }
.vela-boton-descargar { background: #334155; }
.vela-material-enlaces { justify-content: center; }

/* 3) Cerrar una tarjeta ya revisada (X en la esquina superior derecha). */
.vela-tarjeta-pieza { position: relative; }
.vela-cerrar-forma { margin: 0; position: absolute; top: 8px; right: 8px; }
.vela-cerrar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	font-size: var(--vela-t4);
	line-height: 1;
	color: #64748b;
	background: #fff;
	border: 1px solid var(--vela-borde);
	border-radius: 50%;
	box-shadow: var(--vela-sombra-1);
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.vela-cerrar:hover { color: var(--vela-alerta); border-color: var(--vela-alerta); transform: scale(1.08); }
.vela-cerradas-aviso {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: baseline;
	margin: 0 0 16px;
	padding: 10px 14px;
	font-size: var(--vela-t2);
	color: #374151;
	background: var(--vela-fondo);
	border: 1px solid var(--vela-borde);
	border-radius: 10px;
}
.vela-cerradas-aviso a { color: var(--vela-color); font-weight: 600; }

/* 4) Fecha y hora sugeridas, al subir material. */
.vela-campo-fila { display: flex; flex-wrap: wrap; gap: 14px; }
.vela-campo-fila .vela-campo { flex: 1 1 200px; }
.vela-campo input[type="date"],
.vela-campo input[type="time"] {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	font-weight: 400;
	color: var(--vela-tinta);
	background: #fff;
	border: 1px solid var(--vela-borde);
	border-radius: 10px;
}
.vela-campo-ayuda-sugerencia { margin-top: 6px; }

/* 5) Material dentro del detalle de una pieza (con su reproductor). */
.vela-detalle-materiales {
	margin: 16px 0;
	padding: 14px;
	background: var(--vela-fondo);
	border: 1px solid var(--vela-borde);
	border-radius: var(--vela-radio);
}
.vela-detalle-titulo { margin: 0 0 10px; font-size: var(--vela-t2); }
.vela-detalle-materiales .vela-panel-material + .vela-panel-material {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--vela-borde);
}

@media (max-width: 620px) {
	.vela-panel-material .vela-material-vista { height: 220px; }
	.vela-acciones { flex-direction: column; }
	.vela-acciones .vela-boton,
	.vela-acciones form,
	.vela-acciones form .vela-boton { width: 100%; }
	.vela-acciones .vela-boton { text-align: center; }
}

/* La fecha que sugiere el cliente, a la vista en su tarjeta. */
.vela-material-sugerencia {
	margin: 0 0 12px;
	padding: 8px 12px;
	font-size: var(--vela-t1);
	color: #1f2937;
	background: rgba(98, 84, 231, .07);
	border-left: 3px solid var(--vela-color);
	border-radius: 8px;
}


/* ── Ajustes pedidos por Carla (4-oct, segunda vuelta) ───────────────── */

/* Botones de acción: mismo tamaño y en mayúsculas. */
.vela-acciones .vela-boton {
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: var(--vela-t1);
	font-weight: 700;
	padding: 11px 18px;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
}
.vela-boton-ver { background: #0f766e; }

/* Reproductores proporcionados: caja de altura fija y el vídeo centrado,
   conservando SU proporción (vertical u horizontal), sin deformar ni dejar
   franjas enormes. Antes el vídeo estiraba el ancho completo. */
.vela-panel-material .vela-material-vista {
	height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: #0b1020;
	border-radius: 10px;
	overflow: hidden;
}
.vela-panel-material .vela-material-vista video,
.vela-panel-material .vela-material-vista img {
	display: block;
	width: auto;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 0;
}
.vela-panel-material .vela-material-vista audio {
	width: 100%;
	height: auto;
	padding: 12px;
}

/* La X cierra la ventana del detalle (no borra nada). */
.vela-tarjeta-pieza > .vela-tarjeta-cabecera { position: relative; }
.vela-tarjeta-pieza > .vela-tarjeta-cabecera .vela-cerrar {
	position: absolute;
	top: 8px;
	right: 8px;
	text-decoration: none;
}

/* «Ya la revisé · quitar de la lista»: dice lo que hace y pide confirmación. */
.vela-quitar-forma { margin: 14px 0 0; }
.vela-quitar {
	padding: 8px 14px;
	font: inherit;
	font-size: var(--vela-t1);
	color: #475569;
	background: #f1f5f9;
	border: 1px solid var(--vela-borde);
	border-radius: 999px;
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease;
}
.vela-quitar:hover { color: var(--vela-alerta); border-color: var(--vela-alerta); }

@media (max-width: 620px) {
	.vela-panel-material .vela-material-vista { height: 300px; }
	.vela-acciones .vela-boton { padding: 10px 14px; }
}

/* ── Botones de acción: mismo tamaño, texto centrado e igual alineación ──
   Se usa una rejilla de dos columnas: cada botón ocupa su celda completa, así los
   cuatro miden exactamente igual y el texto queda centrado en todos, aunque la
   etiqueta sea corta («VER») o larga («PEDIR CAMBIOS»). El formulario de «Aprobar»
   se comporta como una celda más para no romper la alineación. */
.vela-acciones {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	align-items: stretch;
	justify-content: center;
	margin-top: auto;
	padding-top: 14px;
}
.vela-acciones > form {
	display: flex;
	margin: 0;
}
.vela-acciones > form > .vela-boton {
	flex: 1 1 auto;
}
.vela-acciones .vela-boton,
.vela-acciones > form > .vela-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	height: 100%;
	padding: 10px 12px;
	text-align: center;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: var(--vela-t1);
	font-weight: 700;
	text-decoration: none;
	white-space: normal;
}

/* ── Pedir cancelación (proceso manual, no garantizado) ─────────────── */
.vela-boton-cancelar {
	background: var(--vela-acento-2);
	color: var(--vela-tinta);
}
.vela-cancelar-forma {
	margin-top: 14px;
	padding: 14px;
	background: var(--vela-aviso-tinte);
	border: 1px solid var(--vela-aviso);
	border-radius: 10px;
}
.vela-cancelar-motivo {
	display: grid;
	gap: 6px;
	font-size: var(--vela-t1);
	font-weight: 600;
	color: var(--vela-aviso-texto);
}
.vela-cancelar-motivo textarea {
	width: 100%;
	padding: 9px 11px;
	font: inherit;
	font-weight: 400;
	color: var(--vela-tinta);
	background: #fff;
	border: 1px solid var(--vela-borde);
	border-radius: 8px;
}
.vela-cancelar-forma .vela-boton-cancelar { margin-top: 10px; }
.vela-cancelar-nota {
	margin: 10px 0 0;
	font-size: var(--vela-t1);
	line-height: 1.45;
	color: var(--vela-aviso-texto);
}
.vela-cancelacion-pedida {
	margin: 12px 0 0;
	padding: 10px 12px;
	font-size: var(--vela-t1);
	color: var(--vela-aviso-texto);
	background: var(--vela-aviso-tinte);
	border-left: 3px solid var(--vela-aviso);
	border-radius: 8px;
}

/* «Solicitar cancelar» y su aviso, centrados (pedido de Carla, 4-oct).
   La etiqueta del motivo y su cuadro de texto siguen a la izquierda: centrar un
   textarea solo sirve para escribir peor. */
.vela-cancelar-forma { text-align: center; }
.vela-cancelar-forma .vela-cancelar-motivo { text-align: left; }
.vela-cancelar-forma .vela-boton-cancelar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 12px auto 0;
}
.vela-cancelar-nota {
	max-width: 52ch;
	margin: 10px auto 0;
	text-align: center;
}
/* Y en las tarjetas de pieza, el mismo centrado del botón y del aviso. */
.vela-tarjeta-pieza .vela-cancelar-forma .vela-boton-cancelar { margin: 12px auto 0; }
.vela-tarjeta-pieza .vela-cancelar-nota { text-align: center; margin-left: auto; margin-right: auto; }